slDesign

Je suis persuadé que lorsque vous développez un site WEB, vous avez un multitude de logiciels ouverts sur votre bureau ; encore aujourd’hui, j’utilise Gimp pour éditer des images aux coins arrondis. Bientôt, avec CSS3, nous allons pouvoir nous passer d’éditer certaines images et gagner un temps précieux dans le développement de nos sites.

Dans cet article, je vais vous montrer certaines techniques CSS3 qui vous permettront de changer vos méthodes de travail.

CSS3? What’s that?! Qu’est-ce que c’est?!

Je suis sûr que vous avez entendu parler de CSS en général. CSS3 n’est pas très différent, en termes de syntaxe, mais la puissance de CSS3 est beaucoup plus grande. Comme vous le verrez dans ces techniques comment il est possible redimensionner dynamiquement des éléments, créer des ombres de texte, et plus encore!

Voici la définition donnée par le W3C de CSS3 :

CSS3 est le petit nouveau dans la famille feuille de style. Il offre de nouvelles possibilités intéressantes pour créer un impact avec vos dessins, vous permet d’utiliser des feuilles de style plus variés pour des effets de style beaucoup plus puissants et variés.

1°) Les coins arrondis en CSS3

Alors qu’auparavant il était nécessaire de créer des coins arrondis avec des images ou encore utiliser javascript il est désormais possible de faire appel à CSS3 ; Voici le code et le résultat (figure 1) que vous obtiendrez avec la propriété ‘border-radius’ :

<style type="text/css">
.box {
 background: #e3e3e3;
 border: 1px solid #000; border-radius : 10px;
 width:150px;
 height:150px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
</style>

<div><!--CONTENT--></div>

Figure 1 - Résultat obtenu avec la propriété corner radius

Vous avez la possibilité de manipuler chacun des coins ; voici un exemple courbant les coins haut gauche et bas droit (figure 2) :

<style type="text/css">
.box_2{
 background: #e3e3e3;
 border: 1px solid #000; border-radius : 10px;
 width:150px;
 height:150px;
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
 -moz-border-radius-bottomright:10px;
 -webkit-border-bottom-right-radius:10px;
}
</style>
<div><!--CONTENT--></div>

Figure 2 - Coins arrondis sur deux angles

2°) Les ombre sur div en CSS3

Encore une fois CSS3 va nous faire gagner du temps ; fini les DIV superposés et décalés ou encore l’utilisation de javascript pour générer de belles ombres. La propriété ‘box-shadow’ nous permet maintenant de réaliser ce type d’effet (Figure 3)

<style type="text/css">
.box_3 {
 background: #e3e3e3;
 border: 1px solid #000; border-radius : 10px;
 width:150px;
 height:150px;
 box-shadow: 10px 10px 5px #888;
 -moz-box-shadow: 10px 10px 5px #888;
 -webkit-box-shadow: 10px 10px 5px #888;
}
</style>
<div><!--CONTENT--></div>

Figure 3 - Ombre portée sur un DIV

Voici les propriétés de notre élément ‘box-shadow’ :

1. Décalage horizontal : en négatif le décalage sera à gauche en positif, il sera à droite
2. Décalage vertical : négatif il sera vers le haut, positif il sera vers le bas
3. Rayon de flou : par défaut 0, c’est à dire aucun.

3°) Les ombres de texte en CSS3

Voici le code vous pemettant d’implémenter ce nouvel effet CSS3 ; Vous verrez en figure 4 le résultat, la première ligne sert à montrer la différence entre un texte sans ombre et un second avec :

<style type="text/css">
.not-shadowed{
 color:blue;
 font-size:20px;
}
.shadowed{
 color:blue;
 font-size:20px;
 text-shadow: 0 1px 0 #000;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>

Figure 4 - Text shadow

Les propriétés sont les mêmes que pour un DIV.

4°) Les polices de caractères embarquées :

Nous en avons rêvé pendant longtemps, CSS3 l’a fait ! Il est maintenant possible de choisir votre police et de l’utiliser dans vos pages WEB – veillez toutefois à faire attention aux droits d’utilisation, toutes les polices ne sont pas libres de droit. Dans l’exemple suivant, j’ai opté pour la police ‘LIBRE’.

