Четверг, 07 Марта 2013 11:01

CSS3. Новые возможности

Written by 
Оцени эту запись
(8 Голоса)

В данной статье мы поговорим о основных возможностях CSS3. Пройдемся по такому плану:

  • вступление
  • свойства CSS3
  • селекторы CSS3
  • вендорные префиксы
  • особые значения CSS свойств
  • тянущиеся боксы в CSS3
  • CSS фильтры
  • функции 
  • колонки
  • рисование
  • геометрические фигуры
  • анимация - слайдер на CSS, падающий снег
  • transition
  • transform

 

Картина Приют для времени

Вступление

 

CSS3 - это новая(последняя) версия CSS. Она служит для оформления HTML страницы. CSS3 добавляет веб-странице новые возможности, которые раньше были не доступны. В данной статье мы рассмотрим такие возможности CSS3, как рисование сложных элементов или геометрических фигур, разбивание текста на колонки, анимированные элементы, анимация при наведении, трансформация, градиентная заливка фона, новые свойства, селекторы и значения свойств. Кроме того, отдельно рассмотрим такие возможности оформления элементов, как скругления углов и тени. В статье будут приведены готовые примеры.

 

Свойства CSS3

 

В CSS3 появилось много новых свойств:

 

@keyframes - описывает анимацию элемента, изменение значений указанных свойств

animation - позволяет задать вместе значения всех нужных для анимации свойств

animation-name - указывает имя анимации

animation-duration - длительность цикла анимации

animation-timing-function - тип временной функции анимации

animation-delay - задержка анимации

animation-iteration-count - количество повторов анимации

animation-direction - направление анимации, в одну сторону или в обе

animation-play-state - указывает запущена анимации или поставлена на паузу

 

background-clip - задает область заливки фона - под контентом, отступами или границей

background-origin - задает расположение фоновой картинки

background-size - задает размер фоновой картинки

 

border-bottom-left-radius, border-bottom-right-radius - угол скругления нижних левого и правого углов

border-image - картинка на фоне границы, все свойства вместе

border-image-outset - выход картинки за пределы границы

border-image-repeat - повтор фоновой картинки

border-image-slice - смещение картинки фона границы

border-image-source - путь к картинке для фона границы

border-image-width - ширина картинки для фона границы

border-radius - угол скругления всех углов элемента

border-top-left-radius, border-top-right-radius - угол скругления верхних левого и правого углов

 

box-shadow - тень блока

overflow-x - видимость лишнего контента по горизонтали

overflow-y - видимость лишнего контента по вертикали

opacity - прозрачность элемента

 

box-align - выравнивание дочерних элементов тянущегося бокса

box-direction - направление дочерних элементов

box-flex - растяжение элемента относительно родителя

box-flex-group - растяжение группы элементов относительно родителя

box-lines - количество строк дочерних элементов

box-orient - ориентация бокса

box-pack - выравнивание элементов по направлению бокса

 

@font-face - нестандартный стиль

 

marquee-direction - направление движения контента (для элемента marquee)

marquee-play-count - количество циклов движение контента

marquee-speed - скорость движения контента

marquee-style - тип движения контента

 

column-count - количество колонок

column-fill - тип заливки колонок контентом

column-gap - расстояние между колонками

column-rule - вид линии между колонками

column-rule-color - цвет линии между колонками

column-rule-style - стиль линии между колонками

column-rule-width - ширина линии между колонками

column-width - ширина колонки 

column - общее правило для колонок

 

text-overflow - скрытие лишнего текста

text-shadow - тень текста

word-break - перенос строки

word-wrap - перенос слова

 

transform - трансформация элемента

transform-origin - позиция трансформируемого элемента

transform-style - указывает, могут ли дочерние элементы подвергаться трехмерной трансформации

perspective - перспектива

perspective-origin - позиция перспективы

backface-visibility - видимость стороны элемента отвернутой при помощи трансформации

 

transition - переход элемента (например, при наведении)

transition-property - свойство для перехода элемента

transition-duration - длительность перехода

transition-timing-function - тип перехода (временная функция)

transition-delay - задержка перехода

 

appearance - задает тип поведения элементов

box-sizing - зависимость размера элемента от внутренних отступов

resize - задает возможность растягивания элемента

 

 

Селекторы CSS

 

В CSS3 введены новые селекторы - псевдоклассы и псевдоэлементы:

 

:first-of-type - выбирает все элементы (по селектору), которые первые у родителя

:last-of-type - выбирает все элементы (по селектору), которые последние у родителя

