CSS tips and tricks #6-CSS accordion menu

Another post from CSS tips and tricks just arrived! Challenge for today is to create accordion menu only with HTML and CSS. No JavaScript or jQuery or any other library are allowed. To make it a bit more classy, we will also add a fading effect to browsing between individual sections. Let’s dive into code…

Are reset CSS stylesheets useful

When the discussion about reset CSS stylesheets begin people quickly split into few groups. First group propose that reset stylesheets should be avoided for whatever reason. Second group, on the other hand, will recommend you to use it and even give you some links where to get it. The last group will be somewhere in-between.… Continue reading Are reset CSS stylesheets useful

What to put inside head of html

Short time ago my great friend, Brigitte, asked me what code do I include into head section of html file when I work on some project. This is a common question, not just from SEO point of view. Today this question will finally be answered through this post to help and give more clarity not… Continue reading What to put inside head of html

3 ways to deal with responsive images

Responsive images is one of the pillars of responsive web design philosophy. For a long time web designers have to use various creative ways to solve the problem of serving different devices with different image files. However, this should not be necessary now thanks to new picture element which was released by W3C.

Custom HTML dropdown with jQuery

Why to use pre-created or pre-packed features if you can create and build your own? Default dropdown inputs does not look good at all and options to style through CSS are quite limited. If you have few minutes and are not afraid of jQuery, you can create your own dropdown according to your ideas. Let’s… Continue reading Custom HTML dropdown with jQuery

CSS tips and tricks #3-Animated 404 page

Well designed website should also have custom designed 404 page for case that something is broken. So, today we will create notepad style 404 page with small animated bar. Font used for text is Lobster, it is free to use and you can find it online on Google fonts. Patter used for background is from… Continue reading CSS tips and tricks #3-Animated 404 page