Forum | Najnowsze tutoriale tworzenie stron internetowych
 

CSS Przykłady


Składnia CSS

Selektor elementu
Selektor id
Selektor klasy (dla wszystkich elementów)
Selektor klasy (tylko <p> elementów)
grupowanie selektorów

Składnia CSS wyjaśnione


CSS tła

Ustaw kolor tła strony
Ustaw kolor tła różnych elementów
Ustawić obraz jako tło strony
Jak powtórzyć obraz tła tylko w poziomie
Jak ustawić obraz tła
Stały obrazek w tle (ten obraz nie będzie się przewijał z resztą strony)
Wszystkie właściwości tła w jednej deklaracji
Zaawansowane przykładem tle

Właściwości tła wyjaśnione


CSS Borders

Ustaw szerokość czterech granic
Ustaw szerokość górnej granicy
Ustaw szerokość dolnej granicy
Ustaw szerokość lewej granicy
Ustawić szerokość prawej granicy
Ustawia styl z czterech granic
Ustawia styl górnej granicy
Ustawia styl dolnej granicy
Ustawia styl lewej krawędzi
Ustaw stylu prawej krawędzi
Ustaw kolor z czterech granic
Ustaw kolor górnej granicy
Ustaw kolor dolnej granicy
Ustaw kolor lewej krawędzi
Ustawić kolor prawej granicy
Wszystkie właściwości graniczne w jednej deklaracji
Ustaw różne po obu stronach granicy
Wszystkie najlepsze właściwości graniczne w jednej deklaracji
Wszystkie dolne właściwości graniczne w jednej deklaracji
Wszystkie pozostawione właściwości graniczne w jednej deklaracji
Wszystkie odpowiednie właściwości graniczne w jednej deklaracji

Właściwości Border wyjaśnione


Marginesy CSS

Określ różne marginesy dla każdej strony elementu
Niech lewego marginesu być dziedziczone z elementu nadrzędnego
Nieruchomość margines skrótowym
Ustaw margines auto do centrowania elementu w swoim pojemniku

Właściwości Margin wyjaśnione


CSS padding

Ustaw lewy dopełnienie elementu
Ustaw odpowiednią wyściółkę elementu
Ustaw górną wyściółkę elementu
Ustaw dolny wyściółkę elementu
Wszystkie właściwości wypełniające w jednej deklaracji

Właściwości wypełniające wyjaśnione


CSS Text

Ustaw kolor tekstu różnych elementów
Wyrównywanie tekstu
Usuń linię pod linkami
Udekoruj tekst
Kontroluj litery w tekście
Wcięcie tekstu
Określ odstępy między znakami
Określ odstęp między wierszami
Ustaw kierunek tekstu elementu
Zwiększ spacje między wyrazami
Wyłącz zawijanie tekstu wewnątrz elementu
Pionowe wyrównanie obrazu wewnątrz tekstu

Właściwości tekstu wyjaśnione


Czcionki CSS

Ustaw czcionkę tekstu
Ustaw rozmiar czcionki
Ustaw rozmiar czcionki w pikselach
Ustaw rozmiar czcionki EM
Ustaw rozmiar czcionki w procentach i EM
Ustawia styl czcionki
Ustaw wariant czcionki
Ustaw śmiałość czcionki
Wszystkie właściwości czcionki w jednej deklaracji

Właściwości czcionek wyjaśnione


CSS Linki

Dodaj do odwiedzanych różne kolory / nieodwiedzonych linki
Zastosowanie text-decoration na linki
Określa kolor tła dla linków
Dodaj inne style do hiperłączy
Zaawansowane - Tworzenie pola linku
Zaawansowane - Tworzenie pola linku z granicami

Właściwości łącza wyjaśnione


Listy CSS

Wszystkie różne markery element listy na listach
Ustawić obraz jako markera list-item
Ustawić znacznik list-item
Wszystkie właściwości listy w jednej deklaracji
Wykazy styl z kolorów
Pełna lista szerokości graniczy

Lista właściwości wyjaśnione


CSS Tabele

