12 классных функций CSS3, которые вы наконец-то можете использовать

0 ∞

СКАЧАТЬ ПРИМЕРЫ

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

У меня для вас хорошие новости: последние версии браузеров реализуют несколько классных функций, которые наконец-то поддерживаются везде, и вы можете начать использовать их прямо сейчас!

Небольшое предостережение: большинство этих функций не работают в старых версиях IE (9 и ниже). Если доля этих браузеров среди ваших посетителей большая, я боюсь, для реализации этих функций вам придётся использовать обходные варианты. Ну а для остальных, вот что могут нам предложить современные браузеры:

Содержание

1. Анимация и переходы средствами CSS

Анимация средствами CSS наконец-то доступна во всех основных браузерах, даже в IE (начиная с 10 версии). Есть два способа создания анимации в CSS.

Первый очень прост, он осуществляется через анимацию изменений свойств CSS с помощью декларации transition (переход). С помощью переходов вы можете создать эффекты наведения мыши или нажатия кнопки мыши, или вы можете запустить анимацию, изменив стиль элемента с помощью JavaScript. В примере ниже переход осуществляется при наведении мыши на планету, это вынудит ракету приблизиться.

Второй способ определения анимации немного сложнее – он подразумевает описание особых моментов анимации с помощью правила @keyframe. Это позволит вам создать повторяющуюся анимацию, не зависящую от действий пользователя и не запускаемую при помощи Javascript.

HTML

<div class="container">
	<div class="planet"></div>
	<div class="rocket"></div>
</div>

CSS

.container{
	width: 300px;
	height:300px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
}

.planet{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}

.rocket{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;

	/* Chrome всё ещё требует префикса -webkit- */
	-webkit-animation:orbit 2s linear infinite;
	animation:orbit 2s linear infinite;

	transition:background-position 0.8s;
}

.container:hover .rocket{
	background-position:80px center;
}

/* Определяем правила keyframes анимации */

@-webkit-keyframes orbit {
	from {
		-webkit-transform:rotate(0deg);}
	to {
		-webkit-transform:rotate(360deg);
	}
}

@keyframes orbit {
	from {
		transform:rotate(0deg);

		/* Здесь включены свойства -webkit-transform, потому что
Chrome может начать поддерживать keyframe без префикса в будущем, но нет уверенности, что он станет поддерживать безпрефиксные свойства transform */

		-webkit-transform:rotate(0deg);}
	to {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}
}

Вы ещё много чего можете узнать про анимацию средствами CSS. Я советую начать с этой статьи в Mozilla Developer Network (MDN). Если вас интересует поддержка браузерами, смотрите эту таблицу совместимости.

2. Расчёт значений с помощью calc()

Другая прекрасная новая особенность CSS – функция calc(). Она позволяет вам производить простые арифметические расчёты в CSS. Вы можете использовать её где угодно, где требуется длина или размер. Что ещё лучше, вы можете свободно смешивать разные единицы, например, проценты и пиксели. Это делает устаревшими множество хаков разметки, которые вы, скорее всего, использовали в прошлом. Вам этого мало? Функция работает в IE9 и выше, без префиксов.

HTML

<div class="container">
	<p>Этот элемент div имеет 20px с каждой стороны.</p>
</div>

CSS

.container{

	/* Расчёт ширины */
	width: calc(100% - 40px);

	background-color:#CDEBC4;
	color:#6D8B64;
	text-align:center;
	padding:25px 0;
	margin: 0 auto;
}
Как использовать CSS3 и Photoshop для анимации объектов

Узнайте подробности о функции calc() здесь или смотрите таблицу совместимости.

3. Улучшенные селекторы

В настоящее время, если вы присваиваете ID элементам только для того, чтобы применить к ним стили, вы, скорее всего, делаете неправильно. CSS 2.1 и CSS 3 представили несколько мощных селекторов, которые могут сделать вашу разметку чище, а ваши таблицы стилей круче.

Следующие селекторы поддерживаются всеми основными браузерами, включая IE9 и выше.

HTML

<p>Это простой параграф текста, к которому применено несколько классных стилей из CSS3...</p>

<div class="container">
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"><span></span></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem" data-foo="bar1"></div>
	<div class="elem" data-foo="bar2"></div>
	<div class="elem"></div>
	<div class="elem"></div>
	<div class="elem"></div>
</div>

/* Стили элементов (здесь ничего интересного) */

p{
	font-size: 16px;
	width: 420px;
	margin: 20px auto 0;
	text-align:center;
}

.container{
	width: 420px;
	margin:50px auto 0;
	overflow: hidden;
	padding:5px;
}

.elem{
	width:30px;
	height:30px;
	margin:4px;
	background-color:#A0DFAC;
	float:left;
}

.elem span{
	position:absolute;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	border:2px solid #fff;
}

/* Селекторы, выбирающие первую букву и первую строку: */

p::first-letter{
	background-color: #666;
	color: #FFF;
	font-size: 24px;
	font-style:normal;
	display: inline-block;
	padding: 0 5px;
	border-radius: 3px;
	margin-right: 2px;
	font-family: serif;
}

p::first-line{
	font-size: 18px;
	text-transform: smallcaps;
	font-style: italic;
	text-decoration: underline;
}

/* Делаем первый и последний элементы фиолетовыми */

.elem:first-child,
.elem:last-child{
	background-color:#948bd8;
}

/* Делаем каждый чётный элемент круглым */

.elem:nth-child(odd){
	border-radius:50%;
}

/* Делаем шестой элемент красным */

.elem:nth-child(6){
	background-color:#cb6364;
}

/* Применяем стили к элементам, содержащим элемент span */

.elem:not(:empty){
	background-color:#444;
	position:relative;

	-webkit-transform:rotate(25deg);
	transform:rotate(25deg);

}

/* Выбираем элементы по атрибутам */

.elem[data-foo=bar1]{
	background-color:#aaa;
}

.elem[data-foo=bar2]{
	background-color:#d7cb89;
}

/* Значение атрибута должно начинаться с bar. Под это подходят оба элемента */

.elem[data-foo^=bar]{
	width: 16px;
	height: 16px;
	margin: 11px;
}

/* Элемент, который следует за элементом с атрибутом data-foo="bar2" */

.elem[data-foo=bar2] + .elem{
	background-color:#78ccd2;
}

Узнайте подробности об этих селекторах здесь или посмотрите, какие браузеры их поддерживают.

4. Генерация контента и счётчики

Генерация контента – мощный инструмент в руках разработчиков – стала доступной, благодаря псевдо-элементам ::before и ::after. Эта функция позволяет вам использовать меньше кода HTML для достижения тех же результатов.

Это особенно полезно в случаях, когда вам нужны дополнительные тени или другие визуальные элементы, которым бы понадобились дополнительные элементы span или div. В результате вы получите меньший по размеру и семантически правильный код HTML.

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

HTML

<div class="container">
	<span data-title="У меня прекрасный заголовок!">Это элемент</span>
	<span data-title="Эти заголовки показываются только с использованием CSS, никакого JavaScript!">Это элемент</span>
	<span data-title="Привет!">Это элемент</span>
	<span data-title="Генерация контента – это здорово!">Это элемент</span>
</div>
Полезные приемы CSS, которые следует использовать, и ошибки, которых стоит избегать

CSS

.container{

	/* Установка счётчика cnt на 0 */
	counter-reset: cnt;

	position:relative;
	text-align:center;
	padding:20px 0;
	width:420px;
	height: 160px;
	margin: 0 auto;
}

/* Вы можете применить стили к псевдо-элементам и задать их контент так, как если бы они были реальными элементами на странице */

.container::before{
	display: block;
	content:'Наведите мышь на эти элементы:';
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding:15px;
}

