BORDURES ET OMBRES EN HTML5

Get Started. It's Free
or sign up with your email address
Rocket clouds
BORDURES ET OMBRES EN HTML5 by Mind Map: BORDURES ET OMBRES EN HTML5

1. Bordure image

1.1. border-image:

1.2. Exemple

2. Ombres textes

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

3. Barre horizontale

3.1. <hr>

4. Ombres bordures

4.1. box-shadow:

4.2. Composition

4.2.1. 5px - décalage horizontal de l'ombre

4.2.2. 10px - décalage vertical de l'ombre

4.2.3. 10px - adoucissement du dégradé

4.2.4. Green - couleur de l'ombre

4.3. Exemple

5. Raccourci

5.1. border: dotted 1px black thick;

6. Bordure arrondi

6.1. border-radius:

6.2. Angle de l'arrondit

6.2.1. border-top-right-radius:

6.2.2. border-bottom-right-radius:

6.2.3. border-bottom-left-radius:

6.2.4. border-top-left-radius:

6.3. compatibilé

6.3.1. FireFox

6.3.1.1. -moz-border-radius: 1em;

6.3.2. Chrome, Safari,

6.3.2.1. -webkit-border-radius: 40px 10px;

6.4. Exemple

6.5. Bordure arrondi image

6.5.1. HTML

6.5.2. CSS

7. Epaisseur bordure

7.1. border-top-width:

7.1.1. défini l'épaisseur

7.1.2. border-top-width: 7px;

7.2. border-width:

7.2.1. thin;

7.2.1.1. bordure fine

7.2.2. medium;

7.2.2.1. bordure moyenne

7.2.3. thick;

7.2.3.1. bordure épaisse

7.3. Gestion de l'épaisseur

7.3.1. border-top-width

7.3.2. border-bottom-width

7.3.3. border-left-width

7.3.4. border-right-width

7.4. Exemple

8. Styles de bordure

8.1. Styles

8.1.1. dotted;

8.1.1.1. pointillés

8.1.2. dashed;

8.1.2.1. tired

8.1.3. double;

8.1.3.1. double bordure

8.1.4. groove;

8.1.4.1. gravé dans la page

8.1.5. ridge;

8.1.5.1. Effet 3d sortant de la page

8.1.6. inset;

8.1.6.1. Bordure rentrante incrustée

8.1.7. outset;

8.1.7.1. Bordure sortante extrudée

8.1.8. none

8.1.8.1. Pas de bordure

8.2. Gestion des styles

8.2.1. border-style:

8.2.2. border-top-style:

8.2.3. border-bottom-style:

8.2.4. border-left-style:

8.2.5. border-right-style:

8.3. Exemple

9. Couleur bordure

9.1. Gestion des couleurs

9.1.1. border-top-color:

9.1.2. border-right-color:

9.1.3. border-left-color:

9.1.4. border-bottom-color:

9.2. Important

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

9.2.2. Il faut définir avant la

9.2.2.1. border-style: dotted;

9.2.2.2. border-width: 7px;

9.3. Exemple

10. L'auteur : Olivier Legrand

10.1. Formateur du Web

10.2. Concepteur pédagogique multimédia