CSS3 стили изображения с изменяющимся размером


При использовании CSS3 свойств box-shadow или border-radius на изображение, разные браузеры  отображают  заданные нами CSS стили по разному, а не которые и вовсе не понимают этих свойств. Было одно решение этой проблемы при использование изображения в качестве фона, то этой проблемы можно запросто избежать. Но возникала  другая трудность,  в том, что фоновое изображение не изменять размер, и если данные свойства использовать при создание резинного дизайна (или с поддержкой мобильных устройств), то УВЫ картинки будет  отличаться от оригинала. К счастью, был найден на этот случай обходной путь. Итак, из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у картинок, а так же какие еще способы оформления возможны с помощью таких свойств как

box-shadow, border-radius и transition

 

Проблема

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

Предыдущее решение

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

 

Проблема с фонового изображения

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

 

Новое решение!

Вместо применения изображения в качестве фонового рисунка,  можно достичь того же результата путем применения CSS3 — обернуть изображение путем наложения псевдоэлемента  :after .

 

Динамические JQuery

Опять же, используем небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем #demo.

После применения мы получим следующий результат:

 

Хитрость CSS

CSS хитрости очень просты. Эффект наложения применяется к изображению с помощью псевдоэлемента .image-wrap:after . Закругленные углы наносится на обе изображения  в соответствии со стилем .image-wrap:after.
CSS3 стили изображения с изменяющимся размером

CSS

 

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

Различные стили, такие как тиснение, вырез / нажата, и глянцевый эффект может быть достигнут с использованием различных css свойств. Смотрите демо  CSS можно взять в исходном коде. Чтобы увидеть изменения размера изображения, изменяйте размера окна браузера.

screenshot

Поддержка браузеров

Этот трюк с CSS3 работает с большинстве современных браузерах, таких как Chrome, Firefox, Safari и IE9 +.Технически, это работает с любым браузером, поддерживающим Javascript и CSS 3.

 

Качественный дизайн полиграфии Елены Шутовой позволит Вам выгодно отличиться от конкурентов и завоевать более прочные позиции на рынке.

Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

7 раз(а) написали о “CSS3 стили изображения с изменяющимся размером

  1. У меня, даже при использован JQuery уголки изображения при увеличении сильно заметны. Т.е. пиксели на уголках очень четко видно… может я не так изображение подготавливаю для веб, но вроде все правильно… не знаю.. мучаюсь с этой проблемой уже третью неделю не получается плавных закругленных углов…

    Ответить
    • А зачем мучиться, данный пост Вам в помощь! Пример его работы посмотреть прям здесь в комментариях на аватарах. 😉

      Ответить
  2. хорошие советы. буду применять на практике. надо что-нибудь делать для своего сайта.

    Ответить
  3. Полезная информация. Попробовал заработало. Так как с изображениями были проблемы уже давно. А есть, что либо лучше и может даже проще чем JQuery?

    Ответить
    • Для решения данной задачи я не встречал.

      Ответить
  4. Спасибо тоже когда то искал решение этой проблемы но так и не нашёл. Сейчас во всём разобрался !

    Ответить
  5. Да кстати у меня ещё предложения не могли бы написать статью на тему кроссбраузерности свойств css3. Ато в опере градиент css3 вообще не работает (белое окошко)

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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