Kaskadowe arkusze stylów CSS - Nowinki i nowe możliwości: 2011

czwartek, 16 czerwca 2011

Animowane menu css3

Witam,
ostanio przeglądając tutoriale dotyczące css3 trafiłem na ciekawy tutorial pokazujący jak stworzyć animowane menu za pomoca css3. W css2 potrzebowaliśmy plików graficznych aby stworzyć buttony z gradientem - CSS3 pozwala to zrobić nie używając JPGów. Niestety tutorial jest w języku angielskim - myślę że dla większości to nie problem. Jednak postaram się w najbliższym czasie przetłymaczyć ten turtorial i wrzuce go na mojego bloga.

TUTORIAL - Język Angielski

czwartek, 19 maja 2011

Kaskadowe Arkusze Stylów CSS - podstawy

Zastanawiacie się pewnie w jaki sposób można panować z jednego pliku nad wyglądem stron www (kolory czcionki, kolory tła, układem strony, zdjęciami, tekstem i wszystkim co jest tylko widoczne na stronie) - zachowując poprawną strukturę kodu xHTML.

Odpowiedź jest prosta - używamy do tego CSS
(Cascading Style Sheets) Kaskadowe Arkusze Stylów

Zapewne znacie takie tagi xHTML jak <strong>, <center> i <font>. Chcąc ustawić tło na stronie korzystaliście z takiej składni <body background="tlo.jpg">. Zapomnijcie o nich! CSS został stworzony po to, żeby sterować wszystkimi atrybutami odpowiedzialnymi za efekty wizualne.

Styl CSS to zbiór atrybutów (reguł) określających sposób wyświetlania strony www.

Czytaj więcej »

Wiersz na całą szerokość przeglądarki

Wiersz na całą szerokość przeglądarki (Full Browser Width Bars) - By Chris Coyier

Element bloku jest naturalnie szeroki taki jak jego nadrzędny blok np jeśli #container jest szerokości 1000px to i element bloku będzie też takiej szerokości.

Chcielibyśmy zrobić tak, aby element rozciągnąć się na całą szerokość okna przeglądarki, ze względów estetycznych, a tekst ograniczyć wewnątrz aby na każdej rozdzielczości był czytelny.

Tak to ma wyglądać:

Czytaj więcej »

Nowe narzędzia i techniki CSS

CSS3 Paski postepu - link do tutorialu

Paski postępu stworzone przez Chrisa Coyier'a, które nie używają żadnych zdjęć - bazuje tylko na CSS3. W przeglądarkach, które nie obsługują CSS3, paski będą bardziej uproszczone.

Hover - pojawiający się box do edytowania

Tutorial wykonany przez Chrisa Coyiera, który pokazuje nam jak łatwo dodać stan np panel do edytowania postów. W tym przypadku hover jest stosowany do całego elementu, ale panel pojawia się nam w prawym górnym rogu.

Obramowanie tekstu za pomoca css -webkit-text-stroke

Jednym z najwiekszych braków CSSa jest to że obramowania "border" możemy twożyć tylko w kształcie prostokąta. Nową nadzieją jest komenda -webkit-text-stroke, która nadaje obramowanie dla tekstu.

Przykład

1h3 {
2    color: transparent;
3    -webkit-text-stroke: 4px red;
4}

Eksperymentalne komendy CSS3: -webkit-mask

Ten obiekt jest dość obszerny, więc szczegółowy opis wykracza poza zakres tego artykułu i jest z pewnością warty dokładniejszej analizie, zwłaszcza, że może to okazać się oszczędnością czasu w praktycznych zastosowaniach.

-webkit-maska pozwala na zastosowanie maski do elementu, co pozwala na tworzenie wycięcia o dowolnym kształcie. Maska może być CSS3 gradient lub półprzezroczystych PNG.

Czytaj więcej »