Возможности CSS3 впечатляют. В данном уроке мы будем использовать их для реализации творческих замыслов. В результате получится набор эффектов, которые сопровождают событие наведения курсора мыши на объект - будет выводиться описание с использованием разных стилей для каждого примера. Примечание: данные эффекты действуют только в современных браузерах, которые поддерживают СSS3. Разметка HTML Структура разметки весьма проста и интуитивна. Создаем контейнер, который будет содержать изображение и всю остальную информацию. Внутри элемента view содержится элемент с классом mask, который реализует наш эффект с использованием CSS3. В элементе с классом mask содержится заголовок, описание и ссылка (Для некоторых примеров элемент с классом mask используется отдельно, а содержание помещается в контейнер с классом content). 1 <div class="view"> 2 <img src="image.gif" /> 3 <div class="mask"> 4 <h2>Заголовок</h2> 5 <p>Текст сообщения</p> 6 <a href="#" class="info">Кнопка</a> 7 </div> 8 </div> CSS После создания разметки зададим стили. Для нашего набора эффектов будет использоваться класс с общими правилами, а специфические свойства будут добавляться для каждого примера в виде отдельных классов. В тексте урока префиксы производителей браузеров будут опущены для большей наглядности. 01 .view { 02 width: 300px; 03 height: 200px; 04 margin: 10px; 05 float: left; 06 border: 10px solid #fff; 07 overflow: hidden; 08 position: relative; 09 text-align: center; 10 box-shadow: 1px 1px 2px #e6e6e6; 11 cursor: default; 12 background: #fff url(../images/bgimg.jpg) no-repeat center center 13 } 14 .view .mask, .view .content { 15 width: 300px; 16 height: 200px; 17 position: absolute; 18 overflow: hidden; 19 top: 0; 20 left: 0 21 } 22 .view img { 23 display: block; 24 position: relative 25 } 26 .view h2 { 27 text-transform: uppercase; 28 color: #fff; 29 text-align: center; 30 position: relative; 31 font-size: 17px; 32 padding: 10px; 33 background: rgba(0, 0, 0, 0.8); 34 margin: 20px 0 0 0 35 } 36 .view p { 37 font-family: Georgia, serif; 38 font-style: italic; 39 font-size: 12px; 40 position: relative; 41 color: #fff; 42 padding: 10px 20px 20px; 43 text-align: center 44 } 45 .view a.info { 46 display: inline-block; 47 text-decoration: none; 48 padding: 7px 14px; 49 background: #000; 50 color: #fff; 51 text-transform: uppercase; 52 box-shadow: 0 0 1px #000 53 } 54 .view a.info:hover { 55 box-shadow: 0 0 5px #000 56 } А теперь представим 10 эффектов. Открывайте демонстрационную страницу в отдельном окне или вкладке, смотрите и изучайте код. Пример 1 Добавляем специальный класс view-first к элементу с классом view для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее). 1 <div class="view view-first"> 2 3 </div> В данном примере будут использоваться базовые переходы для создания отличного эффекта. 01 .view-first img { 02 transition: all 0.2s linear; 03 } 04 .view-first .mask { 05 opacity: 0; 06 background-color: rgba(219,127,8, 0.7); 07 transition: all 0.4s ease-in-out; 08 } 09 .view-first h2 { 10 transform: translateY(-100px); 11 opacity: 0; 12 transition: all 0.2s ease-in-out; 13 } 14 .view-first p { 15 transform: translateY(100px); 16 opacity: 0; 17 transition: all 0.2s linear; 18 } 19 .view-first a.info{ 20 opacity: 0; 21 transition: all 0.2s ease-in-out; 22 } А теперь перейдем к основе нашего эффекта. Когда курсор мыши проходит над изображением мы используем задержку для имитации простой анимации. Свойство transition-delay, которое используется в псевдо-классах hover, может вносить изменения для отличия от обычного класса. В данном примере мы не используем задержки в обычном классе, но в псевдо-классах hover запуск переходов немного задерживается. Когда курсор мыши покидает объект, будет использоваться значение по умолчанию 0s, и "восстановление" произойдет быстро. 01 .view-first:hover img { 02 transform: scale(1.1); 03 } 04 .view-first:hover .mask { 05 opacity: 1; 06 } 07 .view-first:hover h2, 08 .view-first:hover p, 09 .view-first:hover a.info { 10 opacity: 1; 11 transform: translateY(0px); 12 } 13 .view-first:hover p { 14 transition-delay: 0.1s; 15 } 16 .view-first:hover a.info { 17 transition-delay: 0.2s; 18 } Пример 2 Во втором примере мы добавляем специальный класс view-second, но элемент с классом mask будет пустым, а содержание будет помещено в элемент с классом content. 1 <div class="view view-second"> 2 <img src="images/5.jpg" /> 3 <div class="mask"></div> 4 <div class="content"> 5 <h2>Стиль #2</h2> 6 <p>Описание</p> 7 <a href="#" class="info">Кнопка</a> 8 </div> 9 </div> Здесь класс mask имеет другие атрибуты для построения эффекта. Мы собираемся использовать свойства трансформации (translate и rotate): 01 .view-second img { 02 transition: all 0.2s ease-in; 03 } 04 .view-second .mask { 05 background-color: rgba(115,146,184, 0.7); 06 width: 300px; 07 padding: 60px; 08 height: 300px; 09 opacity: 0; 10 transform: translate(265px, 145px) rotate(45deg); 11 transition: all 0.2s ease-in-out; 12 } 13 .view-second h2 { 14 border-bottom: 1px solid rgba(0, 0, 0, 0.3); 15 background: transparent; 16 margin: 20px 40px 0px 40px; 17 transform: translate(200px, -200px); 18 transition: all 0.2s ease-in-out; 19 } 20 .view-second p { 21 transform: translate(-200px, 200px); 22 transition: all 0.2s ease-in-out; 23 } 24 .view-second a.info { 25 transform: translate(0px, 100px); 26 transition: all 0.2s 0.1s ease-in-out; 27 } Для нашего эффекта будет использоваться трансформация translate для перемещения элементов на место. А маска будет также вращаться. Элементы описания будут появляться с небольшой задержкой друг за другом. 01 .view-second:hover .mask { 02 opacity:1; 03 transform: translate(-80px, -125px) rotate(45deg); 04 } 05 .view-second:hover h2 { 06 transform: translate(0px,0px); 07 transition-delay: 0.3s; 08 } 09 .view-second:hover p { 10 transform: translate(0px,0px); 11 transition-delay: 0.4s; 12 } 13 .view-second:hover a.info { 14 transform: translate(0px,0px); 15 transition-delay: 0.5s; 16 } Пример 3 В третьем примере мы будем использовать трансформации translate и rotate для вывода наших элементов описания: 01 .view-third img { 02 transition: all 0.2s ease-in; 03 } 04 .view-third .mask { 05 background-color: rgba(0,0,0,0.6); 06 opacity: 0; 07 transform: translate(460px, -100px) rotate(180deg); 08 transition: all 0.2s 0.4s ease-in-out; 09 } 10 .view-third h2{ 11 transform: translateY(-100px); 12 transition: all 0.2s ease-in-out; 13 } 14 .view-third p { 15 transform: translateX(300px) rotate(90deg); 16 transition: all 0.2s ease-in-out; 17 } 18 .view-third a.info { 19 transform: translateY(-200px); 20 transition: all 0.2s ease-in-out; 21 } Достаточно простые инструкции для получения эффекта. 01 .view-third:hover .mask { 02 opacity:1; 03 transition-delay: 0s; 04 transform: translate(0px, 0px); 05 } 06 .view-third:hover h2 { 07 transform: translateY(0px); 08 transition-delay: 0.5s; 09 } 10 .view-third:hover p { 11 transform: translateX(0px) rotate(0deg); 12 transition-delay: 0.4s; 13 } 14 .view-third:hover a.info { 15 transform: translateY(0px); 16 transition-delay: 0.3s; 17 } Пример 4 В четвертом примере будет использоваться простое масштабирование изображения и содержания с использованием трансформации scale. Для изображения будет установлена задержка 0.2s в стилях, но при наведении курсора задержка будет 0s. Поэтому при наведении курсора мыши эффект проявится немедленно, а при убирании курсора мыши будет задержка. 01 .view-fourth img { 02 transition: all 0.4s ease-in-out 0.2s; 03 opacity: 1; 04 } 05 .view-fourth .mask { 06 background-color: rgba(0,0,0,0.8); 07 opacity: 0; 08 transform: scale(0) rotate(-180deg); 09 transition: all 0.4s ease-in; 10 border-radius: 0px; 11 } 12 .view-fourth h2{ 13 opacity: 0; 14 border-bottom: 1px solid rgba(0, 0, 0, 0.3); 15 background: transparent; 16 margin: 20px 40px 0px 40px; 17 transition: all 0.5s ease-in-out; 18 } 19 .view-fourth p { 20 opacity: 0; 21 transition: all 0.5s ease-in-out; 22 } 23 .view-fourth a.info { 24 opacity: 0; 25 transition: all 0.5s ease-in-out; 26 } Простые инструкции для получения эффекта. CSS3 может все. 01 .view-fourth:hover .mask { 02 opacity: 1; 03 transform: scale(1) rotate(0deg); 04 transition-delay: 0.2s; 05 } 06 .view-fourth:hover img { 07 transform: scale(0); 08 opacity: 0; 09 transition-delay: 0s; 10 } 11 .view-fourth:hover h2, 12 .view-fourth:hover p, 13 .view-fourth:hover a.info{ 14 opacity: 1; 15 transition-delay: 0.5s; 16 } Пример 5 В пятом примере содержание будет выскальзывать слева благодаря использованию свойства translate в сочетании с функцией перехода ease-in-out. 01 .view-fifth img { 02 transition: all 0.3s ease-in-out; 03 } 04 .view-fifth .mask { 05 background-color: rgba(146,96,91,0.3); 06 transform: translateX(-300px); 07 opacity: 1; 08 transition: all 0.4s ease-in-out; 09 } 10 .view-fifth h2{ 11 background: rgba(255, 255, 255, 0.5); 12 color: #000; 13 box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5); 14 } 15 .view-fifth p{ 16 opacity: 0; 17 color: #333; 18 transition: all 0.2s linear; 19 } При наведении курсора мыши изображение выскальзывает вправо, и на его место слева выдвигается описание, как бы сдвигая картинку: 01 .view-fifth:hover .mask { 02 transform: translateX(0px); 03 } 04 .view-fifth:hover img { 05 transform: translateX(300px); 06 transition-delay: 0.1s; 07 } 08 .view-fifth:hover p{ 09 opacity: 1; 10 transition-delay: 0.4s; 11 } Пример 6 В данном примере мы содержание будет "падать" с переднего плана, уменьшая масштаб от 10 до 1 (нормального размера). А кнопка будет выскальзывать снизу. 01 .view-sixth img { 02 transition: all 0.4s ease-in-out 0.5s; 03 } 04 .view-sixth .mask{ 05 background-color: rgba(146,96,91,0.5); 06 opacity:0; 07 transition: all 0.3s ease-in 0.4s; 08 } 09 .view-sixth h2{ 10 opacity:0; 11 border-bottom: 1px solid rgba(0, 0, 0, 0.3); 12 background: transparent; 13 margin: 20px 40px 0px 40px; 14 transform: scale(10); 15 transition: all 0.3s ease-in-out 0.1s; 16 } 17 .view-sixth p { 18 opacity:0; 19 transform: scale(10); 20 transition: all 0.3s ease-in-out 0.2s; 21 } 22 .view-sixth a.info { 23 opacity:0; 24 transform: translateY(100px); 25 transition: all 0.3s ease-in-out 0.1s; 26 } Обратная трансформация также выполняется плавно: 01 .view-sixth:hover .mask { 02 opacity:1; 03 transition-delay: 0s; 04 } 05 .view-sixth:hover img { 06 transition-delay: 0s; 07 } 08 .view-sixth:hover h2 { 09 opacity: 1; 10 transform: scale(1); 11 transition-delay: 0.1s; 12 } 13 .view-sixth:hover p { 14 opacity:1; 15 transform: scale(1); 16 transition-delay: 0.2s; 17 } 18 .view-sixth:hover a.info { 19 opacity:1; 20 transform: translateY(0px); 21 transition-delay: 0.3s; 22 } Пример 7 В седьмом эффекте идея заключается в использовании вращения изображения вокруг центра и одновременного уменьшения его масштаба. А описание затем опускается сверху. 01 .view-seventh img{ 02 transition: all 0.5s ease-out; 03 opacity: 1; 04 } 05 .view-seventh .mask { 06 background-color: rgba(77,44,35,0.5); 07 transform: rotate(0deg) scale(1); 08 opacity: 0; 09 transition: all 0.3s ease-out; 10 transform: translateY(-200px) rotate(180deg); 11 } 12 .view-seventh h2{ 13 transform: translateY(-200px); 14 transition: all 0.2s ease-in-out; 15 } 16 .view-seventh p { 17 transform: translateY(-200px); 18 transition: all 0.2s ease-in-out; 19 } 20 .view-seventh a.info { 21 transform: translateY(-200px); 22 transition: all 0.2s ease-in-out; 23 } При наведении курсора мыши элементы описания появляются с задержкой: 01 .view-seventh:hover img{ 02 transform: rotate(720deg) scale(0); 03 opacity: 0; 04 } 05 .view-seventh:hover .mask { 06 opacity: 1; 07 transform: translateY(0px) rotate(0deg); 08 transition-delay: 0.4s; 09 } 10 .view-seventh:hover h2 { 11 transform: translateY(0px); 12 transition-delay: 0.7s; 13 } 14 .view-seventh:hover p { 15 transform: translateY(0px); 16 transition-delay: 0.6s; 17 } 18 .view-seventh:hover a.info { 19 transform: translateY(0px); 20 transition-delay: 0.5s; 21 } Пример 8 В данном примере создается эффект отскока при опускании элементов описания сверху. 01 .view-eighth .mask { 02 background-color: rgba(255, 255, 255, 0.7); 03 top: -200px; 04 opacity: 0; 05 transition: all 0.3s ease-out 0.5s; 06 } 07 .view-eighth h2{ 08 transform: translateY(-200px); 09 transition: all 0.2s ease-in-out 0.1s; 10 } 11 .view-eighth p { 12 color: #333; 13 transform: translateY(-200px); 14 transition: all 0.2s ease-in-out 0.2s; 15 } 16 .view-eighth a.info { 17 transform: translateY(-200px); 18 transition: all 0.2s ease-in-out 0.3s; 19 } Мы добавляем анимацию к элементу mask и определяем задержи для элеменетов описания: 01 .view-eighth:hover .mask { 02 opacity: 1; 03 top: 0px; 04 transition-delay: 0s; 05 animation: bounceY 0.9s linear; 06 } 07 .view-eighth:hover h2 { 08 transform: translateY(0px); 09 transition-delay: 0.4s; 10 } 11 .view-eighth:hover p { 12 transform: translateY(0px); 13 transition-delay: 0.2s; 14 } 15 .view-eighth:hover a.info { 16 transform: translateY(0px); 17 transition-delay: 0s; 18 } Для создания эффекта отскока используется функция translateY и несколько фреймов: 1 @keyframes bounceY { 2 0% { transform: translateY(-205px);} 3 40% { transform: translateY(-100px);} 4 65% { transform: translateY(-52px);} 5 82% { transform: translateY(-25px);} 6 92% { transform: translateY(-12px);} 7 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} 8 } 9 Пример 9 В данном примере мы используем два элемента маски для создания эффекта закрывающихся штор: 01 <div class="view view-ninth"> 02 <img src="images/11.jpg" /> 03 <div class="mask mask-1"></div> 04 <div class="mask mask-2"></div> 05 <div class="content"> 06 <h2>Стиль #9</h2> 07 <p>Описаниеt</p> 08 <a href="#" class="info">Кнопка</a> 09 </div> 10 </div> Две маски имеют различные параметры для трансформаций. Также они выравнены по-разному. 01 .view-ninth .mask-1, 02 .view-ninth .mask-2{ 03 background-color: rgba(0,0,0,0.5); 04 height: 361px; 05 width: 361px; 06 background: rgba(119,0,36,0.5); 07 opacity: 1; 08 transition: all 0.3s ease-in-out 0.6s; 09 } 10 .view-ninth .mask-1 { 11 left: auto; 12 right: 0px; 13 transform: rotate(56.5deg) translateX(-180px); 14 transform-origin: 100% 0%; 15 } 16 .view-ninth .mask-2 { 17 top: auto; 18 bottom: 0px; 19 transform: rotate(56.5deg) translateX(180px); 20 transform-origin: 0% 100%; 21 } Содержание стилизовано так, что выглядит появляющимся из тонкой линии соприкосновения масок: 01 .view-ninth .content{ 02 background: rgba(0,0,0,0.9); 03 height: 0px; 04 opacity: 0.5; 05 width: 361px; 06 overflow: hidden; 07 transform: rotate(-33.5deg) translate(-112px,166px); 08 transform-origin: 0% 100%; 09 transition: all 0.4s ease-in-out 0.3s; 10 } 11 .view-ninth h2{ 12 background: transparent; 13 margin-top: 5px; 14 border-bottom: 1px solid rgba(255,255,255,0.2); 15 } 16 .view-ninth a.info{ 17 display: none; 18 } При наведении курсора мыши появляется содержание из границы соприкосновения масок: 01 .view-ninth:hover .content{ 02 height: 120px; 03 width: 300px; 04 opacity: 0.9; 05 top: 40px; 06 transform: rotate(0deg) translate(0px,0px); 07 } 08 .view-ninth:hover .mask-1, 09 .view-ninth:hover .mask-2{ 10 transition-delay: 0s; 11 } 12 .view-ninth:hover .mask-1{ 13 transform: rotate(56.5deg) translateX(1px); 14 } 15 .view-ninth:hover .mask-2 { 16 transform: rotate(56.5deg) translateX(-1px); 17 } Для масок используется свойство transition-delay, поэтому при наведении курсора мыши трансформации начинаются немедленно. Но обратная трансформация осуществляется с задержкой, чтобы содержание успело свернуться. Пример 10 В последнем пример используется увеличение изображения с одновременным изменением прозрачности, а содержание увеличивается до нормальных размеров. 01 .view-tenth img { 02 transform: scaleY(1); 03 transition: all 0.7s ease-in-out; 04 } 05 .view-tenth .mask { 06 background-color: rgba(255, 231, 179, 0.3); 07 transition: all 0.5s linear; 08 opacity: 0; 09 } 10 .view-tenth h2{ 11 border-bottom: 1px solid rgba(0, 0, 0, 0.3); 12 background: transparent; 13 margin: 20px 40px 0px 40px; 14 transform: scale(0); 15 color: #333; 16 transition: all 0.5s linear; 17 opacity: 0; 18 } 19 .view-tenth p { 20 color: #333; 21 opacity: 0; 22 transform: scale(0); 23 transition: all 0.5s linear; 24 } 25 .view-tenth a.info { 26 opacity: 0; 27 transform: scale(0); 28 transition: all 0.5s linear; 29 } При наведении курсора просто изменяется масштаб изображения и прозрачность: 01 .view-tenth:hover img { 02 transform: scale(10); 03 opacity: 0; 04 } 05 .view-tenth:hover .mask { 06 opacity: 1; 07 } 08 .view-tenth:hover h2, 09 .view-tenth:hover p, 10 .view-tenth:hover a.info{ 11 transform: scale(1); 12 opacity: 1; 13 } Заключение CSS3 имеет огромный потенциал для создания различных визуальных эффектов. Вероятно, что вскоре мы сможем отказаться от использования JavaScript для простых эффектов.