—»     —»   Используем собственные атрибуты данных и псевдо-элементы
  Раздел: Руководства   Комментариев: 1  

Используем собственные атрибуты данных и псевдо-элементы



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

Используем собственные атрибуты данных и псевдо-элементы

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

Если вам хочется создать прикольные анимации и переходы при помощи псевдо-элементов, то рекомендуем вам просмотреть статью от Marco Barria: Examples of Pseudo-Elements Animations and Transitions (Примеры анимации и переходов основанных на псевдо-элементах).

В демо используются красивые работы Jaime Martinez.

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

Давайте приступим к разметке. Как уже было отмечено, мы будем использовать изображение, обернутое в анкор:

<a
class="caption"
href="http://cargocollective.com/jaimemartinez/Illustration"
data-title="Smug Eagle"
data-description="I watched the four riders ...">

<img src="images/1.jpg" alt="Illustration of Smug Eagle">

</a>

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

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

.caption {
display: inline-block;
position: relative;
margin: 10px;
}

.caption img {
display: block;
max-width: 100%;
}

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

Так как мы задали свойству изображения max-width значение 100%, а значит, оно будет поддерживать адаптивные шаблоны.

Пример 1: Подпись рядом с изображением

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

.caption::before,
.caption::after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
}

Установив параметр left на 100%, мы располагаем псевдо-элементы сразу рядом с изображением. 90% - это относительный параметр для ширины нашего анкора, который указывается содержимым – в данном случае, изображением.

Давайте создадим контент для каждого псевдо-элемента. Мы получаем значение соответствующего атрибута данных и добавляем его в качестве контента псевдо-элемента при помощи attr():