<style type="text/css">
@font-face {
 font-family: 'libre';
 src: url('design/mido_igual.ttf');
}
.font {
 font-family: libre;
 font-size: 30px;
}
</style>

<p>Lorem ipsum dolor sit amet...</p>

Figure 5 - CSS3 et police embarquée

5°) CSS3 et opacité :

Vous pouvez maintenant gérer l’opacité des éléments HTML dans vos feuilles de styles ; Il était déjà possible de réaliser cette opération avec les propriétés CSS ‘opacity’ et ‘filter’. Maintenant la tache est plus facile comme vous pouvez le voir :

<style type="text/css">
.main-box{
 background:red;
 height:200px;
 width:200px;
 border:1px solid #000;
}
.box_4 {
 height:100px;
 width:100px;
 opacity: .6;
 border:1px solid #000;
 background:#C3C3C3;
 float:left;
 margin-left:150px;
 margin-top:50px;
}
</style>
<div>
 <div>
 <!--CONTENT-->
 </div>
</div>

La figure 6 vous montre un carré gris dont l’opacité est fixée à 60% :

Figure 6 - Opacité d'un élément

6°) Taille des « background »

Il est maintenant possible d’utiliser la propriété ‘background-size’ ; cette propriété sert à fixer la tailles des backgrounds ce qui était jusqu’alors impossible.

Voici un exemple avec une image dont la taille initiale est de 400px X 566px et ramenée à 50% d’un div dont les dimensions sont de 200px X 200px :

<style type="text/css">
.box_5 {
 height:200px;
 width:200px;
 border:1px solid #000;
 background:#C3C3C3;
 background: #ccc url(medias/img_400x566.png) no-repeat;
 -moz-background-size: 50%; /* Mozilla */
 -webkit-background-size: 50%; /* Safari */
 -o-background-size: 50%; /* Opera */
 -khtml-background-size: 50%; /* Konqueror */
}
</style>

<div>
 <!--CONTENT-->
</div>

Figure 7 - Propriété Background-size

Attention ! Le résultat ne sera pas le même sur tous les navigateurs ! Pour exemple, Mozilla conserve les proportions de votre image ce qui n’est pas le cas sur Chrome…

7°) Propriétés columns :

Voici une propriété qui vous permet de diviser un DIV en plusieurs colonnes. pour cela, il vous suffit d’en spécifier le nombre.

<style type="text/css">
.columns {
 width:600px;
 -moz-column-count: 2;
 -webkit-column-count: 2;
}
</style>

<div>
 <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>

Figure 8 - Propriété colonnes

8°) Bordures ‘images’

Euh… Comment dire ? l’utilité de cette nouvelle propriété est contestable mais elle a le mérite d’exister. Donc, vous allez pouvoir créer des bordures à partir d’images.

Je ne vais pas m’étendre sur cette propriété donc passons tout de suite au code et au résultat :

<style type="text/css">
.box_6 {
 height:200px;
 width:200px;
 border-width: 20px;
 -webkit-border-image: url(design/border2.png) 27 round;
 -moz-border-image: url(design/border2.png) 27 round;
 border-image: url(design/border2.png) 27 round;
}
</style>

<div>
 <!--CONTENT-->
</div>

Figure 9 - Image source

Figure 10 - Résultat d'une bordure 'image'

Les sélecteurs CSS3

Je n’ai pas d’exemple imagé, sachez simplement que de nouveaux sélecteurs font leur arrivée dans vos feuilles de style ; Cela signifie que vous pourrez créer des design encore plus puissants et personnalisés.

Je vous renvoi à l’excellent article parru sur le site www.456bereastreet.com

Je réaliserai un post complet à ce sujet dans les jours qui viennent.

Conclusion

Vous venez de consulter quelques techniques CSS qui vous faciliteront le développement de vos interfaces et design WEB. Malheureusement, il faudra encore attendre un peu avant que ceci soit réalisable sur tous les navigateurs… alors pensez utilisateurs et dites vous bien que de nombreuses personnes n’aurons pas accès à toues ces propriétés.