Kategoria: CSS

Kategorie
CSS Lab

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”
Kategorie
CSS Przemyślenia

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”
Kategorie
CSS Lab

Symbole Spinning w 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.

Czytaj dalej „Symbole Spinning w CSS3”
Kategorie
CSS

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.

Kategorie
CSS Porady

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”
Kategorie
CSS

Przezroczysty tekst w kolorze tła

Podczas jednej z luźnych rozmów w pracy okazało się, że kolega potrzebuje efektu przezroczystego tekstu, przez który przebija obraz tła. Wtedy przypomniałem sobie o pewnej technice, którą dawno temu znalazłem w sieci. Nie pamiętam autorki tego triku, ale w kilku przypadkach sprawdza się przednio.

Czytaj dalej „Przezroczysty tekst w kolorze tła”
Kategorie
CSS Przemyślenia

Style kaskadowe zorientowane obiektowo

W grudniu 2011 roku Louis Lazaris poruszył na łamach Smashing Magazine temat stylów kaskadowych zorientowanych obiektowo. Z technicznego punktu widzenia nie istnieje taki sposób zapisu lub definiowania arkuszy stylów kaskadowych. Spójrzmy jednak na tę kwestię nieco szerzej.

Czytaj dalej „Style kaskadowe zorientowane obiektowo”
Kategorie
CSS XHTML

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”