4.01.2017 Anna Konon Developers

Facebook

Google+

Twitter

Linkedin

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;

}

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;

• pozycjonowanie grafiki tła: background-origin: border-box | padding-box | content-box | initial | inherit;

• rozmiar grafiki w tle: background-size: auto | szer wys | szer% wys% | cover | contain | initial | inherit;

• 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ść

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;

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

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; }}

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.