Ti Agile: CSS

Aucun message portant le libellé CSS. Afficher tous les messages

6 mai 2010

9 Web CSS Tools You Must Know

Long time no see! :)

Voici un lien intéressant vers des outils CSS en ligne

http://www.queness.com/post/3220/9-web-css-tools-you-must-know

7 janvier 2010

Sexy bookmark like effect using pure css

http://www.webdeveloperjuice.com/2009/12/15/sexy-bookmark-like-effect-using-pure-css/

16 décembre 2009

Ce que nous réserve CSS3 en 2010

L'écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà plusieurs modules implémentés dans les navigateurs récents. L'année 2010 verra certainement nos habitudes changées par les nouvelles possibilités offertes en CSS 3. D'ores et déjà de nombreuses utilisations concrètes voient le jour.

Vous pourrez constater l'état d'avancement des différents modules CSS sur la page récapitulative Cascading Style Sheets : Current Work.

Des coins arrondis

Du Web 2.0 avec style

La propriété border-radius arrondit les angles de n'importe quel élément HTML, sans avoir besoin d'images ni de JavaScript.

Using Rounded Corners with CSS3 (EN)

Créer des coins arrondis en CSS et sans images

CSS: border-radius and -moz-border-radius (EN)

La gestion de l'opacité

La transparence enfin maîtrisée !

L'interprétation des images transparentes en PNG (24 bits) est une première délivrance pour les web-designers qui pourront mettre en œuvre plus de créativité. La nouvelle notation des couleurs et de la gestion intégrée de leur transparence (RGBa) va être une seconde avancée significative.

CSS3 : la transparence de couleur avec RGBa

CSS3 opacity : transparency of an element in css (EN)

Les arrière plans multiples

Elle n'est pas (plus) belle la vie ?

Grâce aux nouvelles valeurs multiples utilisables dans la propriété CSS background, il sera désormais possible d'appliquer plusieurs images d'arrière-plan sur le même élément, sans devoir en imbriquer plusieurs.

Arrière-plans avec CSS 3 Backgrounds

Le multi colonage

De la P.A.O. sur le Web ?

Les propriétés column-width et column-gap vont générer une mise en page sous forme de colonnes multiples, où le texte va s'écouler automatiquement d'une colonne à la suivante.

CSS3 Multiple Columns (EN)

Multi-column layout (EN)

Les ombrages

Nul besoin d'un surcroît d'images

La propriété box-shadow crée un ombrage solide ou dégradé sur tous les éléments HTML.

CSS3 box-shadow property (EN)

Les ombrages en CSS3

Des effets sur le texte

Les CSS3 concurrencent les styles Photoshop ?

Les ombrages en CSS3

Text-shadow, Photoshop like effects using CSS (EN)

Des boutons esthétiques

Arrondis, dégradés, animés.

L'association de plusieurs propriétés CSS3 permet de concevoir des boutons de lien d'une esthétique irréprochable sans utiliser d'images.

Super Awesome Buttons with CSS3 and RGBA (EN)

Les polices exotiques

Les polices web-safe ne sont plus seules.

@font-face permet d'incorporer des polices externes et variées.

Using @font-face (EN)

21 Awesome @font-face Embeddable Typefaces (EN)

Les dégradés

Un peu de douceur dans ce monde uni.

De nouvelles propriétés gradient permettent de réaliser et gérer des arrière-plans de teintes dégradées.

Arrière-plans avec CSS3 Backgrounds

Des animations

E pur si muove !

Grâce aux dernières évolutions du langage et au module Transitions, il est désormais possible de réaliser des transitions basiques.

Transitions CSS3

Les sélecteurs

La fin de la Divite et de la Classite chronique ?

Les nouveaux sélecteurs CSS3 vont faciliter le nommage des éléments particuliers (le second de la liste, les lignes impaires d'un tableau, ...).

CSS 3 selectors explained (EN)

Conclusion

CSS3, couplé à HTML5 (ou pas), va permettre de réaliser des effets réservés jusque-là à JavaScript ou aux découpes d'images contraignantes (ombrage, survol, arrondis...). Si on ajoute que jQuery et les autres frameworks commencent à s'imposer dans de nombreuses applications web (diaporama, interface cliente riche...), l'année 2010 sera mouvementée ! Bien entendu, il est important de rappeler que certains navigateurs n'ont pas encore implémenté l'ensemble de ces fonctionnalités.

Pour aller plus loin (en anglais)

2 décembre 2009

CSS3 : la transparence de couleur avec RGBa

http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

30 octobre 2009

Créer des coins arrondis en CSS et sans images

Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même.

Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables, pour dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible.

C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants :

Avec ou sans images,
Avec ou sans JavaScript,
Avec ou sans ajout de markup (éléments dans le code HTML),
Fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu),
Compatible tous navigateurs ou non,
Plus ou moins accessibles.

Simple et approprié : border-radius

border-radius est une propriété CSS3, encore à l'état de brouillon mais tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.

Compatibilité et utilisation concrète
A l'heure où ce tutoriel est écrit, seuls les navigateurs basés sur Gecko (Mozilla Firefox) et sur Webkit (Safari, Chrome) reconnaissent la propriété border-radius. En pratique, la propriété doit être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces navigateurs. border-radius devient donc -moz-border-radius et -webkit-border-radius.

Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner.

Exemple :


#cadre {
border-radius: 10px;
}

Voir le résultat avec votre navigateur

Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left).

Ainsi la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :


#cadre {
border-radius: 5px 10px 0 5px;
}

Note : l'écriture raccourcie de type -webkit-border-radius: 10px 10px 0 0; ne fonctionnant pas sur Chrome, il faudra écrire chaque propriété complètement, soit -webkit-border-top-left-radius: 10px; et -webkit-border-top-right-radius: 10px; pour obtenir un arrondi sur les angles du haut.

Il est tout à fait possible de réaliser des courbes non circulaires en précisant le degré d'arrondi horizontal et vertical.

Roundies : du JavaScript pour Internet Explorer

La propriété CSS3 border-radius n'est pas reconnue par Internet Explorer (jusqu'à sa version 8 incluse). Pour réaliser ce genre d'effets esthétiques sur ce navigateur, il va donc falloir ruser.

Il existe plusieurs techniques basées sur JavaScript pour permettre d'émuler automatiquement la création de coins arrondis, nous en listons quelques unes en fin de tutoriel. Chaque technique a ses avantages et inconvénients (poids, complexité, accessibilité) et c'est pourquoi nous avons fait le choix de nous intéresser à la mise en application de la plus légère d'entre-elles : Roundies.

Roundies, c'est quoi ?

Roundies est un petit JavaScript de 8 ko très simpliste qui se contente de réaliser ce qu'on lui demande, des angles arrondis sur IE sans image et sans ajouter de contenu inutile.
Nous n'allons l'appliquer qu'à Internet Explorer puisqu'il nous servira de béquille pour ce navigateur tant qu'il ne reconnaîtra pas border-radius.
Notez que Roundies ne fonctionnera pas sur les images d'arrière-plan et qu'il est malheureusement inopérant sur Opera.

Vous trouverez ce script roundies.js à l'adresse suivante sous deux formes : non-compressée (17 ko) et compressée (8 ko).

Appliquer Roundies

Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko) sur votre hébergement.

Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML.

Le code HTML suivant ne va s'appliquer qu'à Internet Explorer (versions égales ou plus anciennes que IE8) et il va récupérer et appliquer roundies.js que nous avons placé dans un répertoire nommé "script" :

<!--[if lte IE 8]>
<script type="text/javascript" src="script/roundies.js">
</script><![endif]-->

A présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction DD_roundies.addRule, soit l'ajoutant à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).

Voici les règles que nous avons mis en place pour notre page d'exemple :

DD_roundies.addRule('div.arrondi', '10px');
DD_roundies.addRule('h1', '10px');
DD_roundies.addRule('a', '8px');

