13 красивих CSS ефектів для зображень
- плавно збільшувати і зменшувати зображення;
- вертикально і горизонтально зміщувати зображення;
- нахиляти або приводити в повний поворот зображення;
- закругляти зображення;
А також і такі ефекти:
- розмиття, освітлення, контрастність, сепія;
- плавний перехід з кольорового зображення в чорно-біле;
- інверсія кольору.
Щоб скористатися кодом, вам достатньо скопіювати спочатку основний код, а потім код ефекту і вставити, природно, на свій блог або сайт.
основний код
Цей код застосовується до всіх ефектів, які будуть запропоновані для вас далі:
Всі стилі в класі «.pic» будуть загальними для всіх зображень. Для всіх зображень встановлена біла рамка в 10px (рядок №13). Вказуються однакові розміри зображення для висоти і ширини в 300px (рядок №15, №16). Відступ від блоків в 20px (рядок №17). Щоб картинка не виходила за зазначені прибудови, прописуємо «overflow: hidden; ». Якщо для вас все це незрозуміло, настійно рекомендую прочитати основи CSS.
Приступаємо до ефектів.
В HTML файл вставте між тегами
ось цей код:Рядок №2. вкажіть шлях до зображення, розмір якого 400 х 400px.
В CSS вставте ось цей код:
Зображення по суті 400 х 400px, але ми зменшимо його під наш блок 300 х 300px (Рядок №3 і №4).
Зображення змінюється плавно до вихідного зображення 400 х 400px (Рядок №14 і №15). За плавну зміну розмірів відповідає властивість transition. де вказано 1 секунда. (Рядок №6 - №10).
По суті, це один і той же код, тільки потрібно поміняти розміри і зображення плавно з великих розмірів 400 х 400px зменшитися на 300 х 300px.
В HTML файл між тегами
вставте ось цей код:В CSS вставте ось цей код:
3. Ефект «Горизонтальний зсув»
Цей ефект змінює позиції блоку. Тобто, якщо навести курсором на картинку, зображення зміститься в бік.
В HTML файл вставте між тегами
ось цей код:У рядку №2 вкажіть шлях до зображення, розмір якого 600 х 300px.
В CSS вставте ось цей код:
Щоб картинка змістилася вліво, вкажіть у властивості «margin-left» значення «-200». Якщо значення вказати «200», зміщення буде в праву сторону.
4. Ефект «Вертикальний зсув»
По суті, це один і той же код, тільки потрібно замість властивості «margin-left» прописати «margin-top» і зображення при наведенні курсору плавно рухатиметься вгору.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
Якщо у властивостях «margin-top» вказати значення «200», зміщення зображення буде вниз.
Цей ефект дозволить зробити невеликий поворот зображення при наведенні на нього мишки.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
Картинка при наведенні курсору повернеться на 10 0 вліво (Строка№11-№15). Ви можете збільшити градус повороту самостійно.
6. Ефект «Поворот зображення зі зміною форми»
Це мій улюблений ефект. При наведенні курсора мишки на зображення, воно робить одне коло обертання, при цьому квадратна форма змінюється в круглу.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
За закруглення кутів відповідає «border-radius» зі значенням «50%».
За поворот зображення на 360 0 відповідає властивість transform.
7. Ефект «Фокусування зображення»
У цьому ефекті немає нічого незвичайного, просто закруглюється зображення і збільшується товщина рамки.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
Тут, думаю, вам все зрозуміло: border відповідає за товщину рамки і border-radius за радіус заокруглення.
При наведенні курсора мишки на чітке зображення воно буде ставати розмитим.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
За розмиття відповідає властивість «webkit-filter: blur» з параметрами 5px.
9. Ефект «Чорно-біле зображення»
При наведенні курсора мишки на кольорове зображення, воно тут же стає чорно-білим.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
Наскільки зробити чорно-білим зображення відповідає фільтр «webkit-filter: grayscale» зі значенням «100%». Можете вказати власне значення від 1% -100%.
Затемнене зображення, при наведенні на нього курсора мишки, стає яскравішим.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
Спочатку затемнює зображення на «10%» (рядок №3)
При наведенні курсора мишки, освітлює зображення на «100%» (рядок №12)
Теж досить непоганий ефект, за допомогою якого зображення перетвориться в тональність сепія.
В HTML файл вставте між тегами
В CSS вставте ось цей код:
12. Ефект «Контрастність»
Я думаю, сама назва вже говорить про те, що при наведенні на зображення курсора, картинка стане більш насиченою і контрастніше.
В HTML файл вставте між тегами
В CSS вставте ось цей код:
Зверніть увагу на рядок №11. Якщо вказати значення «100%», зміни не відбудуться. Якщо відсоток зробити більше «100%», наприклад «185%», зображення стане контрастніше. Якщо відсоток зробити менше «100%», наприклад «60%», зображення потьмяніє.
13. Ефект «Інверсія»
Це теж один з моїх улюблених ефектів. Якось по «металёвому» виглядає.
В HTML файл вставте між тегами
ось цей код:В CSS вставте ось цей код:
Значення інверсії задається від 0% до 100% (рядок №11).