208 199 visites depuis 7 jours,
dont 4 602 sur ce chapitre
classé 1/786
Nouveau chapitre, nouveau lot de propriétés CSS. Ici, nous allons nous intéresser aux bordures et aux effets d'ombrage que l'on peut appliquer, aussi bien sur le texte que sur les blocs qui constituent notre page.
Nous réutiliserons en particulier nos connaissances sur les couleurs pour choisir la couleur de nos bordures et de nos ombres.
Prêts à vous en mettre une nouvelle fois plein la vue ?
Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos bordures : border-width, border-color, border-style…
Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Pour border on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :
La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur (black, red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)).
Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles :
none : pas de bordure (par défaut) ;
solid : un trait simple ;
dotted : pointillés ;
dashed : tirets ;
double : bordure double ;
groove : en relief ;
ridge : autre effet relief ;
inset : effet 3D global enfoncé ;
outset : effet 3D global surélevé.
Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour de mes titres, je vais écrire :
Code : CSS
1
2
3
4
h1{border:3pxbluedashed;}
La figure suivante vous présente les différents styles de bordures que vous pouvez utiliser.
Les différents types de bordures
En haut, à droite, à gauche, en bas…
Qui a dit que vous étiez obligés d'appliquer la même bordure aux quatre côtés de votre élément ?
Taratata, si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :
border-top : bordure du haut ;
border-bottom : bordure du bas ;
border-left : bordure de gauche ;
border-right : bordure de droite.
Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous le désirez : border-top-width pour modifier l'épaisseur de la bordure du haut, border-top-color pour la couleur du haut, etc.
Ce sont aussi des super-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté.
Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc :
On peut modifier les bordures de n'importe quel type d'élément sur la page. Nous l'avons fait ici sur les paragraphes mais on peut aussi modifier la bordure des images, des textes importants comme <strong>, etc.
Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millénaires (ou presque). Depuis que CSS3 est arrivé, il est enfin possible d'en créer facilement !
La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :
Code : CSS
1
2
3
4
p{border-radius:10px;}
L'arrondi se voit notamment si l'élément a des bordures, comme sur la figure suivante.
Des bordures arrondies
… ou s'il a une couleur de fond, comme sur la figure suivante.
Un fond aux coins arrondis
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs :
Code : CSS
1
2
3
4
p{border-radius:10px5px10px5px;}
Les valeurs correspondent aux angles suivants dans cet ordre :
en haut à gauche ;
en haut à droite ;
en bas à droite ;
en bas à gauche.
Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes elliptiques figure suivante). Dans ce cas, il faut indiquer deux valeurs séparées par une barre oblique (slash, caractère /). Le mieux est certainement de tester pour voir l'effet :
Code : CSS
1
2
3
4
p{border-radius:20px/10px;}
Bordures arrondies elliptiques
Les bordures arrondies fonctionnent avec tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9).
Pour les anciennes versions de Mozilla Firefox, Chrome et Safari, il était nécessaire d'utiliser ce qu'on appelle des « préfixes vendeurs », c'est-à-dire qu'il fallait écrire dans le code CSS différentes versions de la propriété (-moz-border-radius pour Firefox, -webkit-border-radius pour Safari, etc.). Ce n'est heureusement plus nécessaire aujourd'hui, sauf si vous voulez gérer les anciennes versions de ces navigateurs.
Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page !
Nous allons ici découvrir deux types d'ombres :
les ombres des boîtes ;
les ombres du texte.
box-shadow : les ombres des boîtes
La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :
le décalage horizontal de l'ombre ;
le décalage vertical de l'ombre ;
l'adoucissement du dégradé ;
la couleur de l'ombre.
Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :
Code : CSS
1
2
3
4
p{box-shadow:6px6px0pxblack;}
Cela donne le résultat illustré à la figure suivante (j'ai ajouté une bordure au paragraphe pour qu'on voie mieux l'effet).
Une ombre sous le paragraphe
Ajoutons un adoucissement grâce au troisième paramètre (figure suivante). L'adoucissement peut être faible (inférieur au décalage), normal (égal au décalage) ou élevé (supérieur au décalage). Essayons un décalage normal :
Code : CSS
1
2
3
4
p{box-shadow:6px6px6pxblack;}
Une ombre adoucie sous le paragraphe
On peut aussi rajouter une quatrième valeur facultative : inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé :
Code : CSS
1
2
3
4
p{box-shadow:6px6px6pxblackinset;}
Je vous laisse essayer de voir le résultat.
La propriété box-shadow fonctionne sur tous les navigateurs récents, IE9 inclus. Pour certains navigateurs, en particulier les navigateurs mobiles, il faut encore rajouter un préfixe. Ainsi, il faudra écrire une version -webkit-box-shadow pour que cela fonctionne sur les navigateurs Android et iOS.
text-shadow : l'ombre du texte
Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la même façon que box-shadow : décalage, adoucissement et couleur.
Code : CSS
1
2
3
4
p{text-shadow:2px2px4pxblack;}
Le résultat est illustré à la figure suivante.
Texte ombré
Cette propriété est reconnue par tous les navigateurs récents, sauf Internet Explorer, qui ne la reconnaît qu'à partir de la version IE10.
On peut appliquer une bordure à un élément avec la propriété border. Il faut indiquer la largeur de la bordure, sa couleur et son type (trait continu, pointillés…).
On peut arrondir les bordures avec border-radius.
On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.
Le texte peut lui aussi avoir une ombre avec text-shadow.
merci pour ce tuto
les mec quelqu’un peut me dire est-ce-que on peu voir le code source de css d'une page web .
merci de me répondre au plus vite possibles
--j'ai reçue une réponse a ma question--
azizha oui il est possible de voir le code CSS d'une page, tu fait un click droit, tu affiche le code source. Un Ctrl ou Cmd+F (selon si tu es sur Mac ou PC) et tu met CSS dans la recherche et le tour est joué. Tu copie-colle l'adresse qui se trouve dans src, parfois il faut ajouter l'adresse du site avant le /.
Exemple celui de page où l'on se trouve: ici
merci pour ce tuto ;p
j'ai un code html qui va vous résoudre tous les problèmes avec Internet explorer même pour les IE moins 7 qui va leur demander de télécharger d'autre navigateur et pour IE moins que 9 ou pour Mozilla ou n'emporte quelle autre navigateur ancien il va lire votre code html normalement .
sans être long voici le code html 5 :
<!DOCTYPE html>
<html>
j ai une question,
si on veux faire un bordure à un titre et je veux que le bordure encadre exactement le titre, c.a.d la bordure droite soit plus prés de titre, que le bordure ne suit pas la totalité de la page
comment faire ?
Les bordures et les ombres
azizha
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook
Google+