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

Wstępne przetwarzanie arkuszy stylów kaskadowych

Już w 2011 roku czytałem trochę na temat pre-procesorów CSS, głównie LESS, które swoje początki zawdzięcza SASS. Nie chodzi mi wcale o jakieś głębokie teorie i porównania, odnośnie funkcjonalności, wydajności i sposobu działania. Zdecydowanie bardziej zastanawiam się, na kierunkiem rozwoju takich narzędzi. Nie lubię tworzenia sztucznych, a czasem nawet komicznych tłumaczeń w języku polskim, dlatego w dalszej części artykułu będę używał wyrażeń preprocesory CSS oraz wstępne przetwarzanie CSS, co i tak brzmi dziwnie. Czytaj dalej Wstępne przetwarzanie arkuszy stylów kaskadowych

Struktura drzewiasta w nowoczesnym ujęciu

Często podczas przeglądania sieci znajdziemy coś, czego wcale nie szukaliśmy. Jeszcze częściej właśnie odkryty temat czy rozwiązanie, robi takie wrażenie, że od razy planujemy jego wykorzystanie w własnych projektach lub modyfikację do swoich potrzeb.

Struktura drzewiasta to bardzo podstawowy byt w świecie programistycznych, dlatego jego prezentacja czy używanie jest tak powszechne. Przykładowo struktura strony internetowej, dokumentu XML czy diagramu klas w UML przedstawia się dokładnie w tej formie. Jeśli jeszcze nie wiesz, o czym mowa to CSS3 Family Tree pokaże to w najprostszy sposób.

Mój pomysł na wykorzystanie do interaktywne diagramy klas w UML oraz graficzna mapa strony.

Diagnostyczne arkusze stylów kaskadowych

Znany na pewno ludziom z branży Eric Meyer napisał wiele książek na temat arkuszy stylów kaskadowych. Podczas czytania jego książki na temat tworzenia nowoczesnych układów stron WWW znalazłem ciekawy przykład wykorzystania tej technologii. Jak się okazuje pomysł na diagnostyczne style kaskadowe nie jest żadną nowością, bo Eric Meyer poruszał ten temat we wrześniu 2007 roku. Czytaj dalej Diagnostyczne arkusze stylów kaskadowych

Wyjustowane menu nawigacyjne

Podczas wprowadzania zmian w menu nawigacyjnym jednej ze stron konieczne było dodanie nowych łącz. Niestety sama konstrukcja nawigacji nie była idealna. Dwie listy nieuporządkowane z właściwością float: left;, z czego druga zawierała dodatkowo wyrównanie tekstu do prawej. Menu takie nie wygląda profesjonalnie, do tego dodawanie kolejnych linków zaburza ustalony wcześniej wygląd menu. A gdyby wszystkie łączą równo i proporcjonalnie wypełniały dostępną przestrzeń, czyli były wyrównane do lewej i prawej krawędzi strony internetowej. Czytaj dalej Wyjustowane menu nawigacyjne