Florilège d'effets

Un feux d'artifice d'effets visuels... du plus bel effet

Tous ces effets étaient jusqu'alors produits par des images et des emboitements de div et span... et maintenant... quelle légèreté de la page !

Entrons dans le vif du Sujet

I Les ombrages en CSS3

box-shadow, text-shadow  permettent de créer des ombrages sans faire appel aux images.

R Définitive CSS3 ie9+mzchromeoperasafari
box-shadow

Exemple

Lorem Ipsum

Exemple

Lorem Ipsum

R Définitive CSS2 ie9+mzchromeoperasafari
text-shadow

La syntaxe est la même que box-shadown.

Exemple

Lorem Ipsum

Les bordures

? CSS3 mz
border-colors (en couleur fondue)

Cette propriété n'est supportée que par firefox, est-ce la peine d'en parler... ?

Exemple

Lorem Ipsum

R Candidate CSS3 iemzchromeoperasafari
border-image : les bordures avec des images

Exemple

Lorem Ipsum

Exemple

Lorem Ipsum

Référence CSS3

border-image: source slice width outset repeat;

valeur du paramètre repeat
'stretch’
L'image est étirée pour remplir la bordure
‘repeat’
L'image est simplement répétée
‘round’
L'image est répétée et redimensionnée pouren avoir un nombre entier sur le bordure.
‘space’
L'image est répétée et des espaces sont ajustés entre pour en avoir un nombre entier sur la bordure

R Candidate CSS3 iemzchromeoperasafari
border-radius : Arrondir le coin des bordures

Exemple

Lorem Ipsum

Référence CSS3
border-bottom-left-radius: length|% [length|%];
http://www.w3.org/TR/css3-background/#the-border-radius
longueur ou un pourcentage du rayon du
quart d'ellipse qui définit la forme du coin

Exemple

Lorem Ipsum

R Définitive CSS3 ie9+mzchromeoperasafari
opacity : l'opacité en CSS3

La proprité la plus attendu par la plupart des Webmasters...

L'opacité peut s'écrire en % ou sous la forme "0.1" pour 10%, "0.2" pour 20% ... 

Exemple

R Définitive CSS3 ie9+mzchromeoperasafari
RGBA colors: Les couleurs en CSS3

Exemple
 
 
 
 
 

Références

http://www.css3.info/

http://www.zenelements.com/blog/css3-border-color/

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Vous devez :