Drawing with CSS is a great way of learning CSS properties, possibilities and limits. And it’s a ton of fun too. Let’s create a very simple drawing today – a silly bee. HTML The HTML is very basic and contains only one element with a class, that we will use as a hook: <div class=”bee”></div> […]
One of the CSS things, that keep surprising me even though I have done them many times before is how flexbox affects text alignment. It’s like “Why doesn’t my text-align: center work? Is this a flexbox container thing again?”. Let’s have a look. Text alignment with display: block If you have a heading (h1, h2, […]
Note: this article is mostly about fixing some problems with Internet Explorer, but the technique may be useful in other cases too. The other day I had worked on a website with nice big hero image above the content. The image should have taken the whole width on mobile and stay full-width until it reached […]
Creating text decorations with pseudoelements is not new, but it definitely is a nice technique, that is worth knowing. Let’s have a look at a simple example. The result The result we want to achieve looks like this: It is a centered text with horizontal lines to the left and right. The lines are centered […]
Once I got a task of upgrading an old website and making it responsive. Sounds common enough. Decision was made to migrate data to new CMS but keep the old layout, because the client liked it. And he liked it exactly the way it was – every single pixel of it. So the question is: […]
Whenever I open a website and can barely read the text I often think about the WCAG contrast criterion. It sounds pretty simple: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text-Large-scale text and images of large-scale text have a contrast […]
Once you get to know what art direction is, there is no way back. It’s like learning what kerning is. You cannot unsee it. And the most surprising thing about art direction is, that people can understand it without understanding it – their eyes will follow the path you have designed but will have no […]
I like background patterns. They are rather unusual on the web and if I see one in the wild I always smile. If you want to see some examples visit CSS3 Patterns Gallery. All of those patterns are created using linear and radial gradients. When I first started creating some on my own, I found […]
You know what custom selects, dropdown menus and tooltips have in common? They all spawn elements, that may be overlapped by other elements if z-index management is done wrong. Why? Let’s have a look. z-index property There are CSS properties that are beginner friendly – like color or font-size. You can apply them to any […]
Showing and hiding parts of DOM is one of those things, that you do with javascript on everyday basis. It is so basic, that most javascript frameworks have it built in from the very beginning. Toggling visibility usually means setting display: none to hide the element and display: block to show it again. Sometimes it […]