Określ czarne obramowanie do celów stołowych, th i td elementów
Korzystanie z border-collapse
Pojedyncze obramowanie wokół stołu
Określ szerokość i wysokość stołu
Ustaw poziome wyrównanie zawartości (text-align)
Ustaw pionowe wyrównanie zawartości (vertical-align)
Określ dopełnienie dla th i td elementów
przekładki poziome
Hoverable tabeli
tabele paski
Określ kolor obramowania tabeli
Ustaw pozycję podpisie tabeli
Tabela responsive
Tworzenie ozdobnego tabeli

Właściwości tabeli wyjaśniono


CSS Model skrzyni

Określ element o łącznej szerokości 250px

Model Box wyjaśnione


CSS Outline

Narysuj linię wokół elementu (zarys)
Ustawia styl konturu
Ustaw kolor zarysu
Ustaw szerokość zarysu

Właściwości Outline wyjaśnione


CSS Dimension

Ustawia wysokość i szerokość elementu
Ustaw max szerokość elementu
Ustawia wysokość i szerokość poszczególnych elementów
Ustawia wysokość i szerokość obrazu przy użyciu procent
Ustaw min-width i max-width elementu
Zestaw min-height i max-height elementu

Właściwości wymiarowe wyjaśnione


Wyświetlacz CSS

Jak ukryć element (visibility:hidden)
Jak nie wyświetlać element (display:none)
Jak wyświetlić element blokowy jako elementu inline
Jak wyświetlić inline element jako element bloku poziomie
Jak korzystać z CSS wraz z JavaScript, aby zobaczyć ukrytą treść

Właściwości wyświetlania wyjaśnione


Pozycjonowanie CSS

Ustaw się w stosunku do elementów okna przeglądarki
Ustawić się elementu w stosunku do swojej normalnej pozycji
Umieścić element z wartością bezwzględną
Nakładające się elementy
Ustawianie kształtu elementu
Jak utworzyć pasek przewijania, gdy zawartość elementu jest zbyt duża, aby zmieścić
Jak ustawić przeglądarkę tak, aby automatycznie obsługiwać przepełnienie
Ustaw górną krawędź obrazu przy użyciu wartości piksela
Ustawić dolnej krawędzi obrazu za pomocą wartości piksela
Ustaw lewą krawędź obrazu przy użyciu wartości piksela
Ustaw prawą krawędź obrazu przy użyciu wartości piksela
Zmień kursor obrazu tekst Pozycja (w lewym górnym rogu)
Tekst pozycja obrazu (prawy górny róg)
Tekst pozycja obrazu (lewy dolny róg)
Tekst pozycja obrazu (prawy dolny róg)
Tekst pozycja obrazu (wyśrodkowane)

Właściwości pozycjonowania wyjaśnione


CSS Pływający

Prosty wykorzystanie obiektu pływaka
Obraz z granicy i marże, które unosi się w prawo w ustępie
Obraz z podpisem, że unosi się w prawo
Niech pierwszą literę akapitu pływaka w lewo
Załóż galerię z posesji pływaka
Wyłączanie pływaka (przy użyciu jasnego właściwość)
Tworzenie poziomego menu
Tworzenie głównej bez tabel

Właściwości Float wyjaśnione


Wyrównywanie elementów CSS

Centrum wyrównując z marginesu
Left / Right dostosowywaniu pozycji
Left / Right wyrównując ze stanowiskiem - Rozwiązanie Crossbrowser
Left / Right Wyrównywanie z pływakiem
Left / Right wyrównując z pływakiem - Rozwiązanie Crossbrowser

Dopasuj właściwości wyjaśnione


CSS kombinatorów

Selektor potomka
Selektor dziećmi
Przylega selektor Rodzeństwo
Selektor ogólnego rodzeństwa

Selektory COMBINATOR wyjaśnione


CSS Generated Content

Wstaw URL w nawiasach po każdym linku z właściwości content
Numeracja sekcje i podsekcje z "Section 1", "1.1", "1.2" , etc.
Określ cudzysłów z właściwością cytaty


CSS Pseudoklasy

