Je pense que beaucoup d’entre vous sont déjà curieux car CSS3 nous laisse entrevoir des choses insoupçonnables il n’y a pas si longtemps…

Cependant il reste encore beaucoup de problèmes de compatibilités entre les différents navigateurs. C’est pourquoi je décide aujourd’hui de vous proposer un petit panel de quelques petites choses qui vont nous simplifier la vie a nous tous Intégrateur/ Webdesigner !
Je vais donc parler aujourd’hui de 3 nouveautés (dont vous avez sûrement déjà entendu parlé) que j’ai découvertes à travers différents sites et tutoriaux.

> Les blocs arrondis
> La transparence
> Les ombres

1. Les blocs arrondis

Voilà une chose que beaucoup d’entre nous rêve de faire via les CSS sans être obligé d’enregistrer des images.
La propriété CSS3 border-radius permet de le faire. Elle est reconnut déjà sur tout les navigateurs récents exception faite de Internet Exlorer (même dans sa version 8).

ATTENTION : la propriété doit être préfixée par -moz- pour les navigateurs type FireFox ou -webkit- pour les navigateur comme Chrome ou bien Safari pour fonctionner sur ces navigateurs. (ex : -moz-border-radius) Voici un exemple de syntaxe :

Avec le code HTML suivant :

<div id=”cadre”>
<p>Votre contenu à l’interieur ….</p>
</div>

Astuce : Il est possible de définir aussi l’arrondi de chaque angles. Pour Internet Explorer cette seule manipulation n’est pas suffisante, il va donc falloir faire appel à du javascript afin de contourner le problème et rendre ce navigateur compatible. Le JS qui sera utilisé s’appel roundies.js vous pouvez le télécharger sur dillerdesign.com

Une fois ce code téléchargé, il faut l’appliquer dans un commentaire conditionnel dans le <header> comme ceci :

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

Il vous faudra par la suite indiquer quels éléments vous souhaitez mettre avec des bords arrondis soit à la fin du script JS soit tout à la fin de votre document après la fermeture de la balise </body> (dans tout les cas après l’appel de roudies.js) de cette manière :

<script type=”text/javascript”>
// Indique quels seront les éléments qui bénéficieront des coins arrondis
DD_roundies.addRule(’div#cadre’, ‘10px’);
</script>

Au final cette pratique sera compatible sur tous les navigateur, seul Opera sera en reste jusqu’à sa version 10.5.
Vous pourrez appliquez cette méthode sur toute sorte de bloc ou bien encore pour les onglets d’un menu… etc Pour plus de détails je vous invite à lire ce tutoriel sur le site Alsacréations.

2. La transparence

J’avoue que jusqu’a maintenant pour appliquer une opacité sur un bloc j’utilisais la propriété opacity mais elle était contraignante car celle-ci appliquait une transparence non seulement à sont bloc mais aussi au contenu de celui ci ce qui n’était pas le rendu que je souhaitais.

La propriété rgba à l’avantage de n’appliquer l’opacité qu’a l’élément voulu et non a tous ses descendants.

Voici un visuel de comparaison de l’utilisation des deux propriétés qui sont au passage toutes les deux des propriété CSS3 :

On s’aperçoit donc que le contenu du bloc qui utilise la propriété opacity est aussi touchez par l’opacité.

Voici donc les deux syntaxes :

Comme pour la nouveauté précédente, Internet Explorer ne reconnaît pas cette fonctionnalité…

Il va donc falloir détourner un filtre propriétaire à Microsoft, le gradient filter (soit filter:progid:DXImageTransform.Microsoft.gradient) dont la fonction est de créer des dégradés de couleur d’arrière-plan sur IE.
Ce filtre permet de prendre en compte la transparence de la couche alpha dans ses valeurs. On peut donc rendre un fond transparent en indiquant la même couleur pour le début et la fin du dégradé.

La valeur indiquée sera en héxdécimale #AARRGGBB (AA sera la transparence).

NB : Pour les correspondance de transparence :

0%  -> #00
20% -> #33
50% -> #80
75% -> #C0
100% -> #FF

Voici donc le code pour contourner les désagréments avec IE pour la propriété RGBA : (dans une commentaire conditionnel)

<!–[if lte IE 8]>
<style type=”text/css”>
#transparent2 {
background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
zoom: 1;
}
</style>
<![endif]–>

3. Les ombres

Il est possible dorénavant de faire des ombres à des blocs ou bien encore sur du texte ce qui nous permet de ne plus avoir à enregistrer des images à tout va.

Les propriétés qui le permettent sont :

- box-shadow qui permet de créer une ombre portée à des bloc tel que des images ou bien même des div…
- text-shadow permet quand à elle de faire une ombre porté à du texte.

Cependant comme les deux cas précédent, certains navigateurs ne sont pas encore capables de gérer ce genre de propriétés et c’est pourquoi il va encore falloir recourir à quelques astuces.

La propriété box-shadow permet donc de faire une ombre portée en choisissant le décalage et la couleur.

Voici donc un cas illustré :

Code :
.ombrage {
border: 5px solid #fff;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 8px 8px 12px #555;
width :150px;
}

Pour info : Ici la première valeur indique le décalage vers la droite, le second, celui vers le bas, le troisième c’est la force du dégradé et la dernière valeur la couleur du dégradé.

Internet Explorer même dans sa version 8 ne reconnaît donc pas cette fonctionnalité, il va donc falloir lui appliquer tout simplement un filtre Shadow toujours dans un commentaire conditionnel (voir l’exemple au dessus) :

.ombrage {
filter:progid:DXImageTransform.Microsoft.Shadow(color=’#aaaaaa’, Direction=135, Strength=12);
zoom: 1;
}

Cela fonctionnera donc après sur tout les navigateurs excepté Opéra.

La propriété text-shadow permet donc de faire une ombre portée sur un texte.

Voici un exemple illustré :

Cette propriété est une propriété CSS2. Sur le même principe que box-shadow.

Dans les styles : (pour tous les navigateur excepté IE)
.texte {
text-shadow: 0px 0px 9px #777;
color: #fff;
}

Pour IE : (dans un commentaire conditionnel)

.texte {
filter:progid:DXImageTransform.Microsoft.Shadow(color=’#999999′, Direction=135, Strength=4);
zoom: 1;
}

Si vous souhaitez approfondir ce sujet rendez-vous sur ce tutoriel.