The Essential Guide to @font-face

Jun 8 2010 by Joshua Johnson | 98 Comments

The Essential Guide to @font-face

Fonts on the Web

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.

There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.

Further, even the most popular browsers support each of these technologies in widely varying degrees.

continue reading »

Semantic CSS3 Lightboxes

May 26 2010 by Alexander Dawson | 45 Comments

Semantic CSS Lightboxes

The rise of jQuery, MooTools, and JavaScript frameworks has given many web designers a new lease on life, adding more unique functionality into their sites.

Most notably among the various cool and interesting features you can find being injected into a design is the humble lightbox (modal window).

continue reading »

Examples of CSS3 in the Wild

May 20 2010 by Blue Derkin | 31 Comments

Examples of CSS3 in the Wild

Seeing CSS3 on actual functioning websites is a lot like spotting a Himalayan Snow Leopard or a Giant Panda. Because roughly 53 percent of browsers in use don’t support CSS3 (ahem, IE, ahem), most web designers just don’t use it on a regular basis. At least they don’t use it on sites they design for work. As such, most people don’t see it regularly, and if they do, it’s just a fleeting glimpse.

continue reading »

Snazzy Hover Effects Using CSS

Apr 15 2010 by Ryan Seddon | 65 Comments

Snazzy Hover Effects Using CSS

With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has.

With very good browser support, we can do lots of cool things that we know will work in all major browsers.

In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties.

Here is a live demonstration of the effect we will be creating.

continue reading »

How to Create Inset Typography with CSS3

Mar 21 2010 by Andrew Roberts | 45 Comments

Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: "Jacob already wrote a Photoshop tutorial on how to do that."

That is correct, but this time we are going to do it using only CSS.

continue reading »

Basic CSS3 Techniques That You Should Know

Mar 16 2010 by Joel Reyes | 58 Comments

After 13 years of being a vital part of web designs, Cascading Style Sheets (CSS) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.

Basic Techniques That You Need to Know About CSS3

continue reading »

CSS3 Techniques You Should Know

Feb 5 2010 by Andrew Roberts | 102 Comments

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

CSS Techniques You Should KNow

continue reading »