Med ett namn som CSS doodle du kanske inte vet vad du kan förvänta dig.
Men det här är en riktigt intressant webbkomponent som låter dig skapa fantastiska saker. Det fungerar i DOM-skugga och låter dig anpassa olika former, figurer och mönster med CSS.
Detta fungerar även med 2D-transformationer som är mycket kraftfulla CSS3-egenskaper när de används på rätt sätt. Detta gör CSS Doodle till en av de mest intressanta och estetiskt tilltalande webbkomponenterna på Internet.
För att komma igång lägger du bara till huvudmanus i rubriken på din sida. Det finns också instruktioner på CSS Doodle-webbplatsen som hjälper dig att komma igång.
Den har en ganska galen syntax som du hittar längre ner på huvudsidan.
Detta är baserat på flera anpassade väljare som är definierade i JS-filen. Så när du skriver CSS Doodle-kod tolkas den via JavaScriptäven om du inte behöver känna till någon JS.
Här är ett exempel på huvudsidan som visar en enkel CSS Doodle.
<css-doodle>
:doodle {
@grid: 11 / 100vmax;
background: #0a0c27;
}
--n: calc(
@abs(@abs(@row() - 6)
+ @abs(@col() - 6) - 11) / 11
);
margin: -10%;
transform: rotate(45deg);
border: 1px solid;
border-color: hsla(
calc(var(--n) * 360 + 120), 60%, 68%,
var(--n)
);
</css-doodle>
Du kan designa dina mönster med rutnät, anpassade paneler i ett rutnät eller med slumpmässiga konfigurationer. Dessutom har den massor av fördesignade former som du kan lägga till dina geometriska mönster.
Allt är väldigt lätt att redigera och är riktigt underhållande.
Kontrollera detta exempel från CodePen för bara en grundläggande demo:
Om du vill se mer finns en hela samlingen i CodePen för att navigera.
Eller så kan du gå djupare in i GitHubs huvudförråd om du är nyfiken på olika inställningar, väljare eller animationsstilar.
Det kanske inte är den mest praktiska webbkomponenten, men det är ett roligt bibliotek att arbeta med.
