1

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

Но из реализаций у меня на уме только blur, который размывает всё изображение.

Какие есть варианты, которые смогут размыть именно края изображения?

4
  • 2
    На цсс не получится, насколько я знаю. Единственный вариант, который вот сейчас пришёл в голову, это иметь сразу 2 изображения, одно из которых размыто как надо, то есть уже как в макете прям, а второе НЕ размыто вообще. Размытое лежит поверх нормального и полностью прозрачно. При ховере на нужное изображение, размытое становится плавно непрозрачным. Ну это если я провильно тз понял :) но это лажовый тоже вариант, потому что 2 изображения тащить придётся. Хотя другого варианта я не вижу пока. 10 фев 2020 в 11:11
  • В данном случае не принципиально именно на css
    – Кевин
    10 фев 2020 в 11:14
  • Ну тогда это самый простой, наверное. 10 фев 2020 в 11:15
  • 1
    скриншот было бы не плохо 10 фев 2020 в 11:30

2 ответа 2

5

Как вариант:

<svg height="320" width="320" viewbox="-10,-10,320,320">
  <defs>
    <filter id="blur5"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter>
    <filter id="blur4"><feGaussianBlur in="SourceGraphic" stdDeviation="4"/></filter>
    <filter id="blur3"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/></filter>
    <filter id="blur2"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/></filter>
    <filter id="blur1"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter>
    <mask id="mask10"><rect x="10" y="10" width="280" height="280" fill="white"/></mask>
    <mask id="mask20"><rect x="20" y="20" width="260" height="260" fill="white"/></mask>
    <mask id="mask30"><rect x="30" y="30" width="240" height="240" fill="white"/></mask>
    <mask id="mask40"><rect x="40" y="40" width="220" height="220" fill="white"/></mask>
    <mask id="mask50"><rect x="50" y="50" width="200" height="200" fill="white"/></mask>
    <image id="img" width="300" height="300" 
           xlink:href="https://picsum.photos/id/1/300/300"/>
  </defs>
  
  
  <use xlink:href="#img"                     filter="url(#blur5)"/>    
  <use xlink:href="#img" mask="url(#mask10)" filter="url(#blur4)"/>    
  <use xlink:href="#img" mask="url(#mask20)" filter="url(#blur3)"/>    
  <use xlink:href="#img" mask="url(#mask30)" filter="url(#blur2)"/>    
  <use xlink:href="#img" mask="url(#mask40)" filter="url(#blur1)"/>    
  <use xlink:href="#img" mask="url(#mask50)"/>
</svg>

12
  • Перепады между уровнями размытия видно :(
    – andreymal
    10 фев 2020 в 13:24
  • @andreymal ага, но если сделать по 1 пикселю сдвиг, может прокатит ;), надо сделать 10 фев 2020 в 13:26
  • О, это рабочий вариант для изображений любой формы?
    – Кевин
    10 фев 2020 в 13:32
  • Например для прямоугольных изображений всё будет работать также?
    – Кевин
    10 фев 2020 в 13:32
  • @StrangerintheQ тогда я начну переживать за производительность)
    – andreymal
    10 фев 2020 в 13:33
0

А как на счет CSS box-shadow:

<html>

<head>
  <title>Untitled</title>
  <style>
    #shadow {
      width: 128px;
      height: 128px;
      border-radius: 40px;
      background: url(https://lh3.googleusercontent.com/a-/AAuE7mDsMtcQmcp8fiJm701iSvaSNc0gMCe1S5jJHT9I=k-s128);
      box-shadow: inset 0 0 25px rgba(101, 114, 126, 50), inset 0 0 25px rgba(140, 150, 170, 50), inset 0 0 25px rgb(83, 94, 104), inset 0 0 25px rgb(86, 96, 106);
    }
  </style>
</head>

<body>
  <div style="float: left"><img id="shadow"></div>
</body>

</html>

3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.