juin
11

Que faire avec CSS3 ?

Hey ! Tout le monde sait que CSS3 et HTML5 sont dans la bouche de tous les codeurs (non ?), et que le W3C doit les valider. Mais pour quand, ça … It’s an other story. En attendant que tous nos chers navigateurs intègrent toutes les nouvelles propriétés du futur CSS, je vais vous en montrer quelques unes, en vous informant de leur portabilité sur les différents navigateurs.
Avant tout, sachez que la majorité de ces propriétés n’agissent pas sous -n’importe quelle version d’- IE, et que je ne donnerai pas de Javascript complexe pour que l’effet voulu soit visible sous ce fichu *** de navigateur. En ce qui concerne les autres navigateurs, je vous donnerai les différentes versions de code à mettre pour que l’effet soit visible dans chacun d’eux, si c’est possible.

Bordures arrondies

Tous les coins arrondis :

Sans doute la propriété CSS3 la plus utilisée pour le moment, elle donne un arrondi à tous vos coins, ou seulement ceux que vous voulez.

.votreDIV {
-moz-border-radius: 10px; /* Plus la valeur sera élevée, plus les angles seront arrondis*/
-webkit-border-radius: 10px;
border-radius: 10px;
}

Voir le rendu

Compatibilité : Firefox / Chrome / Safari / Opera

Choisir ses coins à arrondir

Là, il s’agit d’une propriété par angle. Ce qui veut dire que si vous voulez par exemple arrondir seulement 2 angles du cadre, il vous faudra entrer 4 propriétés pour que l’effet soit visible sous Firefox, Chrome et Safari.

.toujoursVotreDIV{-moz-border-radius-topleft: 12px;/* Coin haut gauche*/
-moz-border-radius-bottomright: 12px;/* et coin bas droit */
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;}

Voir le rendu

Compatibilité : Firefox / Chrome / Safari

Ombres

Ombre d’un cadre

Effet très simple, mais qui donne peut donner de la gueule à certains de vos div. On peut paramétrer respectivement le décalage horizontal et vertical, le flouté de l’ombre ainsi que sa couleur. Pour que l’ombre soit vers le haut gauche (la lumière est donc en bas à droite), il faut que les deux premières valeurs soient négatives. Et pour que l’ombre soit en bas à droite, il faut qu’elles soient positives.

.div{
-moz-box-shadow: 10px 10px 2px #0000;
-webkit-box-shadow: 10px 10px 2px #0000;
}

Voir le rendu

Compatibilité : Firefox / Chrome / Safari

Ombre du texte

Cette propriété fonctionne de la même manière que box-shadow, elle prend en compte les mêmes arguments. Sous un tonner d’applaudissements, je vous demande d’accueillir text-shadow !

.leParagraphe{
box-shadow: 2px 2px 1px #000000;
}

Voir le rendu

Compatibilité : Firefox / Chrome / Safari / Opera

Polices

Avec la propriété @font-face, qui vous permet de charger une police sur votre page, vous pourrez personnaliser et vraiment faire sortir de l’ordinaire vos textes. Pour utiliser cette propriété, c’est simple : il faut d’abord charger votre police, et vous pourrez ensuite l’utiliser comme s’il s’agissait d’une propriété déjà existante sur la machine du client. Cette police doit être sur votre serveur (ou ailleurs), et doit être au format .otf ou .tff.

@font-face {font-family:  Delicious; /* Ici, vous nommez la police que vous chargez*/
url('lien-vers/la-fonte/delicious.otf');} /* Puis vous donnez le chemin vers le fichier */
/* Une fois la fonte chargée, vous pouvez l'employer comme une police normale*/
.votreParagraphe {font-family: Delicious, serif; color: #000;}

Voir le rendu

Compatibilité : Firefox / Chrome / Safari / Opera

Chaque propriété a été testée sur un navigateur, dont les versions sont les suivantes :

Firefox – 3.6.3
Chrome – 5.0.375.55
Safari – 4.0.5
Opera – 10.5

Bon ! Voilà ! Notre petit tour des propriétés CSS3 intéressantes -pour moi- est terminé. Vous pouvez toutes les retrouver sur css3.info