Z CSS3 szybciej i przyjemniej

Transkrypt

1 1 Z CSS3 szybciej i przyjemniej Marta Piasecka,

2 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 3 Zaokraglone--narozniki border-radius: 5px

4 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 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 6 Przezroczystosci rgba(100, 0, 250, 0.7)

7 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 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 9 Rzucanie--cienia-przez--tekst text-shadow: 5px 5px 2px # brak

10 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 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 12 Rzucanie--cienia-przez--obiekt box-shadow: 1px 1px 5px black moz webkit webkit-

13 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 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 15 Wielokrotne--tlo - do jednego elementu można zastosować kilka obrazków tła (wartości kolejnych dajemy po przecinku) background: url(bg001.png) top left repeat-x, url(bg002.png) 0 0 no-repeat, url(bg003.png) bottom center no-repeat, #333;

16 16 Co---mozna---wyczarowac

17 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 18 Stylowanie--n tych--elementów nowa pseudoklasa :nth-child ( odd )

19 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 20 zaczyna liczyć elementy od końca :nth-last-child() liczy elementy tego samego typu (np tylko div) :nth-of-type()

21 21 Stylowanie--wg--adresu--Url - zmiana styli przy kliknięciu w link z #kotwicą jest możliwa tylko poprzez JS

22 22 Stylowanie--wg--adresu--Url nowa pseudoklasa :target

23 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 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

26 { 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 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 28 Animacje transition: 2s opacity linear moz o webkit ms webkit-

29 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 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 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

32 32 Ciekawe---linki

33 33 Pobierz--pdf Dziekuje Marta Piasecka