Upiększenia: okrągłe brzegi i cieniowanie

W artykule tym przedstawię sposób tworzenia zaokrąglonych narożników oraz pokażę, jak wiele możliwości daje cieniowanie tekstu oraz dodawanie cienia pod pudełkami. Obydwa te efekty zrealizuję przy użyciu CSS. Nie będę używać w tym celu obrazków, lecz wykorzystam właściwości border-radius, box-shadow oraz text-shadow.

Właściwości te pojawiły się w wersji CSS3. Nie są one jeszcze w pełni obsługiwane przez wszystkie przeglądarki. Te, które je obsługują (Mozilla Firefox, Safari), używają specyficznych przyrostków, aby podkreślić, że właściwości te nie są jeszcze oficjalnie wspierane i wciąż trwają nad nimi prace. Przedrostki te to -webkit oraz -moz, dla, odpowiednio, Safari i Firefoksa. CSS używający tych właściwości nie będzie się wprawdzie walidował, jednak przeglądarki nie obsługujące takich właściwości po prostu je zignorują.

Zaokrąglone narożniki

Zacznijmy od zaokrąglonych narożników, efektu, który – w świecie CSS-owych prostokątów – wyjątkowo cieszy oko. Proszę zresztą rzucić okiem na obrazek:

Przykład 1

Oto przykład tekstu, który pojawi się w zaokrąglonym prostokącie:

    Ten tekst ma ładne i zaokrąglone narożniki - tak przynajmniej
    powinien wyglądać w przeglądarce Firefox oraz Safari.
    

Wyrenderowany tekst:

… oraz jego stylizacja:

 .rounded1 {
    background-color: #46719d;
    color: #eaf6b2;
    font-weight: bold;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }

Przykład 2 – trochę większe zaokrąglenia

Oto tekst:

    

    A to kolejny przykład:
    Ten tekst ma ładne i zaokrąglone narożniki - tak przynajmniej
    powinien wyglądać w przeglądarce Firefox oraz Safari.
    

Oto wyrenderowany przykład:

Oto stylizacja:

.rounded2 {
    background-color: #5593de;
    color: #eaf6b2;
    font-weight: bold;
    padding: 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 15px;
  }

Przykład 3: całkiem duże zaokrąglenie

Tekst:

    

       „He who receives an idea from me receives instruction himself without lessening mine, as he who lights his taper at mine, receives light without darkening me. ” -- Thomas Jefferson
    

Renderowanie:

„He who receives an idea from me receives instruction himself without lessening mine, as he who lights his taper at mine, receives light without darkening me. ” — Thomas Jefferson

Stylizacja:

 blockquote {
    margin: 1em 20px;
    padding: 15px;
    border: 2px solid #555;
    background-color: #f2f2f2;
    color: #555;
    font-size: 110%;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
  }

Przykład 4 – każdy narożnik stylizowany z osobna

Tekst:

    

    Można zaokrąglać tylko wybrane narożniki. W tym przykładzie
    zostały zaokrąglone: lewy górny i prawy dolny.
    

Renderowanie:

Stylizacja:

.warning {
    border: 5px solid #fc0;
    padding: 8px 10px;
    font-size: 120%;
    color: #d58616;
    font-weight: bold;
    background-color: #f1e36b;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
  }

Przykład 5 – chmurka

Tekst:

    

    Pozostawiając jeden narożnik bez zaokrąglenia można uzyskać
    efekt „dymka”, który może się przydać na przykład podczas stylizowania
    komentarzy.
    

Renderowanie:

CSS:

.comment {
   border: 1px solid #999;
    background-color: #d8d8f4;
    color: #999;
    padding: 15px;
    font-size: 80%;
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-bottom-left-radius: 15px;
  }

Cień pod tekstem

Deklaracja text-shadow pozwala na uzyskanie cienia pod tekstem – powtórzonego tekstu, delikatnie „rozmazanego” i przesuniętego względem oryginału.

Przykład 1 – rozmyty cień

Oto fragment HTML-a:

Przykład cienia pod tekstem - cień rozmyty

Tak wygląda ten fragment w przeglądarce:

… gdy zastosujemy stylizację:

  .sha1{
    text-shadow: 2px 2px 12px #888;
  }

Stylizacja polega na podaniu przesunięcia cienia względem tekstu oryginalnego (przesunięcie dodatnie określa kierunek w prawo lub w dół, przesunięcie ujemne określa kierunek w lewo lub w górę) oraz długości promienia rozmycia i koloru.

Przykład 2 – cień bez rozmycia

Gdy promień rozmycia wynosi zero, poniższy HTML:

Przykład cienia pod tekstem - cień bez rozmycia

zostanie wyrenderowany następująco:

A to odpowiednia reguła CSS:

  .sha1-noblur {
    text-shadow: 2px 2px 0 #888;
  }

