Keyword

TOPIC:

Webdesign and coding 4 years 11 months ago #54776

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Looks like they flipped that switch in Chrome 73, so that's March 12 of 2019. Couldn't have been dysfunctional for much more than two weeks then, which is somewhat of a relief (it broke the plugin I wrote and scrolling had become horribly jumpy on my own pages).

I don't think TB has glitches anywhere now, it only affects mousewheel and touchstart events at the top levels of the page's markup.

So silly to do that, none of the frameworks (like jQuery) are able to handle it. What were they thinking.

caniuse.com/#fe...t-listener

Please Log in to join the conversation.

Webdesign and coding 4 years 10 months ago #55348

Web designing means planning, creation, and updating of websites. Website design also involves information architecture, website structure, user interface, navigation ergonomics, website layout, colors, contrasts, fonts and imagery (photography) as well as icons design.

If you want to learn web designing then you should have knowledge about basic languages that are under below:

1. Html [easy to start and easy to understand Html5 is newest]

2. Css [It's all about designing the contents in a web page, CSS3 is the newest]

3. JavaScript

4. JQuery

5. PHP

6. Photoshop

your website Or Your Web Design has to be Responsive, if your web design is responsive then it will support all the devices like mobile, tv, laptop many more devices. Check more information - clockwise.software/blog/

Please Log in to join the conversation.

Last edit: by stellMell.

Webdesign and coding 3 years 5 months ago #62107

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Shameless plug there. :)

Anyway, is there a more horrible piece of software than Inkscape? Seems like everything is counterintuitive or overly complicated. Searching for answers makes one wade through a pile of irrelevant topics as well.

:pinch:

Getting there though, SVGs are pretty awesome... you can create a path or polygon and give it a background image that is cut off on the outside by that particular shape. To top it all off, it is also possible now (regarding browser support) to neatly wrap text around said shape. Noice.

I was quite active on the css-tricks forum but they shut that down. :(

Their site (beyond that forum) has some classy programmers though, the layout and nifty coding they use are always impecable and quite inspiring.

Please Log in to join the conversation.

Webdesign and coding 3 years 5 months ago #62108

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Guess this shape. :silly:

<polygon points="50,0 62,38 100,38 68,62 84,100 50,77 16,100 32,62 0,38 38,38"/>

Please Log in to join the conversation.

Webdesign and coding 3 years 5 months ago #62163

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Warning: Spoiler!


The reason I like to code stuff from scratch is that sometimes it can have the same kind of satisfaction as if you were building a neat custom car (at low cost).

I decided to replace a simple image slider using fade in and out with a proper carousel. The result is quite awesome, if I say so myself. :side:

The images form a hexagonal box in three dimensional space (the pictures being the sides of that) which rotates around its axis 60 degrees at a time, with perspective added as if one is looking from a bit of a distance and above. In modern browsers the image that gets centered has its appearance animated from grayscale and low brightness into the original colors. How excellent are CSS filters and transitions... even works on IE apart from the filter animation.

Can never hurt to use a bit of geometry again either (you have to figure out how to calculate the rotation center and what not).

The six slots are potentially vacant by the way, so if anyone has a picture of outstanding quality that they want shown in that prime spot then let me know. It will be accompanied by mentioning the credit besides it of course.

Link below in the signature if you want to have a live look.

Edit - that last sentence was in small font which does not to appear to be working.

Edit to the edit - I gave the box a top and also attempted to make the reversed images visible but that did not add much in my idea.

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 3 years 5 months ago #62165

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
My Inkscape adventures turned out alright too, this shape is something I randomly drew - then used the path from that SVG file for cutting the background as described earlier:



Fun detail - it flips around to show another little image if you hover the section I used it in...

The light shadow around it that follows the shape is another example of using CSS filters (gotta love them).
Attachments:
The following user(s) Liked this: stingray-63

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 3 years 5 months ago #62181

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Exploring some of the newest CSS features that I haven't used anywhere yet... one of which is background-blend. I didn't really get what the fuzz was about but now I'm starting to understand. You can make some pretty neat designs that were formerly only possible with images. Below is not originally an image, it is only CSS - four background gradients at different positions that this new feature allows you to merge together.



B)

