Obrotowy adres, czyli Roll Link

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. Czytaj dalej Obrotowy adres, czyli Roll Link

Nowy sposób prezentacji postępu i użycia – Progress Ring

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. Czytaj dalej Nowy sposób prezentacji postępu i użycia – Progress Ring

Flexible boxes, czyli elastyczne pojemniki

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.

Czytaj dalej Flexible boxes, czyli elastyczne pojemniki