Как лучше сверстать такие блоки (blur)?

5a0d9ef219837294216208.png
Кол-во блоков может быть разное, не как сейчас 3шт. Задний круг нарисован на css.
ключевые стили блоков:
box-shadow: inset 0px 0px 0 200px rgba(210,210,210,0.58);
filter: blur(10px);

https://jsfiddle.net/8qkbh59o/2/
Получается не по дизайну
  • Вопрос задан
  • 961 просмотр
Решения вопроса 1
kentuck1213
@kentuck1213 Автор вопроса
Короче нашел решение, и мне в этом помог canvas. Так что это возможно, но в данном примере очень геморно и требует полной переделки задних кругов, так что я оставил пока так.

Пока взялся за другой блок который немного легче:
PSD:
5a0f25353fa44713856553.png
Мой результат в браузере:
5a0f25c30cc48754695661.png
различие где-то 90 - 95%, что не так критично. Можно дотянуть и до 100, если потратить еще часик.

code:
<div class="work" style="background-image: url('assets/Moon.png'); width: 246px; height: 344px">
    <canvas width="246" height="344"/>
</div>

const canvas = document.querySelector('canvas'),
            ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.filter = 'blur(11px)'; // тот самый blur
        let img = new Image;
        img.src = 'assets/Moon.png';
        img.onload = () => {
            ctx.drawImage(img, 0, 0, 246, 344); // вставляем картинку

// имитируем работы box-shadow inset
            ctx.fillStyle = 'rgba(4, 4, 4, 0.33)'; 
            ctx.fillRect(0, 0, 246, 344);
// конец иметации

// достаем заблуренную картинку
            let new_img = ctx.getImageData(31, 85, 184, 234);
// конец, достали и положили в переменную new_img

// создаем новую прозрачную/пустую картинку - типо чистого png без изображения
            img = ctx.createImageData(246, 344);
            for (let i = img.data.length; --i >= 0;)
                img.data[i] = 0;
            ctx.putImageData(img, 0, 0); // вставляем на весь холст (canvas)
// конец очищения холста

            ctx.putImageData(new_img, 31, 85); // вставляем заблуренный кусок
        };

Да, да, код жестко за хоркодин. Буду рад новыми и простыми способами, а пока тока так.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
lazalu68
@lazalu68
Salmon
Ответ написан
Комментировать
alex_shevch
@alex_shevch
Frontend Developer
Я бы в блок с кругом засунул див с тремя этими прозрачными прямоугольниками. Этому диву абсолют, родителю релайтив. Абсолютный блок центруешь и задаёшь ему флекс и жастифай контент спейс бетвин

upd:
типа того:
< div class="wrapper" >Круги
< div class="blocks" >
< div class="block">Прямоугльник< /div >
< div class="block">Прямоугльник< /div >
< div class="block">Прямоугльник< /div >
< /div >
< /div >
.wrapper{
position: relative;
}
.blocks{
position: absolute;
top: 0; left: auto; bottom: 0; right: 0;
display: flex;
justify-content: space-between;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы