Друзья, возник такой вопрос, как реализовать такой blur для карточки? Как переместить в низ карточки вопросов не возникает, а вот как сделать такой blur непонятно, кто-то может помочь в этом вопросе? Реализовать бы посредством js, html, css, svg или любыми другими методами
-
2Надо жить и программировать по средствам.– user1762628 июл 2018 в 17:49
Добавить комментарий
|
1 ответ
Как вариант(исправлено, используя пример некоего 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>
-
1Заюзайте что-то вреде этого: pbs.twimg.com/profile_images/633782900077408256/F541mrSs.jpg Однородный фон не так выразителен в размытии.– user2076188 июл 2018 в 18:19
-
К сожалению данный пример не подходит, так как я его уже применял, но все равно спасибо вам за один из методов 8 июл 2018 в 18:27
-
@Aid, поправил.– user2103228 июл 2018 в 18:29
-
@Лебедев Артем, а чем именно не подходит, что не так? И кстати не за что - я ж не помог ничем.– user2103228 июл 2018 в 18:29
-
Да нет, я немного по другому сделал, если не придумаю как сделать, то сделаю вашим способом ( я не догадался что можно сделать длину 100% можно поставить, и выглядело не очень, а вы считай помогли :з ) А не подходит тем, что блюр эффект немного не тот, там же на картинки немного по другому выглядит 8 июл 2018 в 18:52