Dodaj różne kolory hiperłącza
Dodaj inne style do hiperłączy
Zastosowanie: naciskiem
:first-child - pasuje do pierwszego elementu p
:first-child - pasuje do pierwszego elementu I w wszystkich elementów p
:first-child - mecz All I elementy we wszystkich elementów p pierwsze dziecko
Korzystanie z :lang

Pseudoklasy wyjaśnione


CSS Pseudoelementy

Bądź pierwszą literą specjalnego w tekście
Bądź pierwszą linię specjalną w tekście
Bądź pierwszą literę i pierwsza linia Special
Sposób użycia: Przed wstawić jakąś zawartość przed elementem
Zastosowanie: po wstawić jakąś treść po elemencie

Pseudoelementy wyjaśnione


Bary CSS Nawigacja

W pełni urządzone pionowy pasek nawigacji
W pełni urządzone poziomy pasek nawigacji

Paski nawigacyjne wyjaśnione


CSS Dropdowns

tekst rozwijane
menu rozwijane
Wyrównany do prawej strony menu rozwijane
rozwijane obrazu
Rozwijane paska nawigacyjnego

Dropdowns wyjaśnione


CSS podpowiedzi

Prawo podpowiedź
Lewa podpowiedź
Top podpowiedź
Dno podpowiedź
Etykietka ze strzałką
Animowane podpowiedzi

podpowiedzi wyjaśnione


Galeria CSS Obraz

Galeria obrazów
Responsive Galeria zdjęć

Galeria obrazków wyjaśnione


Krycie CSS Obrazek

Stworzenie przejrzystych obrazów - efekt mouseover
Stworzenie przejrzystych okno z tekstem na tapetę

Zadymienie Obraz wyjaśnione


CSS Sprites Obrazek

Sprite obrazu
Obraz sprite - wykaz nawigacji
Sprite obrazu ze skutkiem aktywowania

Sprite'ów wyjaśnione


Selektory atrybutów CSS

Wybiera wszystkie <a> elementy z atrybutem docelowej
Wybiera wszystkie <a> elementy z target = "_ blank" atrybutu
Zaznacza wszystkie elementy z atrybutem tytuł, który zawiera listę oddzielonych spacjami wyrazów, z których jedna jest "kwiat"
Zaznacza wszystkie elementy, których wartość atrybutu klasy, który zaczyna się od "top" (musi być całe słowo)
Zaznacza wszystkie elementy, których wartość atrybutu klasy, który zaczyna się od "top" (nie musi być całe słowo)
Zaznacza wszystkie elementy, których wartość atrybutu klasy, która kończy się "test"
Zaznacza wszystkie elementy, których wartość atrybutu klasy, który zawiera "te"

Atrybut selektorów wyjaśnione


Formy CSS

Pole wprowadzania pełnej szerokości
Pole wejściowe usztywniany
Pole wejściowe graniczy
Dno pole wprowadzania ramką
Kolorowe pola wprowadzania
Koncentruje pola wprowadzania
Koncentrowały pola wejściowe 2
Wejście z ikoną obrazu /
Animowane wejście wyszukiwania
pola tekstowe stylizacji
Stylizacja wybierz menu
Stylizacja przycisków wyboru wejścia

formy wyjaśnione


Liczniki CSS

Tworzenie licznika
Liczniki zagnieżdżone 1
Liczniki zagnieżdżone 2

Liczniki wyjaśnione


Zaokrąglone narożniki CSS3

Dodaj zaokrąglone narożniki do elementów
Okrągły każdym rogu oddzielnie
Tworzenie eliptyczne narożniki

CSS3 zaokrąglone rogi wyjaśnione


Obrazy CSS3 graniczne

Załóż obramowanie wokół obrazu elementu, używając słowa kluczowego okrągły
Załóż obramowanie wokół obrazu elementu, używając słowa kluczowego rozciągania
Granica obrazu - Różne wartości slice

CSS3 zdjęć graniczne wyjaśnione


tła CSS3

Dodawanie wielu obrazów tła dla elementu
Określanie rozmiaru obrazu tła
Skalowanie obrazu tła za pomocą "zawiera" i "pokrywy"
Definiowanie rozmiarów wielu obrazów tła
Pełnowymiarowe tła (całkowicie wypełnić obszar zawartości)
Użyj background-origin, aby określić, gdzie obraz tła jest ustawiony
Użyj background-clip określić obszar malowania tła

