10 właściwości CSS3 które musisz znać

() translation by (you can also view the original English article)

Przerobiliśmy już 30 selektorów, które musisz zapamiętać; ale co z nowymi właściwościami CSS3? Pomimo, że większość nadal wymaga specjalnych przedrostków, już dzisiaj możesz korzystać z nich w swoich projektach. A właściwie, zachęcam Cię do tego!

Kluczem do tego jest zdefiniowanie na początku projektu, czy zgadzasz się na trochę inne przdstawienie strony pomiędzy przeglądarkami. Czy zgadzasz się by, np IE wyświetlało ostre rogi, zamiast ładnych zaokrąglonych? To Twój wybór. Jednak pamiętaj, że strony nie muszą wyglądać identycznie we wszystkich przeglądarkach. W ramach podsumowania tego artykułu, popracujemy nad jednym projektem.

1. border-radius

Najbardziej popularna własność CSS3, border-radius była niejako wizytówką CSS3. Podczas gdy designerzy byli przerażeni, że layout może wyglądać inaczej w różnych przeglądarkach, mały kroczek, jakim były zaokrąglone narożniki, był prostym sposobem na zwabienie ich!

Ironią jest to, że zupełnie normalne wydaje nam się tworzenie odmiennego wyglądu dla urządzeń mobilnych. Natomiast dziwi fakt, że niektórzy nie stosują się do tego przy urządzeniach desktopowych.

1	-webkit-border-radius: 4px;
2	-moz-border-radius: 4px;
3	border-radius: 4px;

Zapamiętaj, że Safari i IE9 wdrożyły oficjalną składnię `border-radius`.

Okręgi

Niektórzy z Was mogą być nieświadomi tego, że korzystając z tej właściwości możemy tworzyć okręgi.

1	-moz-border-radius: 50px;
2	-webkit-border-radius: 50px;
3	border-radius: 50px;

...I jeśli chcemy się trochę zabawić, możemy wykorzystać Flexible Box Model (szczegóły w #8) by wycentować tekst znajdujący się w okręgu poziomo jak i pionowo. Wymaga to trochę kodu, ale tylko z powodu potrzeby wypisywania przedrostków.

display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* wartość domyślna, więc prawdę mówiąc, tutaj zbędna */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;

2. box-shadow

Następnie mamy wszechobecny box-shadow, który pozwala na nadanie głębi wybranemu elementowi. Tylko nie przesadzaj z wartościami!

1	-webkit-box-shadow: 1px 1px 3px #292929;
2	-moz-box-shadow: 1px 1px 3px #292929;
3	box-shadow: 1px 1px 3px #292929;

box-shadow przyjmuje cztery parametry:

x-offset (oś x)
y-offset (oś y)
blur (rozmycie)
color of shadow (kolor cienia)

Wielu nie zdaje sobie sprawy, że możemy nadać elementowi kilka właściwości box-shadows jednocześnie. Może to prowadzić do naprawdę interesujących efektów. W poniższym screenshocie użyłem niebieskiego i zielonego cienia by je wyróżnić.

1	-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
2	-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
3	box-shadow: 1px 1px 3px green, -1px -1px blue;

Mądre Cienie

Używając cieni z pseudo-klasami ::before i ::after, możemy stworzyć bardzo ciekawe efekty. Oto jedna na początek:

HTML

1	<div class="box">
2	<img src="tuts.jpg" alt="Tuts" />
3	</div>

CSS

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* schowaj cień za obrazek */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

   width: 70%;
   left: 15%; /* połowa z pozostałych 30% (sprawdź szerokość powyżej) */

   height: 100px;
   bottom:  0;
}

Chcesz więcej fajnych efektów? Zobacz ten tutorial na Nettuts+.

3. text-shadow

text-shadow jest jedną z kilku właściwości CSS3, w której możemy ominąć przedrostki. Musi być nadana tekstowi i podobnie jak box-shadow, zawiera cztery parametry:

x-offset (oś x)
y-offset (oś y)
blur (rozmycie)
color of shadow (kolor cienia)

1	h1 {
2	text-shadow: 0 1px 0 white;
3	color: #292929;
4	}

Obrys Tekstu

Podobnie jak w box-shadow, możemy nadawać elementowi kilka cieni, oddzielając je przecinkami. Np. powiedźmy, że chcesz stworzyć obrys dla tekstu. Co prawda webkit oferuje metodę stroke możemy jednak osiągnąć ten efekt na innych przeglądarkach stosująć poniższą metodę (która prawdę mówiąc nie jest taka ładna):

body { background: white; }

h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4. Text-Stroke

Bądź ostrożny z tą metodą. Przez ostatnie kilka lat tylko webkit ją wspierał (Safari, Chrome, iPhone).W rzeczywistości, chociaż mogę się mylić, 'text-stroke' nie jest jeszcze częścią specyfikacji CSS3.W tym wypadku, z białym tekstem, Firefox, wyświetli białą stronę. Możesz wykorzystać wykrywanie JavaScript do obejścia tego, albo upewnić się że kolor tekstu jest różny od koloru tła.

1	h1 {
2	-webkit-text-stroke: 3px black;
3	color: white;
4	}

Wykrywanie cechy

Jak możemy zapewnić jeden styl dla powiedźmy Firefoxa, a inny dla Safari i Chroma? Jednym rozwiązaniem jest wykrywacz.

Z wykrywaczem, możemy użyć JavaScript do sprawdzenia czy dana właściwość jest dostępna. Jeśli nie jest, stosujemy kod awaryjny.

Wróćmy do problemu z text-stroke. Ustawmy kolor awaryjny black dla wyszukiwarek które nie wspierają tej właściwości (aktualnie wszystko oprócz webkit).

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

Na początku tworzymy element h1. Później sprawdzamy czy -webkit-text-stroke jest dostępne dla tego elementu, poprzez atrybut style. Jeśli nie, to chwytamy nagłówek Hello Readers i zmieniamy jego color z białego na czarny.

Zwróć uwagę, że powyższe przykłady są bardzo ogólne. Jeśli chcesz zamienić kilka h1 na stronie, muszisz skorzystać z pętli while by przefiltrować każdy nagłówek i odpowiednio je zaktualizować.

Testujemy tylko dla webkit, a możliwe jest, że pozostałe przeglądarki w końcu zaczną wspierać text-stroke. Miej to na uwadze.

Jeśli chcesz bardziej pełny skrypt wykrywający cechy, zajrzyj na Modernizr.

5. Wielokrotne tła

Właściwość background została wprowadzona, by umożliwić wstawianie wielokrotnego tła w CSS3.

Stwórzmy przykład, który pokaże jak to działa. Z powodu braku odpowiednich obrazków w pobliżu, skorzystam z dwóch pochodzących z tutoriala, by ustawić nasze tło. Oczywiście, w swoim projekcie możesz wykorzystać tekstury albo nawet gradient dla tła.

1	.box {
2	background: url(image/path.jpg) 0 0 no-repeat,
3	url(image2/path.jpg) 100% 0 no-repeat;
4	}

Powyżej, korzystając z przecinka jako odstępu, wstawiamy dwa oddzielne obrazki tła. Zwróć uwagę, że pierwszy z nich ustawiony jest w górnym lewym rogu (0 0), a drugi w prawym górnym(100% 0).

Upewnij się że zapewniasz wyjście awaryjne dla przeglądarek, które nie obsługują wsparcia dla tej właściwości. Ominą one tę właściwość i zostawią puste tło.

Rekompensata dla starszch przeglądarek

By ustawić pojedyncze tło z dla starszych przeglądarek jak np. IE7, zadeklaruj background dwa razy: pierwszy dla starych przeglądarek i drugi jako nadpisanie. Ewentualnie możesz skorzystać z Modernizr.

.box {
/* awaryjnie */
background: url(image/path.jpg) no-repeat;

/* nowoczesne przeglądarki */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

Do niedawna byliśmy zmuszeni używać podstępów by zmienić rozmiar naszego obrazka w tle.

1	background: url(path/to/image.jpg) no-repeat;
2	background-size: 100% 100%;

Kod powyżej zmusi obrazek w tle do wypełnienia całej przestrzeni. Np. jeśli byśmy chcieli, by obrazek zajął cały element body niezależnie od szerokości okna przeglądarki?

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

To wszystko co musimy zrobić. background-size przyjmuje dwa parametry: odpowiednio szerokości x i y.

Podczas gdy ostatnie wersje Chrome i Safari wspierają background-size, nadal musimy korzystać z przedrostków w przypadku starszych wyszukiwarek.

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

Zobacz Demo

7. text-overflow

Rozwijana przez Internet Explorer właściwość text-overflow przyjmuje dwie wartości:

clip (ucięcie)
ellipsis (wielokropek)

Ta właściwość może być wykorzystana do wycięcia tekstu który wystaje poza pojemnik, jednocześnie dostarczając informacji użytkownikowi, jak wielokropek.

Czy wiesz, że Internet Explorer zapewnia wsparcie dla tej właściwości od wersji IE6? To oni ją stworzyli!

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}