.container span{
	display:inline-block;
	padding:2px 6px;
	background-color:#78CCD2;
	color:#186C72;
	border-radius:4px;
	margin:3px;
	cursor:default;
}

/* Создание счётчика псевдо-элементов */

.container span::after{

	/* Каждый раз, когда выполняется это правило, значение счётчика увеличивается на 1 */
	counter-increment: cnt;

	/* Добавление значения счётчика как часть контента */
	content:" #" counter(cnt);

	display:inline-block;
	padding:4px;
}

/* Псевдо-элементы могут даже получать доступ к атрибутам своих родительских элементов */

.container span::before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	content:attr(data-title);
	color:#666;

	opacity:0;

	/* Анимация переходов */
	-webkit-transition:opacity 0.4s;
	transition:opacity 0.4s;
}

.container span:hover::before{
	opacity:1;
}

Генерация контенте поддерживается везде, включая IE9 и выше.

5. Градиенты

Градиенты дают веб-дизайнерам возможность создавать гладкие переходы между цветами без использования изображений. Градиенты CSS также отлично выглядят на retina-дисплеях, потому что они генерируются на лету.

Они могут быть линейными или радиальными, а также могут повторяться. Градиенты были доступны уже в течение некоторого времени, и после нескольких небольших синтаксических изменений в последние несколько месяцев, они наконец-то доступны почти везде, без префиксов!

HTML

<div class="container">
	<div id="el1">Линейный</div>
	<div id="el2">Радиальный</div>
	<div id="el3">Повтор. Линейный</div>
	<div id="el4">Повтор. Радиальный</div>
</div>

CSS

.container{
	text-align:center;
	padding:20px 0;
	width:450px;
	margin: 0 auto;
}

.container div{
	width:100px;
	height:100px;
	display:inline-block;
	margin:2px;

	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
	border-radius:2px;

	color:#666;
	vertical-align: top;
	line-height: 230px;
	font-size: 12px;
}

#el1{
	background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}

#el2{
	background:radial-gradient(#77d19e,#46c17b);
}

#el3{
	background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}

#el4{
	background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
}

Смотрите детальное описание здесь, а таблицу совместимости здесь.

6. Шрифты

Можете себе представить, что было время, когда мы были ограничены всего лишь горсткой «web-безопасных» шрифтов и ничем более? Сложно поверить, учитывая, что сегодня у нас есть сервисы, вроде Google Fonts или typekit, которые позволяют вам подключить прекрасные шрифты, просто включив таблицу стилей в код вашей страницы.

Существуют даже шрифты значков, такие как fontawesome, содержащие симпатичные векторные значки вместо букв и цифр. Это всё возможно благодаря правилу @font-face, которое позволяет вам определить имя, характеристики и файлы исходного кода шрифтов, к которым вы затем можете обратиться в ваших объявлениях font/font-family.

HTML

<link href="http://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" />
<h1>Вот мой красивый веб-шрифт!</h1>

CSS

h1{
	/* Используем шрифт, подключённый в коде HTML: */
	font-family: Satisfy, cursive;
	font-weight:normal;
	font-size:24px;
	padding-top: 60px;
}

Используя небольшие доработки, можно заставить веб-шрифты работать даже в IE6. Два сервиса шрифтов, упомянутые выше, берут эту проблему на себя, так что вам не придётся ничего делать дополнительно.

7. Размер блоков

Самая большая головная боль начинающих в CSS – это блочная модель. У создателей стандартов наверняка были свои причины, но интуитивно не совсем понятно, почему на ширину и высоту элемента влияют заполнения и границы.

Эта небольшая (вредная) особенность ломает разметку и вносит хаос, но наконец-то есть способ восстановить здравый смысл, используя правило box-sizing. Вы можете установить значение в border-box, что заставит элементы вести себя точно так, как вы задумали. Смотрите сами:

HTML

<div class="container">
	<div id="el1">Элемент 1</div>
	<div id="el2">Элемент 2</div>
	<div id="el3">Элемент 3</div>
</div>

CSS

