CSS3

Kaskadowe Arkusze Stylów

aby strona błyszczała

Artykuły i tutoriale CSS3 w języku polskim

Responsywne przyciski w CSS3
wideo tutorial (8 minut)
FC Barcelona HTML/CSS logo
logo w CSS, animowana piłka
Moduł kolorów CSS 3
polskie tłumaczenie rekomendacji W3C CSS Color Module Level 3
CALC() – nowe supermoce CSS
omówienie funkcji calc()
Przyszłość CSS zaczyna się już dziś
prezentacja nadchodzących nowości CSS, m.in. filtry, shadery, zmienne CSS4
Gramatyka w HTML i CSS
omówienie właściwości hyphens
Selektory poziom 3
polskie tłumaczenie rekomendacji W3C Selectors Level 3
CSS3 – Przejścia
wideo tutorial (10 minut), omówienie właściwości transitions i funkcji cubic-bezier
CSS3 – Tekst w kolumnach
wideo tutorial (8 minut), omówienie modelu Multi-column

AD 2011

Wesołych Świąt
kartka świąteczna w CSS3 (animacja) i HTML5 (dzwięk)
Niechciane zdarzenia myszki a CSS pointer-events
omówienie właściwości pointer-events ze specyfikacji CSS3 UI
Content – właściwość CSS
kilka ciekawych przykładów z wykorzystaniem właściwości content
CSS4 – podróż do przyszłości
omówienie nowości które pojawią się w nadchodzącym CSS4
Refleksje (lustrzane odbicia) obrazków w CSS za pomocą box-reflect
box-reflect nieoficjalna właściwość CSS od Webkit
Pseudoelementy w CSS3
omówienie selection, first-line, first-letter, before, after
Opóźnione zwijanie drop-down menu przy pomocy CSS transitions
krótkie wyjaśnienie i demo
Like vs Plus
animowane demo wykonane w CSS3
CSS3: Manipulacja wielkością czcionki przy użyciu REM
omówienie jednostki rem z Values and Units
Z CSS3 szybciej i przyjemniej
PDF (2,7 MB) prezentacja z konferencji Poznański Dzień Internetu 2011
CSS3 i Media Queries
omówienie typów mediów
CSS3: efekt kilku zdjęć spiętych spinaczem biurowym
z wykorzystaniem transformacji, cieni i pseudoelementów
Pseudoklasy CSS3
omówienie pseudoklas z przykładami
CSS3: gradienty
omówienie gradientów liniowych i radialnych
Przejścia i selektory CSS3
wideo tutorial (9 minut)
CSS3 FLEXBOX: Flexible Box Model
opis modułu pozwalającego zbudować elastyczny layout
CSS3: Selektory interfejsu użytkownika
opis pseudoklas z CSS Basic User Interface Module Level 3
Kompletna instrukcja używania @font-face
krok po kroku jak zaimplementować niestandardowe fonty, odnośniki do źródeł

AD 2010

CSS3 + Flexbox = Koniec z FLOAT’ami
zastosowanie właściwości z modułu Flexible Box Layout Module
CSS3 – transitions
efekty przejść w CSS3, czyli animacje CSS
Horyzontalne menu z użyciem CSS3
efekt animacji z zastosowaniem właściwości transition i transform
Rzut oka na CSS3 – kolejne przykłady
opis właściwości background-size, HSLA, RGBA
Przycisk CSS3
wideo tutorial (7 minut)
Rzut oka na CSS3
artykuł opisuje najpopularniejsze właściwości nowych kaskadowych arkuszy stylów
Word-Wrap: Własność CSS3 działająca we wszystkich przeglądarkach
opis i przykłady
Transformacje 2D i CSS
opis właściwości transform
Funkcja calc() z CSS3 w Firefoksie 4
wyrażenia arytmetyczne, tłumaczenie Firefox 4: CSS3 calc()
Szczegółowy Opis Zapytań i Typów @media w CSS
omówienie Media Queries i przypomnienie typów mediów z CSS 2.1
Bezkarne używanie CSS3
krótki tutorial wyjaśniający czym jest Modernizr
Border radius
zaokrąglone rogi, tutorial
Zmiana domyślnego koloru zaznaczenia w CSS
pseudoelement selection
Upiększenia: okrągłe brzegi i cieniowanie
sporo przykładów border-radius, text-shadow, box-shadow
Co nowego przynosi CSS 3
kurs CSS3 Pawła Wimmera
Pudełka w CSS i ich właściwości
o tym, że box-model to nie jest „model pudełkowy”, czyli poprawna terminologia w CSS

AD 2009