La première règle indique que nos éléments HTML <div> de classe arrondi bénéficieront d'un arrondi de 10px; la seconde s'applique éléments de liste (<li>) et arrondit les coins supérieurs uniquement; la dernière ligne génère un arrondi autour des liens hypertextes (<a>). Il est également possible de cumuler les éléments sélectionnés au sein de la même règle.

Côté HTML, les éléments sont structurés ainsi (exemple pour le bloc <div>) :

<div class="arrondi">
<p>ici un bloc arrondi</p>
</div>

Visualisez notre page d'exemple avec votre navigateur

Exemples de résultats avec la combinaison border-radius + Roundies (sur IE, l'image d'arrière-plan sera remplacée par la couleur de fond alternative) :

Léger et simple à mettre en place, le script roundies.js permet la gestion des coins arrondis sur Internet Explorer. Elle représente une excellente alternative aux solutions lourdes basées sur des images mais reste très limitée et ne fonctionne pas sur tous les navigateurs. Elle ne fait qu'émuler la propriété CSS3 border-radius sur IE.

Il s'agit toutefois d'une technique qui peut être idéale en production : en pratique, vous commencerez par appliquer border-radius (avec ses préfixes) pour les navigateurs modernes, puis appliquerez la béquille Roundies pour IE. Au final, la technique sera fonctionnelle sur un large panel : IE, Firefox, Safari, Chrome, Camino, Konqueror, Safari Mobile, Fennec, etc. Seul Opera sera en reste.

Application : un menu à onglets

Mettons en pratique cette technique pour réaliser le menu suivant :

Notre structure xHTML sera très classique, sous forme de liste :


<ul id="menu">
<li><a href="*">onglet 1</a></li>
<li><a href="*">onglet 2</a></li>
<li><a href="*">onglet 3</a></li>
<li><a href="*">onglet 4</a></li>
<li><a href="*">onglet 5</a></li>
</ul>

Et notre mise en forme CSS va se résumer (outre les fioritures habituelles) à arrondir les angles supérieurs des liens hypertextes :


#menu {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline; /* affichage horizontal */
}
#menu li a {
padding: 5px 20px;
margin: 0;
background: #98B924;
color: #fff;
border: 1px solid #89a;
text-decoration: none;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;       
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */

}
#menu li a:hover, #menu li a:focus {
background: #b8da40;
color: #000;
}

A cet instant, le menu est parfaitement stylé sur l'ensemble des navigateurs modernes, mis à par Internet Explorer et Opera où les coins demeurent en angle droit.

Il ne suffit plus que d'appliquer Roundies.js, de l'appeler via un commentaire conditionnel pour IE et d'y ajouter l'instruction DD_roundies.addRule('#menu li a', '10px 10px 0 0'); pour que le script soit fonctionnel. C'est tout !

Voir le résultat sur votre navigateur

Ressources et variantes

Une (énorme) liste de toutes les techniques existantes sur SmileyCat : http://www.smileycat.com/miaow/archives/000044.php
jQuery Corner : 8 ko, nécessite jQuery, très complet, beaucoup d'effets
Before et After : pas de JavaScript, mais largeur fixée et non compatible avec IE<8
CurvyCorners : 188 ko, supporte de nombreux effets, dont anti-aliasing (anti-crénelage), bordures, dégradés et images d'arrière-plan.
Nifty Corners / Nifty Cube : 3 ko, ajout d'éléments HTML <b> autour de l'élément à arrondir.
RoundedCornr : générateur de coins arrondis (CSS et images)
http://www.css3.info/preview/rounded-border/
http://www.w3.org/TR/2005/WD-css3-background-20050216/#border-radius

8 octobre 2009

15 Time Saving CSS Tools You Should Be Aware Of

CSS is the essential component of modern web design. But writing the CSS code from scratch for each web design project is a tiring and time-consuming job. Here are 15 CSS tools ranging from layout generators, form generators to code compressors that will save you a lot of time writing the CSS code for your next web design.

1. CSS Typeset

CSS Typeset is a handy tool that allows to test different font-styles on a piece of text and provides with the CSS code for chosen font-style that you can copy paste into your stylesheet quickly.

2. TypeTester

