Voici une liste de quelques effets sympa en CSS3 que j'utilise fréquemment.
Bien sûr tous les navigateurs ne réagissent pas de la même façon à l'interprétation du code, donc à tester avant une mise en production :
- Box-shadow: Permet de créer une ombre sous un élément (voir le tour de ce blog). La propriété box-shadow nécessite 4 valeurs pour fonctionner :
- le décalage vertical en px
- le décalage horizontal en px
- la taille de l'ombre en px
- et la couleur
Par exemple la propriété Box-Shadow de ce blog est définie comme ceci : box-shadow : 0px 0px 10px #525252; (aucun décalage vertical ou horizontal, 10px de large et #525252 comme couleur)
- Border-radius : Permet de créer un coin arrondi en CSS (voir angles de ce blog). Exemple : border-radius : 20px; (radius de 20px sur chaque angle)
Mais, Il es possible de déterminer un radius différents pour chacun des angles. Pour cela il suffit d'indiquer la valeur en px correspondant à l'angle (sachant que la première valeur correspond à l'angle haut gauche) Exemple : border-radius : 10px 15px 20px 25px;
- Background Gradient : Voici un lien qui vous permettra de créer des fond gradient en CSS3 : http://gradients.glrzad.com/
- Text-shadow : Comme box-shadow mais pour les textes Exemple : text-shadow : 1px 1px 2px #ff9900; A noter qu'il est possible d'appliquer plusieurs ombres à un même texte ! Exemple : text-shadow : 1px 1px 2px #ff9900, -10px -5px 2px #ff0000;