Четверг, 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

Комментарии  

 
0 #5 86Aaron 11.08.2017 07:01
I see you don't monetize your site, don't waste your traffic, you can earn extra cash every month
because you've got hi quality content. If you want to
know what is the best adsense alternative, search in google:
adsense alternative Mertiso's tips
 
 
0 #4 виталий 30.12.2015 18:16
советую всем данный сайт поставить в закладки.
 
 
0 #3 Руслан 30.07.2015 23:26
А можно показать ксс и хтмл код для слайдера котиков, красивой кнопки и снега?
 
 
0 #2 kat-khmara 27.02.2014 11:35
Очень круто! Я пока только котика рисовала CSS'ом)) http://kate-land.net/html-css/item/235-cat-html-css
 
 
0 #1 Aterr 26.02.2014 14:18
В новогодние праздники мне было лень заниматься чем либо во благо нации JS, и поэтому я решил «нарисовать» своего любимого героя комисков на чистом html/css, и тем самым показать насколько css3 классная штука, которая позволяет делать невообразимые вещи при помощи стандартных функций.

http://aterr.net/lyubimyj-geroj-kommiksov-na-chistom-csshtml/
 

You have no rights to post comments

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