How to Make a CSS Sprite Powered Menu

Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results…

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

IE Background RGB Bug

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don’t support it will get a solid color version…

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

CSS3 box-shadow and Image Hover Effects

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari (and Google Chrome), using the proprietary -moz- and -webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers…

VN:F [1.9.22_1171]
Rating: -1 (from 9 votes)

The Mysterious Pseudo Class in CSS

Pseudo classes are those things with colons in them, you know, like :hover or :link. They let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce a ton of new pseudo classes, and they’re going to make our lives a lot easier if you take browser compatibility out of the equation. They help both aesthetics and usability, and can make things that were once hard easier than ever before…

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

CSS Transitions 101

Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.

A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.

This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.

What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.

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

The Demise of CSS: Why Sass and Languages Like it Will Triumph

Sass is essentially a programming language for designers. It is extremely limited when compared with other languages, but it does a magnificent job of translating the core concepts of a programming language in a way that makes sense for styling a document…

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

CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects…

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

How To Create Depth And Nice 3D Ribbons Only Using CSS3

Yes, it’s possible to create a simple and nice 3D layout playing with some CSS3 stuff, only using code and without the help of Photoshop. We want to make 3D elements without images. There are some properties of the CSS3 languages that can help us to accomplish this mission. We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds…

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