Размытие изображений

Размытие изображений, как лучше реализовать

Сообщений: 588 Регистрация: Янв 2018

17 Июня 2018 19:19

Хочу сверстать блок анонса, на подобие ленты дзена. В верстке не особо силен, зато хорошо получается адаптировать под себя чужие коды) Собственно нужно понять, каким образом организовать размытие фонового изображения по краям. Начал гуглить и понял, что вариантов множество. А информация зачастую устаревшая. В общем как лучше это сделать? Какие свойства CSS лучше подходят для этого?
Готовые, подключаемые решения просьба не предлагать.

Хватит ерундой страдать на SEO
ИДИ пахать на буксы
БЕСПЛАТНЫЙ ХОСТИНГ на 30 дней

Dexter

Сообщений: 395 Регистрация: Дек 2013

17 Июня 2018 20:26

Если через css, то два варианта:
filter:blur(0px) - полное размытие
box-shadow:inset 0px 0px 30px 20px #000 - затемнение по краям.

Изменено: Dexter - 17 Июня 2018 20:26

Мои услуги: Создание и разработка сайтов на Wordpress/фреймворках, создание шаблонов на WP, любая верстка по макету и без, разработка функционала. skype: sonicks12, email: spklkr@yandex.ru

Федор Рашпиль

Сообщений: 588 Регистрация: Янв 2018

17 Июня 2018 20:40

Во-во, что-то подобное и простое я и ищу.
filter:blu не позволяет размытие по краям?
box-shadow наверное более подходит, как бы еще задать подобие градиента: сверху затемнение только по краям, а от низа до середины плавный переход?

Сергей Бойков

Сообщений: 276 Регистрация: Дек 2016

18 Июня 2018 11:54

Размытие по краю, через псевдоэлемент _____codepen.io/aaronbalthaser/pen/qNOYdE

Федор Рашпиль

Сообщений: 588 Регистрация: Янв 2018

18 Июня 2018 17:34

Сергей Бойков
Благодарю, а не подскажите, где можно почитать о данном решении?

Сергей Бойков

Сообщений: 276 Регистрация: Дек 2016

18 Июня 2018 17:54

Цитата
Федор Рашпиль пишет: Сергей Бойков Благодарю, а не подскажите, где можно почитать о данном решении?

Не понял)) Что значит почитать))?

Федор Рашпиль

Сообщений: 588 Регистрация: Янв 2018

18 Июня 2018 18:06

Цитата
Сергей Бойков пишет: Не понял)) Что значит почитать))?

Ну вы скинули непосредственно кусок кода, спасибо! Хочется немного одуплить принцип работы, но не понимаю что конкретно гуглить, описание кода почитать:o

Сергей Бойков

Сообщений: 276 Регистрация: Дек 2016

18 Июня 2018 18:11

Цитата

Федор Рашпиль пишет:

Цитата
Сергей Бойков пишет: Не понял)) Что значит почитать))?

Не, не видел описания где-либо. Выполнено через псевдо-элемент before и position absolute. Текст таким же образом можно наложить.____codepen.io/dubrovka11/pen/KeZwvR - думаю так)

Изменено: Сергей Бойков - 18 Июня 2018 18:12

Федор Рашпиль

Сообщений: 588 Регистрация: Янв 2018

18 Июня 2018 18:14

Благодарю! Коды долго хранятся на этом сервисе? Голова сегодня не работает.

Сергей Бойков

Сообщений: 276 Регистрация: Дек 2016

#10

18 Июня 2018 18:16

Цитата
Федор Рашпиль пишет: Благодарю! Коды долго хранятся на этом сервисе? Голова сегодня не работает.

Да, первый будет храниться. Второй уберу, поскольку решение не мое.

sharkson

Сообщений: 5425 Регистрация: Янв 2014

#11

18 Июня 2018 18:16

Федор Рашпиль, htmlbook.ru - рекомендую.

НАДЕЖНЫЙ И НЕДОРОГОЙ ХОСТИНГ ТУТ
НЕДОРОГОЙ ХОСТИНГ
ПРОДАМ БЛОГ ЖЖ
СОЗДАНИЕ И НАСТРОЙКА MediaWiki и phpbb3

Сергей Бойков

Сообщений: 276 Регистрация: Дек 2016

#12

18 Июня 2018 18:17

Цитата
sharkson пишет: Федор Рашпиль, htmlbook.ru - рекомендую.

stackoverflow тогда уж)

sharkson

Сообщений: 5425 Регистрация: Янв 2014

#13

18 Июня 2018 18:19

Цитата
Сергей Бойков пишет: stackoverflow тогда уж)

Я не понял что это.)) "Stack overflow" - это программная ошибка - переполнение буфера, если не ошибаюсь.

Вот навскидку результаты поиска по слову "Размытие":

Код
_http://htmlbook.ru/search/?as_q=%D1%80%D0%B0%D0%B7%D0%BC%D1%8B%D1%82%D0%B8%D0%B5&cx=partner-pub-0708135098984815%3Apmy83axen1s&cof=FORID%3A9&ie=UTF-8

Изменено: sharkson - 18 Июня 2018 18:21

Федор Рашпиль

Сообщений: 588 Регистрация: Янв 2018

#14

18 Июня 2018 18:24

Цитата
sharkson пишет: htmlbook.ru - рекомендую.

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

Федор Рашпиль Сообщений: 588 Регистрация: Янв 2018	#15 21 Июня 2018 16:52 Сергей Бойков Возникла проблема: урлы картинки прописывать в CSS не вариант - анонсов много и соответственно картинок, а как прописать в хтмл-е фон - ума не приложу. Неужели только через style="......" ?

Похожие темы:

17.04.2013 01:05	Исчезла загрузка файлов и изображений на сервер DLE
07.10.2011 20:52	Обработка изображений

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
19:33 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 17:02 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 15:12 Несколько статей хорошо выдаются в Гугле, но отвратительно в Яндексе 13:40 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 11:41 2Index - быстрая индексация страниц сайта и обратных ссылок 09:56 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 23:00 Продвижение по ключам	03:51 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 00:23 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 20:20 Продвижение сайтов 15:49 Продажа аккаунтов HH.RU 15:12 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 13:55 Современный скрипт обменника электронных валют 13:06 AlwaysMoney - платформа для обмена криптовалют	20:43 Добро пожаловать в цифровой мир... 15:59 Про мясо 23:09 ПП от PMS remote.team - 200$ за команду 13:28 Компьютерная мышь 22:55 Ну что, кто куда деваете свои сайты? 22:34 Используете беспроводные наушники? 22:26 Какой фильм посмотреть сегодня вечером?