💾 Archived View for lord.re › css-lab › index.gmi captured on 2023-04-19 at 23:29:26. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2022-06-03)
-=-=-=-=-=-=-
-------------------------------------------------
[23/06/2021] - ~1min - # #
-------------------------------------------------
Une ptite page avec quelques expérimentations CSS
<style>
@keyframes rainbow{
0% { background-position:0% 50%;}
100% { background-position:200% 50%;}
}
</style>
<span style="background-image: repeating-linear-gradient(to left, #64ff00, #00a3ff, #9500ff, red, #ffca00, #64ff00);background-size:100%; background-clip:text; -webkit-background-clip:text;color:transparent;animation:rainbow 3s infinite linear;">Un joli texte tout en arc-en-ciel</span>
<details><summary>
<div style="display:grid;justify-content:center;width:25rem;height:25rem;border:1px solid red;background:repeating-conic-gradient(from -2.5deg at 50% 110%, rgba(255,255,255,.2) 0 5deg, rgba(255,255,255,0) 0 10deg),linear-gradient(#aca, #696);"><div style="background-color:hsla(0,0%,20%,0.93);margin:1rem;box-shadow:0 0.5rem 1rem 0.25rem rgba(0,0,0,0.7);padding:1rem;border:1px solid #aca;"><p>Le contenu</p></div></div>
</summary>
{{< highlight html >}}
<div style="display:grid;justify-content:center;width:25rem;height:25rem;border:1px solid red;background:repeating-conic-gradient(from -2.5deg at 50% 110%, rgba(255,255,255,.2) 0 5deg, rgba(255,255,255,0) 0 10deg),linear-gradient(#aca, #696);">
<div style="background-color:hsla(0,0%,20%,0.93);margin:1rem;box-shadow:0 0.5rem 1rem 0.25rem rgba(0,0,0,0.7);padding:1rem;border:1px solid #aca;">
<p>Le contenu</p>
</div>
</div>
{{< / highlight >}}
</details>
<details><summary>
<div style="display:grid;justify-content:center;width:25rem;height:25rem;background-color:white;">
<div style="background-color:white;box-shadow:0 0 2rem rgba(0,0,0,0.2);margin:1rem;padding:1rem;color:#222;">
<p>Le contenu</p>
</div>
</div>
</summary></details>
<div style="height:30rem;width:30rem;background:repeating-conic-gradient( at 50% 101%, #666, #655, #2F2, #655, #666);box-shadow:0 0 4rem 1rem black inset;border-radius:2rem;">
</div>
------------------------------------
------------------------------------
[23/06/2021] [ ]
------------------------------------