:only-of-type - выбирает элементы (по селектору), которые такие единственные у родителя

:only-child - элемент, который единственный у родителя

:nth-child(n) - n-тый элемент среди дочерних своего родителя

:nth-last-child(n) - n-тый по счету с конца

:nth-of-type(n) - n-тый по типу у родителя

:nth-last-of-type(n) - n-тый с конца по типу у родителя

:last-child - последний дочерний элемент родителя

:root- корневой элемент, на HTML странице это <html>

:empty - выбор пустого элемента

:target - активное состояние анкора

:enabled - активный элемент управления формы

:disabled - неактивный элемент управления формы

:checked - выбранный элемент управления (input type radio, input type checkbox)

:not(selector) - элементы, которые не являются указанными селекторами

::selection - выбранный пользователем контент элемента

 

Псевдоэлементы :before и :after позволяют прорисовавыть на странице элементы, которых нет в HTML.

 

Вендорные префиксы

 

Вендорный префикс - это приставка к CSS свойству, которая указывает на браузер, который должен обработать свойство. Вендорные префиксы введены разработчиками браузеров в связи с тем, что в CSS3 появилось много интересных свойств, которые очень хочется внедрить, но другие браузера их еще не поддерживают.

 

Пример:

 

.shadow {

-moz-box-shadow: 1px 1px 3px 3px #ccc; /*свойство для FF*/

-webkit-box-shadow: 1px 1px 3px 3px #ccc; /*свойство для Chrome, Safari*/

box-shadow: 1px 1px 3px 3px #ccc; /*оригинальное свойство*/

}

 

Кроме того, веедорные префиксы дают возможность разработчикам браузеров внедрять свои собственные свойства. Этот вариант будет подробно рассмотрен в разделе CSS фильтров.

 

Особые значения CSS свойств

 

В данном разделе я хочу рассказать о двух самых интересных вариантах особых значений CSS свойств - это градиентный фон и модель тянущихся блоков.

 

Сделаем блоку градиентный фон при помощи одной строки:

 

<div class="gradients" style="background-image: -webkit-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red); background-image: -moz-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red);"> &nbsp;</div>

 

 

 

Используя значение свойства linear-gradient, можно на фон ставить разное количество цветов и управлять размером заливки. Рассмотрим еще один пример:

 

 

<div class="gradients" style=" background-image: -webkit-linear-gradient(0deg, rgba(255, 0, 0, 0.7) 50%, transparent 50%), -webkit-linear-gradient(90deg, rgba(255, 0, 255, 0.7) 50%, transparent 50%); background-size: 50px; "> &nbsp;</div>

 

 

 

Заметьте, это сделано без использования картинок!

 

А если перейти к тянущимся боксам, то это особое значение свойства display:

 

.box {

display: -webkit-box;

display: -moz-box;

}

 

Особенности и примеры данной модели будут подробно описаны в разделе "Тянущиеся боксы в CSS3".

 

CSS фильтры

 

CSS фильтры описаны на данный момент только для WebKit браузеров. Свойство -webkit-filter позволяет менять отображение элемента (блока или картинки), делая его ярче, контрастнее или черно-белым.

 

инверсия

изменение оттенка

 размытие

 

 

Функции

 

В CSS3 введены новые функции, которые позволяют делать простые вычисления, выбирать максимальное или минимальное значения. В сожалению, на данный момент только одна из них поддерживается браузерами, причем только некоторыми.

 

 

Calc() - позволяет делать вычисления, мешая проценты и абсолютные значения

width: -webkit-calc(100%-40px);

width: -moz-calc(100%-40px);

Min() - позволяет выбрать минимальное из указанных в скобках параметров

width: -webkit-min(100%, 400px);

width: -moz-min(100%, 400px);

Max() - позволяет выбрать максимальное из указанных в скобках параметров

width: -webkit-max(100%, 400px);

width: -moz-max(100%, 400px);

 

Приведу пример на webkit-calc(), где ширина вычисляется по формуле 100% - 50px:

 

 

 

 

 

Колонки

 

В данном разделе рассмотрим применение свойства column для разбивания текста на колонки.

 

<div style="-moz-column-width: 200px; -webkit-column-width: 200px; column-width: 200px; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-rule: 2px dashed #7D26CD; -webkit-column-rule: 2px dashed #7D26CD; column-rule: 2px dashed #7D26CD;">Текст</div>

 

Мы разбиваем текст на три колонки шириной по 200px, задаем расстояние между ними в 20px и фиолетовую пунктирную линию между колонками.

 

Результат:

 

