{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Привет! В четвертом выпуске CSS Magic расскажу, как сделать красивый блюр эффект для карточки. Поехали!","type":"unstyled","key":"e1ah3"},{"data":{"image":{"id":"5cc00c5c20749800b5af0341"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"far4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \nИ так, сегодня мы будем делать блюр-эффект. Вот такого типа: ","type":"unstyled","key":"8m6qi"},{"data":{"image":{"id":"5cc00c799f4d1600b45909a2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1t55h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":47,"style":"BOLD"}],"text":" Сделать такое можно вполне несложно с помощью filter: blur(). Но, конечно, не все так просто :) Начнем с разметки: ","type":"unstyled","key":"faf0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" HTML","type":"header-two","key":"57qm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":3,"offset":35,"style":"BOLD"},{"length":3,"offset":93,"style":"BOLD"},{"length":8,"offset":325,"style":"BOLD"},{"length":3,"offset":335,"style":"BOLD"},{"length":8,"offset":423,"style":"BOLD"},{"length":3,"offset":484,"style":"BOLD"},{"length":3,"offset":518,"style":"BOLD"},{"length":3,"offset":561,"style":"BOLD"},{"length":3,"offset":568,"style":"BOLD"}],"text":"

","type":"blockquote","key":"ad7bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Разметка довольно тривиальная, единственное что тут нужно — это картинка и id для блока. Поехали к магии — CSS. Но сперва первичная разметка: ","type":"unstyled","key":"dvjnl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" CSS (Первичный)","type":"header-two","key":"7jh99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":6,"style":"BOLD"},{"length":7,"offset":19,"style":"BOLD"},{"length":11,"offset":59,"style":"BOLD"},{"length":7,"offset":99,"style":"BOLD"},{"length":10,"offset":166,"style":"BOLD"},{"length":8,"offset":205,"style":"BOLD"},{"length":5,"offset":227,"style":"BOLD"},{"length":6,"offset":243,"style":"BOLD"},{"length":5,"offset":276,"style":"BOLD"},{"length":6,"offset":293,"style":"BOLD"},{"length":5,"offset":326,"style":"BOLD"},{"length":6,"offset":343,"style":"BOLD"},{"length":8,"offset":408,"style":"BOLD"},{"length":4,"offset":430,"style":"BOLD"},{"length":6,"offset":441,"style":"BOLD"},{"length":5,"offset":454,"style":"BOLD"},{"length":6,"offset":469,"style":"BOLD"},{"length":5,"offset":486,"style":"BOLD"},{"length":10,"offset":501,"style":"BOLD"},{"length":8,"offset":542,"style":"BOLD"},{"length":7,"offset":564,"style":"BOLD"},{"length":7,"offset":579,"style":"BOLD"},{"length":5,"offset":646,"style":"BOLD"},{"length":6,"offset":661,"style":"BOLD"},{"length":9,"offset":677,"style":"BOLD"}],"text":"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n}\n \n.block {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n}\n \n.block__man {\n position: relative;\n width: 400px;\n height: 600px;\n \n figure {\n width: 100%;\n height: 100%;\n }\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n \n.block__caption {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 100px;\n color: #fff;\n text-align: center;\n}\n \n.block__name {\n position: relative;\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font-size: 30px;\n}","type":"blockquote","key":"b8tpb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Это базовые стили, которые просто делают карточку. Но они тоже важны, поэтому решил разделить. ","type":"unstyled","key":"2l23i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS (Блюр)","type":"header-two","key":"9rqsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"694dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":39,"style":"BOLD"},{"length":7,"offset":91,"style":"BOLD"},{"length":8,"offset":110,"style":"BOLD"},{"length":3,"offset":136,"style":"BOLD"},{"length":4,"offset":150,"style":"BOLD"},{"length":5,"offset":165,"style":"BOLD"},{"length":6,"offset":184,"style":"BOLD"},{"length":17,"offset":204,"style":"BOLD"},{"length":19,"offset":240,"style":"BOLD"},{"length":6,"offset":268,"style":"BOLD"},{"length":16,"offset":478,"style":"BOLD"}],"text":".block--blur {\n .block__caption {\n overflow: hidden;\n \n &::before, &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-repeat: no-repeat;\n background-position: center bottom;\n background-size: 100% auto;\n filter: blur(8px);\n }\n \n &::before {\n transform: scale(1.1);\n }\n }\n \n #superman {\n .block__caption::before,\n .block__caption::after {\n background-image: url('https://cdn.newsapi.com.au/image/v1/28811c194076a2f2730455884bdf29ae');\n }\n }\n}","type":"blockquote","key":"fhei2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"bm3g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":86,"style":"BOLD"},{"length":8,"offset":134,"style":"BOLD"},{"length":7,"offset":145,"style":"BOLD"},{"length":34,"offset":206,"style":"BOLD"},{"length":26,"offset":243,"style":"BOLD"},{"length":17,"offset":307,"style":"BOLD"}],"text":"Используем класс-модификатор block—blur. Для подписи (которая и будет блюрена) задаем overflow: hidden. Используем два псевдоэлемента ::before и ::after, в которых будет фон все той же картинкой. Благодаря background-position: center bottom и background-size: 100% autoвыставляем ее как надо. И, конечно же filter: blur(8px) задает сам блюр-эффект.","type":"unstyled","key":"bavqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":36,"style":"BOLD"},{"length":7,"offset":128,"style":"BOLD"},{"length":8,"offset":158,"style":"BOLD"}],"text":"Тут еще важный момент — как видите, ::before используется со скейлом. Это сделано для того, чтобы не было видно детали блюра от ::after. Если уберете скейл с ::before — думаю разницу увидите.","type":"unstyled","key":"4uvva"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":38,"offset":6}],"inlineStyleRanges":[],"text":"Пен: https://codepen.io/MaxGraph/pen/Pgawoy","type":"unstyled","key":"17kaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2o970"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, Вам было интересно. такой эффект я раньше очень долго искал, т.к. он мне нравится. Даже думал сделать на блог, но пока не дошли руки)","type":"unstyled","key":"a2eh2"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":77,"offset":25}],"inlineStyleRanges":[],"text":"Оригинальная статья на: https://blog.maxgraph.ru/2019/04/24/css-magic-4-blyur-effekt-css-blur-effect/ ","type":"unstyled","key":"8na3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Подписывайтесь в блог (через форму на сайте) и получите полезные ссылки для верстальщика! ","type":"unstyled","key":"4f7mh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ychq9QHhlAaABdM7dky1"}],"entityMap":{"0":{"data":{"href":"https://codepen.io/MaxGraph/pen/Pgawoy","url":"https://codepen.io/MaxGraph/pen/Pgawoy"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://blog.maxgraph.ru/2019/04/24/css-magic-4-blyur-effekt-css-blur-effect/","url":"https://blog.maxgraph.ru/2019/04/24/css-magic-4-blyur-effekt-css-blur-effect/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}