Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

BORDURES ET OMBRES EN HTML5 by Mind Map: BORDURES ET OMBRES EN
HTML5
5.0 stars - 1 reviews range from 0 to 5

BORDURES ET OMBRES EN HTML5

Bordure image

border-image:

Exemple

.bordure { border-image: url(smiley.png) 30 30 round; -moz-border-image: url(smiley.png) 30 30 round; -webkit-border-image: url(smiley.png) 30 30 round; border-width: 10px; width: 300px; height: 300px; padding: 10px; text-align: center; }

Ombres textes

text-shadow: 10px 10px 20px blue;

Barre horizontale

<hr>

Ombres bordures

box-shadow:

Composition

5px - décalage horizontal de l'ombre

10px - décalage vertical de l'ombre

10px - adoucissement du dégradé

Green - couleur de l'ombre

Exemple

h2 { border: 3px black solid; border-radius: 20px; box-shadow: 5px 10px 10px green; }

Raccourci

border: dotted 1px black thick;

Bordure arrondi

border-radius:

Angle de l'arrondit

border-top-right-radius:

border-bottom-right-radius:

border-bottom-left-radius:

border-top-left-radius:

compatibilé

FireFox, -moz-border-radius: 1em;

Chrome, Safari,, -webkit-border-radius: 40px 10px;

Exemple

h2 { border: 3px black solid; border-radius: 20px; }

Bordure arrondi image

HTML

CSS

Epaisseur bordure

border-top-width:

défini l'épaisseur

border-top-width: 7px;

border-width:

thin;, bordure fine

medium;, bordure moyenne

thick;, bordure épaisse

Gestion de l'épaisseur

border-top-width

border-bottom-width

border-left-width

border-right-width

Exemple

p { border-top-width: thin; border-bottom-width: thin; border-left-width: thick; border-right-width: thick; border-style: solid; }

Styles de bordure

Styles

dotted;, pointillés

dashed;, tired

double;, double bordure

groove;, gravé dans la page

ridge;, Effet 3d sortant de la page

inset;, Bordure rentrante incrustée

outset;, Bordure sortante extrudée

none, Pas de bordure

Gestion des styles

border-style:

border-top-style:

border-bottom-style:

border-left-style:

border-right-style:

Exemple

border-top-style: dashed;

Couleur bordure

Gestion des couleurs

border-top-color:

border-right-color:

border-left-color:

border-bottom-color:

Important

Possibilité de définir la couleur des 4 cotés

Il faut définir avant la, border-style: dotted;, border-width: 7px;

Exemple

p { border-style: dotted; border-width: 7px; border-top-color: green; border-right-color: black; border-left-color: yellow; border-bottom-color: grey; }

L'auteur : Olivier Legrand

Formateur du Web

Concepteur pédagogique multimédia