3

Друзья, возник такой вопрос, как реализовать такой blur для карточки? Как переместить в низ карточки вопросов не возникает, а вот как сделать такой blur непонятно, кто-то может помочь в этом вопросе? Реализовать бы посредством js, html, css, svg или любыми другими методамиПример блюра

1
  • 2
    Надо жить и программировать по средствам.
    – user176262
    8 июл 2018 в 17:49

1 ответ 1

4

Как вариант(исправлено, используя пример некоего Stas'а https://codepen.io/html_man/pen/oeNvOa):

*,*:after,*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.main {
	position: relative;
	z-index: -1;
	height: 300px;
	width: 400px;
	border: 2px solid #000;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: url(https://www.visitfinland.com/app/uploads/Aland_Islands_fishing-400x300.jpg) no-repeat 50% 50%;
	overflow: hidden;
}

.filter-child {
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: -10px;
	height: 110px;
	background: inherit;
	background-repeat: no-repeat;
	background-position: bottom;
	overflow: hidden;
}

.filter-child::after {
	content: '';
	left: 0;
	right: 0;
	bottom: 0px;
	height: 100%;
	position: absolute;
	z-index: 99;
	background: inherit;
	-webkit-box-shadow: inset 0 0 0 200px rgba(99, 99, 99, 0.4);
	box-shadow: inset 0 0 0 200px rgba(99, 99, 99, 0.4);
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
<div class="main">
  <div class="filter-child"></div>
</div>

7
  • 1
    Заюзайте что-то вреде этого: pbs.twimg.com/profile_images/633782900077408256/F541mrSs.jpg Однородный фон не так выразителен в размытии.
    – user207618
    8 июл 2018 в 18:19
  • К сожалению данный пример не подходит, так как я его уже применял, но все равно спасибо вам за один из методов 8 июл 2018 в 18:27
  • @Aid, поправил.
    – user210322
    8 июл 2018 в 18:29
  • @Лебедев Артем, а чем именно не подходит, что не так? И кстати не за что - я ж не помог ничем.
    – user210322
    8 июл 2018 в 18:29
  • Да нет, я немного по другому сделал, если не придумаю как сделать, то сделаю вашим способом ( я не догадался что можно сделать длину 100% можно поставить, и выглядело не очень, а вы считай помогли :з ) А не подходит тем, что блюр эффект немного не тот, там же на картинки немного по другому выглядит 8 июл 2018 в 18:52

Ваш ответ

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

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