| 18.02.2016
CSS3 відкриває необмежені можливості перед UI-дизайнерами, і головний плюс полягає в тому, що практично будь-яку ідею можна легко реалізувати та втілити у життя, не вдаючись до використання JavaScript.
Дивно, як прості речі можуть оживити звичайну веб-сторінку, зробити її доступнішою для сприйняття користувачами. Йдеться про CSS3 переходи, за допомогою яких можна дозволяти елементу трансформуватися та змінювати стиль, наприклад, при наведенні курсору. Дев'ять прикладів анімації CSS3, які доступні нижче, допоможуть створити на сайті атмосферу чуйності, а також покращити загальний вигляд сторінки завдяки красивим плавним переходам.
Для більш детального ознайомлення ви можете завантажити архів із файлами.
Усі ефекти працюють з допомогою властивості transition (англ. transition- «Перехід», «перетворення») і псевдокласу: hover, який визначає стиль елемента при наведенні на нього курсора миші (у нашому підручнику). Для наших прикладів ми використали блок div розміром 500×309 пікселів, вихідний колір фону #6d6d6d та тривалість переходу від одного стану до іншого 0,3 секунди.
Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease; transition: all 0.3s ease; )
1. Зміна кольору під час наведення курсору
Колись реалізація такого ефекту була досить копіткою роботою з математичними обчисленнями певних значень RGB. Зараз досить записати стиль CSS, в якому необхідно додати до селектора псевдоклас:hover і задати фоновий колір, який плавно (за 0,3 секунди) замінить собою вихідний колір фону при наведенні курсору на блок:
Color:hover ( background:#53ea93; )
2. Поява рамки
Цікава та яскрава трансформація – внутрішня рамка, що плавно з'являється при наведенні миші. Добре підійде для оздоблення різних кнопок. Щоб досягти такого ефекту, використовуємо псевдоклас:hover та властивість box-shadow з параметром inset (задає тінь усередині елемента). Крім цього, потрібно задати розтягнення тіні (у нашому випадку це 23px) та її колір:
Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )
3. Свінг
Дана анімація CSS - виняток, тому що тут властивість transition не використовується. Замість нього ми задіяли:
- @keyframes - базова директива для створення покадрової CSS-анімації, яка дозволяє робити т.з. розкадрування та описувати анімацію у вигляді списку ключових моментів;
- animation та animation-iteration-count - властивості для завдання параметрів анімації (тривалість та швидкість) та кількості циклів (повторів). У разі повтор 1.
4. Згасання
Ефект плавного згасання - це, по суті, нормальна зміна прозорості елемента. Анімація створюється в два етапи: спочатку необхідно встановити початковий стан прозорості 1 – тобто повна непрозорість, після чого вказати її значення при наведенні миші – 0.6:
Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )
Для протилежного результату поміняйте значення місцями:
5. Збільшення
Щоб при наведенні курсору блок збільшувався, ми скористаємося властивістю transform і задаємо значення scale(1.2) . При цьому блок збільшиться на 20 відсотків із збереженням своїх пропорцій:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Зменшення
Зменшити елемент так само просто, як збільшити. Якщо в п'ятому пункті для збільшення масштабу нам необхідно було вказати значення більше, ніж 1, то для зменшення блоку ми просто вкажемо значення, яке буде менше одиниці, наприклад, scale(0.7). Тепер при наведенні миші блок пропорційно зменшуватиметься на 30 відсотків від свого початкового розміру:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Трансформація у коло
Одна з найчастіше використовуваних анімацій - прямокутний елемент, який при наведенні курсору перетворюється на коло. За допомогою властивості CSS border-radius, використаного в парі з: hover і transition, це можна реалізувати без проблем:
Circle:hover ( border-radius: 70%; )
8. Обертання
Кумедний варіант анімації - поворот елемента на певну кількість градусів. Для цього нам знову знадобиться властивість перетворення, але вже з іншим значенням - rotateZ(20deg). За таких параметрів блок буде повернутий на 20 градусів за годинниковою стрілкою щодо осі Z:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D тінь
Думки дизайнерів розходяться в тому, чи доречний цей ефект у флет-дизайні. Тим не менш, ця CSS3 анімація є дуже оригінальною і також використовується на веб-сторінках. Добиватимемося тривимірного ефекту за допомогою вже знайомих нам властивостей box-shadow (створить багатошарову тінь) і transform з параметром translateX(-7px) (забезпечить зсув блоку по горизонталі вліво на 7 пікселів):
Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: translateX( -7px);transform: translateX(-7px);
Підтримка браузерами
На сьогоднішній день властивість transition підтримується такими браузерами:
| Десктопні браузери | |
|---|---|
| Internet Explorer | Підтримується версією IE 10 та вище |
| Chrome | Підтримується з версії 26 (до версії 25 працює з префіксом -webkit-) |
| Firefox | Підтримується з версії 16 (у версіях 4-15 працює із префіксом -moz-) |
| Opera | Підтримується з версії 12.1 |
| Safari | Підтримується з версії 6.1 (у версіях 3.1-6 працює із префіксом -webkit-) |
Інші властивості, використані в даних прикладах, такі як transform, box-shadow і т. д., також підтримуються майже всіма сучасними браузерами. Однак, якщо ви збираєтеся використовувати ці ідеї для своїх проектів, настійно рекомендуємо перевіряти ще раз кросбраузерність.
Сподіваємося, що ці приклади анімації CSS3 були корисними для вас. Бажаємо творчих успіхів!
Для того, щоб організувати таке збільшення, я пропоную два способи. Обидва на чистому CSS, без використання JavaScript. Перший спосіб збільшує блок або картинку, залежно до чого Ви збираєтеся застосувати цей метод, без впливу на інші елементи сторінки. Він ніби збільшується поверх інших. Для того, щоб організувати таке плавне збільшення, потрібно:
1. Визначиться, який елемент буде. У нашому випадку це буде блок із класом block
2. Виводимо його у потрібному місці html коду нашого сайту
У файлі стилів надають йому такі параметри:
Block( width:150px; height:150px; background:#f30; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit -transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; transform: scale(1.2,1.2);-webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; function: ease-out;-moz-transition-duration: 550ms;
Можна перевіряти готовий результат. Ширину, Висоту, фон та інші параметри задаємо будь-які, головне вказати правильно параметри -transform- відповідальний за розмір збільшення, причому просто в блоці його чіпати не треба, він за замовчуванням 1 - вихідний розмір, а ось за властивості :hoverми його змінюємо на необхідне, до якого розміру буде збільшення, у разі 1.2.
Звичайно ж Ви можете змінити навпаки, припустимо, якщо Вам потрібно плавне зменшення при наведенні, тут ніхто не заборонить Вам цього зробити.
Наступна властивість - це -transitionвідповідає за швидкість анімації в мілісекундах. Якщо його не використовувати, все різко збільшуватиметься і зменшуватиметься. У цьому прикладі значення цього параметра - 550ms.
Другий спосіб трохи відрізняється від першого. Його анімація, збільшення відбувається з впливом на інші блоки та елементи сторінки. При збільшенні він хіба що відсуває в сторони. Тим не менш, даний спосіб теж застосовується і багатьом саме він і знадобиться для вирішення конкретної поставленої задачі.
І що нам потрібно зробити для того, щоб організувати таке плавне збільшення при наведенні?
1. Як і в першому прикладі визначаємо блок із класом вже block2
2. Знову ж таки виводимо в потрібному місці
І привласнюємо йому стилі:
Block2( width: 150px; height: 150px; background:#390; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; ; transition: all 2s ease; ) .block2:hover ( width: 200px; height: 200px; )
У даному випадку ми просто змінюємо розмір блоку в пікселях і додаємо властивість -transitionщо робить плавним збільшення. На відміну від першого способу ми вказуємо час анімації не в мілісекундах, а в секундах. На прикладі – це 2 секунди. Ось такими не хитрими способами можна зробити плавне збільшення, не вдаючись до використання скриптів. Можна обійтись чистим СSS.
Старі версії браузерів можуть не зрозуміти що від них хочуть, тому дивіться самі. Особисто я не звертаю уваги і не забиваю голову поганим з тим, що можливо, 1 з мільйона зайде на мій сайт із стародавнього вбогого Internet Explorer і в нього щось не відобразиться. Для таких користувачів я виводжу повідомлення, що їм настав час відмовитися від сміття і перейти на нормальний, людський браузер.
На цьому все, дякую за увагу. 🙂
Ефект збільшення зображення при наведенні курсору миші відомий багатьом. Але як зробити так, щоб збільшувалося лише фонове зображення (background-image) без збільшення основного вмісту блокового елемента?
Зробимо блоковий елемент з шириною 340 пікселів, а висотою 230 пікселів.
Для нього вкажемо стиль:
Vozm (
width:340px;
height:230px;
float:left;
overflow: hidden;
}
Вирівнюємо по лівому краю - float: left. Також вказуємо властивість overflow зі значенням hidden для того, щоб фонове зображення не виходило за область нашого блоку.
На наступному етапі поміщаємо вміст у наш блоковий елемент:
Текст 1
Vozm p (
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl (
width:30px;
height:6px;
background-color:#da291c;
}
Вказуємо колір тексту для абзаців у блоковому елементі – color зі значенням #da291c. Також вказуємо на те, що текст буде напівжирний з розміром (font-size) 16 пікселів та міжрядковим інтервалом (line-height) у 21 піксель.
Стиль "red_bl" додасть гарний горизонтальний елемент червоного кольору наш блоковий контейнер. Ширина 30 пікселів, висота 6 пікселів, колір такий самий як і у тексту.
Також додаємо стиль для внутрішнього блоку:
Vposf (
position:relative;
z-index:9999;
left:45px;
top:40px;
}
Вказуємо відносне положення внутрішнього блоку з внутрішніми відступами зліва 45 пікселів і зверху 40 пікселів.
Додаємо фонове зображення background-image:
Стиль для нього виглядає так:
Child (
width: 100%;
height: 100%;
background-position: центр;
background-size: cover;
-webkit-transition: all.5s;
-Moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Властивість transition для різних браузерів використовується для того, щоб ефект збільшення зображення фону при наведенні відбувався плавно протягом 50 мілісекунд. Ширину та висоту вказуємо рівною 100%. Також позицію фону (background-position) ставимо в центрі та шасштабуємо зображення (background-size) за шириною та висотою блоку.
Vozm:hover .child,
.vozm:focus .child (
-ms-transform: scale(1.2);
-Moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Для цього використовується властивістю transform c зі значенням scale. Збільшення робимо на 20% від вихідного.
Ну і підвантажуємо саме тло:
Bg-1 (background-image: url("/userf_fs/stati/fon_sh.jpg");margin-top: -59px;)
Оскільки блоковий елемент з фоновим зображенням знаходиться нижче нашого тексту, його необхідно підняти. Для цього використовуємо негативне значення властивості margin-top.
Отже, html код виглядає так:
Текст 1
А css наступним чином:
Vozm (
width:340px;
height:230px;
float:left;
overflow: hidden;
}
.child (
width: 100%;
height: 100%;
background-position: центр;
background-size: cover;
-webkit-transition: all.5s;
-Moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.vozm:hover .child,
.vozm:focus .child (
-ms-transform: scale(1.2);
-Moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.vozm p (
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl (
width:30px;
height:6px;
background-color:#da291c;
}
..jpg"); margin-top: -59px;)
.vposf (
position:relative;
z-index:9999;
left:45px;
top:40px;
}
Якщо помістимо кілька блокових елементів щодо один одного, то отримаємо наступне зображення.
Отже, ми досягли бажаного результату.
Досить часта практика на сучасних сайтах – плавне збільшення блоку із зображенням. Як це зробити за допомогою CSS?
Плавне збільшення зображення при наведенні курсору CSS
Ділимо розв'язання задачі на два етапи: розмітка html і стилі css. Для початку розмітимо блоки із зображеннями всередині:
Всім блокам надали клас box. Однією з важливих його властивостей буде overflow:hidden, тобто приховати все, що виходить за рамки блоку. Збільшуватимемо зображення? Так. Але видно буде лише частина, обмежена блоком.
Це ми розібрали. Переходимо до опису стилів.
Box (
overflow:hidden;
width: 250px;
height:250px;
}
Все як і обмовляли - квадратні блоки, схожі за розміром зі стандартним, не збільшеним зображенням, теж 250 на 250.
Властивість overflow:hidden, як і говорилося раніше, не дозволити виходити за рамки блоку при збільшенні.
Властивості, що стосуються зображень:
Box img (
-Moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
Box img:hover(
-webkit-transform: scale(1.2);
-Moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Тут без CSS3 нікуди. Усі сучасні браузери анімацію відобразять. Потрібні параметри transition та transform. Час на анімацію виставляємо 1 секунду (1s). Збільшення відбуватиметься у 1.2 рази. Ви можете змінити Ваш смак.
Тепер, наприклад, роботи!
Звичайно, способів збільшення зображень є досить багато. І в основному використовуються застосування скриптів та плагінів. На мою думку такі методи виправдані у разі ресурсів з величезною кількістю фотографій або картинок. Мій блог не такий. І, як завжди, я йду шляхом найменшого витрат часу, знань та ресурсів свого сайту.
Пропоную вам спосіб збільшення картинки на сайті без використання будь-яких скриптів, а виключно за допомогою HTML.
Такий спосіб збільшення зображення на сайті дозволить читачеві швидко подивитися картинку, адже вашому сайту не потрібно буде додатково робити завантаження скриптів.
Збільшення зображення на сайті
1 спосіб - збільшення зображення на сайті при наведенні курсору
Дуже простий, ну найпростіший спосіб, слово честі. Треба додати наступний код до властивостей картинки:
Onmouseover="this.style.width="значення ширини великого зображення px"" onmouseout="this.style.width="значення ширини маленького зображення px""
При наведенні курсору миші зображення збільшується.
Сподіваюся, ви розумієте, що це робиться в текстовому редакторі.
2 спосіб - збільшення картинки на сайті при натисканні миші
Спосіб аналогічний, просто намусовищі треба замінити на click. До властивостей картинки додається наступний код:
Style="width: "значення ширини маленького зображення px; border:2px solid black;" onclick="this.style.width=значення ширини великого зображення px "" onmouseout="this.style.width="значення ширини маленького зображення px""
Цілком це буде виглядати так
Ось результат і код для картинки з кицькою.
При натисканні миші зображення збільшується до розмірів оригінального зображення або заданих вами. Для зменшення розмірів, тобто повернути картинку у вихідний розмір, просто клацніть будь-яке місце сторінки.
Сподіваюся, вам не здалося складним використовувати такі способи – за допомогою html – зробити збільшення зображення на сайті.
Взагалі, я вважаю, багато веб-майстрів не обмежуються просто використанням будь-якого движка і застосовують html-коди на своїх сайтах.
Читайте також:
2015-10-27T16:07:59+00:00 НадіяСкрипти та коди збільшення зображення на сайті, збільшення картинки на сайтіЗвичайно, способів збільшення зображень є досить багато. І в основному використовуються застосування скриптів та плагінів. На мою думку такі методи виправдані у разі ресурсів з величезною кількістю фотографій або картинок. Мій блог не такий. І, як завжди, я йду шляхом найменшого витрат часу, знань та ресурсів свого сайту. Пропоную вам спосіб збільшення.
Надія Трофімова [email protected] Administrator Блог сайтМожливо Вас також зацікавить:
Забираємо з головної сторінки та RSS записи рубрики
Продовжуємо покращувати функціонал та зовнішній вигляд сайту. Забираємо непотрібні записи з головної сторінки та RSS.
Хлібні крихти на сайті wordpress
Хлібні крихти на сайті – що це і як зробити?
Як зробити тінь у тексту за 5 хвилин
Здрастуйте, шановний читачу мого блогу. У цій статті ви навчитеся створювати за 5 хвилин за допомогою стилів css та коду html тінь тексту.
Як зробити кнопку скачати за допомогою коду css
Здрастуйте, шановний читачу мого блогу. Продовжую тему про кнопки. У цій статті йтиметься про те, як зробити кнопку завантажити за допомогою коду css.
Як зробити кнопки вгору вниз для сайту
