Autor publikacji
Virtual Patriot - Administrator

Wprowadzenie do czwartego działu kursu CSS

Data publikacji
Ostatnio edytowano

Witam w dziale czwartym kursu CSS. Nazwałem ten dział "Freestyle CSS", ponieważ zostaną w nim przedstawione najróżniejsze przykłady z użyciem języka CSS i elementów HTML oraz inne przydatne informacje. Zapoznamy się tutaj z rzeczami prostymi, mogłoby się wydawać, że czasami banalnym, jak również z rzeczami nieco bardziej zaawansowanymi (przynajmniej dla początkujących).

Ideą tego działu jest to, abyśmy mogli poznać, od podstaw, w jaki sposób tworzy się różne układy elementów HTML, ponieważ nie trudno jest znaleźć wiele gotowych szablonów w internecie, jednak gdy nie wiemy jak buduje się taką rzecz od podstaw to trudniej jest nam połapać się w dostosowaniu jej do naszych wymogów.

Uwaga Niektóre elementy HTML, zaprezentowane w tym dziale kursu CSS, zawierają w sobie nowe właściwości CSS3, które niekoniecznie muszą być poprawnie interpretowane przez wszystkie przeglądarki internetowe, lecz z biegiem czasu to się zmieni, więc warto poznać nowości w języku CSS.

Poniżej znajduje się krótki opis poszczególnych części, jakie znajdziesz w tym dziale kursu CSS.

Wykorzystujemy właściwości CSS do utworzenia ramki ze zdjęciem

W tej części kursu CSS poznamy do czego możemy wykorzystać właściwość position:relative; oraz position:absolute; oraz właściwości top, right, bottom, left.

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Cienie po bokach elementu HTML

W tej części kursu CSS poznajemy sposób na utworzenie elementu HTML z dwoma obrazkami po bokach, które stanowią cień danego elementu HTML.

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Sposób na wyśrodkowanie tekstu w pionie

W tej części kursu CSS poznamy sposób, który umożliwi nam wyśrodkowanie tekstu w pionie elementu HTML.

to jest przykładowy tekst, który został umieszczony w elemencie - p

Element HTML z pionowym tekstem

W tej części kursu dowiemy się w jaki sposób wyświetlić wszystkie litery tekstu w pionie elementu HTML.

styczeń

CSS - Layout HTML dla każdej rozdzielczości

W tej części kursu CSS poznamy w jaki sposób możemy wykorzystywać wartości procentowe. Wykorzystamy je do utworzenia układu elementów HTML, które będą dopasowywały się do szerokości okna przeglądarki.

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony
Przeznaczenie jednostki "em"

W tej części kursu CSS wykorzystamy jednostkę wartości "em" w płynnym układzie elementów HTML.

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony
Responsywny układ elementów HTML

W tej części kursu CSS zapoznamy się z responsywnym układem elementów HTML.

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony
Reset CSS

W tej części kursu CSS poznamy technikę zwana "Reset CSS", która umożliwia usunięcie wartości domyślnych, różnych właściwości, ze wszystkich elementów HTML.

Tworzymy rozwijane poziome menu CSS

W tej części kursu CSS utworzymy rozwijane poziome menu CSS.

  1. poziome
  2. rozwijane
  3. menu CSS
Dwupoziomowe rozwijane menu CSS

W tej części kursu CSS rozbudujemy nasze poziome rozwijane menu CSS do dwóch rozwijanych poziomów.

  1. dział - 1
  2. dział - 2
  3. dział - 3
Duszki CSS

W tej części kursu CSS poznamy czym są "Duszki CSS".

CSS3 - Tworzymy ruchome tło w elemencie HTML

W tej części kursu CSS utworzymy ruchome tło w elemencie HTML, wykorzystując do tego celu właściwości animation.

to jest przykładowy element - p - umieszczony w elemencie - div - z ruchomym tłem

Element HTML umieszczony poza oknem przeglądarki

W tej części kursu CSS dowiemy się do czego może być wykorzystana właściwość position:fixed; oraz właściwości należące do grupy Transition - CSS3.

Okno Przeglądarki Internetowej

Najedź kursorem myszki na obszar, w którym znajduje się litera - P

to jest przykładowa treść umieszczona w elemencie HTML, który znajduje się poza granicami okna przeglądarki internetowej wraz z innymi elementami HTML

P
Animowane elementy HTML - CSS3

W tej części kursu tworzymy animację CSS wykorzystując do tego celu właściwości animation oraz wiele innych właściwości CSS.

ANIMACJA
Poruszający się, animowany tekst - CSS3

W tej części kursu tworzymy poziomy, wyświetlony w jednej linii, poruszający się tekst. Wykorzystujemy do tego celu animację CSS.

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

CSS3 - Animowany efekt wprowadzanego tekstu

W tej części kursu tworzymy efekt wprowadzanego tekstu.

To jest przykładowy tekst
CSS3 - Animowany obrazek klatka po klatce

W tej części kursu CSS tworzymy animowany obrazek klatka po klatce, wykorzystując do tego celu różne właściwości CSS3.

Tooltip CSS

W tej części kursu CSS tworzymy Tooltip CSS, który będzie przyjazny dla robotów indeksujących naszą stronę internetową.

CSS3 - Animowany Tooltip

W tej części kursu CSS tworzymy zaawansowany układ elementów HTML, który utworzy Animowany Tooltip CSS3.

CSS3 - Animowana karta w przestrzeni 3D

W tej części kursu CSS rozpoczynamy tworzenie układów elementów HTML w przestrzeni 3D. Zaczynamy od obracającej się karty.

LEW
CSS3 - Animowany sześcian 3D

W tej części kursu CSS utworzymy animowany układ elementów HTML, który swoim wyglądem będzie przypominał sześcian.

CSS3 - Animowana karuzela 3D

W tej części kursu CSS układ elementów HTML w przestrzeni 3D, który swoim wyglądem będzie przypominał obracającą się karuzelę.