Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
pratique:informatique:astuce_css [03/08/2022 14:05] – créée Zatalyz | pratique:informatique:astuce_css [18/02/2024 11:27] (Version actuelle) – 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, | ||
- | ====== Voir aussi ====== | + | ===== 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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Imbriquer ===== | ||
+ | Et bien... il suffit de le faire, plus besoin de SASS etc. | ||
+ | |||
+ | < | ||
+ | .class { | ||
+ | color: | ||
+ | @media (prefers-color-scheme: | ||
+ | /* oui même les media */ | ||
+ | } | ||
+ | h1 { | ||
+ | color: | ||
+ | .main { | ||
+ | color: | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | ===== Voir aussi ===== | ||
* [[http:// | * [[http:// | ||