TypeTester is similar to CSS Typeset but with this, you can compare three different font-styles simultaneously and choose the one you find suitable. It also lets you specify the base font-size to adjust the em values.

3. CSS Frame Generator

CSS Frame Generator generates an empty CSS frame for provided HTML elements. Just copy paste the XHTML content and it’ll create a CSS Frame and then you can add styles to the CSS frame which will save you a lot of time.

4. CSS Grid Builder

With CSS Grid Builder, you can quickly create a CSS-based, standards compliant web page layout. It uses the YUI Grids CSS framework which supports more than 1000 types of layouts.

5. YAML Builder

YAML Builder is another layout generation tool that uses YAML framework to create grid layouts.

6. Spiffy Corners

Spiffy Corners lets you create rounded corner flexible boxes without any images. With just few clicks you can add nice looking rounded corner box to your web page.

7. JotForm

JotForm makes creating HTML forms a breeze. With its Visual drag drop interface, you can quickly create HTML forms. Also there are pre-built templates like registration form, feedback form which you can use to set up your web forms in almost no time.

8. Kotatsu

Kotatsu lets you easily and quickly create HTML tables and attach CSS classes to rows, columns and cells of table.

9. CSS Sprite Generator

CSS Sprite Generator is a big time saver. Just upload a zip file containing all the images you want to convert into CSS sprite, it’ll not only create the sprite image but will also provide you with CSS styles which you can quickly use in your web page to utilize CSS sprites.

10. W3C CSS Validator

W3C CSS validator is perhaps the most widely used CSS validator. It is a great time saver in the sense as it points out various errors within your stylesheet so that you can create better and more accessible web pages.

11. Format CSS

With FormatCSS, you can upload your CSS code and select from the options available to achieve code formatting the way you want. For example you can convert a compact CSS code into readable form with proper line-breaks and indentation or vice-versa.

12. Dust-Me Selectors

Dust-Me Selectors is a firefox add-on that analyzes the opened web page’s HTML content and CSS code to find out those style definitions that are not used.

13. CSS Optimizer

CSS Optimizer is a tool for optimizing the file size of CSS files. It extracts every whitespace character out of CSS file to considerably reduce the file size.

14. CSS Redundancy Checker

CSS Redundancy Checker finds out redundant CSS styles that are no longer in use on your web pages so that you can remove them from the stylesheet to reduce CSS file size.

15. CSSTidy

CSSTidy is an open source CSS optimizer and parser that cleans up unnecessary white space within CSS file, modifies the color values to reduce the file size and optimizes margin, padding values and removes the last semi-colon from style definitions to reduce the file size.

How to distribute elements horizontally using CSS

In this post I want to reply to a frequently asked question that I receive from my readers about how to distribute horizontally a certain number of elements within a main container using CSS. This problem is not particularly complex and can be solved simply using the CSS selector:first-child.

Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post. The picture below illustrates an example of horizontal distribution:

This is the HTML code you can use to define the structure of your document:

In order to distribute horizontally the three elements contained into the wrapper we have to use some lines of CSS code. At first sight, a practical solution could be to define a class (.section), with the properties width andmargin-right set to a specific value, and apply it to each

element contained into the wrapper. The problem is the right margin of the last

element that exceeds the width of the wrapper:

This is a problem because web browsers render the page in this way:

The last

layer is moved below. The question is: How can you remove the external margin of the last element without using a different CSS class with the property margin-right sets to 0?

Solution

As I said at the beginning of this article, the simplest solution is to use the CSS selector :first-child and invert the position of the margin from right to left. :first-child allow you to get an element that is the first child of another element. In this way the selector allows you to remove the left margin easily.

The first step is to define the wrapper using the following CSS code:

#wrapper{
    width:320px;
    height:60px;
    background:#EFEFEF;
}

The following code define the class.section to apply to each element within the main wrapper.

.section{
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}

In this example I used fixed values for the properties width and margin-left but you can also use relative value (percentage). Now we have to remove the left margin adding the following code:

#wrapper div:first-child{margin-left:0px;}

Browsers interpret the previous line in this way: get the first

