CSS tips and tricks #4-before and after pseudo elements tutorial

Today we will take a look at :before or ::before and :after or ::after pseudo elements or selectors you can use in your CSS stylesheet. The difference between single and double-colon syntax is that single-colon is from CSS2.1 and double-colon is from CSS3 and not supported by IE8. Fortunately, all browsers support at least the… Continue reading CSS tips and tricks #4-before and after pseudo elements tutorial

Font Awesome tutorial

If you read some of tutorials posted on the blog, you probably hear me talking about font awesome. This font, or rather CSS stylesheet, is used to generate icons on selected elements. If you want to use this CSS font, go on Font Awesome website. For online version hosted on CDN go to “Get Started”… Continue reading Font Awesome tutorial

How to create responsive typography

Creating responsive typography is a hard thing to do and not many web designers rather don’t talk about it at all. In order to provide the best experience for your users as possible, you better not avoid this subject. Let’s divide it into smaller parts and bring some more clarity into it.

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

Buttons – When states are gone

It is more and more often when I visit some website and no matter how great or bad they look, one thing catches my attention almost immediately. States for buttons and links. Some of those websites does not use any styles or whatever to help user differentiate between default, hover and active state. If you… Continue reading Buttons – When states are gone