Przewodnik dla początkujących do CSS3

Ten artykuł jest częścią naszego „Seria samouczków HTML5 / CSS3” - dedykowane, aby pomóc Ci stać się lepszym projektantem i / lub deweloperem. Kliknij tutaj aby zobaczyć więcej artykułów z tej samej serii.

Od czasu ogłoszenia w 2005 r. Rozwój poziomu 3 kaskadowego arkusza stylów lub lepiej znanego jako CSS3 był uważnie obserwowany i monitorowany przez wielu projektantów i programistów. Wszyscy jesteśmy podekscytowani zdobyciem nowych funkcji CSS3 - cieni tekstowych, obramowań z obrazami, krycia, wielu środowisk itp., Żeby wymienić tylko kilka.

Na dzień dzisiejszy nie wszystkie selektory CSS3 są w pełni obsługiwane. Ale to nie znaczy, że nie możemy się zabawić testując nowe elementy CSS3. Ten post jest przeznaczony dla wszystkich projektantów i programistów, którzy znają już CSS 2.1 i chcą zabrudzić swoje ręce w CSS3.0.

Jest to kompilacja przydatnych odczytów CSS3, przykładowych kodów, porad, samouczków, arkuszy kalkulacyjnych i innych. Możesz z nich korzystać w swoich projektach, po prostu upewnij się, że wdzięcznie spadnie na niekompatybilne przeglądarki.

Pierwsze kroki z CSS3

Wprowadzenie do CSS3

(Mapa drogowa) oficjalne wprowadzenie do CSS i CSS3. Ten dokument daje ogólny pomysł na rozwój CSS3.

CSS3: Przenieś projekt na wyższy poziom

Zalety CSS3, objaśnienia i przykłady właściwości CSS3 i selektorów.

Kilka sztuczek z CSS3

Webmonkey przeprowadzi Cię przez kilka podstawowych sztuczek w CSS3, w tym zaokrąglone obramowania, obramowania, cienie, sztuczki graficzne i inne.

Wywiad: Sześć pytań do Erica Meyera na temat CSS3

Zespół Folks at Six Revision udzielił wywiadu Ericowi Meyerowi z cennymi spostrzeżeniami i odpowiedziami na temat CSS3.

CSS3: Progressive Enhancement

W jaki sposób można używać zgrabnych (lub progresywnych) technik ulepszania, aby korzystać z funkcji CSS3 w przeglądarkach, które je obsługują, zapewniając jednocześnie, że kod będzie nadal zapewniał satysfakcjonujące wrażenia użytkownika w starszych przeglądarkach, które jeszcze nie obsługują tych funkcji.

CSS3: Tło i granice

Zaokrąglone granice (border-radius)

Przewodnik po tworzeniu zaokrąglonej granicy z CSS3 promień graniczny własność.

Zaokrąglone granice z obrazem (obrazy-obramowania)

Jak używać obrazów w obramowaniach z obraz graniczny własność.

CSS3 obramowania, tła i pola

Szczegółowe wyjaśnienie z przykładami nowych właściwości CSS3, takich jak: klip w tle, pochodzenie tła, przywiązanie do tła, box-shadow, pudełko-dekoracja-przerwa, promień graniczny i obraz graniczny.

CSS3: Tekst

Efekt typografii

Utwórz prosty efekt typografii za pomocą CSS3.

Sześć efektów tekstowych przy użyciu cienia tekstowego

Efekty tekstowe obejmują: vintage / retro, neon, wstawkę, anaglify, ogień i grę planszową.

Piękna typografia

Jak zrobić podstawowy znacznik i przekształcić go w atrakcyjny i piękny projekt typograficzny dzięki czystemu CSS3.

Obrót tekstu

Używa obrazka sprite i kropki CSS, aby wszystko układało się prawidłowo.

Tekst konspektu

Jak dodać kontur lub obrys do tekstu za pomocą CSS3 skok tekstu własność.

Efekt maskowania tekstu

Interaktywny efekt maskowania tekstu za pomocą cień tekstu Właściwość CSS.

Łączenie podsuwania (animacja) z CSS3

Ditch Javascript i stwórz efekt szturchania całkowicie za pomocą CSS3.

Stylizacja wyboru CSS

Zmień styl zaznaczania tekstu za pomocą CSS3.

CSS3: Menu

Zawartość wielu kolumn

Używanie CSS3 do tworzenia zestawu kolumn w witrynie bez konieczności przypisywania poszczególnych warstw i (lub) akapitów dla każdej kolumny.

Seksowne podpowiedzi z Just CSS

Jak korzystać ze zmieniającego się standardu CSS, można ulepszyć niektóre piękne podpowiedzi między przeglądarkami.

Więcej podpowiedzi:

Czysta podpowiedź CSS3
Podpowiedzi z CSS3.

Rozwijane menu

Jak utworzyć wielopoziomowe menu rozwijane Apple.com za pomocą promień graniczny, box-shadow, i cień tekstu.

Obszar z kartami tylko w CSS3

Kliknij na zakładkę, ukryj wszystkie panele, pokaż ten, który odpowiada klikniętej karcie - wszystko za pomocą CSS.

Wstążki 3D z CSS3

Twórz ładnie wyglądające wstążki 3D tylko za pomocą CSS3.

CSS3: Cień

Cień w obrazie

Zaprezentuj kilka technik i niektóre z możliwych wyglądów do usuwania cieni bez użycia obrazów.

Glow Tabs with Box Shadow

Jak tworzyć intuicyjne i piękne karty w CSS3 bez obrazu.

CSS3: Przyciski

Samouczek: Ładne przyciski

Jak tworzyć piękne przyciski CSS3 zgodne z różnymi przeglądarkami, które ulegają degradacji.

Dymki

Różne formy efektu dymku stworzone za pomocą CSS 2.1 i ulepszone za pomocą CSS3.

Przyciski podobne do Github

Zbiór przycisków, które pokazują, co jest możliwe przy użyciu CSS3, zachowując jednocześnie najprostszy możliwy znacznik.

Przędzenie, zanikanie ikon za pomocą CSS3 i MooTools

Jak używać CSS3 i MooTools do tworzenia dynamicznych, obrotowych elementów.

Nakładka obrazu

Praktyczne zastosowanie właściwości border-image CSS3.

Więcej

CSS3 + Mootools. Przykład eksperymentowania w mootools. Dodaje to właściwości CSS3 do podstawowej pracy w ramce MooTools.
Eksplodujące logo z CSS3 i MooTools lub jQuery. Wykonaj statyczny obraz i ustaw go jako animowany, eksplodujący efekt po najechaniu myszą.
Potęga HTML 5 i CSS 3. HTML 5 i CSS 3 szybko zdobywają popularność, Łatwa w usuwaniu jest tutaj, aby wyjaśnić, jak i dlaczego.
Spinning Rays z CSS3 Animacje i JavaScript Przykład. Prosty i subtelny efekt wirowania promieni z tyłu obrazu.
CSS3 Polaroid Photo Gallery. Jak zbudować fajnie wyglądający stos zdjęć Polaroid z czystą stylizacją CSS.
HTML 5 i CSS 3: Techniki, które wkrótce będziesz używać. Poradnik na temat budowania bloga od podstaw z HTML5 i CSS3.