Le blog DSI94

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;