Pchełki CSS: pseudolosowe obroty

https://xpil.eu/TUC 📋

W ramach niedawnych czystek na blogu postanowiłem wywalić wiele śmieci z zaplecza, a przy okazji pobawić się troszkę CSS.

A w szczególności zadałem sobie pytanie: jak sprawić, żeby elementy list (np. pozycje w menu, listy komentarzy itd.) wyglądały trochę "bałaganiarsko"?

Najprościej byłoby je odrobinę poobracać, o nieduże, losowo wybrane kąty. Tylko jak tego dokonać? CSS nie ma wbudowanego żadnego generatora losowości, a nie chce mi się dokładać dodatkowych technologii, żeby nie "przedobrzyć".

Hmmm...

Okazuje się, że rozwiązaniem powyższej łamigłówki są moje ulubione liczby pierwsze 😉

CSS ma bowiem wbudowany operator "nth-child" umożliwiający modyfikację co-N-tego elementu listy. Można w ten sposób na przykład łatwo podcieniować co drugi wiersz w tabeli, dla lepszej czytelności. Albo wyróżnić co dziesiąty wiersz w rankingu. I tak dalej.

W dalszym jednak ciągu jest to działanie deterministyczne.

Jednak jeżeli połączyć ze sobą łańcuchowo kilka takich operatorów...

Hmmm...

CSS działa w taki sposób, że aplikuje style w kolejności ich napotykania w dokumencie. A więc jeżeli jedna dyrektywa każe obrócić element o 10 stopni w lewo, a następna o 30 stopni w prawo, to w efekcie uzyskamy element obrócony o 20 stopni w prawo.

Jeżeli teraz każemy obrócić co drugi element o 2 stopnie w lewo, a co trzeci - o 3 stopnie w prawo...

Pierwszy element pozostanie niezmieniony.

Drugi - obrócony o 2 stopnie w lewo.

Trzeci - o 3 stopnie w prawo.

Czwarty - o 2 stopnie w lewo.

Piąty - bez zmian (bo nie jest ani co-drugi ani co-trzeci)

Szósty... CSS najpierw obróci go o 2 stopnie w lewo (bo jest co-drugi) a zaraz potem o 3 stopnie w prawo (bo jest też co-trzeci). W efekcie element zostanie obrócony o 1 stopień w prawo.

Siódmy - bez zmian.

Ósmy... I tak dalej.

Reasumując:
Wszystkie elementy na pozycjach podzielnych przez dwa (i jednocześnie niepodzielnych przez trzy) zostaną obrócone o dwa stopnie w lewo.
Wszystkie elementy na pozycjach podzielnych przez trzy (i jednocześnie niepodzielnych przez dwa) zostaną obrócone o trzy stopnie w prawo.
Wszystkie elementy na pozycjach podzielnych przez sześć (czyli przez dwa i trzy na raz) zostaną obrócone o jeden stopień w prawo.
Wszystkie pozostałe elementy pozostaną niezmienione.

Czy to wystarczy?

W zasadzie dla list maksymalnie 8-10 elementowych - tak. Przy dłuższych listach zacznie być widoczny stały, wyraźnie powtarzający się układ obrotów.

Jak go bardziej "ulosowić"?

Trzeba dodać wyższe krotności!

Na przykład obrócić co-piąty element o cztery stopnie w lewo, a co-siódmy - o półtora stopnia w prawo. I tak dalej. Należy używać krotności będących liczbami pierwszymi, żeby uniknąć nadmiarowych "wzmocnień" transformacji (jeżeli na przykład zdefiniujemy obrót o 2 stopnie w lewo dla co-drugiego, co-czwartego i co-szóstego elementu, wówczas co-dwunasty element będzie obracany każdorazowo aż o 6 stopni).

Ponadto należy starać się, żeby średnia wszystkich zdefiniowanych obrotów dla wszystkich krotności wynosiła w przybliżeniu zero. Dzięki temu nawet bardzo długie listy będą w miarę zrównoważone (nie będzie zbyt drastycznych obrotów).

Kod dla WordPressa wygląda tak:

li:nth-child(2n) { transform: rotate(1deg); }
li:nth-child(3n) { transform: rotate(1deg); }
li:nth-child(5n) { transform: rotate(-2deg); }
li:nth-child(7n) { transform: rotate(2deg); }
li:nth-child(11n) { transform: rotate(-3deg); }
li:nth-child(13n) { transform: rotate(3deg); }

https://xpil.eu/TUC 📋