Юзабилити сайта - это степень удобства использования его пользователем для получения желаемого результата. На сайте должен быть реализован простой для понимания и удобный интерфейс, чтобы с первого взгляда любой пользователь мог понять что и как ему нужно сделать, чтобы найти определенную информацию или заказать определенный товар в интернет-магазине. Юзабилити - это не точная наука. Даже если при разработке сайта вы будете следовать всем основным правилам, это не обеспечит 100% удобства использования вашего сайта. Ведь на удобство использования, например. блока поиска по сайту влияет его расположение на сайте, его внешний вид и то, найдет ли пользователь необходимую ему информацию.

 

 

Рисование

 

В данном разделе я покажу пример, как можно рисовать достаточно сложные формы без картинок, при помощи только CSS. А покажу это я на примере рисования котика! :-)

 

HTML код:

 

    <div class="cat">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="head">
            <div class="face">
                <div class="eye left"></div>
                <div class="eye right"></div>
                <div class="nose"></div>
                <div class="mouth"></div>
                <div class="mustache left">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="mustache right">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="neck"></div>
        <div class="hand left"></div>
        <div class="hand right"></div>
        <div class="body">
            <div class="stomach"></div>
        </div>
        <div class="leg left"></div>
        <div class="leg right"></div>
    </div>

 

