Kurs Strony WWW z CSS3

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

21 ocen

Wprowadzenie

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!

  1. Kompletny projekt strony WWW naszpikowanej efektami CSS3
  2. Tworzenie efektów wylacznie z pomoca kodu CSS
  3. Generowanie grafiki oraz gradientów
  4. Transformacje obiektów oraz animacje z Transitions
  5. Zastosowania typograficzne i praca z tekstem
  6. 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.

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Autor: Grzegorz Róg

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. <br><br> 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!

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. <br><br> 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!

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Grzegorz Róg

Czas: 7 godzin 25 minut

Wersja: CSS 3

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp do kursu

  • Wprowadzenie

Wstęp do CSS3

  • Możliwości CSS

  • Krótko o historii CSS

Niezbędne narzędzia

  • Wsparcie w przeglądarkach

  • Przydatne narzędzia

  • Przycisk w CSS i prefiksy

  • Biblioteki eCSStender i Modernizr

Kolejne etapy pracy

  • Systematyka dalszej części kursu

  • Struktura HTML5 strony

  • Pliki projektów

Selektory w CSS

  • Selektory potomka i rodzeństwa

  • Pseudoklasy - wprowadzenie

  • Pseudoklasy w CSS3

  • Pseudoklasy NTH

  • Praktyczne wykorzystanie pseudoklas

  • Pseudoklasy w elementach UI

  • Selektory atrybutów

Typografia na stronie WWW

  • Reguła @font-face

  • Google Web Fonts

  • Tekst w wielu kolumnach

  • Cień dla tekstu

  • Efekty na tekście

Praca z kolorami

  • Kolory w CSS3

  • Gradienty w CSS3

  • Kolory i Photoshop

Kontenery i tło

  • Zaokrąglanie narożników

  • Obrazek jako border

  • Właściwości tła

  • Wielokrotne tło

  • Przycinanie tekstu

Elastyczny model pudełkowy

  • Zmiana rozmiaru kontenerów

  • Elastyczny model pudełkowy

  • Wyrównanie kontenerów

  • Flex Box w praktyce

Transformacje elementów

  • Transformacje w CSS3

  • Praktyczne zastosowania

Tranzycje w CSS3

  • Przejścia w CSS3

  • Przejścia w praktyce

  • Zdjęcia z Polaroid

  • Transformacje 3D

Animacja w CSS3

  • Wprowadzenie do animacji

  • Easing i narzędzia

  • Animacja Kuli Ziemskiej

  • Animacja po ścieżce

  • Inne animacje

Responsive Web Design

  • Wprowadzenie do Media Queries

  • Zastosowania Media Queries

  • Media Queries na stronie cz. I

  • Media Queries na stronie cz. II

Dodatki

  • Obsługa jQuery

Zakończenie

  • Zakończenie

}