Оформлення зображень за допомогою CSS

В цьому уроці ми розглянемо кілька CSS технік для оригінального оформлення картинок на сайті.

Зображення, що використовуються в прикладах, можна завантажити звідси.

1. Ефект рамки для зображення. Приклад тут.

HTML

CSS

2. Водяний знак на зображенні. Приклад тут.

HTML

CSS

В даному випадку як водяний знак використовувалося наступне зображення.

зображень

3. Підпис до зображення. Приклад тут.

HTML

CSS

Сподіваюся, ці способи оформлення картинок стануть Вам у нагоді в дизайні Вашого сайту!

Даний урок підготовлений для вас командою сайту.

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.