.container{
	text-align:center;
}

.container div{

	/* Установка свойства box-sizing: */
	box-sizing:border-box;

	/* Firefox всё ещё требует префикса -moz */
	-moz-box-sizing:border-box;

	width:120px;
	height:120px;
	display:inline-block;
	vertical-align:top;
}

/* Благодаря box-sizing, мы можем установить любые заполнения и границы, какие захотим, а элементы сохранят одинаковый размер */

#el1{
	color:#524480;
	background-color:#B2A4E0;
}

#el2{
	padding:8px;
	border:10px solid #9ec551;
	background-color:#fff;
}

#el3{
	padding:32px;
	background-color:#ccc;
}
Селекторы CSS3

Узнайте больше о правиле box-sizing здесь, или смотрите таблицу совместимости.

8. Границы в виде изображений

Свойство border-image позволяет вам отображать нестандартные границы вокруг элементов. Границы содержатся в единственном изображении (спрайте), где каждый регион изображения соответствует определённой части границы. В следующем примере изображение используется в качестве границы.

HTML

<p>Поприветствуйте красивую границу в виде изображений!</p>

CSS

p{
	text-align:center;
	padding:20px;
	width:340px;
	margin: 0 auto;

	/* Установка свойств границы и изображения для границы */
	border:30px solid transparent;
	border-image:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round;
}

Для более подробной информации, посмотрите страницу на MDN и эту статью про трюки CSS. Границы в виде изображений поддерживаются во всех основных браузерах и IE11.

9. Правила Media query

Правила Media query абсолютно необходимы, если вы серьёзно занимаетесь веб-дизайном. Они были доступны уже некоторое время, и стоит упомянуть, что они изменили способ создания веб-сайтов.

Раньше вам приходилось создавать обычный веб-сайт, достаточно широкий, чтобы подойти под наименьшее разрешение монитора, используемое в то время; и отдельную мобильную версию.Сайты, которые мы создаём сейчас, отзывчивы: они адаптируются к типу устройства, ориентации экрана и разрешению.

Правила Media query удивительно просты в использовании – всё, что вам нужно, заключить стили CSS в блок с правилом @media. Каждый блок @media активируется, когда соблюдается одно или более условий. Как пример, попробуйте изменить размеры этой страницы. Также в примере ниже попробуйте убрать блок @media и проверить, что изменится.

HTML

<div class="container">

	<aside class="sidebar"><p>Это боковой блок<p></aside>

	<div class="main-section">
		<p>Здесь расположен основной контент статьи</p>
	</div>

</div>

CSS

/* Стили основного контента и бокового блока */

.container{
	width:900px;
	margin: 0 auto;
	overflow:hidden;
}

.main-section{
	background-color:#CDEBC4;
	color:#6D8B64;
	width:520px;
	float:left;
	height:500px;
}

.sidebar{
	background-color:#ccc;
	width:350px;
	float:right;
	height:400px;
}

.container p{
	padding-top:100px;
	text-align:center;
}

.note{
	text-align:center;
	padding-top:60px;
	font-style:italic;
}

/* Это простое правило media query располагает колонки друг под другом на маленьких экранах */

@media (max-width:900px){

	.container{
		width:100%;
	}

	.main-section, .sidebar{
		width:auto;
		margin-bottom:20px;
		float:none;
	}

}

Правила media query могут содержать проверки разрешения и ориентации экрана устройств, глубину цвета, плотность пикселей и многое другое. Подробности вы найдёте в этой статье, а также смотрите таблицу совместимости.

10. Множественные фоновые изображения

Используя множественные фоновые изображения, дизайнеры могут достичь весьма интересных эффектов. Они могут накладывать разные изображения друг на друга в качестве фона одного и того же элемента.

Каждое изображение (или слой) по отдельности может быть сдвинуто или анимировано, как иллюстрирует пример ниже (наведите мышь на изображение). Все правила CSS, относящиеся к фону, теперь могут принимать разделённый запятыми список свойств, каждое для определённого фонового изображения:

