Przez moment zastanawiałem się co by można przygotować, rozglądałem się po pokoju szukając natchnienia, aż wzrok zatrzymał się na wiszącym obok biurka szaliku FC Barcelony. „O, to, to, to!” pomyślałem i zabrałem się do roboty.

Od początku wiadomo było, że największym problemem będzie piłka oraz wszystkie górne krzywizny. W pierwszej wersji chciałem warstwowo ponakładać na siebie odpowiednio przygotowane elementy, na szczycie stosu byłyby takie z czarnym obramowaniem i białym wypełnieniem – taki sposób jednak sprawiałby, że całość byłaby prostokątem z białym tłem. Wykombinowałem więc sposób, który sprawił, że logo ma rzeczywisty kształt i może być umieszczone na dowolnym tle.

Zobacz DEMO, w dziale „Zabawa” można się bardzo obrazowo zapoznać z budową logo, a następnie przejść do kwestii technicznych…

Logo

Duża część elementów układanki zrealizowana jest z użyciem „przycinaków” – elementy tworzące odpowiednie łuki pozycjonowane i przycinane są tak, by wyświetlać tylko wymagany fragment (w logo są to elementy o klasie cropper które stosują overflow: hidden;). Oczywiście wymusza to stosowanie dodatkowych elementów HTML, ale moim celem nie było zmniejszenie objętości kodu, tylko po prostu zrealizowanie logotypu.

Jako, że niektóre krzywizny są asymetryczne, należało przeskalować niektóre elementy tak, by uzyskać odpowiednie zniekształcenie. Oczywiście można było to mniej więcej ocenić na oko, ale generalnie efekt uzyskany został żmudną metodą prób i błędów. Przykładowe skalowanie:

Dużo razy trzeba było również zastosować inną transformację CSS3: obrót. Przykładowo dolny „róg” jest zwykłym, wypełnionym kolorem, elementem z obramowaniem na dwóch brzegach, odpowiednio obróconym. Początkowo myślałem że można go zrealizować łatwiej, dwoma nałożonymi na siebie elementami, w których zastosował bym trik z uzyskaniem trójkąta za pomocą obramowań i zerowej szerokości/wysokości wnętrza (o tym kiedy indziej). Do CSS3 jednak bardziej pasowała transformacja 😉

Transformacje ostatecznie dopasowują elementy, ale zdecydowana większość z nich wstępnie musiała zostać przygotowana tak, by uzyskać zaokrąglony kształt. Odpowiednie dopasowanie promieni również wymagało kilku prób, zwłaszcza we wspomnianych przyciętych elementach, w których krzywizny są niesymetryczne. border-radius, bo o tej właściwości mowa, została wdrożona już dość dawno i jest już praktycznie w 100% wspierana (czasem z prefixami, starsze wersje IE pomijam):

Wbrew pozorom najbardziej kłopotliwe okazało się… dopasowanie czcionki, aby uzyskać odpowiedni napis FCB. Koniec końców, przygotowałem skrawek czcionki (3 litery) na podstawie oryginalnego logo i przekonwertowałem na standard webowy, co dało możliwość wykorzystania kolejnych nowinek CSS3:

Warto wspomnieć o jeszcze jednej nowince CSS3, którą tu upchnąłem dla zabawy, gdyż jako taka nie była potrzebna do zbudowania logo: animacja piłki. Animacje w CSS3 tworzy się deklarując właściwości w kluczowych klatkach animacji (np. rozmiar elementu), a potem „podpinając” taką deklarację do elementu:

Oczywiście aby uzyskać końcowy efekt większość elementów musiała zostać wypozycjonowana z użyciem position: absolute;, ale to nie jest żadna nowinka, więc nie ma sensu jej opisywać.

Na koniec ciekawostka: logo w formie obrazka „waży” 52kB, natomiast kod HTML, CSS oraz czcionka wyświetlające to samo – tylko 23kB, przy czym zupełnie nie oszczędzałem na długościach nazw elementów i klas, więc zapewne dałoby się to mocno zminimalizować (nie tracąc na jakości).

Layout Demo

Kilka dodatkowych, ciekawych rozwiązań zastosowałem za to w demie, myślę, że o niektórych przy tej okazji warto wspomnieć.

Wskaźnik pokazujący język używany na stronie jest wycieniowany wewnętrznie (co w połączeniu ze standardowym obramowaniem daje efekt lekkiej wypukłości), a wypełnienie gradientem daje dodatkowy efekt wizualny:

Gradient zastosowany jest też w nagłówku głównego kontenera, ale jest w nim coś ciekawszego: zasymulowane obramowanie czcionki. Uzyskane jest to w bardzo prosty sposób – czterema cieniami odpowiednio poprzesuwanymi w różnych kierunkach (wzbogacone delikatnym piątym cieniem dla efektu unoszenia się nad powierzchnią):

Nie działa w IE, który w ogóle nie obsługuje właściwości text-shadow.

W kilku miejscach użyta jest również właściwość box-shadow dzięki której cały element rzuca cień:

Ciekawe efekty można również osiągnąć z użyciem selektorów i pseudoelementów; w menu nawigacyjnym kropki oddzielające pozycje menu nie są zdeklarowane w HTML, tylko w CSS:

Więcej chyba nie ma sensu opisywać – kod jest przecież otwarty i każdy może sobie zajrzeć i przeanalizować to, co go zainteresuje 🙂

Posłowie

Nie, nie chodzi o sejmowych leniuchów 😉 Na koniec chciałem napisać, że zdaję sobie sprawę, że dla osób „nietechnicznych”, którzy nie mają pojęcia o HTML i CSS całe to logo nie jest niczym niezwykłym – kilka kresek i kolorków. Proszę sobie jednak wyobrazić, że logo uzyskano tymi samymi elementami i właściwościami, które na co dzień budują strony internetowe, które przeglądacie. Elementy z zasady prostokątne, tu przeobrażają się i układają w logiczną całość, którą dużo osób kojarzy z racji złotej ery tegoż Klubu.

Z góry dziękuję za każdą formę docenienia mojej pracy, za każde polubienie i udostępnienie! 🙂