element contained into the element withID=wrapper and set the property margin-left to 0. And this is the result:

The only advice is the following: IE 6 doesn’t support the selector :first-child. You can use conditional comments to define a specific CSS file for IE6 and add a new class (for example .section-first) with the same properties of the class .section but the property margin-left sets to 0.

From http://woorkup.com/2009/10/07/how-to-distribute-elements-horizontally-using-css/

23 septembre 2009

20 Tutorials on CSS Graph and Charts

16 septembre 2009

5 Steps to Write Better Css

http://aceinfowayindia.com/blog/2009/09/5-steps-to-write-better-css/

8 septembre 2009

11 Classic CSS Techniques Made Simple With CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We should be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

CSS3? What’s that?!

I’m sure you’ve heard of CSS in general. CSS3 isn’t that much different, in terms of syntax; however, the power of CSS3 is much greater. As you’ll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!
Here’s what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

What We’ll Be Covering

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember – these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.

1. Rounded Corners

Probably my favorite on of this list, rounded corners provide a developer with so many options. You can create a rounded corner button in seconds. My favorite thing to do is set a gradient background to repeat along the x-axis and then apply rounded corners to make a very nice looking Web 2.0 button.
You can simulate rounded corners by using four extra divs or by using JavaScript. Though, a user doesn’t see these smooth corners if they have JavaScript disabled, I think that’s fine as long as the website still functions as it should. You can read up on this method if you would prefer to use pure CSS in making rounded corners.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>
<div class="box">
<!--CONTENT-->
</div>

The classical method uses jQuery along with a JavaScript plugin called Corners.

CSS3 Way

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.
View the demo.

2. Box Shadow

Box shadows provide you with a very powerful tool. 99% of the time when I’m desigining, I find myself using drop shadows for something. Once again, I’ll be using a jQuery plugin to take care of the classic way because honestly, trying to figure it out with just CSS is confusing. Why should I waste my time fiddling with negative margins when there’s already something written that does the job for me? As long as my design looks fine when people have JavaScript disabled, I’m perfectly content using a jQuery plugin.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
$('.box').dropShadow({
left: 5,
top: 5,
opacity: 1.0,
color: 'black'
});
});
</script>
<div class="box">
<!--CONTENT-->
</div>

I’m using the dropShadow plugin. Simple and what I wanted; though I would prefer to use just CSS

CSS3 Way

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

The values for the box shadow properties are: x-offset y-offset blur color. Much easier than importing two JavaScript files, and A LOT easier than messing around with background images and negative margins.
View the demo.

3. Text Shadow

If you’ve ever read a tutorial about how to make the letterpress effect in Photoshop, you’ll know that the drop shadow effect is used. It’s really simple to create letterpressed text, just follow this tutorial at Line25 by Chris Spooner.

Classic Way

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
<span class="font">The quick brown fox jumps over the lazy dog.</span>
<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Instead of using a jQuery plugin this time, I just used some simple CSS tricks to absolutely position the text behind the other copy of text. The only bad thing about not using CSS3 for this situation is that you will get two copies of the text if CSS is disabled.

CSS3 Way

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

If you’re planning on using text shadows that are blurred (the third “option” in the text-shadow property), I don’t know how you would accomplish that with pure CSS, and no images.
View the demo.

4. Fancy Font

We’ve dreamed about it for a long time now, but you can finally display “fancy fonts” on the web without relying on JavaScript. Of course this causes some issues with allowing paid fonts to be distributed over the internet. Anyhow, I present you with @font-face.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

I decided to use Cufón to replace the text. I’m not going to explain how to use it because Jeffrey has an awesome screencast already.

CSS3 Way

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

We create a font family with @font-face and then use it as a value for font-family. Michael Owens wrote an article here about a month ago which explains @font-face quite well.
View the demo.

5. Opacity

If you’ve visited the Envato website redesign lately, you might have noticed that there are a lot of transparent elements. Though this is achieved with transparent PNGs, you can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.

Classic Way

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
<!--CONTENT-->
</div>

CSS3 Way

<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

With CSS3, we just eliminated two properties that were specific to IE, isn’t that great?!
View the demo.

6. RGBA

Everyone knows what RGB stands for (red, green, blue), but what does the A stand for? It stands for alpha, which refers to the transparency.
Other than rounded corners, RGBA is my next most used CSS3 property. Sometimes I just want to add a few light white/black background to navigation links when a user hover overs them. It’s much easier than creating a new image for each color; however, with a little PHP it makes things a lot easier.

Classic Way

Seeing as how this isn’t a PHP article, I won’t be going over the PHP. Just save this file as rgba.php and when you need a certain RGBA color, make the background “color” as url(rgba.php?r=R&g=G&b=B&a=A).

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

Now just apply that to a div…

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>

CSS3 Way

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>

View the demo.

7. Background Size

The background size property is an amazing thing to have on your tool belt when you’re creating a liquid layout. An example of this could be when you have a background image for a container that is for the sidebar. The classic way of doing this would require tweaking to have the image repeat along the y-axis, but with CSS3 it’s like adding another background property.

Classic Way

<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 100;
}
.box .content {
position: absolute;
z-index: 200;
}
</style>
<div class="box">
<div class="content">
<!--CONTENT-->
</div>
<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>

CSS3 Way

<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>
<div class="box">
<!--CONTENT-->
</div>

Unfortunately, this property isn’t implemented into Firefox (V3.5.2) at the time of this writing.
View the demo.

8. Multiple Backgrounds

Ah, multiple backgrounds. Now this give developers a very powerful tool. I can think of so many things that require multiple divs just to have more than one background. The most common place I can see this being helpful is in a header section of the website, but that’s just the first thing I thought of.

Classic Way

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
.box2 {
width: 100%;
height: 100%;
background: url(images/text.png) center center no-repeat;
}
</style>
<div class="box">
<div class="box2">
<!--CONTENT-->
</div>
</div>

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn’t it?

CSS3 Way

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

The syntax is really easy to pick up on this one. All you do for the multiple backgrounds is add a comma in between each one! However, once again, this is a limited property and is only in Safari.
View the demo.

9. Columns

This is the most interesting CSS3 property I’ve come by. It’s not something you see a lot in web design. Myself, I’ve only seen newspaper-like columns once or twice; however, I love how the effect looks when done correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the columns.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
$('.columns').columnize({
columns: 2
});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

I’ve added a little padding to the columns just so the text isn’t smashed up against each other.

CSS3 Way

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

There are a handful of other CSS3 column properties that you can apply, but for demonstrative purposes, I only specified the number of columns. If you’d like to learn more about these other properties, check out the multi-column page at CSS3.info.
View the demo.

10. Border Image

I had no clue about the border image property until I upgraded to Firefox 3.5 and went to Chris Spooner’s website and saw that his post images had image borders. I personally don’t have any interest in this property, but that’s not going to stop me from explaining how to achieve it.

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

Instead of spending the time creating multiple divs and repeating the background image around the div, I found a jQuery plugin that does the work for me. It’s called borderImage and works just like it should.

CSS3 Way

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

As you can see, the border image property is a bit odd. W3 explains how it gets calculated MUCH better.
View the demo.

11. Animations

Alright, who doesn’t love to see some element gently slide to the left or fade in when you hover over something? Animations are great to increase user interface, but make sure that you don’t go over board! The only browsers that support CSS3 animations are Webkit based browsers. The only other way to display animations is to use JavaScript. I’ll be using jQuery because it’s my favorite JavaScript library (if you haven’t guessed by now).

Classic Way

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
top: '20px'
}, 300);
}, function(){
$(this).stop().animate({
top: '0'
}, 300);
});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

CSS3 Way

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>

Both of these code snippets do the same thing: slide the div 20 pixels down over the course of 300 ms. Remember, the CSS3 code only works in Webkit browsers!
View the demo.

Conclusion

There you have it: 11 CSS techniques that will become much easier with CSS3 in the (hopefully near) future. Obviously, it’ll be a while before we can 100% depend on these properties across all browsers.
Don’t forget to review these other Nettuts+ tutorials that discuss CSS3: