Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

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

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


12 впечатляющих CSS-возможностей

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

Конечно, вы потом узнаёте, что использовать этот эффект можно в 2 или 3 основных браузерах (естественно IE, как всегда, нервно курит в сторонке и не входит в этот список) и обычно вы решаете подождать.

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

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

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

Демонстрация

CSS-анимация наконец-то доступна для всех основных браузеров, даже для IE! (начиная с 10 версии). Существует 2 способа для создания CSS анимаций. Первый очень простой, и работает он через свойство transition.

С помощью этого свойства вы можете создать эффекты по факту наведения мыши или, наоборот, отведения ее с определенной области, или вы можете спровоцировать анимацию, используя JavaScript для изменения свойств того или иного объекта.

В качестве демонстрации таких переходов на основе свойства transition, выше приведён пример hover-эффекта с планетой и ракетой. При наведении курсора на планету, ракета вращается ближе к ней.

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

Код эффекта представлен ниже:

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;

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

	transition:background-position 0.8s;
}

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

/* Задаются кейфреймы для анимации */

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

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

/* Я включил свойство  -webkit-transform , потому что, Гугл Хром может начать поддерживать кэйфреймы без префиксов в будущем */


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

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

2. Подсчитывание значений с помощью свойства calc()

Демонстрация

Ещё одна новая клёвая CSS-штуковина – это функция calc(). Она позволяет делать простейшие арифметические вычисления в CSS. Использовать это можно где угодно, где нужно иметь дело с длиной или шириной.

Но что ещё круче, так это то, что вы можете спокойно смешивать различные размерности, будь то пиксели или процентное значение.

Это позволяет создавать огромное количество различных трюков и приёмов (например со слоями и позиционированием), кладущие на лопатки все те ухищрения, к которыми вам, возможно, приходилось прибегать для получения аналогичного результата. Что может быть лучше? А вот что, это работает с IE 9-й (ура!) версии и выше и без дополнительных префиксов.

HTML


<div class="container">
    <p>This div has 20px on either side.</p>
</div>
        

CSS

	/* Подсчёт ширины */
 .container{
	width: calc(100% - 40px);

	background-color:#CDEBC4;
	color:#6D8B64;
	text-align:center;
	padding:25px 0;
	margin: 0 auto;
}

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

3. Продвинутые селекторы

Демонстрация

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

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

Пример:

HTML


Неразрывный другим тегами и id-шниками параграф текста, с определённым количество интересных css стилей

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

CSS


/* CSS стили - ничего интересного здесь */

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

/* Сделать каждый 6-й элемент красным */

.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 и никакого яваскрипта!">Кнопка</span>
	<span data-title="Эй! Привет!">Кнопка</span>
	<span data-title="Генерируемый контент - эт крутяк!">Кнопка</span>
</div>

CSS


.container{

    /* Устанавливает счётчик названный cnt равным нулю */
	counter-reset: cnt;
	position:relative;
	text-align:center;
	padding:20px 0;
	width:420px;
	height: 160px;
	margin: 0 auto;
}
 
   /*Вы можете прописать стиль для псевдоэлементов и задать им контент, как если бы они были реальными элементами на странице */

.container::before{
	display: block;
	content:'Hover over these items:';
	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-градиенты также смотрятся здорово на ретиновых экранах, потому что они генерируются на ходу.

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

HTML


<div class="container">
	<div id="el1">Linear</div>
	<div id="el2">Radial</div>
	<div id="el3">Repeating Lin.</div>
	<div id="el4">Repeating Rad.</div>
</div>

CSS


CS.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. Шрифты

Демонстрация

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

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

HTML


<link href="http://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" />

<h1>Here is my beautiful font!)</h1>

CSS


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

С несколькими обходными путями шрифты работают в браузерах начиная с 6 версии IE. Однако существуют 2 сервиса, которые были описаны выше, поэтому вам и не нужны теперь эти обходные пути.

7. Размер блока. Свойство box-sizing

Демонстрация

Единственная большая причина головной боли для новичков в CSS - это блочная модель.

Были определённые весомые причины, дабы стандартизировать эту модель, однако она оставалось интуитивно непонятной, например, в случаях когда вы устанавливаете высоту и ширину блока, но они менялись в зависимости от значения padding или border.

Это мелкое упущение ломает вообще всё, но наконец-таки у нас есть путь восстановить здравомыслие и избавиться от головной боли. Встречайте правило box-sizing! Теперь вы можете задать border-box, благодаря которому элементы остаются именно такими, какими вы бы хотели их видеть. Посмотрите сами:

HTML


<div class="container">
	<div id="el1">Element 1</div>
	<div id="el2">Element 2</div>
	<div id="el3">Element 3</div>
</div>

CSS


.container{
	text-align:center;
}

.container div{

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

    /*Firefox у нас особенный, поэтому всё ещё требует префиксов*/
	-moz-box-sizing:border-box;

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

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

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

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

#el3{
	padding:32px;
	background-color:#ccc;
}

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

8. Изображения в качестве границ или свойство border-image

Демонстрация

Свойство 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;   
}

Для более детального изучения посмотрите эту страницу и этот абзац. Поддерживаются всеми основными браузерами и IE 11.

9. Медиа-запросы

Демонстрация

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

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

Медиа-запросы невероятно просто использовать: всё что вам нужно - это заключить ваши CSS-стили в блок содержащий правило @media. Каждый @media блок активируется, когда выполняется одно или более условий.

HTML


<div class="container">

	<aside class="sidebar"><p>This is the sidebar<p></aside>

	<div class="main-section">
		<p>The main content of the article goes here</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 (max-width:900px){

	.container{
		width:100%;
	}

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

}

Медиа запросы могут содержать проверки на разрешение экрана устройства, его ориентацию, глубину цвета и многое другое. Обо всём этом можно почитать здесь а посмотреть таблицу совместимости здесь.

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. Обычно в этом принимал участие сервер или яваскрипт, чтобы разбить текст на равные части/колонки. Это нереально усложняло задачу а также убивало кучу ценного времени разработчиков. Наконец-то теперь это просто делается с помощью 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;

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

	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{
    /*Когда на контейнер происходит наведение мышкой и срабатывает hover, повернуть переднюю часть и спрятать её */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

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

Этот код был смоделирован после этого урока, с которым я рекомендую ознакомиться.

Если вы хотите узнать больше о 3D CSS, взгляните на детальное введение. Если вы не нацелены на старые браузеры IE, то поддержка браузерами у 3D CSS тоже весьма хорошая.

Другие полезности, о которых стоит упомянуть

Если вы ещё используете префиксы к border-radius и box-shadow, то теперь можете спокойно забыть об этом.

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

Свойство opacity теперь доступно и поддерживается везде, также будет очень полезным знать свойство background-size.

Ещё пройдёт некоторое время, прежде чем появится кросс браузерная поддержка к flexbox, @supports, фильтров, и CSS масок, но я уверен это стоит того, чтобы подождать!

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru

P.S. Изучаете CSS для того, чтобы освоить верстку сайтов? Рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх