Надеемся, что на данный момент вы знакомы с псевдо-элементами :before и :after, так как сегодня мы собираемся разработать нечто интересное посредством CSS! Сегодня мы покажем вам, каким образом можно создать интересный эффект для изображений.
Этап 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 не поддерживают эти переходы на данный момент, но мы надеемся, что скоро ситуация изменится.
