Bordure 1.
Compléter le code css (entre les balises style) ci-dessous pour que :
- L'article soit encadré d'une bordure en pointillés noirs d'épaisseur 1 pixel.
- Le titre h3 se présente sous la forme suivante :
Bordure 2.
- Bordez un paragraphe avec des épaisseurs (border-width) de bordure non nulles uniquement sur le bas (bottom) et la gauche (left), comme pour le titre de l'exercice précédent.
- Redéfinir maintenant cette bordure en donnant également une épaisseur à la bordure haute (top) mais avec la couleur 'transparent'. Observez l'effet (augmentez éventuellement les épaisseurs).
- En déduire un code css permettant de donner à un paragraphe une forme de triangle (de fond rouge par exemple).
Bordure 3.
Modifiez le css pour que le paragraphe apparaisse comme ci-dessous :
Bordure 4.
Dans la page html ci-dessous, les mots "Logo Python" et le logo Python apparaissent. Définir le css pour que :
- Seul "Logo Python" apparaisse, dans les couleurs du logo.
- Lorsqu'on survole le paragraphe, le texte "Logo Python" disparaît et est remplacé par le logo.
- Le logo apparaîtra de plus entouré d'un cercle aux couleurs du logo.
Pour un affichage différent au survol d'un élément, lisez cette page w3schools sur le sélecteur :hover.
Bordure 5.
Ci-dessous, définir le CSS (sans modifier le html) pour obtenir une image telle que la suivante :
On aura besoin de placer les div à l'aide de position:absolute;. Voir la page de w3schools.