spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

David Ursiny 18.1.2012
Hodnoť článok:
0 0

Poznáte cikádu?

Cikáda je názov spôsobu vytvárania štruktúry na pozadí. Tento spôsob je špecifický tým, že štruktúra nie je "kachličková", ale nepravidelná.

Autor tejto metódy- Alex Walker sa inšpiroval životnými cyklami "periodických cikád", ktoré majú nastavené svoje obdobia párenia a kladenia vajíčok tak, aby sa vyhli záťahom predátorov. Pokiaľ by ste sa odhodlali čítať pôvodný článok na túto tému, tak tam nájdete aj podrobnejšie vysvetlenie tohoto záhadného prírodného procesu.

Spôsob vytvárania nepravidelnej vzorky na pozadí je postavený na používaní troch (a viac) obrázkov, ktoré sú čiastočne, alebo lokálne priesvitné. Pritom prvý (spodný) obrázok je rozmermi najmenší, a posledný, ktorý je "hore", je najväčší. Ich šírka by však mala byť nejaké prvočíslo, resp. vzájomný pomer šírok a výšok by mal byť vyjadriteľný v prvočíslach, teda napr. 3,5,7 (pixelov, dielov, lakťov...), alebo 11,13,17 atď.


Rozdielne veľkosti obrázkov spôsobujú nepravidelnosť v štruktúre pozadia

Spôsob zápisu takéhoto pozadia v css je:

html {background: url(prvý), url(druhý), url(tretí obrázok);}

Je však možné to urobiť aj spôsobom, ktorý využíva pseudo-elementy before a after, keď nejakému blokovému prvku dáme do backgroundu druhý obrázok a pseudo-elementom dáme prvý a tretí. Toto bude zároveň spôsob, ktorý funguje všade, okrem IE7.
Vyskúšal som si to zo smajlíkmi tak, aby sa im striedali mimické črty:


Je zrejmé, že jeden samotný obrázok by bol dátovo väčší a aj jeho vytváranie by trvalo dlhšie

Ešte dodám, že sa to celé dá skombinovať s css gradientmi, ktoré sa môžu objaviť v úplne spodnom pláne, nakoľko sme používali čiastočne transparentné obrázky. Ja som si vyskúšal, ako to dopadne, keď namiesto obrázkov použijem css gradienty + cikádu:


Stavebnými prvkami je tu desať blokových elementov s desať-percentnou šírkou

Takto si teda môžeme vytvoriť pozadie, ktoré bude štrukturované, rovnorodé, ale nebude ako tapeta, nebude v ňom vládnuť nechcený pravidelný Rytmus. A to je dobre.

Na webe designfestival.com si môžete pozrieť aj galériu venovanú tomuto projektu.

Obrázky a html sú tu.

Hodnoť článok:
0 0

2 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Andrej Praženica 23.1.2012 00:37:07
Veru, dobré. :)
0 0 Peter Hajduček 22.1.2012 19:39:07
Pekné, ďakujem! ;-)
Zajtra.sk > Programovanie > CSS/HTML > Poznáte cikádu?


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama