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.

[html]
<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>
[/html]

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.

[css]

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

[/css]

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

[css]

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

[/css]

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.

TEMATY:
Najświeższe artykuły