Pchełki CSS: pseudolosowe obroty

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); }

Autor: xpil

Po czterdziestce. Żonaty. Dzieciaty. Komputerowiec. Krwiodawca. Emigrant. Rusofil. Lemofil. Sarkastyczny. Uparty. Mól książkowy. Ateista. Apolityczny. Nie oglądam TV. Uwielbiam matematykę. Walę prosto z mostu. Gram na paru instrumentach. Lubię planszówki. Słucham bluesa, poezji śpiewanej i kapel a’capella. || Kliknij tutaj po więcej szczegółów ||

Dodaj komentarz

Bądź pierwszy!

Powiadom o
avatar
wpDiscuz