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

CSS tips and tricks #2-Custom form design

In today’s episode of of CSS tips and tricks we will focus on designing awesome web form. You may already worked and customized forms, however most of people do only basic styling of text inputs or text. I want to show some advanced tricks. If you think that you are not able to style radio… Continue reading CSS tips and tricks #2-Custom form design

How to bulletproof your CSS

Today we will discuss possible ways to make sure our CSS are bulletproof and our webpages works properly (how we want) on every browser out there. I want to talk about this subject because it is very important to for successfully follow progressive enhancement philosophy and to avoid ignoring some users because of software they… Continue reading How to bulletproof your CSS

Full-screen stacked navigation tutorial

For today, we will create full-screen stacked navigation with beautiful resizing width effect on hover. Our goal is to create navigation which will take approximately 25% of the page’s width and 100% of its height. If you read previous tutorial on “Full-screen page with centered navigation”, you know what am I talking about. Navigation will… Continue reading Full-screen stacked navigation tutorial

Full-screen page with centered navigation tutorial

Some websites use this very nice feature of being stretched to full-screen no matter if they contain any content. It often comes side-by-side with full-screen photo on the background, some times also using a blur effect. However, our goal for today will be creating this full-screen page with photo on background and centered navigation. This… Continue reading Full-screen page with centered navigation tutorial

A Complete Guide to CSS Selectors Pt.2

Welcome into the second part of our Complete guide to CSS selectors. In first part we explored the basic ones and ended up with attribute selectors. Today we will continue with pseudo-classes and pseudo-elements. Those of you who are not that grounded in selectors should look at Pt1 first. However, if you are ready, we can… Continue reading A Complete Guide to CSS Selectors Pt.2