.caption::before {
content: attr(data-title);
top: 0;
height: 25%;
padding: 5px 30px 15px 10px;
font-size: 40px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

Кроме указания размеров, мы делаем то же самое с псевдо-элементом :after:

.caption::after {
content: attr(data-description);
top: 25%;
padding: 20px 10px 0;
font-size: 18px;
}

Результат данного примера вы можете увидеть перейдя по ссылке в конце статьи.

Пример 2: отображение при наведении (opacity)

Теперь, давайте создадим подпись, которая будет отображаться при наведении курсора за счет простого анимирования уровня непрозрачности (opacity) псевдо-элементов. Для этого, мы снова задаем им абсолютное позиционирование. Установив уровень непрозрачности на 0, и применяя переход этого уровня, мы можем анимировать этот параметр при наведении курсора:

.caption::before,
.caption::after {
opacity: 0;
position: absolute;
width: 100%;
color: #fff;
padding: 20px;
transition: opacity 0.3s;
}

У заголовка цвет фона будет отличаться от цвета фона описания, и будет ограничен по высоте до 30%:

.caption::before {
content: attr(data-title);
top: 0;
height: 30%;
background: #a21f00;
font-size: 40px;
font-weight: 300;
}

Что касается описания, мы не просто добавим значение data-description, мы также воспользуемся открывающими и закрывающими кавычками. Для этого нам нужно добавить css-значения для знаков, которые мы конвертируем при помощи инструмента вроде Entity Conversion Calculator от Evolution Technologies. Фон будет чуть светлее фона заголовка, и мы выровняем текст по правому краю:

.caption::after {
content: '\201C' attr(data-description) '\201D';
top: 30%;
height: 70%;
background: #db2e00;
font-size: 16px;
text-align: right;
}

Так как у заголовка будет выставлена высота в 30%, мы отдадим оставшееся пространство описанию (то есть, 70%).

И наконец, мы выставляем уровень непрозрачности на 1 при наведении:

.caption:hover::before,
.caption:hover::after {
opacity: 1;
}

Результат данного примера вы можете увидеть перейдя по ссылке в конце статьи.

Пример 3: Скольжение при наведении (при помощи transform)

В этом примере нам нужно отобразить подпись в немного более интересном формате. При наведении, заголовок плавно выедет сверху изображения, а описание – снизу. Нам также нужно, чтобы изображение стало немного темнее. Для этого, нам нужно определить кое-какие правила для анкора подписи и изображения.

Параметр overflow у анкора должен быть выставлен на hidden, так как нам нужно расположить наш заголовок и описание за пределами изображения, чтобы они не попадали в поле видимости. Вдобавок, мы зададим анкору черный фон, чтобы изображение было слегка затемнено при уменьшении уровня непрозрачности:

.caption {
display: inline-block;
position: relative;
margin: 10px;
overflow: hidden;
background: #000;
}

Мы добавим переход к изображению, и выставим уровень непрозрачности на 0.5 при наведении. Это позволит нам слегка затемнить изображение. Именно так, как нам нужно:

.caption img {
display: block;
max-width: 100%;
transition: opacity 0.3s ease-in-out;
}

.caption:hover img {
opacity: 0.5;
}

Общий стиль псевдо-элементов ::before и ::after похож на предыдущие примеры, но в этот раз мы зададим им равную высоту и параметр z-index будет выставлен на 1 – это позволит удостовериться в том, что они будут отображены исключительно поверх изображения. Как вы можете видеть в отдельных стилях, мы позиционируем псевдо-элементы за пределами прямоугольника анкора, перемещая их по оси Y.

.caption::after,
.caption::before {
position: absolute;
width: 100%;
height: 50%;
color: #fff;
z-index: 1;
transition: transform 0.3s ease-in-out;
}

Давайте выставим цвета фона для псевдо-элементов и значения transform, чтобы сместить заголовок вверх, а описание – вниз:

.caption::after {
content: attr(data-title);
top: 0;
background: #0083ab;
font-size: 40px;
font-weight: 300;
padding: 30px;
transform: translateY(-100%);
}

.caption::before {
content: '...' attr(data-description) '...';
top: 50%;
background: #f27545;
font-size: 14px;
padding: 20px;
transform: translateY(100%);
}

При наведении, мы просто выставляем параметр transform на значение translateY(0%), чтобы элементы сместить их на позиции, которые мы указали выше:

.caption:hover::after,
.caption:hover::before {
transform: translateY(0%);
}

Результат данного примера вы можете увидеть перейдя по ссылке в конце статьи.

Пример 4: толчок со стороны при наведении (при помощи transform)

Последний пример, который мы хотим реализовать сегодня, в сообществе известен под термином “side push”. Нам нужно, чтобы при наведении изображение смещалось вправо, и псевдо-элементы выезжали с правой стороны.

Давайте снова создадим эффект тени, анимировав фон анкора от полу-прозрачного черного до прозрачного:

.caption {
display: inline-block;
position: relative;
margin: 10px;
overflow: hidden;
background: rgba(0,0,0,0.2);
transition: background 0.3s ease-in-out;
}

.caption:hover {
background: rgba(0,0,0,0);
}

Изображение при наведении будет смещаться вправо. Для этого, мы воспользуемся свойством translateX:

.caption img {
display: block;
max-width: 100%;
transition: transform 0.3s ease-in-out;
}

.caption:hover img {
transform: translateX(100%);
}

Псевдо-элементы должны быть расположены под анкором, и поэтому нам нужно будет выставить параметр z-index на -1. Исходная трансформация выставит их по левой стороне:

.caption::before,
.caption::after {
position: absolute;
width: 100%;
z-index: -1;
background: #cecece;
transform: translateX(-30%);
transition: transform 0.3s ease-in-out;
}

Как и раньше, мы добавляем соответствующий контент для псевдо-элементов, и зададим им высоту и некоторые стили для текста:

.caption::before {
content: attr(data-title);
height: 30%;
color: #05b19a;
font-size: 40px;
font-weight: 300;
padding: 30px;
}

.caption::after {
content: '\201C' attr(data-description) '\201D';
top: 30%;
height: 70%;
color: #fff;
font-size: 14px;
padding: 20px 30px;
}

При наведении мы просто установим translateX на 0:

.caption:hover::before,
.caption:hover::after {
transform: translateX(0%);
}

Результат данного примера вы можете увидеть перейдя по ссылке в конце статьи.

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Пожалуйста, дайте нам знать, если вам понравилось данное руководство, и если вы хотите видеть больше подобной информации. Также хотелось бы, чтобы вы рассказали свое мнение по поводу представленной техники.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5889   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 июля 2013 @ 21:27
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
интересно, а что с кроссбраузерностью для content: 'attr(data-description) ''; ?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Табак дарк сайд
Антиполицай - средство от запаха алкоголя и табака
кальяннаялавка.рф
Ивановский трикотаж оптом
База недвижимости п. Ивановское и Мособласти. Квартиры, дачи, участки
ivanovskij-trikotazh.ru
Тренер вратарей в москве
Юрий Спасокукоцкий - тренер по бодибилдингу
тренер-вратарей.рф
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930