0:00 / 0:00

Strony WWW z CSS3: Efekty na tekście

Nowe Standardy

7 godz. 25 min · HTML i CSS · Full-stack i Programowanie

Grzegorz RógIdea Architect

Czego się nauczysz

  • Kompletny projekt strony WWW naszpikowanej efektami CSS3
  • Tworzenie efektów wylacznie z pomoca kodu CSS
  • Generowanie grafiki oraz gradientów
  • Transformacje obiektów oraz animacje z Transitions
  • Zastosowania typograficzne i praca z tekstem
  • Elastyczne strony WWW dla wielu urzadzen z CSS3

Praca na praktycznych przykładach

Pracując z kursem, zdobytą wiedzę będziemy wykorzystywać na praktycznym przykładzie kompletnej strony WWW. Najpierw, na prostych przykładach poznasz mechanizmy działania i funkcje CSS3, następnie wykorzystamy te wiedzę na praktycznym przykładzie. Poniżej możesz sprawdzić, jak wygląda strona, z którą będziemy pracować w kursie**Ponieważ część wykorzystanych technik CSS3 jest eksperymentalna, prosimy o przeglądanie strony z pomocą najnowszej wersji Firefox lub Chrome.

Co jeszcze znajdziesz w kursie CSS3?

Pierwsza część kursu zawiera informacje o mniej spektakularnych, ale niezwykle użytecznych narzędziach CSS3, takich jak nowe Selektory czy praca z tekstem. W większości są to właściwości, które już teraz możesz wykorzystać przy tworzeniu nowoczesnych stron WWW i będą pomocne w zoptymalizowaniu elementów graficznych i przyspieszeniu czasu ładowania Twoich witryn. W drugiej części zajmiemy się fantastycznymi nowościami jak Transformacje (oraz 3D), Animacja, Flexible Box Model czy Media Queries.

Animacja w CSS3

Transformacje i Przejścia

Jedną z najciekawszych możliwości CSS3 jest tworzenie transformacji takich jak rotowanie obiektów, przekrzywianie czy skalowanie. W połączeniu z animacją daje to ogromne możliwości a dodatkową zaletą jest krótki czas ładowania. W kursie przyjrzymy się także eksperymentalnym translacjom 3D, które w przyszłości wyznaczą nowy kierunek w efektach wizualnych w sieci.

Tworzenie grafiki i Efekty

W CSS3 możesz generować grafikę strukturalnie - z pomocą kodu, począwszy od prostych gradientów aż po złożone kształty i wzorki. Zalety takiego rozwiązania to między innymi skalowalność oraz zdecydowanie mniejszy rozmiar, ale również elastyczność w stosunku do wykorzystania obrazków i mniejsza ilość zapytań do serwera. W kursie przyjrzymy się także pomocnym generatorom grafiki a nawet pokażę Ci, jak wyeksportować CSS3 z Photoshopa. Dowiesz się również jak tworzyć efekty takie jak zaokrąglone narożniki, cień dla tekstu i wiele więcej!

Strony WWW na wszystkie urządzenia

Typografia i Web Fonty

Obszerny rozdział w Kursie poświęciliśmy na omówienie kreatywnych zastosowań typografii na stronach WWW. Dowiesz się, jak wykorzystać własne fonty na stronie tak, aby każdy użytkownik mógł je zobaczyć. Wykorzystamy do tego celu kilka rozwiązań jak @font-face czy Google Web Fonts. Poza tym omówimy efekty na tekście jak również sposoby na pracę z układem wielokolumnowym. Następnie wszystkie poznane techniki wykorzystamy na naszej kursowej witrynie.

Podsumowując, kurs zawiera między innymi:

  • Kompletny projekt strony WWW naszpikowanej efektami CSS3
  • Status CSS3 i implementacja w przeglądarkach
  • Nowe Selektory oraz inne przydatne właściwości
  • Tworzenie efektów wyłącznie z pomocą kodu CSS
  • Generowanie grafiki oraz gradientów
  • Transformacje obiektów oraz animacje z Transitions
  • Model animacji z klatkami kluczowymi
  • Masa przydatnych narzędzi i generatorów
  • Zastosowania typograficzne i praca z tekstem
  • Elastyczne strony WWW dla wielu urządzeń z CSS3
  • I wiele, wiele więcej!

Dla kogo jest ten kurs?

Kurs CSS3 w Praktyce przeznaczony jest dla osób, które mają już opanowane podstawy CSS oraz HTML. Osobom początkującym polecamy zapoznanie się w pierwszej kolejności z kursem HTML i CSS - Podstawy. W kursie sk"http://www.eduweb.pl/kursy/xhtmlcss/xhtml-css-praktyka.html" target="blank">HTML i CSS w Praktyce oraz Kurs HTML5. Po przerobieniu kursu polecamy natomiast zapoznać się z materiałem dotyczącym pracy z Media Queries i innymi technikami Resp"http://www.eduweb.pl/kursy/html/elastyczne-strony-www.html" target="blank">Kursie Elastyczne Strony WWW.

CSS 3