Css размытие краев div

CSS: как сделать div с размытыми краями?

Я хочу, чтобы движущийся индикатор (.dark-bar) «растаял» с помощью foreground-div. В настоящее время существует жесткая линия, которую можно различить визуально.

Есть ли способ сделать так, чтобы движущийся индикатор (.dark-bar) был размытым с левого и правого края?

2 ответа

Вы можете использовать CSS filter , чтобы добавить blur to top layer , который анимирован, как показано ниже,

filter — свойство filter обеспечивает графические эффекты, такие как размытие, резкость или изменение цвета элемента. Фильтры обычно используются для настройки рендеринга изображений, фона и границ.

Включите vendor prefixes для других браузеров, таких как -webkit-,-o-,-moz-,-ms- для фильтрации.

body < background-color: lightGrey; counter-reset: h1-counter; >.wrap < max-width: 200px; height: 50px; margin: 50px auto; position: relative; overflow: hidden; >.wrap div < background: linear-gradient(#0032f0, white, #0032f0); position: absolute; width: 100%; height: 100%; z-index: 1000; opacity: .8; >.wrap div.dark-bar < position: absolute; width: 10%; height: 100%; animation: moveDarkBar 3s linear infinite; z-index: 1; -webkit-filter:blur(2px); /*Add this*/ >@keyframes moveDarkBar < from < left: -20%; >to < left: 120%; >>

Попробуйте использовать свойство box-shadow и установите значения вертикальной и горизонтальной оси на 0. Примерно так:

Это может быть аналогичный эффект для желаемого.

Источник

How To Get Crisp Edges with the CSS Blur Filter

I wanted to create a hover effect (currently seen on my portfolio page) where the picture blurs when the user hovers over it so the text on top is legible. Simple enough, right? There’s even a handy little CSS blur filter. All you have to do is pass in an argument for the blur radius.

The Problem

Here is an image with the class blur that gives it the property filter: blur(4px) . As you can see, it looks simply horrendous.

HTML

SASS

.blur-wrapper width: 50% // this is where you style the image width overflow: hidden // clips feathery edges .blur width: 100% // necessary for photo to scale correctly -webkit-transform: scale(1.05) // makes fuzzy edges go to overflow of .blur-wrapper transform: scale(1.05) -webkit-filter: blur(4px) filter: blur(4px)

Designed and built by Chloe Atchue-Mamlet in 2015 using Jekyll and hosted on Github Pages. View the source code.

Источник

Русские Блоги

На веб-странице мы видим некоторые элементы с размытыми краями или изображения с размытыми краями.
1. Обычно мы можем установитьboz-shadow(Shadow) для достижения, box-shadow общий формат: border: 20px 20px 50px inset; Параметры, в свою очередь, представляют собой: смещение горизонтальной тени, смещение вертикальной тени и степень размытия тени. Тень по умолчанию находится вне div. Последний параметр не может быть передан внутрь. Inset указывает, что тень div установлена ​​внутри. Если она не передана, тень устанавливается снаружи.
Примечание. Типы границ можно разделить на сплошные, пунктирные, пунктирные и двойные.text-shdow используется для установки тени текста, а box-show — для установки тени блока.
Отображение кода:

style type="text/css"> .div1< width: 200px; height: 200px; background: skyblue; box-shadow:20px 20px 50px white inset; margin:100px; > .div2< width: 200px; height: 200px; background: pink; box-shadow:20px 20px 50px yellow; margin:100px; >  style> head> body> div class="div1">div1 div> div class="div2">div1 div> body>

2. Установите градиентный фон для div.linear-gradientСвойство, но есть проблемы совместимости.
Установить направление линейного градиента: влево: установить градиент справа налево. вправо: установите градиент слева направо. к началу:
Установите градиент снизу вверх. к низу: установите градиент сверху вниз. Это значение по умолчанию. Если значение не записано, это означает, что используется значение по умолчанию. Направление также можно задать значением угла, например, 30 градусов.
Общий формат: линейный градиент (снизу, colorStrat, colorEnd) Первый параметр указывает направление линейного градиента, второй параметр указывает начальный цвет, а третий параметр указывает конец. цвет. Вы также можете передать несколько цветов и установить градиент нескольких цветов.
Отображение кода:

style type="text/css"> .div1< width: 300px; height: 300px; background: linear-gradient(30deg,skyblue,deeppink,red); background: -moz-linear-gradient(30deg,skyblue,deeppink,red);/ * Совместимо с Firefox * / background: -o-linear-gradient(30deg,skyblue,deeppink,red); / * Совместимая опера * / background:-webkit-gradient(linear,70% 0%, 20% 0% , from(skyblue),to(deeppink)); / * Совместимо с Chrome, Safari * / / * Сафари на ядре Webkit, основной синтаксис линейных градиентов Chrome (линейный градиент): background: -webkit-Gradient (тип, x1 y1, x2 y2, от (начальное значение цвета) до (конечное значение цвета), [color- стоп (десятичное смещение, значение цвета остановки), . ]); * / margin:50px; > .div2< width: 300px; height: 300px; background: linear-gradient(to left,yellow,lightgreen); margin:50px; >  style> head> body> div class="div1">div1 div> div class="div2">div2 div> body>

Совместимость:

Источник

Как размыть края Div

Использование CSS, как показано ниже: http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f Я хочу, чтобы CSS (желательно не CSS3), чтобы получить края и углы, чтобы иметь этот эффект, а не просто резкие egdes.

Это изображение (если вы не говорите, что это просто пример того, как вы хотите). Если вы хотите сделать что-то похожее на это, вам придется искать градиентные границы с помощью CSS, хотя было бы проще использовать box-shadow или изображение

1 ответ

Вы можете добиться этого эффекта, используя box-shadow того же цвета, что и фон div, например:

Вы можете настроить второй и третий аргументы ( 5px и 10px здесь), чтобы настроить относительный размер и размытие (соответственно) тени, чтобы получить его так, как вы хотите, и эта функция хорошо поддерживаемых современными браузерами (см. http://caniuse.com/#feat=css-boxshadow).

@OP CSS3 является частью CSS. Вам лучше сообщить нам, какие браузеры вы хотите поддерживать. Старый IE имеет фильтры, которые можно использовать в качестве запасного варианта.

@JamesMitchell: ваш эффект недостижим с помощью CSS

«CSS3» — это (несколько) окончательная спецификация, но поддерживаются ли ее браузерами на индивидуальной основе. caniuse.com — это хороший способ проверить, какие функции доступны в ваших целевых браузерах.

Ещё вопросы

• 0 Определить закрытие входа в Facebook с помощью кнопки «X»
• 1 Переместить объект-слайдер d3 в указанное место
• 0 Получить счет из двух разных таблиц на основе datetime в MySQL
• 0 явный пример создания шаблона класса c ++ на macos, не работает на ubuntu
• 1 Python 3 добавляет элементы в список независимо от ключа, используемого в dict
• 1 Как получить скорость вращения вентилятора моего графического или центрального процессора с помощью OpenHardwareMonitor?
• 0 Magento добавляет пользовательское сообщение об ошибке
• 1 Рассчитать различия между элементами в группе
• 1 ловить исключение после doThrow JUNIT
• 0 Проводка обратно выбранного динамического значения переключателя в бритве MVC4
• 0 Зачем нужен $ timeout здесь?
• 0 выбор ячейки таблицы на основе ее идентификатора с помощью jquery
• 1 Удалить в Java?
• 1 как передать объект коллекции в response.sendRedirect
• 1 NodeJS и веб-сокеты
• 0 MySQL: возможно ли ПОЛУЧИТЬ ПОЛЕ в ОБНОВЛЕНИИ?
• 0 Как мне найти префикс в таблице MySQL?
• 0 Назначение класса из определенного тега
• 1 Дочерний элемент без корневого элемента в Java
• 0 JQuery несколько событий и несколько селекторов
• 1 Как ссылаться на свойства класса из обратного вызова [duplicate]
• 0 Yii визуализировать страницу с HTML идентификатором
• 1 как обновить объект в Hibernate Criteria, не зная его id
• 1 Как конвертировать stringVar () из tk в pyqt
• 0 Перемещение данных таблицы MySQL в новую таблицу по расписанию
• 0 Показать разделы на основе значения флажка в jQuery (SharePoint 2010)
• 1 Периодическая интерполяция со scipy sqlrep
• 0 Выберите следующее «свободное» целое число на основе ввода
• 0 Размер сайта резко меняется в браузере
• 1 Асинхронная загрузка в Azure не блокируется даже при вызове Task.WaitAll (задача)
• 1 256-битное шифрование Blowfish в Java
• 0 Доступ к методам и атрибутам объекта приводит к ошибке в JavaScript
• 0 Часть указателей на интерфейс для абстракций запросов MySQL
• 2 Как установить ADB-соединения для NOX-плеера в Mac OS
• 1 Зарегистрированный объект COM + не может быть найден в классическом ASP
• 0 Функция фильтрации wxCheckListBox
• 0 Изотоп: написать функцию для getSortData из массива? (оптимизация, скрипка предоставлена)
• 0 Как отправить форму с угловым в MVC?
• 0 слишком много места между строками в таблице
• 1 Как сохранить клавиатуру InputField открытой при потере фокуса?
• 0 jQuery UI-dialog- настройка кнопок динамически и передача значений в функцию
• 1 [Python Falcon]: gunicorn работает в терминале, но не в PyCharm
• 0 Угловая маршрутизация мини контролера до пункта маршрута
• 1 Значения атрибутов привязки данных к комбинированному списку
• 1 Возможно ли использовать `ffmpeg.exe` на сервере общего хостинга?
• 0 Невозможно изменить ng-класс по функции
• 0 `ngAnimate` — проблема интеграции
• 1 Как обработать несколько строк с помощью пружинной партии?
• 1 Как перехватить определенный интерфейс в Java?

Источник