Artykuł
12/02/2011

Kurs HTML5 – WebMatrix – CSS3

Autor: Piotr Bubacz

Opublikowano: 2011-12-02

Jednym z ważniejszych kryteriów oceny strony jest jej wygląd. Ważne jest również, aby oddzielić informacje o wyglądzie strony od jej zawartości. Można tego dokonać dzięki zastosowaniu Kaskadowych Arkuszy Stylów – CSS. CSS jest ciągle rozwijany i aktualnie dostępny w wersji 3. W tym samouczku poznasz wybrane opcje, jakie już dziś z powodzeniem będziesz mógł zastosować na Twojej stronie.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

zaokrąglać narożniki,
dodawać cień do elementów blokowych.

Samouczek przygotowano na podstawie dokumentacji CSS3.

Implementacja

Twoim zadaniem jest rozbudowa poprzednio zmigrowanej strony o możliwości, jakie daje Ci CSS3. Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Przygotowanie strony

Pierwszym krokiem będzie utworzenie nowego projektu i dodanie do niego odpowiednich plików.

W programie WebMatrix utwórz nową stronę i nazwij ją HTML5.

Uruchom program WebMatrix.
Kliknij przycisk Templates.
Wybierz szablon Empty Site i w polu Site Name wpisz CSS3.
Kliknij przycisk OK.
Następnie kliknij przycisk Files.
Prawym przyciskiem myszki, kliknij plik Default.cshtml, a potem opcję Delete. W oknie, które się pojawi, potwierdź chęć usunięcia pliku.

Dodaj pliki początkowe.

Pobierz plik HTML5-WebMatrix.zip. Rozpakuj go i przejdź do katalogu HTML5-WebMatrix\CSS3.
Do projektu HTML5 w programie WebMatrix przeciągnij pliki index.htm i fourthcoffee.css. W taki sam sposób przeciągnij katalog img. Twój projekt powinien wyglądać tak, jak na Rys. 2.

Rys.2. Wygląd dokumentu w WebMatrix.

Klikając na przycisk Run na wstążce, otwórz stronę w przeglądarce.

Zaokrąglone narożniki

Zaokrąglone narożniki to element, który możesz spotkać na wielu stronach. Aby go otrzymać, stosowałeś różne sztuczki, np. nakładanie obrazków na rogi ramki. Teraz możesz zrobić to bezpośrednio w kodzie stylu CSS.

Zaokrąglenie może być oparte na okręgu lub na owalu. W przypadku okręgu, podaj tylko promień, a w przypadku owalu, podaj promień x i promień y. Wielkość zaokrąglenia określ w dowolnych jednostkach wielkości CSS. W przypadku jednakowych wielkości dla wszystkich narożników, możesz podać następujące wartości:

/* dla okręgu: */
border-radius: promień; 

/*dla owala: */
border-radius: promieńX/ promieńY;.

W przypadku różnych wielkości dla każdego rogu, możesz użyć następujących wartości:

/* dla okręgu: */
border-radius: górny-lewy-promień górny-prawy-promień dolny-prawy-promień dolny-lewy-promień; 

/*dla owala: */
border-radius: górny-lewy-promieńX górny-prawy-promieńX dolny-prawy-promieńX dolny-lewy-promieńX / górny-lewy-promieńY górny-prawy-promieńY dolny-prawy-promieńY dolny-lewy-promieńY;.

Możesz także wykorzystać bezpośrednie odwołanie do poszczególnych rogów, np.: border-top-left-radius.

Dodaj zaokrąglenie do zdjęcia produktu.

Otwórz plik fourthcoffee.css.
Wciśnij kombinację klawiszy Ctrl+F i w polu, znajdującym się w górnej części, wpisz: .product_thumb.
Wciśnij przycisk Next.
Do stylu .product_thumb dodaj:
border-radius:10px;
Zapisz zmiany. Odśwież stronę w przeglądarce i sprawdź, czy zdjęcia produktów zostały zaokrąglone tak, jak na Rys. 3.

Rys. 3. Jednakowe zaokrąglenia.

Dodaj zaokrąglenie elementu aside.

Do stylu aside dodaj:

border-radius: 10em 0 5em 2em;

Zapisz zmiany. Odśwież stronę w przeglądarce i sprawdź, czy ramka elementu aside została zaokrąglona tak, jak na Rys. 4.

Rys. 4. Różne zaokrąglenia dla każdego z rogów.

Dodaj zaokrąglenie elementu header i footer.

Do stylu header dodaj:

border-top-left-radius: 50px 25px;
border-top-right-radius: 50px 25px;

Do stylu footer dodaj:

border-radius: 0 0 15px 15px / 0 0 30px 30px;

Zapisz zmiany. Odśwież stronę w przeglądarce i sprawdź, czy elementy header i footer zostały zaokrąglone tak, jak na Rys. 5.

Rys. 5. Owalne zaokrąglenia dla elementu header i footer.

Cieniowanie elementu

Jednym z nowych elementów, w interfejsie użytkownika, jest cieniowanie. Jest ono wykorzystywane po to, aby stworzyć wrażenie efektu trójwymiarowości. W tym miejscu możesz również wykorzystać nowy element CSS3.

Uzyskanie cienia, pod elementem blokowym, jest możliwe za pomocą następującego polecenia CSS:

box-shadow: poziom pion rozmycie rozprzestrzenianie kolor inset;

gdzie:

poziom – przesunięcie w poziomie – wartość dodatnia jest przesuwana w prawo, ujemna w lewo,
pion – przesunięcie w pionie – wartość dodatnia w jest przesuwana dół, ujemna w górę,
rozmycie – promień rozmycia (tylko wartości dodatnie, im wyższa wartość, tym większe rozmycie),
rozprzestrzenianie – określa odległość wyjścia cienia poza pudełko (lub do pudełka, gdy wartość jest ujemna) – (przydatne przy „podświetlaniu” pudełka),
kolor – określa kolor cienia (zobacz: Jak określać kolory w CSS),
inset – cień może zostać umieszczony w środku pudełka.

Dodaj cień do elementu header i footer.

Do stylu header dodaj:

box-shadow: 5px 5px 5px lightgray;

Do stylu footer dodaj:

box-shadow: 5px 5px 5px 0px lightgray;

Informacja

Rozprzestrzenianie jest elementem opcjonalnym. Podanie wartości 0px lub niepodanie żadnej, będzie miało taki sam efekt.

Zapisz zmiany. Odśwież stronę w przeglądarce i sprawdź, czy elementy header i footer zostały zaokrąglone tak, jak na Rys. 6.

Rys. 6. Dodanie cienia do elementu header i footer.

Dodaj cień do elementu aside.

Do stylu aside dodaj:

box-shadow: 10px 10px 10px #FFFFCC inset;

Zapisz zmiany. Odśwież stronę w przeglądarce i sprawdź, czy ramka elementu aside została zaokrąglona tak, jak na Rys. 7.

Rys. 7. Dodanie cienia do elementu aside.

Dodaj efekt podświetlenia produktu.

Do stylu .product_thumb dodaj:

box-shadow: 0 0 5px 5px sienna;

Zapisz zmiany. Odśwież stronę w przeglądarce i sprawdź, czy zostały podświetlone miniatury produktu tak, jak na Rys. 1.

Podsumowanie

W tym samouczku nauczyłeś się wykorzystywać zaokrąglanie rogów oraz cień w celu uatrakcyjnienia Twojej strony.