Astuce CSS
- Pour faire une ombre sur des images à fond transparent :
filter:drop-shadow(2px 4px 8px #585858);
Oui ça marche même sur les formes bizarres. - Centrer horizontalement et verticalement, vive flex :
.center { display: flex; align-items: center; justify-content: center; }
Formes
Un joli hexagone autour d'un élément (ou tout seul) :
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); background-color: blue;
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 :
<div class="khbiseau_topright_color"></div> <div class="khbiseau_bottom_color"></div> <div class="khbiseau_right_color"></div>
.khbiseau_topright_color { border-style: solid; border-color: transparent transparent violet transparent; border-width: 0 1em 1em 0; } .khbiseau_bottom_color { border-style: solid; border-color: violet transparent transparent transparent; border-width: 0.5em; padding: 0; background-color: transparent !important; } .khbiseau_right_color { border-style: solid; border-color: transparent transparent violet violet; border-width: 1.5em 0em 1.5em 1.5em; height: 100%; position: absolute; right: 0; }
Imbriquer
Et bien… il suffit de le faire, plus besoin de SASS etc.
.class { color:black; @media (prefers-color-scheme: dark) { /* oui même les media */ } h1 { color:red; .main { color:blue; } } }
Voir aussi
- Source chez Bronco, et plus de trucs mais qui ne me servent pas