1

На картинке белый слой отбрасывает на синий тень по своему контуру.Как воплотить это в CSS или в svg, у меня тень получается строго горизонтально.

введите сюда описание изображения

3
  • Почему бы не нарисовать эту тень в фотошопе вместо CSS?
    – andreymal
    Commented 9 апр. 2019 в 8:51
  • а белый с синим объединить(2 слоя как один "двуцветный" с этим самым переходом) возможно в фотошопе и воспроизвести в css без ущерба для остальных эементов Commented 9 апр. 2019 в 15:50
  • Что-то я не понял комментария. Сделать два слоя в фотошопе (белый с прозрачной тенью и синий), сохранить две картинки и потом в html+css наложить их друг на друга вроде никто не мешает
    – andreymal
    Commented 9 апр. 2019 в 16:01

4 ответа 4

2

Вот простейший вариант с 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>

7
  • надеюсь, теперь вы поняли зачем я меняю обезличенные заголовки на конкретику. Сравните, было - "Вёрстка лендинга" (+) 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
    @Alexandr_TT учел твои пожелания =) Commented 30 апр. 2019 в 20:40
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>

1
  • Думаю, что можно было сделать как-то более правильно, но я к сожалению не верстальщик и это первое что пришло мне на ум.
    – Alan564
    Commented 12 апр. 2019 в 12:08
0

В css - никак, тень соответствует форме элемента, а у вас элемент прямоугольный (просто часть его прозрачна).

Вариантов два:

  • Стребовать с дизайнера / фотошопнуть самому белый слой вместе с тенью.
  • использовать SVG и тень задать в нем.
1
  • На самом деле в CSS тоже можно (плевать на форму элемента), но это очень сильно тормозит и я бы не рекомендовал делать на CSS
    – andreymal
    Commented 9 апр. 2019 в 15:59
0

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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