Lecaw

Учимся создавать Web-сайты

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

July 22, 2013
CSS
263hits

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

ДЕМО Исходные файлы

 

Советую вам прочитать про эффекты элемента Caption - Эффекты при наведении элемента Caption, а также если интересует действительно интересная анимация и переходы псевдо-элементов - Примеры переходов и анимации псевдо-элементов CSS after и before.

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

<a
    class="caption"
    href="#"
    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%;
}

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

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

Пример 1

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

.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: Отображение элемента при наведении (непрозрачность)

Теперь, давайте создадим текст, который будет появляться после наведения курсора мыши (простая анимация непрозрачности псевдо-элементов). На этот раз, псевдоэлементы будут охватывать все изображение целиком. Установим непрозрачность со значением 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, мы предварительно установим открывающие и закрывающие кавычки. Для этого мы добавим определенные значения для меток, которые мы преобразовали при помощи Entity Conversion Calculator by 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; 
}

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

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

Пример 4: Толчок с боку (transform)

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

Давайте снова создадим эффект тени с помощью анимации фона привязки из полупрозрачного черного к полностью прозрачному:

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

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий