Счетчики обозначаются через идентификаторы (более подробно об этом смотрите в разделах о счетчиках, в которых содержится информация о свойствах counter-increment и counter-reset). В качестве значения счетчика выступает идентификатор, по умолчанию значением является число.

Последовательность вложенных счетчиков обозначаются следующим образом: "counters(, )" или "counters(, , )".

В CSS2 значение счетчиков может быть установлено через свойство "content". Допустимо использовать none в качестве значения свойства "content", что равноценно пустому списку.

В следующем примере создан стиль, в котором пронумерованы элементы "P" для каждого элемента "H1", каждый параграф пронумерован римскими цифрами, сопровождаемыми точкой и пробелом.

Счетчик выходящий за пределы границ, установленных для него параметром "counter-reset" сбрасывается и приобретает значение равно 0

Счетчики создаются с помощью следующих дополнительных функций counter(name) или counter(name, style). Name – означает название счетчика, style – тип нумерации (все типы установлены согласно свойству list-style-type)

Автоматическая нумерация в CSS2 создаётся с помощью автоматического содержимого (свойство content) в дополнении со свойствами counter-reset и counter-increment.

Изначально должно быть указано название счетчика со вторым необязательным параметром, определяющим стиль автоматической нумерации, например

Автоматическая нумерация в CSS2 контролируется двумя свойствами counter-reset и counter-increment. Counter-reset создаёт подразделы, при использовании автоматической нумерации. Данное свойство, так же как и свойство counter-increment в качестве значения может содержать имя счетчика и необязательный инкремент.

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

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

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

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

Синтаксис

Код CSS счетчика выглядит следующим образом:

Div.section { counter-reset: headings 0; } h2:before { counter-increment: headings 1; content: "Глава " counter(headings, decimal) ": "; }

Как уже упоминалось, используется три свойства CSS: counter-reset , counter-increment , и content . Если какое-либо из указанных свойств будет пропущено, то метод не будет работать.

Разбор синтаксиса

Итак, разберемся с синтаксисом и тем, для чего предназначены пары свойство/значение:

Индикатор контекста

Первый блок объявлений (селектор div.section) указывает, какая секция в разметке содержит набор элементов, которые будут иметь целое значение с автоинкрементом. Важно понимать отличие объявления данного блока от следующего. Данный конкретный элемент (

) не будет иметь предшествующего целого значения счетчика. Это просто "контейнер" или "контекст", в котором расположены элементы, использующие счетчик.
Но для контекста нужно определить имя счетчика, который будет использоваться для элементов, объявленных в следующем блоке.
Сброс счетчика
Свойство counter-reset должно использоваться в сочетании с селектором, который определяет контекст, как уже описывалось выше. Первая часть значения является пользовательским именем, которое вы задаете для счетчика. Это обязательная часть. Имя может быть любым, кроме зарезервированных слов для CSS (например, вы не можете задавать счетчику имя “none”, “inherit” , или “initial” ).
Вторая часть значения для свойства counter-reset является необязательной. По умолчанию устанавливается величина “0″. Данное число указывает точку отсчета для счетчика. Важно помнить, что счет начинается со следующего целого значения после величины сброса. Таким образом если вы установили значение "0", счетчик начнет с “1″. А если было установлено "-5", счетчик начнет с "-4", и так далее.
Нумерованные элементы
Второй блок объявлений (селектор h2) использует псевдо-элемент:before для указания места размещения специфического контента (используется свойство content) перед всеми целевыми элементами (в нашем случае - это элементы
).
Увеличение счетчика
Свойство counter-increment указывает, с каким контекстом в действительности ассоциирован счетчик. Таким образом, первое значение (обязательное) является соответствующим пользовательским именем счетчика из свойства counter-reset в идентификаторе контекста из первого блока объявлений.
Второе значение свойства counter-increment задавать не обязательно. Оно представляет величину на которую надо увеличивать счетчик (или уменьшать - если вы задали отрицательное значение). По умолчанию устанавливается “1″.
Содержание вставки
С помощью свойства content мы точно указываем, что должно вставляться перед каждым элементом в заданном наборе (элементы
).
Единственным обязательным значением для свойства content является функция counter() , но, обычно, добавляется что-нибудь еще (например, пробелы) до или после (смотрите выше приведенный пример), чтобы придать счетчику отличный вид.
Функция counter()
Функция counter() может принимать два аргумента, разделенных запятой. Первый аргумент указывает на текущее значение именованного счетчика. Второй аргумент является не обязательным и указывает формат вывода значения счетчика. По умолчанию используется “decimal ”, но можно указать “upper-roman ”, “upper-alpha ”, и так далее (также как и для свойства list-style-type упорядоченного списка).
Вы также можете использовать функцию counters() и организовывать вложенные счетчики , но в рамках данного урока мы их рассматривать не будет.
Графическое обобщение
Если все выше сказанное кажется сложным, то на приведенной ниже инфограмме описываются основные элементы счетчика CSS:
Поддержка браузерами и недостатки
Несколько счетчиков, которые используются для одного контекста (для построения каскада нумерации) должны объявляться вместе. Следующий пример работать не будет:
Div.numbered { counter-reset: headings 0 } div.numbered { counter-reset: subheads 0 }
Только второй счетчик будет действовать, потому что он переопределяет предыдущий. Таким образом, оба счетчика нужно объявлять в одной строке:
Div.numbered { counter-reset: headings 0 subheads 0 }
Потенциальный недостаток использования счетчиков - смешивание контента и его представления. Особенно, данное утверждение касается свойства content . Линия раздела между контентом и представлением размывается.
Три указанных свойства и псевдо-элемент, которые описывают функционал счетчика CSS, не поддерживаются в IE версий 7 и старше, и могут иметь проблемы в IE8, Opera, и Safari. Firefox и Chrome поддерживают все описанные свойства без проблем.
Преимущества и практическое использование
Счетчики CSS имеют очевидное преимущество, которое заключается в отсутствии необходимости беспокоиться о нумерации различных пунктов в контенте. Подобно упорядоченным спискам, контент не имеет реальных цифр. Можно вставлять элементы, удалять элементы, менять их местами, а цифровые указатели будут автоматически исправляться сами.
Некоторые примеры практического использования:
• Именование и нумерация глав (как в нашем примере)
• Нумерация строк таблицы или ее ячеек
• Нумерация заголовков HTML
• Улучшение/изменение внешнего вида или увеличивающегося значения для обычных упорядоченных списков
Можно ли использовать счетчики CSS?
Так как они не поддерживаются в IE6 и IE7, то для клиентских сайтов не стоит использовать счетчики CSS, или нужно искать им подходящую замену. Но для веб сайтов и приложений, нацеленных на более техничную аудиторию (например, сайт для использования на мобильных устройствах, браузеры которых поддерживают CSS3) такие счетчики могут стать эффективным способом создания системы нумерации пунктов контента без использования программирования.
На демонстрационной странице можно посмотреть пример использования счетчиков CSS для заголовков.
От автора: в этой небольшой статье мы познакомимся с CSS счетчиками – полезным, но пока не очень известным свойством. После нашего демо мы разберем реальные примеры сайтов, на которых применяются CSS счетчики.
Основная задача: стилизовать нумерованный список
Сначала посмотрим на то, что у нас должно получиться:

Ничего сложно, правда? Но есть небольшое «но»: при создании маркеров мы будем использовать семантическую разметку и по возможности максимально избегать ненужных div’ов и span’ов. Разберем гибкий и понятный метод!
CSS счетчики
Для создания данного шаблона нужно всего лишь создать нумерованный список. Тут вы могли бы сказать «а нельзя ли взять другой элемент или даже не список». Ответ – да, но нужно помнить, что только нумерованный список точно описывает структуру нашей страницы.
Второй вопрос предположительно будет «Можно ли полностью переделать внешний вид цифр списка?». Стилизовать нумерованный список довольно сложная задача, но к счастью есть другой кроссбраузерный способ. Так что давайте спрячем цифры списка и воспользуемся CSS счетчиками.
Синтаксис
С помощью CSS счетчиков можно генерировать числа на основе повторяющихся элементов и стилизовать их. Представьте себе счетчики как переменные, значения которых можно увеличивать. Рассмотрим базовый синтаксис:

Создание нового счетчика. На рисунке выше показано, как создать счетчик для нумерованного списка и задать область его применения. Мы использовали свойство counter-reset.
Первое значение – имя счетчика
Следом идет опциональный параметр, который задает стартовую точку счетчика (по умолчанию 0). Обратите внимание на то, что счетчик всегда считает вверх, т.е. нашим первым значением будет 1.

Стилизация дочерних элементов. На втором рисунке видно, что мы добавляем стили для псевдокласса::before на элементе списка li.
Свойству content было присвоено значение. Используя CSS счетчики со свойством content, мы можем конкатенировать сгенерированные числа со строками.
Указывается имя счетчика
И задается тип decimal (десятичная система счисления). Положительные значения совпадают со значениями для свойства list-style-type.
В свойстве counter-increment мы опять указываем имя счетчика
Затем опционально можно указать шаг инкремента. По умолчанию стоит 1.
Разметка
На основе вышесказанного разметка будет такой:
1. List Item

   Some text here.

2. List Item

   Some text here.

<-- еще элементы списка -->
< ol > < li > < h4 > List Item < / h4 > < / li > < li > < h4 > List Item < / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol { counter-reset: section; } li { list-style-type: none; font-size: 1.5rem; padding: 30px; margin-bottom: 15px; background: #0e0fee; color: #fff; } li::before { content: counter(section); counter-increment: section; display: inline-block; position: absolute; left: -75px; top: 50%; transform: translateY(-50%); padding: 12px; font-size: 2rem; width: 25px; height: 25px; text-align: center; color: #000; border-radius: 50%; border: 3px solid #000; }
ol { counter - reset : section ; li { list - style - type : none ; font - size : 1.5rem ; padding : 30px ; margin - bottom : 15px ; background : #0e0fee; color : #fff; li :: before { content : counter (section ) ; counter - increment : section ; display : inline - block ; position : absolute ; left : - 75px ; top : 50 % ; transform : translateY (- 50 % ) ; padding : 12px ; font - size : 2rem ; width : 25px ; height : 25px ; Ограничения Важно отметить, что на данный момент псевдоклассы доступны не на все 100%. Чтобы это выяснить я провел быстрый тест: я установил NVDA и открыл демо из-под Chrome 50, Firefox 45 и Internet Explorer 11. Я обнаружил, что при использовании Internet Explorer экранный диктор не произносил сгенерированный контент. На данный момент большинство экранных дикторов нормально распознают такой контент. Однако чтобы понимать, что можно генерировать с помощью псевдоэлементов и что нельзя, данные ограничения знать просто необходимо. Примеры CSS счетчиков Мы изучили основы работы с CSS счетчиками, и теперь можно показать пару примеров их потенциального применения. В первую очередь CSS счетчики часто используются в онлайн версиях газет. Зачастую они будут располагаться в сайдбарах: CSS счетчики также могут применяться в секциях, где описываются какие-то шаги или указывается направление действия. Примеры: Примеры с лишним HTML кодом Выше мы привели два примера онлайн версий изданий, которые используют CSS счетчики. Теперь давайте рассмотрим еще два примера, но теперь вместо счетчиков используется излишний HTML код (хотя контент в нем доступен): Заключение В этой небольшой статье мы научились стилизовать нумерованные списки с помощью CSS счетчиков. Подведем итог: CSS счетчики отлично подходят под любой проект с динамическими нумерованными списками и пользовательскими стилями. Однако данный метод не на 100% доступен. Необходимо понимать его слабые стороны и использовать только в подходящих случаях. Для создания счетчика необходимо задать два свойства (counter-reset,counter-increment) и одну функцию (counter() или counters())). Счетчик отображается через псевдоэлемент. В работе счетчика участвует свойство content, а оно доступно только из-под псевдоэлемента. Вы когда-нибудь использовали 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-й (ура!) версии и выше и без дополнительных префиксов.
This div has 20px on either side.
/* Подсчёт ширины */ .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-градиенты также смотрятся здорово на ретиновых экранах, потому что они генерируются на ходу.
Они могут быть линейными или радиальными и могут быть заданы на повторение. Какое-то время они были недоступны для всех, но, спустя несколько месяцев и определённое количество изменений в синтаксисе, они стали доступны практически для всех, без дополнительных префиксов.
Linear
Radial
Repeating Lin.
Repeating Rad.
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 , благодаря которому элементы остаются именно такими, какими вы бы хотели их видеть. Посмотрите сами:
Element 1
Element 2
Element 3
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 блок активируется, когда выполняется одно или более условий.
The main content of the article goes here
/* Стиль для основного контента и сайдбара */ .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 .
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.
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 масок, но я уверен это стоит того, чтобы подождать!
CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they"re used.
Using counters
Manipulating a counter"s value
To use a CSS counter, it must first be initialized to a value with the counter-reset property (0 by default). The same property can also be used to change its value to any specific number. Once initialized, a counter"s value can be increased or decreased with counter-increment . The counter"s name must not be "none", "inherit", or "initial"; otherwise the declaration is ignored.
Displaying a counter
The value of a counter can be displayed using either the counter() or counters() function in a content property.
The counter() function has two forms: "counter(name)" or "counter(name , style)". The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified style (decimal by default).
The counters() function also has two forms: "counters(name , string)" or "counters(name , string , style)". The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated style (decimal by default).
Basic example
This example adds "Section :" to the beginning of each heading.
CSS
body { counter-reset: section; /* Set a counter named "section", and its initial value is 0. */ } h3::before { counter-increment: section; /* Increment the value of section counter by 1 */ content: counter(section); /* Display the value of section counter */ }
HTML
Introduction
Body
Conclusion
Result
Nesting counters
A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the counters() function, separating text can be inserted between different levels of nested counters.
Example of a nested counter
CSS
ol { counter-reset: section; /* Creates a new instance of the section counter with each ol element */ list-style-type: none; } li::before { counter-increment: section; /* Increments only this instance of the section counter */ content: counters(section, ".") " "; /* Combines the values of all instances of the section counter, separated by a period */ }
HTML
1. item
2. item
   1. item
   2. item
   3. item
      1. item
      2. item
      1. item
      2. item
      3. item
   4. item
3. item
4. item
1. item
2. item