HTML

<div class="space"></div>

CSS

.space{

	/* Передаём разделённый запятыми список фоновых изображений: */
	background:url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center;

	width:200px;
	height:200px;
	margin: 0 auto;

	border-radius:3px;

	/* Анимируем расположение обоих фоновых изображений */
	transition:background-position 1s;
}

.space:hover{
	/* То же самое относится к таким свойствам, как background-position и repeat */
	background-position:35% 20px, top right;
}

Дополнительная информация по множественным фоновым изображениям находится здесь. Эта функция широко поддерживается браузерами – все новые версии её поддерживают (смотрите таблицу).

11. Колонки CSS

Разметку по колонкам было заведомо сложно реализовать в CSS. Обычно для этого приходилось использовать JavaScript или серверную обработку, разделяющую контент на разные элементы.

Этот процесс безосновательно усложнён и забирает ценное время разработчика от вещей, которые реально важны. К счастью, сейчас существует способ обойти это, используя правило CSS columns:

HTML

<div class="container">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.</p>
</div>

CSS

.container{
	width: 500px;
	margin: 0 auto;
}

/* Создать колонки теперь вот так просто: */

.container p{
	-moz-columns:3;
	-webkit-columns:3;
	columns:3;
}

Это правило широко поддерживается, хотя всё ещё требует префиксов. Места, где контент разделяется на колонки, зависят от поддержки браузером тех или иных правил разбивки и от различий в обработке браузерами пограничных случаев.

12. 3D трансформация средствами CSS

Ничто так не радует глаз, как впечатляющая 3D демонстрация средствами CSS. И хотя применение подобной трансформации вне демонстрации или сайтов-портфолио очень спорно, 3D CSS предлагает мощную функциональность дизайнерам и разработчикам, которая поможет завоевать сердца пользователей, если она грамотно реализована.

Взгляните на код следующего примера:

HTML

<div class="container">
	<div class="iphone-front"></div>
	<div class="iphone-back"></div>
</div>

CSS

.container{

	/* Насколько выраженными должны быть 3D эффекты */
	perspective: 800px;
	-webkit-perspective: 800px;

	background: radial-gradient(#e0e0e0, #aaa);
	width:480px;
	height:480px;
	margin:0 auto;
	border-radius:6px;
	position:relative;
}

.iphone-front,
.iphone-back{

	/* Включаем 3D трансформацию */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	/* Мы используем два отдельных элемента div для передней и задней панелей телефона. Следующий код скрывает элемент div, когда тот переворачивается, чтобы отобразить обратную сторону: */

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	width:200px;
	height:333px;

	position:absolute;
	top:50%;
	left:50%;
	margin:-166px 0 0 -100px;

	background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center;

	/* Анимация переходов */
	transition:0.8s;
}

.iphone-back{

	/* Задняя панель по умолчанию перевёрнута на 180 градусов */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);

	background-position:right center;
}

.container:hover .iphone-front{
	/* Когда мышь находится над контейнером, переворачиваем переднюю панель и прячем её, ... */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.container:hover .iphone-back{
	/* ... в то же время, делая видимой заднюю панель */
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

Этот код сделан на основе нашей формы входа в стиле Apple. Если вы хотите узнать о 3D трансформациях в CSS подробнее, посмотрите эту детальную инструкцию. Если вам не нужна поддержка старых версий IE, остальные браузеры поддерживают её достаточно широко.

Другие методы, достойные упоминания

Существуют и другие запоминающиеся функции, о которых стоило бы упомянуть. Если вы так ещё не сделали, можете прекратить использовать префиксы для свойств border-radius и box-shadow. Также вы теперь можете использовать data-uri как фоновые изображения во всех браузерах. Opacity также поддерживается везде, также как и очень полезное свойство background-size.

Придётся ещё немного подождать поддержки flexbox, @supports, фильтров, и CSS масок, но я думаю, это ожидание окупится!