—»     —»   Иллюзия элементов, расположенных друг над другом посредством псевдо-элементов в CSS3
  Раздел: Tips and Tricks, CSS/Style Sheets   Нет комментариев  

Иллюзия элементов, расположенных друг над другом посредством псевдо-элементов в CSS3



Надеемся, что на данный момент вы знакомы с псевдо-элементами :before и :after, так как сегодня мы собираемся разработать нечто интересное посредством CSS! Сегодня мы покажем вам, каким образом можно создать интересный эффект для изображений.

Иллюзия элементов, расположенных друг над другом посредством псевдо-элементов в CSS3

Этап 1 – HTML-код

<div class="stack">
<img src="image1.jpg" />
</div>

К сожалению, контент, сгенерированный в браузерах WebKit, на данный момент не поддерживается внутри элемента img, поэтому мы воспользуемся div’ом, чтобы заставить наш эффект работать. Возможно, в будущем ситуация станет проще:

«Примечание. Данная спецификация не в полной мере определяет взаимодействие псевдо-элементов :before и :after с замещенными элементами (типа IMG в HTML). Возможно, в будущих обновлениях спецификации этот недочет будет устранен».

Этап 2 – CSS-код

.stack { position: relative; z-index: 10; }

/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

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

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.stack.rotated:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.stack.twisted:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.stack.rotated-left:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}

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

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

Важно отметить тот факт, что на данный момент только Firefox поддерживает переходы в :before и :after (переходы были определены ранее на странице, в самих псевдо-элементах). Браузеры семейства Webkit не поддерживают эти переходы на данный момент, но мы надеемся, что скоро ситуация изменится.

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

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6952   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031