Как через css сделать такие блики на bk сайта?
Подскажите пожалуйста как через CSS сделать блики на фоне как это сделано на картинке?
Дополнительно:
Сохранить как svg и вставить фоном.
Можно сравнить с вариантом с png.
Можно наделать радиальных градиентов.
Можно что-нибудь разблюрить (дороговато для производительности)
Ответы:
Формально можно взять фильтр blur с большим радиусом и размыть абсолютно расположенные на фоне элементы. В SVG есть аналогичный фильтр. Но лучше так не делать. Для таких размытий используется вычислительно сложный алгоритм и можно существенно увеличить нагрузку на устройства пользователей на ровном месте. Это просто сложно рендерить в реальном времени.
Производительнее будет это размытое нечто картинкой вставить. Тоже не идеально, грузиться будет дольше, но выбирая между тормозами всего или слегка более долгой загрузкой ни на что не влияющей кляксы на фоне - в 99% случаев стоит выбрать второе.
Есть, конечно, еще более развитый вариант - взять canvas, отрендерить эту штуку на нем один раз в фоновом режиме, а потом использовать результат как картинку. Так оно не будет требовать загрузки картинки по сети, и мы не будем грузить устройства пользователей постоянно. Но это уже другой вопрос, про другие инструменты.
P.S.: Добавлю еще такой момент, что при использовании картинки может возникнуть такая мысль, что в CSS есть еще градиенты - и это ведь тоже как картинки, может быть их использовать? Но собрать такое из градиентов гораздо сложнее, чем кажется. Сложение полупрозрачных градиентов - это не тот же алгоритм, что размытие. При взаимном наложении клякс друг на друга результат будет отличаться. Чтобы иметь такое же красивое размытие - придется иметь много градиентов, что сведет на нет саму идею снижения нагрузки на железо через них.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания эффекта бликов на фоне сайта с помощью CSS, вы можете использовать псевдоэлемент ::before или ::after, добавляя им задний фон с градиентом.
Пример кода на CSS:
.blik { position: relative; overflow: hidden; } .blik::before { content: ''; position: absolute; top: -50px; left: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 80%); border-radius: 50%; transform: rotate(45deg); }
В данном примере мы создаем псевдоэлемент ::before для элемента с классом "blik", задаем ему позицию абсолютно, размеры и стили градиента. Таким образом, на фоне элемента будет отображаться блик.
Вы также можете настраивать размер, позицию и прозрачность блика, изменяя значения в коде CSS. Попробуйте экспериментировать с параметрами, чтобы достичь желаемого эффекта.
Не забудьте добавить класс "blik" к нужному элементу на вашем сайте, чтобы блик отобразился на фоне.