[TUTORIAL] Stworzyłem tego lwa w CSS używając 28 kół | DailyWeb.pl - codziennie o sieci

[TUTORIAL] Stworzyłem tego lwa w CSS używając 28 kół

Opublikowano 10 miesięcy temu - 3


Dzisiaj absolutnie świetny materiał od Filipa Koniecznego, który zainspirowany pewną grafiką postanowił przygotować jej odpowiedni w CSS. Żeby było trudniej, zrobił to przy użyciu tylko i wyłącznie kół. Enjoy.

Za pomocą CSS-a, szczególnie korzystając z modułów poziomu trzeciego, można czynić cuda. Wystarczy chociażby wejść na stronę codepen.io i naszym oczom ukażą się designerskie obrazki, które wcześniej uważalibyśmy za możliwe do stworzenia tylko w Photoshopie; skomplikowane, emanujące szeroką gamą kolorów animacje i multum innych rzeczy związanych z web developmentem. Możemy odnieść wrażenie, że trzeba być artystą z pokaźną dozą finezji, żeby tworzyć dzieła (powiedzmy sobie szczerze) tego pokroju. Czy da się jednak osiągnąć coś podobnego rozmachu przy pomocy szczypty cierpliwości i odrobiny ograniczeń?

lion

Ten lew stworzony jest dokładnie z 28 kół. Różnych rozmiarów i kolorów, ale tak, tylko z kół. Inspiracją była praca Omar'a Ichigo z serwisu dribbble.com, gdzie graficy i designerzy mogą pochwalić się swoimi pracami z innymi ludźmi z branży, a które to projekty często wykorzystują developerzy z CodePena, przekuwając projekt graficzny w żywy model.

lion2

Sam pomysł wydał mi się ciekawy z powodu tego jednego ograniczenia: dostępnym zasobem są tylko koła. Bo kiedy jesteśmy czymś ograniczeni, musimy myśleć kreatywnie, jak wykorzystać dostępne materiały i środki w najlepszy możliwy sposób.

<div id="lion">
	<div id="crown" class="circle"></div>
	<div id="cut-one" class="circle"></div>
	<div id="cut-two" class="circle"></div>
	<div id="cut-three" class="circle"></div>
	<div id="fix" class="circle"></div>
	<div id="jewel-one" class="circle"></div>
	<div id="jewel-two" class="circle"></div>
	<div id="jewel-three" class="circle"></div>
	<div id="jewel-four" class="circle"></div>

Sam html jest dziecinnie prosty. Każdy element lwa ma być kołem, zatem każdy posiada klasę .circle , aby to odzwierciedlić. Pozycja i wielkość konkretnych kół to już jednak sprawa indywidualna i ciężko byłoby ustalić jakieś wartości pasujące dla większej liczby elementów. Stąd każde koło ma dodatkowo indentyfikator o sensownej nazwie, w celu odwołania się do tego konkretnego elementu w CSS-ie.

Samo stylizowanie kół poprzez nadawanie im rozmiaru, koloru i położenia to sporo powtarzalnej pracy, dlatego warto w tym miejscu skorzystać z jakiegoś preprocesora, np. z SASS i stworzyć sobię mixin, czyli fragment kodu do wielokrotnego użytku.


@mixin basic-circle($circle-size, $left, $top, $background) { 
width: $circle-size * $size; 
height: $circle-size * $size; 
left: $left * $size; 
top: $top * $size; 
background: $background; 
} 

Dzięki temu zabiegowi, możemy ustawić te kilka wartości za jednym razem, w taki sposób:


#crown { 
@include basic-circle(.5, 0, -.6, $lion-color);
 }

Pisanie za każdym razem tych 5-ciu atrybutów CSS dla każdego z 28 kół tworzących lwa byłoby niesamowicie męczace, prawda? Teraz jest to nieco ułatwione. Pozostało jedynie powtórzyć metodą prób i błędów ustalanie wartości dla pozostałych kółek i... No i to... właściwie tyle. Bo o to właśnie chodzi. Nie potrzeba było żadnej magii, skomplikowanych obliczeń, jedynie odrobina samozaparcia i czasu, by stworzyć coś aspirującego do miana sztuki. Często wystarczy tylko determinacja i ciężka praca by osiągnąć wymierne efekty.

Pamiętajmy o tym na co dzień!


O autorze

Filip Konieczny - student drugiego roku Informatyki na Politechnice Warszawskiej. Fanatyk programowania, w szczególności JS'a. Na tym polu jego podstawowa technika bojowa składa się z uczenia nowych rzeczy i robienia wszystkiego samemu.