W tym momencie, możesz rozważyć pokazanie całej zawartości kiedy użytkownik najedzie myszką na pojemnik.

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

Trochę dziwne jest, że nie ma (chyba, że się mylę) sposobu na zresetowanie text-overflow lub jej wyłączenie. By to "zasymulować", w :hover, ustawiamy white-space z powrotem na normal. To działa, poniewać funkcjonalność text-overflow jest od tego zależna.

Czy wiesz, że: Możesz samemu określić ciąg znaków, które będą użyte jako trzykropek. Robiąc to wyświetli się ciąg znaków reprezentujący przycięty tekst.

8. Flexible Box Model

Flexible Box Model, w końcu pozwala nam pozbyć się tych wszystkich float. Pomimo, że zrozumienie tej właściwości wymaga trochę pracy, to gdy już załapiesz, ma sens.

Zróbmy szybkie demo i stwórzmy dwukolumnowy layout.

<div id="container">

 <div id="main"> Główna zawartość </div>
 <aside> Zawartość z boku </aside>

</div>

Teraz CSS: na początku musimy określić container, który będzie traktowany jako box. Dodatkowo okręślę jakieś generalne rozmiary, skoro nie mamy żadnej zawartości.

 #container {
width: 960px;
    height: 500px; /* na potrzeby demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;

Następnie ustawmy różne kolory tła dla #main div, i aside.

#main {
   background: yellow;
}

aside {
   background: red;
}

Jak narazie nie ma tego wiele.

Jedna rzecz warta odnotowania to fakt, że kiedy ustawiamy display: box elementy dzieci zabiorą całą szerokość; taka jest domyślna wartość box-align stretch.

Zobacz co się stanie gdy dokładnie określimy szerokość zawartość #main.

1	#main {
2	background: yellow;
3	width: 800px;
4	}

Już trochę lepiej, ale nadal mamy problem z aside, które nie zabiera całej dostępnej przestrzeni. Możemy to zmienić korzystając z nowej właściwości box-flex.

box-flex nakazuje elementowi zabranie całej dostępnej przestrzeni.

 aside {
display: block;
    background: red;

   /* zabiera całą dostępną przestrzeń */
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
 }

Dzięki temu, niezależnie od szerokości #main, aside zajmie całą dostępną szerokość. Nie musisz już się martwić problemami z float, jak opadanie elementów poniżej głównej zawartości.

Jedynie zaczęliśmy temat. Zobacz świetny artykuł Paula Irisha, który to rozwija. Bądź ostrożny używając tej metody ponieważ nie jest w pełni wspierana w starszych przeglądarkach. W takim przypadku możesz skorzystać z wykrywacza lub Modernizr by wykryć i zapewnić konieczne wyjścia awaryjne.

9. Resize

Dostępna wyłącznie w Firefox 4 oraz Safari 3, resize -- część CSS3 UI -- pozwala określić wymiary textarea.

1	<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

Zwróć uwagę, że domyślnie przeglądarki webkit oraz Firefox 4 pozwalają ustawić rozmiar textareas w pionie jak i poziomie.

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

Możliwe wartości

both: Zmiana w pionie i poziomie
horizontal: Zmiana w poziomie
vertical:Zmiana w pionie
none: Wyłącza resize

10. Transition

Prawdopodobnie najbardziej odjechana właściwośc CSS3, pozwalająca dodawać animacje do elementów, bez używania JavaScript.

Mimo, że IE9 nadal nieobsługuje transition, to nie oznacz, że nie powinieneś tego używać.

Skopiujmy efekt, gdzie po najechaniu na link w pasku bocznym tekst przesunie się lekko w prawo.

HTML

