Articles Archive

Create a Fun Animated Navigation Menu With Pure CSS

Create a Fun Animated Navigation Menu With Pure CSS

In recent years jQuery has become the easiest and best supported way to implement simple animations online. JavaScript is exceptionally good at what it does and this article is in no way an argument against it.

However, CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. Today we’ll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions.

August 26th, 2010 Posted in CSS
715 Awesomely Simple and Free CSS Layouts

715 Awesomely Simple and Free CSS Layouts

screenshot

Frustrated with the quality of free CSS templates online but aren’t quite to the level of building your own? Tired of spending hours trying to customize lame pre-fab designs?

Today we bring you over seven hundred freely downloadable CSS templates that focus on providing you with only a basic layout to build upon. Using these cross-browser layouts you can avoid endless CSS positioning woes and focus on what you’re good at: design.

August 24th, 2010 Posted in CSS
Web Design Critique #13: Annual Design Awards

Web Design Critique #13: Annual Design Awards

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well as well as those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Annual Design Awards.

August 21st, 2010 Posted in Critique
A Practical Guide to Designing With Faces

A Practical Guide to Designing With Faces

screenshot

One of the principal functions of professional design, if not the central function, is to draw the attention of the viewer. Everyone has a message that they want to get across, but getting people to actually stop and take that message in is no easy task.

Designers are therefore tasked with attempting to use every human’s natural attraction to aesthetic beauty in such a way that it becomes possible to capture the attention of an audience almost without them even realizing it.

With this goal in mind, faces are a magic design element.

August 20th, 2010 Posted in Graphics
Using eCSStender to Clean Up Your CSS

Using eCSStender to Clean Up Your CSS

Recently we looked at how to use LESS.js to enhance your CSS and save you tons of development time. Today we’ll look at eCSStender, another JavaScript tool that enables you to implement complicated CSS3 properties with very little code.

eCSStender can be a bit confusing to figure out on your own but once you figure it all out it will literally take you less than a minute to install and use. Below I’ll walk you through building a basic example that uses a number of eCSStender extensions.

August 19th, 2010 Posted in CSS
10 Awesome Stock CSS Files From CodeCanyon

10 Awesome Stock CSS Files From CodeCanyon

screenshot

As both a customer and a contributor, I’m a big fan of the Envato Marketplaces. Each of these sites has done an awesome job at targeting and providing for a niche of creatives while creating a decent income opportunity for authors.

One of the newest sites in this network is CodeCanyon, which sells “scripts and components for a variety of languages and frameworks.” Most of these files only cost a few bucks and they can save you some serious coding time. Today we’ll dive into the infant industry of stock CSS components by looking at ten of the coolest items for sale.

August 18th, 2010 Posted in CSS
Web Design Critique #12

Web Design Critique #12

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well as well as those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is the online gaming hub Casino Lemonade.

August 14th, 2010 Posted in Critique
Designing in the Dark: 10 Dark Sites and Their Color Schemes

Designing in the Dark: 10 Dark Sites and Their Color Schemes

screenshot

What goes well with a black website? Today we’ll find out but taking a look at some excellent examples of dark web design along with their primary color palettes.

Each website will have a screenshot along with a brief description, a visual representation of the color scheme, and a link to download the Photoshop color swatches from Pictaculous.

August 13th, 2010 Posted in Inspiration
Using Less.js to Simplify Your CSS3

Using Less.js to Simplify Your CSS3

screenshot

LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules. What this means is that you can write leaner code very quickly. And with the recent rise of complex CSS3 properties, we have a few glaring examples of code that could definitely stand to be simplified a bit.

Today we’ll take a look at how to use the newest JavaScript implementation of LESS to simplify lengthy CSS3 markup. One of the key features we’ll be looking at that I haven’t seen discussed elsewhere is how to deal with multiple variables in mixins. It’s fairly simple but can be confusing if you’ve never tried it.

August 12th, 2010 Posted in CSS
Dribbble Shots of the Week #2

Dribbble Shots of the Week #2

Because we have come to love bite-sized inspiration, each week we feature ten Dribbble shots that we found to be particularly excellent.

We have no real guidelines for who makes it and who doesn’t, just pure off the cuff judgement based on aesthetic quality. We’ll also pick a VIP that represents our top pick of the week.

August 11th, 2010 Posted in Shots of the Week
Subscribe
Membership