6 Прохолодні зображення для CSS3
CSS3 дійсно потужний. Раніше ми мали потребу в зображеннях або групі кодів JavaScript, щоб зробити простий ефект переходу. Сьогодні ми можемо зробити те ж саме тільки з CSS3.
У цьому підручнику ми покажемо, як створювати підписи до зображення з різними переходами, просто використовуючи CSS3.
- Демо
- Завантажити джерело
Підтримка браузера
Цей підпис буде значною мірою залежати від властивостей перетворення та переходу, які є відносно новими функціями, тому було б доречно взяти до уваги підтримку браузера, необхідну для плавного запуску підпису..
Нижче наведено переглядачі, які вже підтримують перетворення та перехід:
- Internet Explorer 10+ (ще не випущено)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Тепер почнемо навчальний посібник.
Структура HTML
У нас є 6 зображень; кожне зображення з іншим стилем підпису.
Простий підпис
Повний підпис
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt у laoreet dolore magna aliquam erat volutpat.
Fade Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt у laoreet dolore magna aliquam erat volutpat.
Підпис слайда
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt у laoreet dolore magna aliquam erat volutpat.
Це обертати підпис
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt у laoreet dolore magna aliquam erat volutpat.
Безкоштовний стиль Caption
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt у laoreet dolore magna aliquam erat volutpat.
Основний CSS
Перш ніж укласти будь-який елемент, завжди буде гарним початком скидання всіх властивостей за допомогою цього скидання CSS і надати їм значення за замовчуванням стилю, тому всі веб-переглядачі показуватимуть один і той же результат (окрім можливо, IE6).
Стилі будуть розділені у файлі style.css, тому наш HTML-файл буде виглядати акуратно. Проте не забудьте додати стиль посилання в тезі head, щоб застосувати правила файлу у стилі.
Добре, давайте почнемо стилізацію елемента, починаючи з тегу html і головного ідентифікатора обгортки:
html колір фону: #eaeaea; #mainwrapper font: 10pt звичайний Arial, sans-serif; висота: авто; запас: 80px auto 0 auto; text-align: center; ширина: 660px;
Стиль вікна зображення
Ми застосовуємо деякі загальні стилі у полях, що містять зображення. Ящики відображатимуться пліч-о-пліч, використовуючи ліве плавання. Зверніть увагу, що ми також додали переповнення: приховану властивість; це призведе до того, що всі об'єкти, що проходять через div, будуть приховані.
Ми також оголошуємо властивість переходу на кожному зображенні всередині вікна, якщо нам потрібен перехід зображення пізніше.
#mainwrapper .box border: 5px solid #fff; курсор: покажчик; висота: 182px; поплавок: лівий; запас: 5px; позиція: відносна; переповнення: приховано; ширина: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; коробка-тінь: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; ліворуч: 0; -webkit-перемикання: всі 300мс легкості; -moz-перемикання: всі 300мс зручніше; -о-перехід: всі 300мс зручніше; -ms-transition: всі 300мс зручніше; перехід: всі 300мс зручніше;
Підпис Загальний стиль
Підпис буде мати деякі загальні стилі, а також властивість переходу. Замість того, щоб використовувати властивість непрозорості, ми використовуємо колірний режим RGBA з 0,8 для альфа-каналу, щоб зробити заголовок трохи прозорим, не впливаючи на текст всередині.
#mainwrapper .box .caption колір фону: rgba (0,0,0,0,8); позиція: абсолютна; колір: #fff; z-індекс: 100; -webkit-перемикання: всі 300мс легкості; -moz-перемикання: всі 300мс зручніше; -о-перехід: всі 300мс зручніше; -ms-transition: всі 300мс зручніше; перехід: всі 300мс зручніше; ліворуч: 0;
Підпис 1
Перший заголовок матиме простий ефект переходу, який зазвичай використовується для підпису. Підпис підійде від нижньої частини, коли ми наводимо курсор на зображення. Щоб вирішити цю проблему, заголовок матиме фіксовану висоту 30px, і ми застосуємо її нижню позицію -30px, щоб приховати її нижче зображення.
#mainwrapper .box .simple-caption висота: 30px; ширина: 200px; дисплей: блок; знизу: -30px; line-height: 25pt; text-align: center;
Підпис 2
Другий тип має повну ширину і висоту розміру зображення / вікна (200x200px), а перехід буде подібний до ефекту ковзних дверей, лише якщо він буде ковзати зверху вниз.
#mainwrapper .box .full-caption width: 170px; висота: 170px; зверху: -200px; text-align: left; заповнення: 15px;
Підпис 3
Третій заголовок матиме ефект вицвітання. Отже, ми додали непрозорість: 0 для початкового стану.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption непрозорість: 0; ширина: 170px; висота: 170px; text-align: left; заповнення: 15px;
Підпис 4
Четвертий заголовок зсунеться зліва направо, тому ми встановили 200px ліворуч (ліворуч: 200px) як початкове положення.
** Підпис 4: Слайд ** / #mainwrapper .box .slide-caption width: 170px; висота: 170px; text-align: left; заповнення: 15px; ліворуч: 200px;
Підпис 5
П'ятий заголовок матиме обертовий ефект. Обертається не просто підпис, а й зображення. Це більше схоже на зміну положення обертанням.
Отже, ми додаємо властивість перетворення з обертанням -180 градусів, якщо ви не бажаєте, щоб ваш монітор читав заголовок.
#mainwrapper # box-5.box .rotate-caption width: 170px; висота: 170px; text-align: left; заповнення: 15px; зверху: 200px; -moz-transform: rotate (-180deg); -o-transform: повернути (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg); #mainwrapper .box .rotate ширина: 200px; висота: 400px; -webkit-перемикання: всі 300мс легкості; -moz-перемикання: всі 300мс зручніше; -о-перехід: всі 300мс зручніше; -ms-transition: всі 300мс зручніше; перехід: всі 300мс зручніше;
Підпис 6
Останній заголовок матиме масштабне перетворення. Однак у попередніх підписах текст всередині нього буде відображатися разом зі зміною переходу .caption. У цьому розділі ми зробимо це трохи іншим.
Текст з'явиться після того, як буде виконано зсув переходу. Отже, до тексту додаємо затримку переходу, в даному випадку - тег h3 і p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; ліворуч: -200px; ширина: 170px; -webkit-перемикання: всі 300мс легкості; -moz-перемикання: всі 300мс зручніше; -о-перехід: всі 300мс зручніше; -ms-transition: всі 300мс зручніше; перехід: всі 300мс зручніше; #mainwrapper .box .scale-caption h3 -webkit-перехід-затримка: 300 мс; -moz-delay-затримка: 300ms; -о-затримка переходу: 300 мс; -ms-перехід-затримка: 300ms; затримка переходу: 300 мс; #mainwrapper .box .scale-заголовок p -webkit-перехід-затримка: 500ms; -моз-перехід-затримка: 500 мс; -о-затримка переходу: 500 мс; -ms-перехід-затримка: 500ms; затримка переходу: 500 мс;
Зробимо їх
У наступному розділі ми визначимо поведінку заголовка, коли ми наводимо курсор на зображення або поля.
Поведінка підпису 1: Показ.
Для першого заголовка, ми хотіли б, щоб він з'являвся (знизу), коли ми наводимо курсор на поле. Для вирішення цього кроку ми використовуємо властивість трансформації, а нижній CSS-код дає заголовку перейти на 100% своєї ваги вгору.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);
Якщо ви не маєте сенсу мати негативне значення для translateY, ви можете прочитати цей посібник, щоб отримати більш глибоке уявлення.
Поведінка підпису 2: Пересуньте його вниз.
І навпаки, другий заголовок буде рухатися вниз. Отже, ми матимемо позитивне значення для трансляції.
.mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);
Поведінка підпису 3: Зникнення.
Третій заголовок - насправді найпростіший. Коли вікно знаходиться на наведенні, непрозорість заголовка перетвориться на 1, що робить його видимим, і оскільки ми додали властивість переходу до класу субтитрів, перехід повинен працювати плавно.
#mainwrapper .box: наведення .fade-caption opacity: 1;
Поведінка підпису 4: Посуньте її ліворуч.
Як ми вже згадували раніше, цей заголовок скочується зліва, однак зображення також висунеться вправо. Отже, тут ми маємо 2 декларації CSS.
Наведений нижче код CSS вказує на те, що під час наведення курсору миші на поле підпис буде зміщено на 100% від ширини ліворуч. Зверніть увагу, що ми зараз використовуємо translateX, тому що ми хочемо, щоб слайд рухався горизонтально справа наліво.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); непрозорість: 1; transform: translateX (-100%);
Коли ми пересуваємо курсор миші над вікном, зображення зсунеться вліво.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);
Поведінка підпису 5: Поворот.
Цей заголовок відрізняється від інших, оскільки він не рухається праворуч або ліворуч, а повертається. Коли вікно знаходиться на наведенні, div, що містить зображення, і заголовок обертаються на -180 проти годинникової стрілки, приховуючи зображення і показуючи заголовок.
/ ** Поворот заголовка: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! -moz-transform: rotate (-180deg); -o-transform: повернути (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg);
Поведінка підпису 6: Масштабуйте його.
Цей підпис об'єднає декілька ефектів перетворення. Коли вікно знаходиться на наведенні, зображення збільшиться на 140% (1.4) від початкового розміру.
#mainwrapper .box: hover # image-6 -moz-transform: масштаб (1.4); -o-transform: шкала (1.4); -webkit-transform: шкала (1.4); трансформація: шкала (1.4);
І якщо ви бачили CSS вище Підпис 6 Заголовок, ми приховали текст ліворуч на 200px. Нижче наведений нижче код CSS повідомляє тексту перейти до початкової позиції. Отже, текст буде пересуватися зліва направо одночасно.
.mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover. -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);
- Демо
- Завантажити джерело
Резюме
Незважаючи на те, що ці функції CSS є прохолодною, але вона ще не широко застосовується, через обмеження підтримки браузера, які ми вже згадували раніше. Проте продовжуйте експериментувати з цими новими функціями, оскільки таким чином ми будемо формувати веб-сторінку в майбутньому.
Кредити
Ескізи зображень у навчальному посібнику взяті з таких веб-сайтів (знімок екрана):
- Книга Апарт
- Архидучесе
- Vlog
- Hongkiat
- Вітальна ферма
- Марк Еко