Przykład 3 – poświata

Jeśli użyjemy czarnego tła, cień okaże się poświatą, co też daje całkiem ciekawy efekt:

Reguła CSS dla klasy glow:

.glow {
    text-shadow: 2px 2px 5px #fff;
    background-color: #000000;
    color: white;
    padding: 1em;
    font-size: 120%;
  }

Przykład 4 – rozmycie tekstu

Właściwość text-shadow może być użyta jako zwykłe rozmycie
tekstu – efekt uzyskuje się, ustalając wartości poziomego i pionowego przesunięcia cienia na zero:

CSS:

 .blur {
    text-shadow: 0px 0px 5px #000;
  }

Przykład 5

Można równiez używać wielu cieni na raz, co daje bardzo interesujące efekty kolorystyczne:

CSS:

.manyblurs {
    text-shadow: 0 0 4px white, 
    0 -5px 4px #FFFF33, 
    2px -10px 6px #FFDD33,
    -2px -15px 11px #FF8800,
    2px -25px 18px #FF2200;
 
    background-color: #fff;
    color: red;
    padding: 1em;
    font-size: 120%;
  }

Cień pod pudełkami

Specyfikacja dotycząca cieniów pod pudełkami pozwala na ustawienie wartości właściwości box-shadow w następujący sposób:

none | <shadow> [ <shadow> ]*

gdzie <shadow> może przyjmować wartość:

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Dwie pierwsze wartości <length> to przesunięcie cienia odpowiednio poziome i pionowe. Wartość dodatnia poziomego przesunięcia oznacza cień z prawej, ujemna zaś – z lewej strony względem stylizowanego pudełka. Podobnie z przesunięciem pionowym: wartość dodatnia to cień pod, a ujemna – nad pudełkiem. Trzecia wartość określa promień rozmycia, a czwarta – promień rozszerzenia, dzięki któremu możliwe jest zarówno tworzenie cienia większego od elementu (wartość dodatnia), jak i mniejszego od niego (wartość ujemna).

Kilka przykładów

Tak powinny wyglądać przykłady, które zostaną zamieszczone poniżej.

Przykładowa strona html wraz z wbudowanym arkuszem stylów zawiera dokładnie te przykłady: Pudełka z cieniem

Prosty cień

Spróbujmy utworzyć zielony cień pod zielonym pudełkiem (klasa simple). Pionowe i poziome przesunięcie wynosi 3px, a promień rozmycia 20px, kolor cienia to #357e13, taki sam, jak kolor tła pudełka.

Odpowiadający temu kod css:

.simple {
    -moz-box-shadow: 3px 3px 20px #357e13;
    -webkit-box-shadow: 3px 3px 20px #357e13;
    background-color: #357e13;
    color: #fff;
  }

Cień wewnętrzny

Czasami potrzebujemy umieścić cień wewnątrz pudełka.

Używamy wówczas słowa kluczowego inset :

.inset {
    -moz-box-shadow: inset 1px 1px 10px #357e13;
    -webkit-box-shadow: inset 1px 1px 10px #357e13;
  }

Inny ciekawy efekt:

.inset2 {
    -moz-box-shadow: inset 5px 5px 20px #fff;
    -webkit-box-shadow: inset 5px 5px 20px #fff;
   background-color: #000;
   color: white;
  }

Cień rozszerzenia

Oto cień mniejszy od pudełka (wartość czwartej składowej jest ujemna):

.spread {
    -moz-box-shadow: 0px 20px 10px -10px #357e13;
    -webkit-box-shadow: 0px 20px 10px -10px #357e13;
  }

A tutaj cień większy, niż pudełko:

.spread {
    -moz-box-shadow: 0px 20px 10px 5px #357e13;
    -webkit-box-shadow: 0px 20px 10px 5px #357e13;
  }

Stylizowanie pudełek polega więc na wyborze koloru (bądź kolorów – gdyż cienie można ze sobą łączyć, wymieniając je po przecinku), ustaleniu, czy cień ma być zewnętrzny czy wewnętrzny (inset), określeniu rozmiaru (promienia) rozmycia oraz promienia rozciągania.

  .many {
    -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow,
       -20px 15px 30px lime, -20px -15px 30px blue, 
       20px -15px 30px red;
    -webkit-box-shadow: 0 0 20px black, 20px 15px 30px yellow,
        -20px 15px 30px lime, -20px -15px 30px blue,
        20px -15px 30px red;
    margin-top: 50px;
    margin-bottom: 50px;
  }

Źródła

http://www.cssnewbie.com/easy-rounded-corners-with-border-radius/
http://hacks.mozilla.org/2009/06/text-shadow
http://hacks.mozilla.org/2009/06/moz-box-shadow