HTML5 i CSS3 pojawiają się w aplikacjach i serwisach internetowych coraz częściej. Nie dziwi to ani trochę, skoro producenci przeglądarek wspierają coraz więcej standardów sieciowych w kolejnych wydaniach swoich produktów. Jak zwykle podczas poszukiwań inspiracji w sieci znalazłem ciekawy przykład wykorzystania nowych właściwości stylów kaskadowych.
Kategoria: Lab
Podczas luźnych dyskusji o interfejsie użytkownika w firmowym panelu administracyjnym zapytano mnie.
Czy możliwe jest wycięcie danego fragmentu koła przy pomocy CSS?
Oczywiście jako członek zespołu programistycznego od razu rzuciłem w odpowiedzi żelazną zasadę naszego zespołu, czyli Nie da się!. Szybko jednak okazało się, że to możliwe, a narysowanie wykresu kołowego w CSS, wcale nie jest tak trudne jak myślałem w pierwszej chwili. Wszystko to kwestia odpowiedniego podejścia i użycia dostępnych środków, czyli właściwości clip z CSS 2.1, a także border-radius oraz transform z CSS3.
Podczas prac nad własnym projektem potrzebowałem specjalnych symboli znanych z programu Spinning®. Świadomy możliwości arkuszy stylów kaskadowych, a dodatkowo zainspirowany przez kształty CSS stworzyłem potrzebne elementy bez angażowania grafiki.
Podczas pracy przy jednym z projektów potrzebowałem elastycznej siatki z pojemnikami o stałym i proporcjonalnym jednocześnie rozmiarze. Oznacza to dokładnie tyle, że strona o płynnej szerokości zawiera elementy o stałej minimalnej szerokości, ale rozciągające się proporcjonalnie do momentu, w którym mogą znów w całości wypełnią dostępną przestrzeń. Brzmi skomplikowanie, dlatego najlepiej jeśli sprawdzisz wszystko w działaniu.