Podstawy CSS3 - prezentacja

CSS3 - kaskadowe arkusze stylów, poziom 3

język opisujący wygląd strony
CSS3 jest nowy, szybko się rozwija
CSS3 daje duże możliwości
nie wszystkie przeglądarki go wspierają
aktualnie używane przeglądarki internetowe: Firefox 7, Chrome 14, Safari 5.1, Opera 11.5, Internet Explorer 9.

Cień tekstu

Teoria: text-shadow: h-shadow v-shadow blur color;

Praktyka: text-shadow: 2px 2px 5px #666;

Przykład: text-shadow: 0px 0px 0px #fff;

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 4+, Opera 10.6+, IE 10+

Cień elementu

Teoria: box-shadow: h-shadow v-shadow blur spread color inset;

Praktyka: box-shadow: 2px 2px 5px #ccc;

Przykład: box-shadow: 0px 0px 0px #fff inset;

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 5.1+ (Safari 3.2+ z -webkit-), Opera 10.6+, IE 9+

Zaokrąglone rogi

Teoria: border-radius: topleft topright bottomright bottomleft;

Praktyka: border-radius: 5px;

Przykład: border-radius: 0px;

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 5+ (Safari 3.2+ z -webkit-), Opera 10.6+, IE 9+

Własne czcionki

Teoria: @font-face { font-family: fontName; src: url(fontUrl); } elem { font-family: fontName; }

Praktyka: @font-face { font-family: myFont; src: url('maven.ttf'); } div { font-family: myFont; }

Przykład: font-family: ;

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 3.2+, Opera 10.6+, IE 9+ (IE 6+ z .eot)

Przezroczystość

Teoria: opacity: value;

Praktyka: opacity: 0.7;

Przykład: opacity: 1.0;

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 3.2+, Opera 10.6+, IE 9+ (IE 6+ z filter)

Wielokrotne tła

Teoria: background: url(imageURL) atrybuty, url(imageURL) atrybuty, ...;

Praktyka: background: url(./img/bg.jpg), url(./img/item.jpg) top left no-repeat;

Przykład: /*background: url(./img/bg.jpg), url(./img/item.jpg) top left no-repeat;*/

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 3.2+, Opera 10.6+, IE 9+

Gradienty

Teoria: w zależności od przeglądarki

Praktyka: background-image: linear-gradient(top, red 30%, green 60%, blue 80%);

Przykład: //background-image: linear-gradient(top, red 30%, green 60%, blue 80%);

Przeglądarki: Częściowo. Firefox 4+ (-moz-), Chrome 11+ (-webkit-), Safari 5.1+ (-webkit-, częściowo od 4.0), Opera 12+ (-o-, częściowo od 11.1), IE 10+ (-ms-)

Selektory

Selektory struktury: :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, ...

Selektory formularza: :enabled, :disabled

Przykład: ul:nth-child(even) { background: red; }

Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 3.2+, Opera 10.6+, IE 9+

Transformacje

Teoria: transform: scale(num) rotate(deg) skew(deg,deg) translate(px,px);

Praktyka: transform: scale(0.8) rotate(5deg) skew(10deg, 15deg) translate(10px, 30px);

Przykład: transform: scale(1.0) rotate(0deg) skew(0deg, 0deg) translate(0px, 0px); transform-origin: 0% 0%;

Przeglądarki: Częściowo. Firefox 4+ (-moz-), Chrome 11+ (-webkit-), Safari 3.2+ (-webkit-), Opera 10.6+ (-o-), IE 9+ (-ms-)

Animacje z transition

Teoria: transition: co ile_czasu jaki_efekt;

Praktyka: -moz-transition: color 1s ease-out;

Przykład: transition: color 1s ease-out;

Przeglądarki: Częściowo. Firefox 4+ (-moz-), Chrome 11+ (-webkit-), Safari 3.2+ (-webkit-), Opera 10.6+ (-o-), IE 10+ (-ms-)

Animacje z animation

Teoria: animation: animacja czas tryb; @-keyframes nazwa { animacja }

Praktyka: -moz-animation: pulsowanie 3s infinite alternate; @-moz-keyframes pulsowanie { from { font-size: 80%; } to { font-size: 180%; } }

Przykład: //animation: pulsowanie 3s infinite alternate;

Przeglądarki: Częściowo. Firefox 5+ (-moz-), Chrome 11+ (-webkit-), Safari 4+ (-webkit-), Opera n/a, IE 10+ (-ms-)

...i wiele więcej!

word-wrap, box-sizing, text-overflow, colors, media queries, background-image, multiple column layout, border images, 3D transforms, object-fit/object-position.