CSS код:

 

    <style>
        .cat {
            width: 150px;
            height: 180px;
            margin: 100px auto;
            position: relative;
        }
        .ear {
            width: 30px;
            height: 30px;
            background: #FCDFFF;
            border: 1px solid #333;
            position: absolute;
            top: -5px;
            border-radius: 5px / 15px;
        }
        .ear.left {
            left: 33px;
            -webkit-transform: rotate(18deg);
            -moz-transform: rotate(18deg);
        }
        .ear.right {
            right: 33px;
            -webkit-transform: rotate(-18deg);
            -moz-transform: rotate(-18deg);
        }
        .head {
            width: 100px;
            height: 85px;
            border-radius: 65px / 50px;
            background-image: -webkit-linear-gradient(-100deg, #B041FF, #A23BEC, #8B31C7, #842DCE);
            background-image: -moz-linear-gradient(-100deg, #B041FF, #A23BEC, #8B31C7, #842DCE);
            border: 1px solid #333;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        .face {
            margin: 22px auto 0;
            background-color: #FCDFFF;
            width: 90%;
            border-radius: 40px / 30px;
            position: relative;
            border: 1px solid #333;
            height: 61px;
        }
        .eye {
            position: absolute;
            top: -10px;
            width: 20px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 15px;
        }
        .eye.left {
            left: 45px;
        }
        .eye.right {
            right: 45px;
        }
        .eye:after {
            content: '';
            display: block;
            position: absolute;
            top: 7px;
            width: 6px;
            height: 15px;
            border-radius: 3px;
            background-color: #387C44;
            border: 1px solid #333;
        }
        .eye.left:after {
            left: 10px;
        }
        .eye.right:after {
            right: 3px;
        }
        .nose {
            width: 10px;
            height: 8px;
            border-radius: 5px;
            background: #D16587;
            position: absolute;
            left: 39px;
            top: 9px;
            border: 1px solid #333;
        }
        .nose:after {
            content: '';
            width: 1px;
            height: 30px;
            background-color: #333;
            position: absolute;
            left: 50%;
            top: 8px;
        }
        .mouth {
            width: 40px;
            height: 20px;
            border-bottom: 2px solid #333;
            border-radius: 40px / 20px;
            position: absolute;
            top: 30px;
            left: 25px;
        }
        .mustache {
            position: absolute;
            bottom: 20px;
            width: 20px;
        }
        .mustache.left {
            left: 10px;
        }
        .mustache.right {
            right: 10px;
        }
        .mustache span {
            display: block;
            width: 100%;
            height: 1px;
            background-color: #333;
            margin-bottom: 6px;
        }
        .mustache.left span:nth-child(1), .mustache.right span:nth-child(3) {
            -webkit-transform: rotate(15deg);
            -moz-transform: rotate(15deg);
            transform: rotate(15deg);
        }
        .mustache.left span:nth-child(3), .mustache.right span:nth-child(1) {
            -webkit-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            transform: rotate(-15deg);
        }
        .neck {
            width: 72px;
            height: 4px;
            background: #D16587;
            border-radius: 2px;
            margin: -3px auto 0;
            position: relative;
            border: 1px solid #333;
        }
        .neck:after {
            content: '';
            display: block;
            position: absolute;
            top: 3px;
            left: 46%;
            width: 10px;
            height: 10px;
            background-color: #EAC117;
            border-radius: 5px;
            border: 1px solid #333;
            z-index: 6;
        }
        .neck:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 4px;
            background-color: #EAC117;
            border-radius: 1px;
            border: 1px solid #333;
            z-index: 6;
        }
        .body {
            width: 70px;
            height: 57px;
            margin: 0 auto;
            background-image: -webkit-linear-gradient(-100deg, #B041FF, #A23BEC, #8B31C7, #842DCE);
            background-image: -moz-linear-gradient(-100deg, #B041FF, #A23BEC, #8B31C7, #842DCE);
            border: 1px solid #333;
            position: relative;
            z-index: 5;
        }
        .body:before {
            content: '';
            display: block;
            width: 50px;
            height: 40px;
            position: absolute;
            top: 2px;
            left: 10px;
            background-color: #FCDFFF;
            border: 1px solid #333;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        .hand {
            position: absolute;
            top: 101px;
            width: 25px;
            height: 20px;
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            z-index: 6;
        }
        .hand.left {
            -webkit-transform: rotate(-40deg) skew(-40deg);
            -moz-transform: rotate(-40deg) skew(-40deg);
            background-image: -webkit-linear-gradient(180deg, #A23BEC, #8B31C7);
            background-image: -moz-linear-gradient(180deg, #A23BEC, #8B31C7);
            left: 18px;
        }
        .hand.right {
            -webkit-transform: rotate(40deg) skew(40deg);
            -moz-transform: rotate(40deg) skew(40deg);
            background-image: -webkit-linear-gradient(-102deg, #B041FF, #A23BEC);
            background-image: -moz-linear-gradient(-102deg, #B041FF, #A23BEC);
            right: 18px;
        }
        .hand:after {
            content: '';
            display: block;
            position: absolute;
            left: -13px;
            bottom: -4px;
            width: 20px;
            height: 26px;
            background: #FCDFFF;
            border-radius: 10px;
            border: 1px solid #333;
            -webkit-transform: skew(30deg);
            -moz-transform: skew(30deg);
        }
        .hand.right:after {
            left: 16px;
            -webkit-transform: skew(-30deg);
            -moz-transform: skew(-30deg);
        }
        .leg {
            width: 33px;
            height: 20px;
            border-right: 1px solid #333;
            border-left: 1px solid #333;
            position: absolute;
            bottom: 12px;
            z-index: 6;
        }
        .leg.left {
            background-image: -webkit-linear-gradient(-102deg, #842DCE, #7E587E);
            background-image: -moz-linear-gradient(-102deg, #842DCE, #7E587E);
            left: 37px;
            -webkit-transform: skew(-10deg);
            -moz-transform: skew(-10deg);
        }
        .leg.right {
            background-image: -webkit-linear-gradient(-102deg, #842DCE, #842DCE);
            background-image: -moz-linear-gradient(-102deg, #842DCE, #842DCE);
            right: 37px;
            -webkit-transform: skew(10deg);
            -moz-transform: skew(10deg);
        }
        .leg:after {
            content: '';
            display: block;
            width: 36px;
            height: 22px;
            border-radius: 20px;
            position: absolute;
            bottom: -12px;
            left: -3px;
            background-color: #FCDFFF;
            border: 1px solid #333;
        }
    </style>

 

 

Результат:

 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

Геометрические фигуры

 

Рисовать можно и более простые вещи. Посмотрим как при помощи CSS можно делать геометрические фигуры и другие элементы:

 

 

 

 

 
 
 
 
Bubble Text

 

 

 

Анимация - слайдер на CSS, падающий снег

 

Анимация делается при помощи свойств animation и @keyframe. Простой пример анимации:

 

 

@-webkit-keyframes 'fade' {

from { opacity: 1 }

95% { opacity: 1 } to { opacity: 0 }

}

-webkit-animation: 'fade' 55s infinite normal;

 

А теперь посмотрим более интересные примеры. Слайдер на чистом CSS:

 

 

 
 
 
 
 
 
 
 
 
 

 

 

И еще один интересный пример анимации - падающий снег:

 

 

Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж
Ж

 

 

 

Transition

 

Свойство transition, как мы уже знаем, задает переход оформления элемента. Например, можно реализовать изменение цвета текста и фона при наведении на элемент:

 

 

 

 

 

Transform

 

Свойство transform позволяет делать трансформацию элемента - поворот, растягивание, искажение. 

 

 

translate(20px 40px)
transform: scale(2, 0.5)
rotate(20deg)
transform: skew(10deg, 30deg)

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов