Website Title

• Home
• About
• Contact

Микро-оптимизация

Микро-оптимизация направлена на уменьшение размера файла и увеличение скорости загрузки страницы.

Сортирование свойств в алфавитном порядке

Сортировка CSS свойств в алфавитном порядке - это отличный способ сохранять ваш код чистым и избежать лишних проблем. Почему? Потому что нужный фрагмент можно будет быстро найти и исправить.

Пример 1

Login { margin-top: 5px; line-height: 1.5em; padding-left: 5px; float: right; list-style-type: none; width: 80px; font-weight: bold; border-left: 1px solid #69824d; }

Пример 2

Login { border-left: 1px solid #69824d; float: right; font-weight: bold; line-height: 1.5em; list-style-type: none; margin-top: 5px; padding-left: 5px; width: 80px; }

Увеличение эффективности кода

Длинные селекторы заставляют браузер лишний раз проходиться по DOM-у и искать совпадения. Более конкретизированные названия селекторов позволяют избежать данную проблему.

Перед оптимизацией

Div#wrapper div#maincontent div

После оптимизации

#sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }

Пишите просто и кратко

Чем меньше написано кода, тем эффективнее работает страница. Для определения стилей следуйте следующим правилам.

1. Используйте короткие названия CSS свойств везде, где это возможно;
2. Пишите сокращённые значения свойств;
3. Избегайте дублирования CSS свойств.

#sidebar { background-color: #fff; background-image: (bg.png); background-position: 0 0; background-repeat: repeat-x; border-width: 1px; border-style: solid; border-color: #ffff00; font-family: Georgia, serif; font-size: 1.33em; line-height: 1.33em; font-weight: normal; margin: 10px 20px 10px 20px; padding: .1em; }

После

#sidebar { background: #fff url(bg.png) repeat-x 0 0; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: .1em; }

Сокращайте код

Главное, что вам нужно сделать на финальной стадии работы над стилями, - это убрать все дубликаты строк и различного рода отступы. Для рабочей версии стиля можно также убрать всевозможные комментарии. Также можно воспользоваться инструментами сжатия CSS стилей: CSS Compressor , CSS Drive .

Итог

Помните об этих правилах, когда в следующий раз будете писать CSS код. Для упрощения вашей работы можете воспользоваться специально созданными для этого инструментами. К примеру: CleanCSS . Пользуйтесь всем, чем только можно, чтоб сделать ваш код лучше.

5 последних уроков рубрики "CSS"

paffffff

половина статьи - вредные советы: >Отключение стилей нормальный редактор умеет понимть хоткеи, выделить текст и нажать Ctrl+/ гораздо проще и, главное правильнее, чем приписывать к каждой строке "x-" Да и в целом проще посоветовать пользоваться специальзированным софтом, тот же TopStyle прекрасно справляется с кодом, а советы статьи - выдержки из коробочных возможностей программы. Такое ощущение, что автор писал статью ради статьи, а не ради полезности содержания.

Сердобольный

Автор статей сменился, и я этому несказанно рад! Сергей Фастунов исписался и выкладыфвал статьи намного хуже, а часто просто шаблоны сайтов. Станислав Протасевич - молодец! Интересные темы пишет, а то, что Вам не понравилась данная статья, ничего страшного в этом нет, человек для нас с Вами старался, практически бесплатно. Сегодня понедельник, сегодня можно простить такую статью, причём, не так уж она и плоха

• userseal

  Часть "советов" вполне очевидна. Любой специалист, рано или поздно, приходит к такой системе.

  paffffff

  Ничего не имею против Станислава, человек старается, вопросов нет, но я говорил про _автора_ а не про переводчика.

  micha

  Для начинающих очень актуально. Лучше сразу делать правильно, чем потом работать над ошибками. А сайт этот не только для матерых профи, некоторые из которых хотят, судя по коментам, подстроить его только под себя. Автору-спасибо!

  • userseal

    Так я не против. Когда начинал css и html таких статей не было. Приходилось как сапёру - шаг вправо, шаг влево подрыв, прыжок вверх провокация.

    VindDevil

    не особо заметил разницу меж до\после. тупо табуляция.. работать с css учился сам без всяких подсказок, потом пошёл на курсы (хотя бы выспался за корочку) и не узнал ничего нового.. учиться лучше на опыте и ошибках, нежели сразу всё стандартно чисто и красиво.. да, то что background объединили несомненно уменьшает код, но.. margin & padding, тоже можно было в компрессор сунуть, а не как отступ-верх и т.п... старт и энд дивов можно посмотреть в любом нормальном редакторе аля дримвивер или нотпэд++. касательно селекторов - бред. дочерние классы и идентификаторы никто не отменял и под чистый css они не приписываются. хотел бы глянуть на чистый css fusion меню для joomla xDD.. у любого клуба это 3-10 строк кода из которых 2-5 классы айдишники и т.п... на счёт отступов и комментов - категорически не согласен. если писать не для себя, то те "ЛАМО", которые будут смотреть код могут с лёгкостью не понять что там такое и как это работает. более того если весь css писать сплошняком, сам потом будешь думать что да как. пример такого файла можно найти на gismeteo.ru & joomforest.com, в первом варианте видж для сайта, во втором вообще весь шаблон.. отладке через хром не поддаётся почти.строк не видит, а иногда это помогает, кода там эдак 1000+ строк

    Ygreec

    Статья нужная, хотя и местами спорная. У меня 2 вопроса: 1 - При красивой раскладке хтмл-кода (с табуляцией, отступами и переносами) - чтобы был понятнее код - не утяжеляется ли код? 2 - Я за то, чтобы не повторялись свойства в ЦСС (например - баграунд: цвет позиция повторяемость и т.д). Вопрос: есть ли браузеры, которые могут не понимать такую оптимизацию (может быть старые)?

    • stas.protasevich

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

      userseal

      Есть программы для "оптимизации" html, которые прессуют, но его потом трудно редактировать. Если такая задача стоит то надо использовать два "набора" файлов. Но если посмотреть код яндекса, гугля и других "взрослых", они не очень на эту тему озадачиваются. 1 редактируемый 2 загружаемый == спрессованный редактированный. Я бы добавил - для ускорения ещё лучше использовать спрайты в качестве фонов.

      paffffff

      Оптимизация html путём сжатия, описанного в первом вопросе - не самая лучшая идея т.к. даже самый большой html-файл гораздо меньше неправильно подготовленной картинки. Представьте ситуацию: вы прогнали html через комперссор, загнали в gzip - в итоге получили уменьшение веса файла с 250кб до 25. При этом у вас на странице лежит картинка в формате png24, да ещё без прозрачности, да ещё ужатая в размерах средствами CSS с 1600px по ширине до 450. Так вот сжатие этой картинки путём перегона в jpg без потерь и физическое сжатие её размеров до нужных уменьшит её вес скажем с 1мб до 100кб. Думаю разница очевидна. К тому же править сжатый html-код - издевательство над самим собой.

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

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

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

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

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

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

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

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Индикаторы загрузки — Spinkit

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

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

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

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

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

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

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

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

Назад Вперед

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

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

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

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

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

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

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

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

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

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

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

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-й (ура!) версии и выше и без дополнительных префиксов.

/* Подсчёт ширины */ .container{ width: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; }

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

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

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

Пример:

Неразрывный другим тегами и id-шниками параграф текста, с определённым количество интересных 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{ background-color:#aaa; } .elem{ background-color:#d7cb89; } /* Значение атрибута должно начинаться с "bar". т.к. это соответствует двум вышеописанным элементам*/ .elem{ width: 16px; height: 16px; margin: 11px; } /* Элемент, следующий после того, у которого прописан в атрибуте data-foo="bar2"*/ .elem + .elem{ background-color:#78ccd2; }

4. Генерируемый контент и счётчики

Генерируемый контент - это мощный инструмент в руках разработчика, который становится доступным после применения псевдоэлементов ::before и ::after .

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

CSS3 также даёт псевдоэлементам доступ к счётчикам, которые могут возрастать за счёт 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 и выше.

Градиенты дают веб-дизайнерам возможность создавать плавные переходы между цветами без использования изображений. 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); }

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

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

Here is my beautiful font!)

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 , благодаря которому элементы остаются именно такими, какими вы бы хотели их видеть. Посмотрите сами:

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

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

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

Поприветствуем симпатичные обводки блоков в виде картинок!

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.

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

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

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

/* Стиль для основного контента и сайдбара */ .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 теперь могут принимать список свойств разделённых запятыми, для каждого отдельного слоя:

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

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

Макеты, основанные на колонках, были серьёзной проблемой для тех кто занимался CSS. Обычно в этом принимал участие сервер или яваскрипт, чтобы разбить текст на равные части/колонки. Это нереально усложняло задачу а также убивало кучу ценного времени разработчиков. Наконец-то теперь это просто делается с помощью CSS-правила columns .

Container{ width: 500px; margin: 0 auto; } /* Вот так вот просто создаём колонки */ .container p{ -moz-columns:3; -webkit-columns:3; columns:3; }

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

12. 3D CSS трансформации

Нет ничего более привлекательного и замечательного в вебе, чем впечатляющее 3D CSS демо. Хотя полезность этого вне демо и вне портфолио несколько сомнительна, 3D 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 масок, но я уверен это стоит того, чтобы подождать!