It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

I saw this little animation for an application on iPhone where when you pressed delete the thing you were deleting was literally shred up by a shredder. I thought this was a fantastic idea and started working to see if I could do this effect with just CSS, and it’s possible! We’ll be using 3D Transforms, Animations and the notorious CSS clip property to do this effect.

When I started using the internet the entire experience was hardly user friendly. Websites consisted of just content with little in the way of designing how that information was displayed. Since then things have changed, and usability (the UI) and user experience (UX) have become a buzzwords that is a must on almost any project you start. In modern web…

Today we’re going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We’re effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable. Background This technique effectively allows ‘selective’ loading of…

When it comes to mobile devices it can be quite difficult to come up with a menu that works well in most circumstances. In this tutorial we’ll be tackling this issue and how to create a fully functional mobile menu with some jQuery and smart CSS.

In today’s multimedia web it’s becoming an ever increasing part of web design to include videos. Customizing the video player is one of the first things web designers think about when implementing these elements, as often the default player does not match the website, or merely for consistency across browsers and devices. In this tutorial we’re going to be going…

Using previously existing CSS techniques as well as new CSS3 ones, we’re going to create a pretty cool CSS only image slider with arrows and 3D transforms. To do this we’re going to use a few CSS tricks which will allow you to accomplish this. Setting up the HTML I’m sure very few people have trouble understand the core tenets…

In part 1 of this guide we covered all the basics from implementation structure to more advanced things such use tags. In this part we’re going to expand upon what we already know, as well as look at some of the more interesting features that SVG has. This article is part of a series! If you want to stay up…

It’s a brand new year and with that comes hope for better web standards. Just last November a new specification was published: The CSS Mask Specification. This is an official specification on something that webkit browsers could do for a long time (mask images), which means it’s going to be implemented in other browsers now too. What else will CSS…

SVG (Scalable Vector Graphics) is a very useful tool for drawing shapes and figures with simple code. It is probably one of the most useful tools that web designers are hesitant to use, although once you understand it, you’ll wonder how you lived without it! In this series we’ll be going through the basics of SVG, including how to use…