Стили CSS3 для изображений

Сегодня речь пойдет о стилях CSS3, которые можно применить к изображениям (код предоставлен в виде сниппетов, поэтому эти данные вы можете использовать в своих проектах).

Стоит отметить, что основные свойства, которые мы будем использовать — это box-shadow, border-radius и transition. Просто посмотрите на пример и увидите что у нас получилось.

Пример

Проблема

Взгляните на пример и отметьте, что на изображении применены свойства border-radius и inset box-shadow. При этом Firefox отрисовывает border-radius на элементе с изображением, но не рисует inset box-shadow. Chrome или Safari не отрисовывают border-radius и inset box-shadow.

Решение

Чтобы эти свойства заработали на элементе изображения, переведем его в background-image.

Динамический способ

Динамика достигается с помощью jQuery. С помощью скрипта все изображения будут переводиться в background-image. Техника перевода следующая — скрипт jQuery обвязывает все изображения тэгом span и применяет на них свойство background-image.

Результат

Вот что получается на выходе:

Изображение в форме круга

Теперь, когда проблема решена, мы можем с легкостью применять стили CSS3. Для начала сделаем с помощью свойства border-radius все квадратные изображения круглыми.

CSS

Карточный стиль

Данный эффект достигается с помощью множественных значений inset box-shadow.

CSS

Рельефный стиль

С некоторыми изменениями, карточный стиль можно превратить в рельефный.

CSS

Рельефный стиль со сглаживанием

Это тот же самый рельефный стиль, но с добавленной сглаженностью в 1px.

CSS

Стиль врезки

С помощью свойства just inset box-shadow, вы можете сделать эффект врезки.

CSS

Стили трансформации и свечения

В этом примере добавлено свойство transition. При наведении курсором мыши на объект изображения, он трансформируется в форму круга с добавлением эффекта свечения. А сам эффект достигается с помощью множественных значений box-shadow.

CSS

Глянец (как в Apple)

Наложение градиента глянца выполнено с помощью псевдо-элемента :after.

CSS

Отражение

В этом примере, для создания отражения наложение градиента применено к нижней части изображения.

CSS

Глянец и отражение

В примере использовано два псевдо-элемента для создания глянцевости и отражения.

CSS

Стикер

С помощью псевдо-элемента :after создадим стикер в верхней части изображения.

CSS

Трансформация и тонирование

В примере использован псевдо-элемент :after для добавления кругового градиента при наведении мышкой на объект.

CSS

Эффект размытости на окружности

Круговой градиент может быть использован, и как маска, для создания эффекта размытости на изображении в форме круга.

CSS

Поддерживаемые браузеры

Данные сниппеты хорошо работают в следующих браузерах:
chrome firefox safari

А у вас есть в запасе подобные сниппеты? Не желаете поделиться?

Много текста всегда немного утомляет читателя. Чтобы развеяться, можно скачать и поиграть в говорящие игры на андроид. Мысли в голове придут в порядок и вы может быть сосредоточитесь на разработке будущих проектов.


2 комментарий на “Стили CSS3 для изображений

  1. А как применять то к картинке?

    Я просто недавно начал вникать в это дело всё, ещё многое не понимаю...

    В style.css я полажу код:

    А html изображения мне как изменить?

    За ранее спасибо.

    Thumb up 0 Thumb down 0

Оставить комментарий