CSS3 tła wyjaśnione


CSS3 Gradienty

Linear Gradient - od góry do dołu
Linear Gradient - od lewej do prawej
Linear Gradient - przekątna
Linear Gradient - o zadany kąt
Linear Gradient - z wieloma przystankami kolorów
Linear Gradient - kolor tęczy + Tekst
Linear Gradient - z przezroczystością
Linear Gradient - powtarzający się liniowy gradient
Radial Gradient - równomiernie rozmieszczone przystanki kolorów
Radial Gradient - inaczej rozmieszczone przystanki kolorów
Radial Gradient - zbiór kształtów
Radial Gradient - różne wielkości kluczowych
Radial Gradient - powtarzający się gradient promieniowy

Gradienty CSS3 wyjaśnione


CSS3 Efekty cienia

Prosty efekt cienia
Dodaj kolor do cienia
Dodaj efekt rozmycia cienia
Biały tekst z czarnym cieniem
Blask cień czerwony neon
Blask cień czerwony i niebieski neon
Biały tekst z czarnym, niebieski i granatowy cień
Dodaj prosty box-shadow do elementu
Dodaj kolor do box-shadow
Dodaj kolor i box-shadow efekt rozmycia
Tworzenie papieru jak karty (tekst)
Tworzenie papieru jak karty (zdjęcia polaroid)

CSS3 efekty cieni wyjaśnione


Tekst CSS3

Określić sposób ukryty, przepełniony treść powinna być sygnalizowana użytkownikowi
Jak wyświetlić zawartość nadmiarowe, gdy unoszą się nad elementem
Umożliwiają długich słów, aby mogły być złamane i zawijać na następną linię
Określić zasady linia przełamywania

Tekst wyjaśnia CSS3


CSS3 Czcionki

Wykorzystaj swoje "własne" czcionek @font-face reguły
Wykorzystaj swoje "własne" czcionki w @font-face reguły (pogrubiony)

Czcionek CSS3 wyjaśnione


CSS3 2D Transformacje

translate() - przesunięcie elementu z jego bieżącej pozycji
rotate() - obracanie elementu w prawo
rotate() - obrócić elementu w lewo
scale() - zwiększenie elementu
scale() - zmniejszyć element
skewX() - pochylaniu elementu wzdłuż osi X
skewY() - pochylaniu elementu wzdłuż osi Y.
skew() - powoduje pochylenie element wzdłuż osi X i osi Y
matrix() - obracać, skalować, przesuwać, pochylać i element

CSS3 2D przekształca wyjaśnione


CSS3 3D Transformacje

rotateX() - obracanie elementu wokół jego osi X w pewnym stopniu
rotateY() - obracanie elementu wokół jego osi Y w danym stopniu
rotateZ() - obracanie elementu wokół jego osi w danym stopniu

CSS3 3D przekształca wyjaśnione


CSS3 Transitions

Zmiana szerokości elementu - Transition
Transition - zmiana szerokości i wysokości elementu
Określ różne krzywe prędkości do przejścia
Określ opóźnienie efektu przejścia
Dodaj transformację do efektu przejścia
Określić wszystkie właściwości przejścia w jednym Skrócona forma

Przejścia CSS3 wyjaśnione


Animacje CSS3

Bind animację do elementu
Animacja - zmień kolor tła elementu
Animacja - zmiana koloru tła i położenie elementu
Opóźnić animację
Uruchom animację 3 razy, zanim się zatrzyma
Uruchom animację na wieki
Uruchom animację w odwrotnym kierunku
Uruchom animację w naprzemiennych cyklach
Krzywe prędkości dla animacji
Animacja skróconą własnością

Animacje CSS3 wyjaśnione


Obrazy CSS3

zaokrąglone obrazu
krążył obrazu
miniatura
Miniatura jako link
responsive obrazu
Tekst obrazu (w lewym górnym rogu)
Tekst obrazu (prawy górny róg)
Tekst obrazu (lewy dolny róg)
Tekst obrazu (prawy dolny róg)
Tekst obrazu (wyśrodkowane)
zdjęć Polaroid
Filtr obrazu w skali szarości
Zaawansowane - Obraz Modal z CSS i JavaScript

CSS3 Obrazy wyjaśnione


Przyciski CSS3

Podstawowe przyciski CSS
kolory przycisków
przycisk rozmiary
Zaokrąglone przyciski
Kolorowe przyciski granic
Hoverable przyciski
przyciski Cienia
przyciski niepełnosprawnych
szerokość przycisk
grupy przycisków
Graniczy przycisk grupy
Animowane Przyciski (Hover Effect)
Animowane Przyciski (Ripple Effect)
Animowane Przyciski (Wciśnięty Effect)

CSS3 Przyciski wyjaśnione


CSS3 Pagination

proste stronicowanie
Aktywne i hoverable stronicowanie
Zaokrąglone aktywny i hoverable stronicowanie
Hoverable efekt przejścia
graniczy stronicowanie
Zaokrąglone ramką stronicowanie
Paginacja z przestrzeni między linkami
wielkość Pagination
Paginacja z przestrzeni między linkami
centered stronicowanie
Bułka tarta

CSS3 Pagination wyjaśnione


CSS3 wielu kolumnach

Tworzenie wielu kolumn
Określa odstęp między kolumnami
Określ styl rządów między kolumnami
Określ szerokość reguły między kolumnami
Określ kolor reguły między kolumnami
Określ szerokość, styl i kolor reguły między kolumnami
Określ, ile kolumn element powinien obejmować całej
Określ zasugerował optymalną szerokość dla kolumn

CSS3 wiele kolumn wyjaśnione


Interfejs użytkownika CSS3

Niech użytkownik zmienić szerokość elementu
Niech użytkownik zmienić wysokość elementu
Pozwól użytkownikowi zmieniać rozmiar zarówno szerokość i wysokość elementu
Dodaj odstęp między konturem i granicy elementu

Interfejs użytkownika CSS3 wyjaśnione


CSS3 Box Rozmiary

Szerokość elementów bez box-zaklejania
Szerokość elementów z box-zaklejania
Elementy formy + box-klejący

Pole CSS3 FORMATYZERKA wyjaśnione


CSS3 schematu flexbox

Schematu flexbox z trzech elementów typu flex
Schematu flexbox z trzech elementów typu flex - kierunek rtl
flex-kierunek - wiersz-reverse
flex-kierunek - kolumna
flex-kierunek - kolumna-reverse
usprawiedliwić-treści - Flex-end
usprawiedliwić-treści - centrum
usprawiedliwić-treści - przestrzeń pomiędzy
usprawiedliwić-treści - przestrzeń wokół
align-elementy - odcinek
align-elementy - Flex-początek
align-elementy - Flex-end
align-elementy - centrum
align-elementy - bazową
flex-wrap - nowrap
flex-wrap - Okład
flex-wrap - zawinąć do tyłu
align-treści - centrum
Zamów wyginanie elementów
Margin-right: auto;
Margin: auto; = Idealne centrowanie
align-Flex na siebie elementów
Określenie długości elementu elastycznego, w stosunku do pozostałych elementów flex
Tworzenie strony internetowej z elastycznego schematu flexbox

CSS3 schematu flexbox wyjaśnione


CSS3 media Zapytania

Zmień background-color do jasnozielony jeśli rzutnia jest 480px szerokości lub szersza
Pokaż menu, które będzie unosić się po lewej stronie, gdy rzutnia jest 480px szerokości lub szersza

CSS3 zapytań o media wyjaśnione


CSS3 Zapytania Media - Więcej przykładów

Strona HTML
Szerokość od 520 do 699px - Zastosuj ikonę e-mail do każdego linku
Szerokość od 700 do 1000px - Wstęp linki z tekstem
Szerokość w świetle powyżej 1001px - Zastosuj adres e-mail do linków
Szerokość powyżej 1151px - Dodaj ikonę jak kiedyś, zanim
Użyj listy linków pocztowych na pasku bocznym na stronie internetowej

Media CSS3 odpytuje przykłady wyjaśnione