Transparent lines with CSS

Asked

Viewed 93 times

1

You can do something like this with CSS only?

inserir a descrição da imagem aqui

Thanks

css css3

  • Dude, I believe so, then you create 7 div’s, put that checkered image in the background and add a shadow at the end of each div with the box-shadow property

1 answer

1


Yes friend there are some ways to do, I particularly prefer using a pseudo-element ::after as a radial-gradient

.sombra {
    width: 200px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.sombra::after {    
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(0%, -50%);
    background-image: radial-gradient(rgba(0,0,0,0.65) 0%, transparent 70%, transparent 100%);
}
.sombra.scale::after {    
    transform: translate(0%, -50%) scaleY(0.5);
}
<div class="sombra"></div>
<div class="sombra scale"></div>

  • 1

    Thank you very much!!! I’ve been looking for solutions and I couldn’t find anything that would fit what I wanted and what you did saved my day!

  • @Daniellopes thank you young, but "sir" is in heaven! : D good luck there!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.