Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

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

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize

Polish (Polski) translation by Krzysztof Kaptur (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

Border-radius

Zobacz Demo

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.

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.

Circles

Zobacz Demo

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

2. box-shadow

Box-Shadow

Zobacz Demo

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

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ć.

Multiple box shadows

Zobacz Demo

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

CSS

Cool Shadows

Zobacz Demo

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

3. text-shadow

Text-shadow

Zobacz Demo

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)

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):

Text Outline Zobacz Demo

4. Text-Stroke

Text-Stroke

Zobacz Demo

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.

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).

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

Multiple Background Images

Zobacz Demo

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.

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.

6. background-size

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

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?

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.

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.

Text-Overflow

Zobacz Demo

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

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

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.

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.

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

Jak narazie nie ma tego wiele.

Flexible Box Model

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.

Flexbox Example 2

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.

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.

Example 3 of Flexible Box Model

Zobacz Demo

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.

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

Możliwe wartości

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

Zobacz Demo

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

CSS

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ł.

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.

centered

Krok 3. Stylizacja pojemnika

Teraz nadamy styl naszym "kartom":

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

styling the box

Krok 4. Efektywny cień

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

effective shadows

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ń.

styling the children divs

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.

fixing the front-side

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.

rotating the card

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.

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

Final product

Zobacz efekt końcowy (najlepiej w przeglądarce Webkit).

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.