800px in width blog

For those who build web

The Holy Grail layout with Flexbox

Alright, it’s time to put new features of CSS3 on practice. Do you remember how much of a headache it was to build a “holy grail” layout by using or ? The part when we needed to stick a footer to the bottom of a browser was a real challenge. But thanks God good guys from w3c decided to help us by introducing the flexbox layout model. I suggest to test it and try to build a holy grail layout using flexbox.

Read more

Customizing ordered list numbers with CSS pseudo-elements

Sad but truth not everything in HTML can be customized with standard CSS. Sometimes we have to use tricky ways to get closer to some elements. On of these elements is ordered list .

Let’s say that we need to change the appearance of numbers in ordered list. But there is no way we can do it directly. Of course we can just set and then put numbers in spans for each , but as for me this method is not very beautiful, since a good web developer doesn’t want to use extra HTML code when it’s possible to solve a problem with CSS.

Here is a better method:

Read more

Animated pure css dropdown menu

Hi all. Since I posted a 3 level deep pure css menu I’ve been playing with it around. I thought it would be cool to add some animation on it, since CSS3 with it’s “transitions” is able to do so. It took around 1 hour to create a new version of pure css menu, with little bit of animations.

I want to inform you in advance that this menu is not ideal. Depended on its content it should be changed to work properly. So if you decided to use it on your site, I would recommend you to test how it works with your particular content. Let’s say that it is Alpha 0.1 version of pure css animated 3 level deep menu.

Let’s check it out, here is how it looks and works:

Read more

3 level deep dropdown menu on pure CSS

There are many examples of dropdown menus written with JS which of course is a great solution. However, as for me, when we have an opportunity to avoid using extra JS code on our beautiful sites, we have to use this opportunity for several reasons:

  • extra JS could overload the DOM
  • JS could overload users RAM
  • JS affects overall perfomance

So if we could create a dropdown menu without help of JS why don’t we try it?

Read more