Jestem programistą-samoukiem oraz entuzjastą technologii webowych. Chciałem połączyć przyjemne z pożytecznym i zapragnąłem zrobić coś, by - dobrze się bawiąc - zdobywać wiedzę i rozwijać własne umiejętności.

Powstało pytanie: co by tu zrobić? Z pomocą przyszedł wiszący obok biurka szalik FC Barcelony - stwierdziłem, że logo FCB wykonane z użyciem HTML i CSS będzie po pierwsze ciekawym wyzwaniem (te wszystkie krzywizny wymagają zastosowania nowinek, które przynosi CSS3), po drugie swoistym hołdem dla tego wspaniałego (Więcej niż) Klubu. I'm self-didact programmer and web technologies enthusiast. I wanted to combine business with pleasure and do something what would provide possibility to acquire knowledge and develop skills (and additionally - have a good time).

Question was: what to do? FC Barcelona's scarf hanging next to the desk helped me - I found that FCB logo made using HTML and CSS will be firstly interesting challenge (all those curves require innovations that brings CSS3), secondly kind of tribute to this great (More than a) Club.

Logo wykonane jest w 99% z elementów HTML stylizowanych za pomocą CSS (ten 1% to specjalnie przygotowana "czcionka" skonwertowana na standard webowy).

Aby uzyskać te wszystkie krzywizny i kształty należało skorzystać przede wszystkim z takich właściwości CSS jak border-radius, transform (rotate, scale), a także trochę bardziej standardowych, ale równie potrzebnych position oraz overflow.

Całość została wzbogacona animacją CSS3 (kręcąca się piłka, po najechaniu kursorem myszy).

Logo wyświetla się poprawnie tylko w przeglądarkach, które obsługują wszystkie potrzebne właściwości CSS. Logo is made in 99% with HTML elements styled with CSS (this 1% is a specially prepared "font" converted to web standard).

To achieve all the curves and shapes, primarily had to be used CSS properties such as border-radius, transform (rotate, scale), and a little more standard, but also necessary position and overflow.

The whole is enriched with CSS3 animation (the spinning ball, on mouse hover)

Logo displays correctly only in browsers that support all the required CSS properties.