CSS4 użyteczne kształty i figury
W poprzednich częściach artykułu zaprezentowano elementarne kształty i figury geometryczne rysowane za pomocą kodu CSS. Opierając się na wcześniejszych przykładach i najnowszych możliwościach języka CSS4, poniżej zaprezentowano troszeczkę bardziej zaawansowane struktury, bazujące jedynie na definicjach kaskadowych arkuszy stylów.
Bieżący artykuł „CSS4 zaawansowane kształty” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS formy i struktury tworzone za pomocą kodu.
Przykład 43: serce
Serce to popularny symbol, który wykorzystywany jest m.in. jako przycisk „dodaj do ulubionych”. Aby zbudować serce, należy skorzystać z dwóch prostokątów zaokrąglonych na jednym boku za pomocą właściwości border-radius i obróconych o kąt 45 stopni przy użyciu transform: rotate( deg ).
Przykład 44: łza, kropla
Łzę można narysować, wykorzystując przykład 36, w którym narysowano stożek. Kropla to inaczej stożek, który ma dodatkowo zaokrąglone boki za pomocą właściwości border-radius.
Przykład 45: Facebook (wersja 1)
Logotyp facebooka, to jeden z przykładów dobrze zaprojektowanego znaku graficznego firmy. Jest prosty, łatwo rozpoznawalny i bez większego wysiłku można go narysować. Aby stworzyć logotyp FB, należy skorzystać z selektorów :before oraz :after.
Przykład 46: Facebook (wersja 2)
Nowa, odświeżona wersja logotypu Facebooka, zbudowana na tej samej zasadzie, co poprzedni przykład.
Ciąg dalszy nastąpi…
