Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Lekcja 29/ 51Wielokrotne tło

0:00 / 0:00

Strony WWW z CSS3: Wielokrotne tło

7 godz. 25 min wideo51 lekcji15 modułów

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

Strony WWW z CSS3 - Nowe Standardy

Nowe standardy oferują twórcom stron WWW niesamowite możliwości. Animacje, efekty, przejścia, elastyczne rozmieszczenie treści - to wszystko możesz osiągnąć z CSS3 już teraz! Dodatkowo, strony w CSS3 ładują się szybciej. Jeśli chcesz tworzyć nowoczesne serwisy internetowe - ten kurs jest właśnie dla Ciebie!

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.

Wersja oprogramowania: CSS 3

Kurs Strony WWW z CSS3

15 rozdziałów51 lekcji7h 25min

Wstęp do kursu

7min
  • Wprowadzenie7min(zablokowana)

Wstęp do CSS3

13min
  • Możliwości CSS6min(zablokowana)
  • Krótko o historii CSS7min(zablokowana)

Niezbędne narzędzia

40min
  • Wsparcie w przeglądarkach7min(zablokowana)
  • Przydatne narzędzia9min(zablokowana)
  • Przycisk w CSS i prefiksy12min(zablokowana)
  • Biblioteki eCSStender i Modernizr12min(zablokowana)

Kolejne etapy pracy

28min
  • Systematyka dalszej części kursu5min(zablokowana)
  • Struktura HTML5 strony19min(zablokowana)
  • Pliki projektów4min(zablokowana)

Selektory w CSS

51min
  • Selektory potomka i rodzeństwa9min(zablokowana)
  • Pseudoklasy - wprowadzenie6min(zablokowana)
  • Pseudoklasy w CSS35min(zablokowana)
  • Pseudoklasy NTH9min(zablokowana)
  • Praktyczne wykorzystanie pseudoklas11min(zablokowana)
  • Pseudoklasy w elementach UI3min(zablokowana)
  • Selektory atrybutów9min(zablokowana)

Typografia na stronie WWW

43min
  • Reguła @font-face12min(zablokowana)
  • Google Web Fonts7min(zablokowana)
  • Tekst w wielu kolumnach6min(zablokowana)
  • Cień dla tekstu9min(zablokowana)
  • Efekty na tekście9min(zablokowana)

Praca z kolorami

24min
  • Kolory w CSS39min(zablokowana)
  • Gradienty w CSS311min(zablokowana)
  • Kolory i Photoshop4min(zablokowana)

Kontenery i tło

48min
  • Zaokrąglanie narożników12min(zablokowana)
  • Obrazek jako border11min(zablokowana)
  • Właściwości tła9min(zablokowana)
  • Wielokrotne tło11min(zablokowana)
  • Przycinanie tekstu5min(zablokowana)

Elastyczny model pudełkowy

30min
  • Zmiana rozmiaru kontenerów7min(zablokowana)
  • Elastyczny model pudełkowy9min(zablokowana)
  • Wyrównanie kontenerów7min(zablokowana)
  • Flex Box w praktyce7min(zablokowana)

Transformacje elementów

23min
  • Transformacje w CSS310min(zablokowana)
  • Praktyczne zastosowania13min(zablokowana)

Tranzycje w CSS3

39min
  • Przejścia w CSS37min(zablokowana)
  • Przejścia w praktyce10min(zablokowana)
  • Zdjęcia z Polaroid13min(zablokowana)
  • Transformacje 3D9min(zablokowana)

Animacja w CSS3

47min
  • Wprowadzenie do animacji10min(zablokowana)
  • Easing i narzędzia9min(zablokowana)
  • Animacja Kuli Ziemskiej5min(zablokowana)
  • Animacja po ścieżce8min(zablokowana)
  • Inne animacje14min(zablokowana)

Responsive Web Design

42min
  • Wprowadzenie do Media Queries2min(zablokowana)
  • Zastosowania Media Queries15min(zablokowana)
  • Media Queries na stronie cz. I9min(zablokowana)
  • Media Queries na stronie cz. II18min(zablokowana)

Dodatki

8min
  • Obsługa jQuery8min(zablokowana)

Zakończenie

1min
  • Zakończenie1min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Średnia ocen autora: 4,8

Bio

Od wielu lat projektuje serwisy internetowe, dużą wagę przykładając do ich funkcjonalności a także skutecznych technik promocji. Swoje umiejętności praktyczne zdobywa projektując grafikę oraz strony www dla wiodących polskich i zagranicznych agencji reklamowych. Współpracuje między innymi z Adobe, Microsoft, Wacom. Jako trener i spiker prowadzi szkolenia oraz eventy i warsztaty. Posiada szereg uprawnień i certyfikatów eksperckich.

W wolnych chwilach stara się przekazać Ci całą praktyczną wiedzę, pasję i doświadczenie. Zapraszamy do kursu - gwarantujemy, że ta świetna zabawa przyniesie Ci mnóstwo satysfakcji!