środa
04
Styczeń
2017
Developers

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. Dyskryptor font-family służy do określania nazwy rodziny czcionki i jest on wymagany, również dyskryptor 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

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;

PRZYKŁAD TRANSITION – NAJEDŹ KURSOREM
Wartość Opis
transition-property Określa właściwości, które będą podlegały przejściu. W przypadku więcej niż jednej rozdzielane są przecinkami.

Wartość domyślna „all”.

transition-duration Określa czas trwania przejścia. Wartość domyślna „0”.
transition-timing-function Określa krzywą prędkości przejścia. Wartość domyślna „ease”.
transition-delay Określa po jakim czasie od zajścia zdarzenia efekt się rozpocznie. Wartość domyślna „0”.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

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;
PRZYKŁAD ANIMACJI

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: Responsive web design.


Źródło: http://www.e-zoner.pl/css3
Źródło: http://www.w3schools.com/

FacebookTwitterGoogle+LinkedIn