Zaokrąglanie rogów bez użycia grafik
opis zastosowania border-radius
Własne fonty
tutorial i krótka historia @font-face
Specyfikacja Kaskadowych arkuszy stylów, poziom 2 (CSS 2.1)
tłumaczenie rekomendacji kandydującej W3C z 8 września 2009
CSS Circles, czyli radykalne nadużycie border-radius
tutorial jak uzyskać okrąg za pomocą border-radius
Trick z cieniem po wewnętrznej stronie tekstu
efekt uzyskany za pomocą text-shadow i kanał alfa w RGBA
Guzik z tłem, gradientem i zaokrąglonymi rogami
tutorial
Krótkie wprowadzenie do zapytań o media w Firefoksie 3.5
tłumaczenie A short introduction to media queries in Firefox 3.5.
Stylowy tekst przy użyciu text-shadow
tłumaczenie artykułu Stylish text with text-shadow
Eleganckie czcionki przy użyciu @font-face
tłumaczenie artykułu Beautiful fonts with @font-face
CSS Transitions, czyli efekty przejścia w CSS
krótkie omówienie transitions
Selektory CSS 3
artykuł opisujący selektory w wersji trzeciej
Obsługa selektorów CSS 3 przez przeglądarki
porównanie przeglądarek pod względem obsługi selektorów CSS3
Ładne tabele z selektorami CSS3
tłumaczenie artykułu Slick tables with css 3 selectors
Transformacje CSS – rzut izometryczny i skalowanie
przykład zastosowania CSS 2D Transforms

Strony które warto znać

caniuse.com
obsługa CSS3, HTML5 i SVG w przeglądarkach internetowych
CSS current work
specyfikacje CSS, oficjalna lista modułów
CSS Properties Index
porównanie wersji CSS

Narzędzia CSS3

Generatory kodu CSS, oraz inne narzędzia ułatwiające tworzenie i rozumienie nowych właściwości CSS

Krótko o kaskadowych arkuszach stylów

Arkusz stylów to zbiór reguł służących do nadawania wyglądu stronom internetowym. Najczęstsze zastosowanie CSS to formatowanie dokumentów HTML. Na ilustracji poniżej przedstawiono prosty arkusz stylów, który składa się z następujących elementów:

Reguła kaskadowych arkuszy stylów, z oznaczeniem poszczególnych elementów.
Selektor
w tym przypadku selektorem jest element języka HTML, znacznik p
Właściwość i wartość
właściwość to inaczej jakaś cecha selektora. W tym przypadku jest to kolor tekstu color, wartość ustawiono na red, co oznacza kolor czerwony.
Deklaracja
formatuje selektor (nadaje mu wygląd), tutaj formatowany jest element p
Blok deklaracji
może zawierać jedną lub wiele deklaracji

Całość tworzy instrukcję dla przeglądarki internetowej, którą można opisać słowami: odnajdź wszystkie elementy <p>, ustaw im kolor tekstu na czerwony.

Co oznaczają numerki: CSS1, CSS2, CSS 2.1, CSS3?

To są kolejne wersje. Dokument który zawiera opis reguł i zasad kaskadowych arkuszy stylów, nazywa się specyfikacją. Specyfikacje są opracowywane głównie przez organizację World Wide Web Consortium (W3C) i przechodzą przez wiele etapów prac, aby ostatecznie uzyskać status rekomendacji W3C. Specyfikacja która stała się rekomendacją jest zamknięta i nie wprowadza się do niej żadnych zmian. Wszystkie nowe pomysły i zmiany w stosunku do aktualnej wersji są uwzględniane w następnej wersji. W czerwcu 2011 roku zamknięto prace nad wersją CSS 2.1, obecnie publikowane są poszczególne moduły specyfikacji CSS3, aktualny przebieg prac można śledzić na CSS current work. W przyszłości rozwijana będzie wersja CSS4, prace już trwają.

Czym różni się CSS3 od CSS 2.1?

Przede wszystkim różni się podziałem na moduły (modules), dodano także nowe selektory (selectors) i właściwości (properties).

Czym są moduły CSS3?

Większość modułów grupuje właściwości, np. moduł tekstu (Text) grupuje właściwości CSS, które są związane z formatowaniem tekstu. Z kolei moduł jednostek i wartości (Values and Units) opisuje wszystkie możliwe jednostki i typy wartości. Modułów jest kilkadziesiąt, każdy osobno uzyskuje status rekomendacji W3C.

Zalety modularyzacji

Dany moduł może zostać opublikowany jako oficjalna rekomendacja W3C, niezależnie od tego czy inne moduły są ukończone, czy dopiero w trakcie opracowywania. Nie trzeba już czekać na ukończenie specyfikacji obejmującej wszystkie wprowadzone zmiany, jak miało to miejsce we wcześniejszych wersjach CSS. Kaskadowe arkusze stylów w wersji 3 bardzo się rozrosły, niektóre moduły objętością dorównują pełnej specyfikacji CSS1. Dzięki modularyzacji prostsze staje się publikowanie poprawek i rozwijanie CSS.

Należy zauważyć, że przeglądarka internetowa nie musi obsługiwać wszystkich modułów CSS3, np. przeglądarka głosowa (przeznaczona dla osób niewidomych), nie potrzebuje obsługiwać właściwości, które są odpowiedzialne za formatowanie kolorów (Color), z kolei może chcieć obsługiwać styl mowy (Speech).

Przeglądarki internetowe, które obsługują CSS3