Nowości w CSS3
Na początek może trochę historii, dla tych którzy może nie wiedzą kiedy dokładnie zaczęto stosować kaskadowe arkusze stylów. Wszystko zaczęło się w 1996 roku, kiedy to CSS został opracowany przez organizację W3C jako potomek języka DSSSL. Prace nad tym językiem, którego stosuje się do opisu formy prezentacji stron WWW rozpoczęto już w 1994. Arkusz stylów zawierający listę reguł, które ustalają w jaki sposób ma być wyświetlany dany element na naszej stronie. Nie będę się rozpisywać o pierwszych wersjach CSS, przejdę od razu do najnowszej czyli CSS3, która oficjalnie w 2012 roku została opublikowana z ponad 50-ci-oma różnymi modułami. W niniejszym artykule postaram się opisać kilka udogodnień oraz rozszerzeń.
Własna czcionka
Reguła @font-face pozwala dołączać do naszych arkuszy stylów własne czcionki. Deskryptor font-family służy do określania nazwy rodziny czcionki i jest on wymagany, również deskryptor src, dzięki któremu wskazujemy skąd czcionka ma być pobierana.
Przykład:
@font-face {
font-family: mojaCzcionka;
src: url(fonts/Helvetica.otf);
}
p.font {
font-family: mojaCzcionka, sans-serif;
}
Zaokrąglenie narożników elementu było niegdyś nie lada wyzwaniem, trzeba było do tego celu przygotować odpowiednią grafikę. Dzięki nowej regule border-radius jest to możliwe z poziomu naszego arkusza. Możemy zdefiniować jednakowe zaokrąglenie dla wszystkich narożników lub dla każdego z osobna.
- indywidualne zaogrąglanie narożników:
border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius - reguła zaokrąglenia dla wszystkich narożników to `border-radius
Przykład:
p {
background-color: #000;
border-radius: 10px;
}
BORDER-RADIUS: 10PX
BORDER-RADIUS: 50%
Tło
Specyfikacja CSS3 zawiera nowe właściwości jeśli chodzi o określenie obszaru malowania tła, możemy pozycjonować grafiki oraz je skalować.
- obszar malowania tła:
background-clip: border-box | padding-box | content-box | initial | inherit;
| Wartość | Opis |
|---|---|
| border-box | Obszar malowania obejmuje zasięgiem treść, dopełnienie i obramowanie. Wartość domyślna. |
| padding-box | Obszar malowania obejmuje zasięgiem treść i dopełnienie. |
| content-box | Obszar malowania obejmuje zasięgiem wyłącznie treść. |
| initial | Ustawia wartość właściwości na domyślną. |
| inherit | Wartość właściwości jest dziedziczona z elementu rodzica. |
- pozycjonowanie grafiki tła:
background-origin: border-box | padding-box | content-box | initial | inherit;
| Wartość | Opis |
| border-box | Grafika tła jest ustawiana względem obszaru obramowania. |
| padding-box | Grafika tła jest ustawiana względem obszaru dopełnienia. Wartość domyślna. |
|
content-box |
Grafika tła jest ustawiana względem obszaru treści. |
| initial | Ustawia wartość właściwości na domyślną. |
| inherit | Wartość właściwości jest dziedziczona z elementu rodzica. |
- rozmiar grafiki w tle:
background-size: auto | szer wys | szer% wys% | cover | contain | initial | inherit;
| Wartość | Opis |
| auto | Grafika tła zachowuje swoje wymiary. Wartość domyślna. |
| szer wys | Ustawia szerokość i wysokość grafiki tła. Jeśli podana jest tylko jedna wartość, druga jest ustawiona na auto. Rozmiary podawane są w jednostkach długości (px, pt, em, itd.). |
| szer% wys% | Ustawia szerokość i wysokość grafiki tła w procentach rozmiaru elementu nadrzędnego. Jeśli podana jest tylko jedna wartość, druga jest ustawiona na auto. |
| cover | Skalowanie grafiki tła w taki sposób, że wypełnia ona całą przestrzeń elementu. Proporcje grafiki są zachowane. Część grafiki nie będzie widoczna, jeśli szerokość i wysokość elementu nie są proporcjonalne do rozmiarów grafiki. |
| contain | Skalowanie grafiki tła w taki sposób, że cała grafika jest widoczna w obszarze elementu. Proporcje grafiki są zachowane. Część elementu nie będzie pokryta przez grafikę, jeśli rozmiary grafiki i elementu się nie pokrywają. |
| initial | Ustawia wartość właściwości na domyślną. |
| inherit | Wartość właściwości jest dziedziczona z elementu rodzica. |
-
BACKGROUND-SIZE: COVER
-
BACKGROUND-SIZE: CONTAIN
Przejście
Kaskadowe arkusze stylów pozwalają nam na tworzenie płynnych przejść dla danej reakcji, najczęściej wykorzystywane dla :hover. Po najechaniu kursorem na dany element, zostanie on przekształcony.
Przykład:
div {
margin: 0 auto;
width: 50px;
height: 50px;
background-color: #000;
color: #fff;
padding: 10px;
transition: all 2s ease-in-out 0.5s;
-webkit-transition: all 2s ease-in-out 0.5s;
}
div:hover {
width: 150px;
background-color: #ff0000;
}
Wszystko można zapisać w jednej zbiorczej deklaracji, tak jak w przykładzie powyżej: transition: -property -duration -timing-function -delay | initial | inherit;
Wartość domyślna „all”.
Właściwość transition-property określa właściwości, które będą podlegały efektowi przejścia. transition-property: all | właściwość | none | initial | inherit;
| Wartość | Opis |
|---|---|
| all | Przejście dotyczy wszystkich właściwości. Wartość domyślna. |
| właściwość | Jedna lub więcej właściwości podlegających przejściu. Nazwy właściwości oddzielane są przecinkami. |
| none | Żadna z właściwości nie podlega przejściu. |
| initial | Ustawia wartość właściwości na domyślną. |
| inherit | Wartość właściwości jest dziedziczona z elementu rodzica. |
Przykład:
div {
transition-property: width, background-color;
-webkit-transition-property: width, background-color;
}
Możemy również określić kilka innych właściwości przejścia:
- czas trwania przejścia:
transition-duration; - krzywą prędkości przejścia:
transition-timing-function; - czas do rozpoczęcia przejścia:
transition-delay.
Animacje
Animację można zapisać zbiorczo w jednej deklaracji: animation: -name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state | initial | inherit
| Wartość | Opis |
|---|---|
| animation-name | Określa nazwę animacji dla klatek kluczowych. Wartość domyślna”none”. |
| animation-duration | Określa czas trwania animacji do końca cyklu. Wartość domyślna „0”. |
| animation-timing-function | Określa krzywą prędkości animacji. Wartość domyślna „ease”. |
| animation-delay | Określa po jakim czasie animacja się rozpocznie. Wartość domyślna „0”. |
| animation-iteration-count | Określa ile razy animacja ma zostać odtworzona. Wartość domyślna „1”. |
| animation-direction | Określa kierunek działania animacji. Wartość domyślna „normal”. |
| animation-fill-mode | Określa, jakie style są stosowane do elementu, kiedy animacja nie jest odtwarzana. Wartość domyślna „none”. |
| animation-play-state | Określa czy animacja jest uruchomiona czy wstrzymana. Wartość domyślna „running”. |
| initial | Ustawia wartość właściwości na domyślną. |
| inherit | Wartość właściwości jest dziedziczona z elementu rodzica. |
Przykład:
div {
animation: e-zoner 10s ease 2s infinite alternate none running;
-webkit-animation: e-zoner 10s ease 2s infinite alternate none running;
}
- klatki kluczowe – w animacji możemy również określić klatki kluczowe, które zmienią w danym czasie nasz element. Każda animacja rozpoczyna się na 0% a kończy a 100%, które zawsze należy określić.
`@keyframes nazwa-animacji {klatka-kluczowa { deklaracja-stylu; }}
| Wartość | Opis |
|---|---|
| nazwa-animacji | Określa nazwę animacji. |
| klatka-kluczowa | Określa procentową część czasu animacji. Zawiera się w przedziale 0-100%. Klatek kluczowych może być dowolnie wiele. |
| deklaracja-stylu | Określa jedną lub więcej deklaracji stylu dla klatki kluczowej. |
Inne przydatne właściwości jakie możemy przypisać naszemu animowanemu elementowi:
- nazwa animacji: `animation-name: nazwa | none | initial | inherit;’
- długość trwania animacji: `animation-duration: czas | initial | inherit;’
- krzywa prędkości animacji: `animation-timing-function: cubic-bezier(x, x, x, x) | linear | ease | ease-in | ease-out | ease-in-out | initial | inherit;’
- czas do rozpoczęcia animacji: `animation-delay: czas | initial | inherit;’
- ilość powtórzeń animacji: `animation-iteration-count: liczba | infinite | initial | inherit;’
- kierunek odtwarzania animacji: `animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;’
- style dla nie odtwarzanej animacji: `animation-fill-mode: none | forwards | backwards | both |initial | inherit;’
- uruchomienie lub wstrzymanie animacji: `animation-play-state: paused | running | initial | inherit;’
Media queries
Reguły @media istniały już wcześniej, ale dopiero z pojawieniem się CSS3 zostały mocno rozbudowane. Jest to niezmiernie przydatne oraz bardzo często używane podczas tworzenia stron internetowych. Jeśli chcecie dowiedzieć się więcej na ten temat, zachęcam do przeczytania artykułu: RWD na blogu.