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 »
Autor: s4007 o 11:42 1 komentarze
Etykiety:

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 »
Autor: s4007 o 09:57 0 komentarze

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.  


Autor: s4007 o 00:46 0 komentarze

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}
Autor: s4007 o 00:31 0 komentarze

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 »
Autor: s4007 o 00:22 0 komentarze
Etykiety: ,
Subskrybuj: Posty (Atom)