На картинке белый слой отбрасывает на синий тень по своему контуру.Как воплотить это в CSS или в svg, у меня тень получается строго горизонтально.
-
Почему бы не нарисовать эту тень в фотошопе вместо CSS?– andreymalCommented 9 апр. 2019 в 8:51
-
а белый с синим объединить(2 слоя как один "двуцветный" с этим самым переходом) возможно в фотошопе и воспроизвести в css без ущерба для остальных эементов– Игорь БорисовичCommented 9 апр. 2019 в 15:50
-
Что-то я не понял комментария. Сделать два слоя в фотошопе (белый с прозрачной тенью и синий), сохранить две картинки и потом в html+css наложить их друг на друга вроде никто не мешает– andreymalCommented 9 апр. 2019 в 16:01
Добавить комментарий
|
4 ответа
Вот простейший вариант с svg
фильтром, пути рисую этой тулзой
<body style="margin:0; overflow:hidden">
<svg width="700" height="200" style="background-color:#57a9a9">
<filter id="shadow" height="130%">
<!-- stdDeviation сила размытия -->
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="1" dy="1" result="offsetblur"/>
<feComponentTransfer>
<!-- slope коэф. количества тени -->
<feFuncA type="linear" slope="0.3"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path fill="white" style="filter:url(#shadow)" d="M-100,300L1,93C1,93,44,67,76,66C108,65,170,93,208,85C246,77,288,19,324,16C360,13,407,63,440,65C473,67,510,28,536,29C562,30,591,63,609,71C627,79,654,81,654,81L830,100L830,300"/>
<path fill="white" style="filter:url(#shadow)" d="M-100,300L1,93C1,93,44,67,76,66C108,65,170,90,208,85C246,80,289,35,325,34C361,33,407,78,440,80C473,82,510,48,538,49C566,50,603,82,620,87C637,92,652,82,652,82L930,-100L830,300"/>
</svg>
</body>
-
надеюсь, теперь вы поняли зачем я меняю обезличенные заголовки на конкретику. Сравните, было - "Вёрстка лендинга" (+) Commented 30 апр. 2019 в 15:34
-
@Alexandr_TT так я не говорю что не надо, надо только меня смутило что реализация в вопросе Commented 30 апр. 2019 в 15:50
-
Тень надо исправить на обратную. Белая сторона должна наезжать на синею, присмотрись, белая сторона должна быть, как бы выпуклей, выше Commented 30 апр. 2019 в 15:56
-
@Alexandr_TT угу, сейчас на телефоне смотрю и вижу, а на мониторе внизу ее рассматривал, сделаю попозже :) Commented 30 апр. 2019 в 16:00
-
1
Можно использовать много теней. Конечно, чтобы это реализовать, потребуется немало времени. Но как говорится, примите - распишитесь :)
div {
margin: auto;
margin-top:100px;
width: 100px;
height: 50px;
background: linear-gradient(to top, #fce25b, #ecc92b);
box-shadow:
-70px -10px 50px 10px rgb(139,139,139), -40px -40px 50px 10px rgb(118,118,118),
20px -20px 50px 10px rgb(138,138,138), 40px 40px 50px 10px rgb(117,117,117);
}
<div></div>
-
Думаю, что можно было сделать как-то более правильно, но я к сожалению не верстальщик и это первое что пришло мне на ум.– Alan564Commented 12 апр. 2019 в 12:08
В css - никак, тень соответствует форме элемента, а у вас элемент прямоугольный (просто часть его прозрачна).
Вариантов два:
- Стребовать с дизайнера / фотошопнуть самому белый слой вместе с тенью.
- использовать SVG и тень задать в нем.
-
На самом деле в CSS тоже можно (плевать на форму элемента), но это очень сильно тормозит и я бы не рекомендовал делать на CSS Commented 9 апр. 2019 в 15:59
main {
width: 7em;
height: 7em;
margin: 3em;
background: linear-gradient(45deg, red 50%, transparent 50%), linear-gradient(-45deg, red 50%, transparent 50%);
filter: drop-shadow(8em -2em 3px blue);
}
<main></main>