The Square Grid – A simple CSS framework for designers and developers

A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites…

VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

CSS3 Animated Bubble Buttons

This week we are creating a useful set of animated buttons with the power of CSS3’s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Hardboiled CSS3 Media Queries

Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now…

VN:F [1.9.22_1171]
Rating: +3 (from 5 votes)

Fun With CSS Text-Shadow

I used 100 text-shadows to make the graphic below happen. Sure, it’s excessive, ridiculous and just plain silly. But why, at times, can’t the web be all of those things? I’m all for sensible, well-reasoned CSS, but let’s keep things in perspective. We’re not surgeons. We can experiment without causing anyone bodily injury…

VN:F [1.9.22_1171]
Rating: +7 (from 7 votes)

An Almost Complete Guide to CSS3 Multi-column Layouts

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case. First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online and without the need for JavaScript…

VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)

Creating Shadows Around Polygons in CSS

Almost every polygon can be reduced to a combination of simpler shapes — a reduction that’s the essence of how we make complex shapes with HTML and CSS in the first place. So what we have to do is apply the shadow to both those boxes, and then cut off the overlap with clip…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)