Différences

Ci-dessous, les différences entre deux révisions de la page.

--- 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 ======
-  * 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.
+  * 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; }''
-====== Voir aussi ======
+===== Formes =====
+Un joli hexagone autour d'un élément (ou tout seul) :
+<code css>clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
+background-color: blue;
+</code>
+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="khbiseau_topright_color"></div>
+<div class="khbiseau_bottom_color"></div>
+<div class="khbiseau_right_color"></div>
+</code>
+<code css>
+.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;
+}
+</code>
+===== Imbriquer =====
+Et bien... il suffit de le faire, plus besoin de SASS etc.
+<code>
+.class {
+  color:black;
+  @media (prefers-color-scheme: dark) {
+    /* oui même les media */
+  }
+  h1 {
+    color:red;
+    .main {
+      color:blue;
+    }
+  }
+}
+</code>
+===== Voir aussi =====
   * [[http://warriordudimanche.net/article1511/6087b35bec833|Source chez Bronco]], et plus de trucs mais qui ne me servent pas