Bordures et Background en CSS 3

Tutoriels HTML/CSS

Le W3C a publié le 16 Février 2005, un Working Draft sur les nouvelles propriétés CSS concernant les bordures et les fonds. Mais voyons cela de plus près…

Publié il y a déjà trop longtemps…

Possibilités de mettre plusieurs images de fond

Et oui, ce sera possible ! Pour cela il faudra dans les propriétés séparer les valeurs par des virgules comme dans l’exemple ci-dessous :

[css] background-image: url(a), url(b), url(a), url(b), url(a); background-position: top, right, bottom, left, center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

background-clip : border ou padding

Détermine si le fond avance jusqu’à la bordure ou pas. Si la valeur est padding, le fond est coupé au bord du padding et le fond de la bordure est transparent. Si la valeur est border, le fond avance à la bordure.

background-origin : border ou padding ou content

Détermine comment le background-position sera calculé. Avec la valeur padding, la position relative au bord du padding (« 0 0 » sera le coin gauche supérieur de la bordure du padding et « 100% 100% » sera le coin inférieur). La valeur border signifira que la position sera relative à la bordure, et la valeur content relative à la délimitation du contenu.

background-size : taille

Déterminera la taille de l’image de fond. Dans la taille, nous pourrons écrire par exemple la valeur « 15px » qui aura pour effet de redimensionner la taille de l’image à 15px par 15px.

background-break : bounding-box ou each-box ou continuous

Concerne les sauts de pages en cas d’impression.

border-style

Dans cette propriété déjà existante, de nouvelles valeurs seront implémentées notamment wave, dot-dash et dot-dot-dash.

Illustration du W3C

border-image

Permettra d’appliquer une image en guise de bordure. Sa mise en place sera quelques peu compliquée car elle necessite de procéder à quelques petits calculs.

Ainsi une image telle que celle-ci :

Illustration du W3C

Appliquée en border-style donnera celà :

Illustration du W3C

border-radius : taille

Permettra d’arrondir les angles des bordures. Exemple :

Illustration du W3C

border-break

Concerne les sauts de pages en cas d’impression.

box-shadow

Permettra de créer une ombre sur un élément.

Illustration du W3C

Retrouvez le document original sur le site du W3C à cette adresse : http://www.w3.org/TR/2005/WD-css3-background-20050216/

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Monique

Bonjour,

Voilà de quoi nous faire rêver un peu :-)

Amiclement,
Monique
yoDa

border-radius : taille , une révolution !!
Edmond

C’est clair que le border-radius ça va faire du bien au code :) !
robby

merci pour le tuto
enfin quelqu’un prend la peine de montrer visuellement aux autres les propriétés css de bordures
Richard

Super interessant, merci ;-)
petitajt

Reste plus qu’a espérer que les naviguateurs sauront interpréter :-P
an.archi

petitajt > moyennant un petit "-moz-" devant certaines propriétés, tu peux déjà faire des bordures rondes avec Firefox.
Une liste des modules supportés ici : http://www.xulplanet.com/referen...
Mais attention à ne pax confondre les propriétés propres à la famille Mozilla et celles destinées à évoluer en standards. ;o)
Sinon, cette page-ci est également intéressante : http://www.amaryllidaceae.org/we...
Tito

Il y a encore des options de CSS1 qui ne sont pas interprétées par Internet Explorer alors déjà parler de la version 3… Il faudrait déjà que Crosoft pass à la version 2!
speedylol

Bonjour ,

Dans les border-style il y a t’il moyens de lui donnée une epaisseur plus grosse.
Comment fait ton merci.
yann

Sympa cet article. Tombé sur le site par hasard. Je reviendrai :)
alex

D’accord mais peut-on faire un background avec des border radius??
That’s the question!
Shemu

alex > Normalement oui !
matine44

Salut ! Excellent on va enfin s’amuser !! J’ai essayé le style de plusieurs images en fond mais je ne vois pas la troisième (celle de droite).
[code]
#portal_tab_zone .tab {
background: url("../img/tab_left.png") top left no-repeat,url("../img/tab_middle.png")top center repeat-x,url("../img/tab_right.png")top right no-repeat;
}
[\code] kelkun aurait une lumière ???
Merci d’avance

Les commentaires sont clos.