1 Z CSS3 szybciej i przyjemniej Marta Piasecka,
2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki nie zaciągną się obrazki <div class= custombg > <div class= custombgtop > <div class= custombgbtm >... </div> </div> </div>
3 Zaokraglone--narozniki border-radius: 5px 3.0+ 10.5+ 6.0+ 9+ 5+ http://css3generator.com/
4 promień dla pionowej krawędzi border-radius: 20px / 5px promień dla poziomej krawędzi lewy górny i prawy dolny narożnik border-radius: 25px 2% lewy dolny i prawy górny narożnik border-top-left-radius możliwość zapisu osobno dla każdego narożnika
5 Przezroczystosci - tło z przezroczystością jako obrazek png24 - przezroczysty tekst lub obramowanie tylko jako gotwy obrazek background: url( blackbg-075.png ) 0 0 repeat;
6 Przezroczystosci rgba(100, 0, 250, 0.7) 3.0+ 10.0+ 4.0+ 9+ 3.1+ http://css3generator.com/
7 wszelakie zastosowanie, zarówno do tła jak i obramowania czy koloru tekstu background: rgba(100, 0, 255,.2) border: 1px solid rgba(0, 0, 0,.3) color: rgba(255, 255, 255,.5) można używać wartości RGBA lub HSLA rgba hsla
8 Rzucanie--cienia-przez--tekst - tekst wstawiony jako obrazek z cieniem lub jako tło - możliwość symulacji małego cienia poprzez zduplikowanie tekstu i wypozycjonowanie elementu z niewielkim przesunięciem np 1px
9 Rzucanie--cienia-przez--tekst text-shadow: 5px 5px 2px #000 3.5+ 9.6+ 4.0+ brak 4.0+ http://css3generator.com/
10 odsunięcie cienia w poziomie odsunięcie cienia w pionie text-shadow: 5px 3px 1px white promień rozmazania cienia kolor - tylko cień na zewnątrz - do jednego tekstu można zastosować kilka cieni (wartości kolejnych dajemy po przecinku) text-shadow: 0 0 3px #fff, 0 0 7px #fff;
11 Rzucanie--cienia-przez--obiekt - cień wstawiony jako obrazki tła - dodatkowe elementy rysujące tło - więcej kodu html <div class= custombg > <div class= custombgtop > <div class= custombgbtm >... </div> </div> </div>
12 Rzucanie--cienia-przez--obiekt box-shadow: 1px 1px 5px black 3.5+ -moz- 10.5+ 4.0+ -webkit- 9+ 3.1+ -webkit- http://css3generator.com/
13 odsunięcie cienia w poziomie odsunięcie cienia w pionie box-shadow: 5px 3px 1px rgba(0,0,0,0.5) promień rozmazania cienia kolor cienia box-shadow: 5px 3px 5px -10px black odsunięcie początku rozmazania cienia, sprawia, że cień może być mniejszy/większy niż obiekt box-shadow: 5px 3px 5px black inset cień do środka obiektu
14 - do jednego elementu można zastosować kilka cieni (wartości kolejnych dajemy po przecinku) box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 1px rgba(255,255,255,.3) inset, 0 10px rgba(255,255,255,.2) inset, 0 10px 20px rgba(255,255,255,.25) inset, 0-15px 30px rgba(0,0,0,.3);
15 Wielokrotne--tlo - do jednego elementu można zastosować kilka obrazków tła (wartości kolejnych dajemy po przecinku) 3.6+ 10.5+ 1.0+ 9+ 3.2+ background: url(bg001.png) top left repeat-x, url(bg002.png) 0 0 no-repeat, url(bg003.png) bottom center no-repeat, #333;
16 Co---mozna---wyczarowac http://dev.opera.com/.../beautiful-ui-styling-with-css3 http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/
17 Stylowanie--n tych--elementów - konieczność dopisania klas przy elementach, które mają mieć inne stylowanie - dodatkowe programowanie <ul> <li class= odd ></li> <li></li> <li class= odd elem3 ></li> <li></li> <li class= odd ></li> <li class= elem3 ></li> </ul>
18 Stylowanie--n tych--elementów nowa pseudoklasa :nth-child ( odd ) 3.5+ 9.5+ 2.0+ 9+ 3.1+
19 każdy nieparzysty element :nth-child ( odd ) można wpisać formułę z niewiadomą n :nth-child ( 3n+1 ) każdy parzysty element div:nth-child ( even ) {background: #000;}
20 zaczyna liczyć elementy od końca :nth-last-child() liczy elementy tego samego typu (np tylko div) :nth-of-type()
21 Stylowanie--wg--adresu--Url - zmiana styli przy kliknięciu w link z #kotwicą jest możliwa tylko poprzez JS
22 Stylowanie--wg--adresu--Url nowa pseudoklasa :target 3.5+ 9.5+ 2.0+ 9+ 3.1+ http://leaverou.me/ft2010/
23 http://leaverou.me/ft2010/ - kod w css umożliwia pokazanie odpowiedniego slajdu wg nazwy w linku (#hash).slide { z-index:1; opacity:0; }.slide:target { z-index:100; opacity:1; }
24 Niestandardowa--czcionka - napisy zrobione jako obrazki - użycie dodatków podmieniających dynamicznie tekst na obrazki z tekste lub flash z odpowiednią czcionką
25 Niestandardowa--czcionka @font-face 3.5+ 10.1+ 4.0+ 6+ 3.2+ http://lostworldsfairs.com/
26 @font-face { nazwa czcionki (będzie używana w opisie styli) font-family: Custom Font ; src: url( customfont.eot? ) format( eot ), url( customfont.ttf ) format( truetype ), url( customfont.woff ) format( woff ); } pliki z czcionką WOFF - nowy uniwersalny format pliku z czcionką dla internetu, zalecany przez W3C p {font-family: Custom Font ;}
27 Animacje - wprowadzenie animacji, która trwa przez określony czas wymaga podpięcia biblioteki JS i wpisania wymaganego kodu - przeglądarka musi ściągnąć pliki biblioteki - otwieranie strony trwa dłużej
28 Animacje transition: 2s opacity linear 4.0+ -moz- 10.5+ -o- 3.0+ -webkit- 10+ -ms- 3.2+ -webkit- http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
29 co ma być animowane, można wpisac all dla wszystkich własności transition: 5s height ease-out czas trwania animacji sposób animowania, można pominąć wtedy przyjmowany jest linear transition: 1s 2s opacity czas opóźnienia animacji - do jednego elementu można zastosować kilka animacji (wartości kolejnych dajemy po przecinku) - brakuje najpopularniejszej animacji - z display:none do display:block przy zmianie wysokości lub przezroczystości
30 Jak---korzystac - jeśli przeglądarka nie zna danego pojęcia CSS to go nie wyświetli - jeśli jakaś właściwość jest zdefiniowana więcej niż raz dla tego samego elementu, przeglądarka wyświetli ostatnią (lub najważniejszą) Kolory Zapisz właściwość z kolorem standardowym a po niej napisz tę samą właściwość z kolorem z przezroczystością. Jeśli przeglądarka nie zrozumie rgba wyświetli wersję pierwszą. color: #000; color: rgba(0, 0, 0,.7);
31 Przedrostki---przegladarek Niektóre właściwości wymagają na razie użycia przedrostków, specyficznych dla producenta przeglądarki. W css wypisz wersje z prefiksami a jako ostatnią wstaw wersję ogólną. -moz-transition: 1s ease-in; -webkit-transition: 1s ease-in; -o-transition: 1s ease-in; transition: 1s ease-in; Specyfikacja--Css3 http://www.w3.org/tr/css3-roadmap/
32 Ciekawe---linki http://dev.opera.com/articles/tags/css3/ http://leaverou.me http://www.css3.info http://www.css3.com http://css3.pl http://css3generator.com http://www.w3schools.com/css3/
33 Pobierz--pdf http://www.insys.pl/files/prezentacja-css3-pdi.pdf Dziekuje Marta Piasecka www.insys.pl