1	<ul>
2	<li>
3	<a href="#"> Najedź na mnie </a>
4	</li>
5	<li>
6	<a href="#"> Najedź na mnie </a>
7	</li>
8	<li>
9	<a href="#"> Najedź na mnie </a>
10	</li>
11	<li>
12	<a href="#"> Najedź na mnie </a>
13	</li>
14	</ul>

CSS

 ul a {
-webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover {
    padding-left: 6px;
 }

transition przyjmuje trzy parametry:

Właściwość do zmiany. (Ustaw wartość na all jeśli to konieczne)
Czas
Tempo

Powodem, dla którego nie nadajemy transition bezpośrednio do hover jest to, że gdybyśmy tak zrobili, animacja miałaby efekt, tylko podczas najechania kursorem. Natomiast podczas opuszczania pola element wróciłby do swojego pierwotnego stanu, bez animacji.

Zobacz demo

Ponieważ tylko ulepszyliśmy kod, nie wyrządziliśmy żadnej szkody dla starszych przeglądarek

Końcowy projekt

Weźmy większość technik, których się nauczyliśmy i stwórzmy odjechany efekt. Przejrzyj najpierw efekt końcowy (najlepiej w przeglądarce Webkit).

Krok 1. Tagi

W naszym kontenerze .box dodajmy dwa divy: jeden na przód i jeden na tył.

<body>

   <div class="box">
  <div>Hello</div>
      <div> World </div>
   </div>

</body>

Krok 2. Centrowanie w poziomie i pionie

Następnie, chcę by nasza karta była dokładnie wycentrowana na monitorze. By to zrobić skorzystamy z Flexible Box Model. Upewnij się tylko, by wykorzystać Modernizr dla starszych przeglądarek.

Skoro nasza strona zawiera tylko tę kartę możemy skorzystać z body jako głównego pojemnika.

body, html { height: 100%; width: 100%; }

body {
    display: -moz-box;
    display: -webkit-box;
    display: box;

    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -moz-box-pack: center;
    -moz-box-align: center;

    -webkit-box-pack: center;
    -webkit-box-align: center;

    box-pack: center;
    box-align: center;
}

Krok 3. Stylizacja pojemnika

Teraz nadamy styl naszym "kartom":

 .box {
background: #e3e3e3;
    border: 1px dashed #666;
    margin: auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
 }

Zauważ, że zaleciliśmy temu elementowi wykonania wszystkich zmian stylu. Jeśli nastąpią, dokonamy zmian w ciągu jednej sekundy (transition: all 1s).

Krok 4. Efektywny cień

Następnie, jak nauczyliśmy się z artykułu, zamontujemy cień za pomocą pseudo-klasy ::after.

 .box::after {
content: '';
    position: absolute;

    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;

    z-index: -1;

    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
}

Krok 5. Stylizowanie dzieci div

W tym momencie dzieci divy znajdują się jeden na drugim. Nadajmy im position absolute, a następnie każmy zająć całą dostępną przestrzeń.

 .box > div {
background: #e3e3e3;

    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;


    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;

    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
 }

Krok 6. Naprawa "przodu"

Sprawdź obrazek u góry; zwróć uwagę jak domyślnie wyświetlany jest tył karty?Jest to spowodowane tym, że element znajduje się niżej w kodzie, dlatego dostaje wyższy z-index. Naprawmy to.

 /* Upewnij się, że najpierw widzimy przód */
 .box > div:first-child {
position: relative;
    z-index: 2;
 }

Krok 7. Rotacja karty

Teraz czas na zabawę; kiedy najeżdżamy kursorem na kartę, powinno się obrócić i pokazać tył (a przynajmniej umowny tył). By tego dokonać, używamy transformacji oraz funkcji rotateY.

 .box:hover {
-webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

Krok 8. Odwrócony tekst

Czy to nie wygląda świetnie? Ale teraz tekst jest odwrócony. Oczywiście dzieje się tak dlatego, że transformujemy kontener. Naprawmy to nadając rotację dziecku div o 180 stopni.

/* Schowaj przód kiedy najedzie kursorem*/
 .box:hover > div:first-child {
opacity: 0;
 }

 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

I dzięki tym ostatnim linijkom uzyskaliśmy porządany efekt!

Podsumowanie

Dziękuję za przeczytanie, oraz mam nadzieję że czegoś się nauczyłeś!

Ps: ze względu na to, że artykuł pochodzi z 2010 roku, niektóre z właściwości są obecnie zmienione.