publié le mar. 14 novembre 2017

Nous poursuivons le cours en ligne (MOOC) libre sur le site openclassroom: Apprenez à créer votre site web avec HTML5 et CSS3

Nous continuons aujourd'hui la deuxième partie de ce cours: Partie 2 - Les joies de la mise en forme avec CSS

N'oubliez pas de vous connecter sur le site afin de suivre votre avancement sur le cours.

6ème séance

Lors de cette sixième séance vous allez voir comment on peut créer des ombres, des bordures et du dynamisme grâce au langage CSS

4. Les bordures et les ombres

Dans cette partie vous verrez comment créer des bordures et des ombrages au texte, et aux blocs.

Résumé

• 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.

5. Création d'apparences dynamiques

Dans cette partie vous verrez comment changer l'apparence d'un élément html:

• au survol ;
• lors du clic ;
• lors du focus (élément sélectionné) ;
• lorsqu'un lien a été consulté.

Résumé

• En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les pseudo-formats.
• Le pseudo-format :hover permet de changer l'apparence au survol (par exemple : a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus).
• Le pseudo-format :active modifie l'apparence des liens au moment du clic, :visited lorsqu'un lien a déjà été visité.
• Le pseudo-format :focus permet de modifier l'apparence d'un élément sélectionné.