#blended {
background: url(/some/fallback.png);
}

@supports (background-blend-mode: screen) {

#blended {
background:
 radial-gradient(circle at left, transparent 80%, #6d0000 105%),
 radial-gradient(circle at 20% 130%, blue, transparent 20%),
 radial-gradient(circle at right, transparent 80%, blue 105%),
 radial-gradient(circle at 80% 130%, #6d0000, transparent 20%),
 #171717;
background-blend-mode: screen;
}
}

Also optimised the carousel a bit, it now pauses when you scroll or when the tab is inactive (and I made it look a bit better on IE, if anyone even uses that anymore).

:cheer:
Attachments:
The following user(s) Liked this: stingray-63

Please Log in to join the conversation.

Last edit: by Edou. Reason: One million typos

Webdesign and coding 3 years 5 months ago #62182

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
Lol, I'm clearly still not understanding because it doesn't even matter in this case if you use background-blend. :whistle:

That's because the colours don't overlap (okay, I guess I get it a little) otherwise the effect is pretty cool. In this case it could be used to blend with an actual image though.

Edit (instead of posting again) - this appears to be the year where a few browsers have grown up. Wrapping text around shapes is now supported by Edge and Android...

Browser support

One more thing to experiment with next is text gradients. Can make some cool layouts with that.

Please Log in to join the conversation.

Last edit: by Edou.

Webdesign and coding 3 years 5 months ago #62183

This is totally alien language to me, but carry on ;)
The following user(s) Liked this: Edou, Al

Please Log in to join the conversation.

Webdesign and coding 3 years 5 months ago #62190

  • Edou
  • Edou's Avatar Topic Author
  • Offline
  • Hopping Mad
  • Hopping Mad
  • Posts: 6135
  • Likes received: 483
:silly:

When I started coding gradients weren't very universally applicable yet so I mostly used images for that kind of design. But they're definitely my favourite thing now - I'm trying to replace all images with gradients where possible... the old stuff will be a fallback.

There's a new one around - the conic gradient. It has little browser support for now but I'm gonna have a go at trying to replace the image centered on my site. I'm thinking that should be doable with CSS alone too.



Lol, Edge is ahead of Firefox now with that. Who would've thought.

Some examples

Edit - pretty great, I can reproduce it almost exactly. That image looked horrible as jpg so I used a png, which is 42kb. A bit of CSS in the text editor is 50 times smaller and it also doesn't require a server request.

B)

Codepen may not be visible

div {
  width: 500px;
  height: 400px;
  position: relative;
  margin: auto;
}

div, div:before {
  background:
  repeating-conic-gradient(
   at 50% -20%,
   #141414 0 1%,
   #383838 1.05% 2%,
   #141414 2.05% 3%,
   #383838 3.05% 4%,
   #141414 4.05% 5%,
   #383838 5.05% 6%,
   #141414 6.05% 7%,
   #383838 7.05% 8%,
   #141414 8.05% 9%,
   #383838 9.05% 10%
  );
}

div:before, div:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
}

div:before {
  left: 0;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  transform: rotateY(180deg);
}

div:after {
  background: radial-gradient(at 50% -50%, transparent, black 140%);
}

The code could be even less if Chrome rendered the lines better. So I'm forced to define more than two angles (and repeat them). Not a big deal though.

Edit - here's a screenshot from Codepen with the original image on the left and the same thing created with a few lines of CSS on the right.

Attachments:

Please Log in to join the conversation.

Last edit: by Edou. Reason: Much easier with percentages
Moderators: caprinutstingray-63AndyAus
Time to create page: 0.163 seconds
Cookies are required to make this site work. If you continue to use this site you permit us to use cookies.