X

Scroll Activated Fixed Header Animations

July 3, 2013 at 3:45 pm By

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.

CSS Delete Button: Making a Shredding Machine with CSS3

June 26, 2013 at 4:16 pm By

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.

Fantastic UX Decisions: Making a Good User Experience

June 20, 2013 at 5:05 pm By

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…

Controlling History: the HTML5 History API and ‘Selective’ Loading

June 17, 2013 at 5:13 pm By

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…

Designing ‘Swipe to Open’ Mobile Menus and Best Practices

May 30, 2013 at 2:35 pm By

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.

Making Custom CSS3 Video Players With HTML5 and Javascript

March 5, 2013 at 3:33 pm By

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…

Experimental CSS3 Only Image Slider with 3D Transforms

February 19, 2013 at 4:21 pm By

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…

What is SVG? [Guide to SVG Part 2]

February 12, 2013 at 4:54 pm By

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…

The Future of CSS3: Looking at Future Techniques Today

January 29, 2013 at 6:00 pm By

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…

What is SVG? [Guide to SVG Part 1]

January 22, 2013 at 4:47 pm By

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…