Przykład CSS
- Poprzednia strona Element siatki CSS
- Następna strona Test CSS
Selektory CSS
Użycie CSS
Kolory CSS
Tło CSS
Krawędzie CSS
- Ustaw szerokość czterech krawędzi
- Ustaw szerokość górnej krawędzi
- Ustaw szerokość dolnej krawędzi
- Ustaw szerokość lewej krawędzi
- Ustaw szerokość prawej krawędzi
- Ustaw styl czterech krawędzi
- Ustaw styl górnej krawędzi
- Ustaw styl dolnej krawędzi
- Ustaw styl lewej krawędzi
- Ustaw styl prawej krawędzi
- Ustaw kolor czterech krawędzi
- Ustaw kolor górnej krawędzi
- Ustaw kolor dolnej krawędzi
- Ustaw kolor lewej krawędzi
- Ustaw kolor prawej krawędzi
- Wszystkie krawędzie w jednym deklaracie
- Dodanie zaokrąglonych krawędzi do elementu
- Ustaw różne krawędzie dla każdego boku
- Wszystkie górne krawędzie w jednym deklaracie
- Wszystkie dolne krawędzie w jednym deklaracie
- Wszystkie lewe krawędzie w jednym deklaracie
- Wszystkie prawe krawędzie w jednym deklaracie
Marginesy CSS
- Określ różne marginesy zewnętrzne dla boków elementu
- Użyj skróconego marginesu z czterema wartościami
- Użyj skróconego marginesu z trzema wartościami
- Użyj skróconego marginesu z dwoma wartościami
- Użyj skróconego marginesu z jedną wartością
- Ustaw margines zewnętrzny na auto, aby wyśrodkować elementy w kontenerze
- Przypisz lewy margines zewnętrzny do elementu nadrzędnego
- Scalenie marginesów zewnętrznych
Wewnętrzne marginesy CSS
- Określ różne wewnętrzne marginesy dla boków elementu
- Użyj skróconego marginesu z czterema wartościami
- Użyj skróconego marginesu z trzema wartościami
- Użyj skróconego marginesu z dwoma wartościami
- Użyj skróconego marginesu z jednym wartością
- Wewnętrzne marginesy i szerokość elementu (nie ustaw box-sizing)
- Wewnętrzne marginesy i szerokość elementu (ustaw box-sizing)
- Ustaw lewy wewnętrzny margines elementu
- Ustaw prawy wewnętrzny margines elementu
- Ustaw górny wewnętrzny margines elementu
- Ustaw dolny wewnętrzny margines elementu
CSS wysokość/szerokość
Model box CSS
Kontur CSS
Tekst CSS
- Ustawienie koloru tekstu dla różnych elementów
- Wyważenie tekstu
- Usunięcie linii pod linkiem
- Ozdobienie tekstu
- Kontrolowanie wielkości liter w tekście
- Wcięcie tekstu
- Określenie odległości między znakami
- Określenie odległości między wierszami
- Ustawienie kierunku tekstu elementu
- Zwiększenie odległości między literami
- Określenie cienia tekstu elementu
- Wyłączenie przecinania tekstu w elemencie
- Wyrównanie obrazu w tekście pionowo
Czcionka CSS
- Ustawienie czcionki tekstu
- Ustawienie rozmiaru czcionki
- Ustawienie rozmiaru czcionki w px
- Ustawienie rozmiaru czcionki w em
- Ustawienie rozmiaru czcionki w procentach i em
- Ustawienie stylu czcionki
- Ustawienie wariantu czcionki
- Ustawienie grubości czcionki
- Wszystkie atrybuty czcionki w jednym deklaracie
Linki CSS
Listy CSS
Tabele CSS
- Określenie czarnych krawędzi dla elementów table, th oraz td
- Użycie border-collapse
- Pojedyncza krawędź otaczająca tabelę
- Określenie szerokości i wysokości tabeli
- Ustawienie poziomego wyrównania zawartości (text-align)
- Ustawienie pionowego wyrównania zawartości
- Określenie wewnętrznego marginesu dla elementów th i td
- Pozioma linia rozdzielająca
- Tabela z podświetleniem
- Tabela w stylu paskowym
- Określenie koloru krawędzi tabeli
- Ustawienie pozycji tytułu tabeli
- Responsywne tabele
- Tworzenie pięknych tabel
CSS Wyświetlanie
CSS Lokalizacja
- Umieszczanie elementu w stosunku do okna przeglądarki
- Umieszczanie elementu w stosunku do normalnej pozycji elementu
- Lokalizacja elementu za pomocą wartości absolutnych
- Lokalizacja lepką
- Nadkładanie elementów
- Ustawienie kształtu elementu
- Ustawienie górnej krawędzi obrazu za pomocą wartości pikseli
- Ustawienie dolnej krawędzi obrazu za pomocą wartości pikseli
- Ustawienie lewego marginesu obrazu za pomocą wartości pixelowej
- Ustawienie prawego marginesu obrazu za pomocą wartości pixelowej
- Pozycjonowanie tekstu obrazu (górny lewy róg)
- Pozycjonowanie tekstu obrazu (górny prawy róg)
- Pozycjonowanie tekstu obrazu (dolny lewy róg)
- Pozycjonowanie tekstu obrazu (dolny prawy róg)
- Pozycjonowanie tekstu obrazu (centrowanie)
CSS Przepełnienie
- Użycie overflow: visible - treść nie jest przecięta. Renderowana poza bokiem ramki elementu
- Użycie overflow: hidden - treść jest przecięta, reszta ukryta
- Użycie overflow: scroll - treść jest przecięta, ale dodano paski rolkowe, aby zobaczyć resztę
- Użycie overflow: auto - jeśli treść jest przecięta, dodaj paski rolkowe, aby zobaczyć resztę
- Użycie overflow-x i overflow-y
CSS Pływające
- Proste użycie atrybutu float
- Obraz z krawędzią i marginesem pływający do prawej strony akapitu
- Obraz z tytułem pływający w prawo
- Float pierwszej litery akapitu w lewo
- Zamknięcie pływania (użycie atrybutu clear)
- Zamknięcie pływania (użycie hacka clearfix)
- Tworzenie pływających ram
- Tworzenie obrazów w szeregu
- Tworzenie równych ram (przez flexbox)
- Tworzenie poziomego menu
- Przykład tworzenia układu strony internetowej
CSS Inline-block
Wyrównanie elementów CSS
- Centrowanie za pomocą marginesów
- Centrowanie tekstu
- Centrowanie obrazu
- Wyrównanie w lewo i w prawo za pomocą position
- Wyrównanie w lewo i w prawo za pomocą position - rozwiązanie wieloprzeglądowe
- Wyrównanie w lewo i w prawo za pomocą float
- Wyrównanie w lewo i w prawo za pomocą float - rozwiązanie wieloprzeglądowe
- Wyrównanie wertykalne za pomocą padding
- Wyrównanie wertykalne i poziome
- Wyrównanie wertykalne za pomocą line-height
- Wyrównanie wertykalne i poziome za pomocą position
Kombinatory CSS
Pseudoklasy CSS
- Dodanie różnych kolorów do linków
- Dodanie innych stylów do linków
- Użycie :focus
- :first-child - Pasuje do pierwszego elementu p
- :first-child - Pasuje do pierwszego elementu i wewnątrz elementu p
- :first-child - Pasuje do wszystkich pierwszych dzieci elementów p, które zawierają wszystkie elementy i
- Użyj :lang
Pseudoelementy CSS
Generowanie treści CSS
Prześwit CSS
Panel nawigacyjny CSS
CSS rozwijana lista
Biblioteka obrazów CSS
Image sprite CSS
Selektor właściwości CSS
- Wybierz wszystkie elementy <a> z atrybutem target
- Wybierz wszystkie elementy <a> z atrybutem target="_blank"
- Wybierz wszystkie elementy z atrybutem title, w którym atrybut title zawiera listę słów rozdzielonych spacjami, jednym z nich jest "flower"
- Wybierz wszystkie elementy z wartością atrybutu class zaczynającą się na "top" (musi to być całe słowo)
- Wybierz wszystkie elementy z wartością atrybutu class zaczynającą się na "top" (nie może to być całe słowo)
- Wybierz wszystkie elementy z wartością atrybutu class kończącą się na "test"
- Wybierz wszystkie elementy z wartością atrybutu class zawierającą "te"
Formularze CSS
- Pole wejściowe pełnej szerokości
- Wypełnione pole wejściowe
- Pole wejściowe z bokiem
- Pole wejściowe z dolnym paskiem
- Pole wejściowe z kolorem
- Pole wejściowe z aktywnym fokusem
- Pole wejściowe z aktywnym fokusem 2
- Pole wejściowe z ikoną
- Wyszukiwarka z efektami animacji
- Ustawienie stylu pola tekstowego
- Ustawienie stylu menu wyboru
- Ustawienie stylu przycisku
- Reaktywny formularz
Liczniki CSS
Układ strony internetowej CSS
Zaokrąglenie CSS
Obraz krawędzi CSS
Tło CSS
- Dodanie wielu obrazów tła do elementu
- Określenie rozmiaru obrazu tła
- Użycie 'contain' i 'cover' do skalowania obrazu tła
- Zdefiniowanie rozmiaru obrazu tła
- Pełnowymiarowy obraz tła (zupełnie pokrywający obszar zawartości)
- Użycie background-origin do określenia pozycji umieszczenia obrazu tła
- Użycie background-clip do określenia obszaru rysowania tła
Przejście kolorów CSS
- Gradient liniowy - od góry do dołu
- Gradient liniowy - od lewej do prawej
- Gradient liniowy - prostopadły
- Gradient liniowy - określony kąt
- Gradient liniowy - wiele punktów kolorowych
- Gradient liniowy - tęczowy kolor + tekst
- Gradient liniowy - przeźroczystość
- Gradient liniowy - powtarzający się gradient liniowy
- Gradient radialny - równomiernie rozłożone punkty kolorowe
- Gradient radialny - różna odległość punktów kolorowych
- Gradient radialny - ustawienie kształtu
- Gradient radialny - różne słowa kluczowe rozmiaru
- Gradient radialny - powtarzający się gradient radialny
Efekt cienia CSS
- Prosty efekt cienia
- Dodanie koloru do cienia
- Dodanie rozmycia do cienia
- Biały tekst z czarnym cieniem
- Czerwony neonowy cień
- Czerwony i niebieski neonowy cień
- Biały tekst z cieniem czarnym, niebieskim i ciemnoniebieskim
- Dodanie prostego box-shadow do elementu
- Dodanie koloru do box-shadow
- Dodanie koloru i rozmycia do box-shadow
- Tworzenie karty papieru w stylu karty Polaroid (tekst)
- Tworzenie karty papieru w stylu karty Polaroid (obraz Polaroid)
Efekty tekstu CSS
- Określenie sposobu prezentacji użytkownikowi nie wyświetlanej zawartości przeciągniętej
- Jak wyświetlać zawartość przeciągniętą poza element
- Pozwolenie na łamanie długich tekstów i przenoszenie ich do następnego wiersza
- Określenie zasad wcięć wiersza
- Określenie trybu pisanego tekstu (pionowy lub poziomy)
CSS Web Czcionki
CSS 2D przekształcenia
- translate() - usunięcie elementu z aktualnej pozycji
- rotate() - obrót elementu w kierunku wskazówki
- rotate() - obrót elementu w przeciwnym kierunku do wskazówki
- scale() - zwiększenie elementu
- scale() - zmniejszenie elementu
- skewX() - pochylanie elementu wzdłuż osi X
- skewY() - pochylanie elementu wzdłuż osi Y
- skew() - pochylanie elementu wzdłuż osi X i Y
- matrix() - obracanie, skalowanie, przemieszczanie i pochylanie elementu
CSS 3D przekształcenia
CSS przejścia
CSS animacje
- Przypisanie animacji do elementu
- Animacja - zmiana koloru tła elementu
- Animacja - zmiana koloru tła i położenia elementu
- Opóźnienie animacji
- Animacja jest uruchamiana trzy razy przed zatrzymaniem
- Nieskończona animacja
- Animacja w przeciwnym kierunku
- Alternująca animacja
- Krzywe prędkości animacji
- Skrócona forma atrybutu animacji
CSS podpowiedzi
Obraz stylizowany za pomocą CSS
- Obraz z zaokrąglonymi krawędziami
- Kolisty obraz
- Miniatura
- Miniaturka jako link
- Obraz responsywny
- Tekst obrazu (w lewym górnym rogu)
- Tekst obrazu (w prawym górnym rogu)
- Tekst obrazu (w lewym dolnym rogu)
- Tekst obrazu (w prawym górnym rogu)
- Tekst obrazu (wyśrodkowany)
- Obraz Polaroid
- Filtr obrazu w odcieniach szarości
- Zaawansowane - obraz modalny zaimplementowany za pomocą CSS i JavaScript
CSS Object-fit
CSS przyciski
- Podstawowy przycisk CSS
- Kolor przycisku
- Rozmiar przycisku
- Przycisk z zaokrąglonymi krawędziami
- Krawędź przycisku z kolorem
- Przycisk można zawiesić
- Przycisk z cieńmi
- Przycisk wyłączony
- Szerokość przycisku
- Grupa przycisków
- Grupa przycisków z ramką
- Przycisk z animacją (efekt zawieszenia)
- Przycisk z animacją (efekt naciśnięcia)
- Przycisk z animacją (efekt fal)
CSS paginacja
CSS wielokolumny
CSS interfejs użytkownika
CSS zmienne
CSS Box Sizing
CSS Elastic Box
- Elastyczny kontener z trzema elementami
- Elastyczny kontener z trzema elementami - kierunek rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Kolejność elementów elastycznych
- Margin-right:auto;
- Margin:auto; = idealne wyśrodkowanie
- Ustaw align-self na elementach elastycznych
- Określ długość elementu elastycznego, w stosunku do pozostałych jego części
- Twórz responsywne galerie zdjęć za pomocą弹性盒
- Twórz responsywne strony za pomocą弹性盒
CSS zapytania media
CSS zapytania media - więcej przykładów
- Ustawianie różnych kolorów tła w zależności od szerokości ekranu
- Menu nawigacyjne responsywne
- Responsywne kolumny za pomocą float
- Responsywne kolumny za pomocą Flexbox
- Ukrywanie elementów za pomocą zapytań media
- Rozmiar czcionki responsywny
- Biblioteka obrazów responsywnych
- Strona internetowa responsywna
- Zmiana układu strony w zależności od kierunku przeglądarki
- Najmniejsza szerokość do największej szerokości
Projektowanie responsywnej strony internetowej CSS
- Widok siatki responsywnej CSS
- Dodaj przecięcia dla komputerów stacjonarnych, laptopów i telefonów
- Typowe przecięcia
- Obraz responsywny
- Wideo responsywne
- Ramka responsywna: W3.CSS
- Ramka responsywna: Bootstrap
Wyjaśnienie przykładu: Projektowanie responsywne strony internetowej CSS
CSS siatka
- Poprzednia strona Element siatki CSS
- Następna strona Test CSS
