Dodajemy nowe właściwości CSS3 do naszego menu CSS

W tej części kursu CSS dodamy kilka nowych właściwości CSS3 do naszego pionowego menu CSS.

Dzięki właściwości text-shadow możemy dodać cień do tekstu, który znajduje się w danym elemencie HTML (wersja przeglądarki Internet Explorer wcześniejsza niż 10 nie interpretuje tej właściwości CSS).

Do reguły CSS, która odpowiada za wygląd elementów a, dodajemy właściwość text-shadow wraz z wartościami 1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA, dzięki czemu tekst, który będzie znajdował się w elemencie a, będzie posiadał kilka cieni jednocześnie.

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
  text-align:center;
  color:#00A0AA;
  text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
  font-size:18px;
  border:1px solid #FFF;
  background-image:url('obrazek.png');
  background-repeat:repeat-x;
}

Poniżej znajduje się wyjaśnienie wartości, które użyliśmy wraz z właściwością text-shadow.

  • 1px 1px - przesunięcie pierwszego cienia o 1 piksel w prawo oraz o 1 piksel w dół
  • 0 - wartość rozmycia pierwszego cienia
  • #FFF - kolor pierwszego cienia w zapisie heksadecymalnym
  • 1px 2px - przesunięcie drugiego cienia o 1 piksel w prawo oraz o 2 piksele w dół
  • 0 - wartość rozmycia drugiego cienia
  • #AAA - kolor drugiego cienia w zapisie heksadecymalnym
  • 1px 2px - przesunięcie trzeciego cienia o 1 piksel w prawo oraz o 2 piksele w dół
  • 6px - wartość rozmycia trzeciego cienia wynosząca 6 pikseli
  • #AAA - kolor trzeciego cienia w zapisie heksadecymalnym

Nasze pionowe menu CSS po dodaniu do niego nowej właściwości text-shadow, prezentuje się następująco:

Następnym krokiem w tej części kursu CSS będzie dodanie do elementów a nowego tła, którego zawartością będzie gradient promienisty. Tym razem nie będziemy korzystali z żadnej dodatkowej grafiki, ponieważ do utworzenia wspomnianego gradientu promienistego wykorzystamy funkcję radial-gradient(), którą możemy dodać do elementu HTML wraz z właściwością background-image (wcześniej wartością tej właściwości CSS, w naszej regule CSS, była wartość url('obrazek.png')).

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
  text-align:center;
  color:#00A0AA;
  text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
  font-size:18px;
  border:1px solid #FFF;
  background-image:url('obrazek.png');
  background-repeat:repeat-x;
  background-image:radial-gradient(ellipse at bottom, #FFF 0%, #DDD 100%);
}

Poniżej znajduje się wyjaśnienie wartości, które użyliśmy razem z funkcją radial-gradient().

  • ellipse - styl wyglądu tworzonego gradientu promienistego (kształt elipsy)
  • at bottom - przesunięcie tworzonego gradientu promienistego do dołu
  • #FFF 0% - zapis heksadecymalny koloru tła, od którego ma zostać rozpoczęte tworzenie gradientu promienistego oraz pozycja rozpoczęcia tworzenia danego koloru
  • #DDD 100% - zapis heksadecymalny koloru tła, do którego ma być tworzony gradient promienisty oraz pozycja zakończenia tworzenia danego koloru

Nasze pionowe menu CSS, po dodaniu gradientu promienistego do elementów a, prezentuje się następująco:

Oczywiście funkcja radial-gradient() nie musi być interpretowana przez wszystkie najpopularniejsze przeglądarki internetowe, ponieważ jest ona nowością w języku CSS, jednak o nic nie musimy się w tym momencie martwić, ponieważ w naszej regule CSS użyliśmy dwóch właściwości background-image.

Pierwsza właściwość background-image zawiera wartość url('obrazek.png'), dzięki czemu do elementu a jest dodawane tło obrazkowe, które wcześniej zapisaliśmy w pliku .png. Wartością drugiej właściwości background-image jest funkcja radial-gradient(), a więc przeglądarka internetowa w pierwszej kolejności będzie starała się użyć obrazka zapisanego w pliku .png, a następnie będzie starała się nadpisać istniejącą już właściwość background-image drugą właściwością background-image, której wartością, jest funkcja radial-gradient().

Jeżeli wspomniana czynność nie uda się danej przeglądarce internetowej (bo nie będzie ona interpretowała funkcji radial-gradiant()), to tłem elementów a pozostanie obrazek zdefiniowany w pliku obrazek.png. Warto zapamiętać tę sztuczkę.

Ponadto warto wiedzieć, że do tworzenia gradientów CSS3 możemy wykorzystać następujące narzędzie - colorzilla.

Ostatnią czynnością jaką wykonamy w tej części kursu CSS będzie dodanie cienia do elementu ul, jest to możliwe dzięki właściwości box-shadow.

Dodajemy właściwość box-shadow wraz z wartościami 0 6px 6px -6px #666 do reguły CSS, która odpowiada za wygląd elementu ul.

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  border:1px solid #CCC;
  width:250px;
  box-shadow:0 6px 6px -6px #666;
}

Właściwość box-shadow nie jest interpretowana przez przeglądarkę Internet Explorer w wersji wcześniejszej niż 9.

Poniżej znajduje się wyjaśnienie wartości, które użyliśmy razem z właściwością box-shadow.

  • 0 - brak przesunięcia cienia w prawo
  • 6px - przesunięcie cienia o 6 pikseli w dół
  • 6px - wartość rozmycia cienia
  • -6px - rozmiar cienia zmniejszony o 6 pikseli
  • #666 - kolor cienia w zapisie heksadecymalnym

Nasze pionowe menu CSS, po dodaniu do niego nowej właściwości box-shadow, prezentuje się następująco:

Finalny kod działu drugiego kursu CSS został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
        box-shadow:0 6px 6px -6px #666;
      }

      /* wygląd elementów - li */
      ul li {
        border-top:1px solid #CCC;
      }

      /* wygląd pierwszego elementu - li */
      ul li:first-child {
        border-top:none;
      }

      /* wygląd elementów - a */
      ul li a {
        display:block;
        text-decoration:none;
        background-color:#EEE;
        padding:10px;
        text-align:center;
        color:#00A0AA;
        text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
        font-size:18px;
        border:1px solid #FFF;
        background-image:url('obrazek.png');
        background-repeat:repeat-x;
        background-image:radial-gradient(ellipse at bottom, #FFF 0%, #DDD 100%);
      }

      /* wygląd elementu - a - w momencie najechania na niego kursorem myszki */
      ul li a:hover {
        color:#000;
        background-color:#FFF;
        background-image:none;
      }
    </style>
  </head>

  <body>

    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
    </ul>

  </body>
</html>

Pod spodem znajdują się inne przykłady pionowego menu CSS, które możesz pobrać klikając w ten odnośnik. W pliku znajdziesz również pionowe menu CSS, które właśnie ukończyliśmy.

W ten sposób dział drugi kursu CSS dobiegł końca. Pionowe menu CSS, które udało się nam utworzyć w tej części kursu CSS, nie prezentuje w sobie wszystkich możliwości, jakie oferuje nam obecny język CSS, dlatego w dziale czwartym poznamy wiele innych układów elementów HTML, selektorów CSS, właściwości CSS, dzięki którym nauczymy się tworzyć, od podstaw, nieco bardziej zaawansowane rzeczy. Natomiast w dziale trzecim poznamy sposób na utworzenie poziomego menu CSS, które rozbudujemy o pewne dodatkowe rzeczy.