Différences
Ci-dessous, les différences entre deux révisions de la page.
Dernière révisionLes deux révisions suivantes | |||
pratique:informatique:astuce_css [03/08/2022 14:05] – créée Zatalyz | pratique:informatique:astuce_css [13/11/2022 13:24] – [Astuce CSS] Zatalyz | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
====== Astuce CSS ====== | ====== Astuce CSS ====== | ||
- | * pour faire une ombre sur des images à fond transparent : '' | + | * Pour faire une ombre sur des images à fond transparent : '' |
* Centrer horizontalement et verticalement, | * Centrer horizontalement et verticalement, | ||
+ | ===== Formes ===== | ||
+ | Un joli hexagone autour d'un élément (ou tout seul) : | ||
+ | <code css> | ||
+ | background-color: | ||
+ | </ | ||
+ | |||
+ | Une barre avec un bout tronqué... non, pas clip-path. J'ai essayé mais ça ne donne rien de bon. Le mieux c'est de faire une div vide et de la styliser avec du CSS : | ||
+ | |||
+ | <code html>< | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | |||
+ | <code css> | ||
+ | .khbiseau_topright_color { | ||
+ | border-style: | ||
+ | border-color: | ||
+ | border-width: | ||
+ | } | ||
+ | |||
+ | .khbiseau_bottom_color { | ||
+ | border-style: | ||
+ | border-color: | ||
+ | border-width: | ||
+ | padding: 0; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | .khbiseau_right_color { | ||
+ | border-style: | ||
+ | border-color: | ||
+ | border-width: | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | } | ||
+ | </ | ||
====== Voir aussi ====== | ====== Voir aussi ====== | ||
* [[http:// | * [[http:// |