Блог

Главная - Вопросы по программированию - Как создать тень внутри маски CSS?

Как создать тень внутри маски CSS?

#html #css #svg #shadow #css-mask

#HTML #css #svg #тень #css-маска

Вопрос:

Могу ли я создать тень внутри выреза, созданного маской SVG?

Вот код, с которым я работаю

index.html 

 <div class="content">
    <section id="home-section">
    </section>
    ...
</div>

styles.css 

 #home-section {
    background: url(img/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-mask: url(img/mask.svg) center/contain no-repeat;
    -webkit-mask-size: auto;
}

Это результат, который я получаю
CSS-маска без тени

Но это тот результат, который я хочу (я сделал это в Illustrator): CSS-маска с тенью

Вот SVG: https://drive.google.com/file/d/1O7nGJHeYkgw9Al9BojSVI7f8zKzv4fbu/view?usp=sharing

Комментарии:

1. поделитесь SVG, который вы используете, чтобы мы могли дать вам точный ответ

2. Поделитесь svg как кодом в своем вопросе. Очистите его, если знаете, как это сделать.

Ответ №1:

drop-shadow фильтр может помочь вам здесь, если вы рассмотрите маскировку, как показано ниже:

 .box {
    height:300px;
    background:url(https://picsum.photos/id/1072/800/600) center/cover;
   overflow:hidden;
}

.box div {
  filter:drop-shadow(0 0 5px black);
  height:100%;
}

.box div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  -webkit-mask:
   /* your mask here */
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left/33% auto,
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center/33% auto,
     linear-gradient(#fff 0 0) right 10% top 50%/30% 80%,
    /* end of your mask*/
    linear-gradient(#fff 0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
   -webkit-mask-repeat:no-repeat;
} 
 <div class="box">
  <div></div>
</div>

Используя вашу маску, код будет:

 .box {
    height:300px;
    background:url(https://picsum.photos/id/1072/800/600) center/cover;
   overflow:hidden;
}

.box div {
  filter:drop-shadow(0 0 5px black);
  height:100%;
}

.box div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  -webkit-mask:
    url('https://i.ibb.co/JspDMsM/thebirds-mask3.png') center/contain no-repeat,
    linear-gradient(#fff 0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
   -webkit-mask-repeat:no-repeat;
} 
 <div class="box">
  <div></div>
</div>

Комментарии:

1. Почему вы использовали линейный градиент и «mask-composite: exclude»? Последнее для меня не имело значения

2. @AsaphSouzaDiniz это зависит от маски. Я использовал exclude для создания отверстия внутри последнего слоя (линейно-градиентного). Если ваша маска уже создает отверстие по умолчанию, то вам это не нужно. Поскольку у меня не было доступа к вашему SVG, я не мог знать такую информацию 😉

3. @AsaphSouzaDiniz Я обновил код с помощью вашей маски

Метки: