How do you make the edges of a div transparent?

Asked

Viewed 248 times

0

I want to apply a color to div and on the sides of it it gets clearer until it’s transparent, you can do this with CSS?

inserir a descrição da imagem aqui

  • But you want it to happen when?

  • will always be visual effect

3 answers

1

Friend you can use a "linear gradient"

div { background-image: linear-gradient( to right,white, black 50%, 
white ); }

You define a percentage for the solid color that in case will stay in the middle and the sides lightening up to what shade you want. Of course it does not need to be 50% of the black div, you can put less if you prefer.

1


Pretty sure it was done with background-image: linear-gradient

Check on the Snippet:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url(http://placecage.com/600/500) center no-repeat / cover;
}
div {
    margin: 10px auto;
    padding: 10px 50px;
    width: 50%;
    background-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    text-align: center;
    color: #fff;
}
<div>
    <h1>texto aqui</h1>
</div>

0

You can use box-shadow to apply this effect:

Okay, can’t do with box-shadow that shadow effect on the sides you want.

But you can use gradients in CSS, they’re kind of complex and each browser has a syntax, but an automatic generator can make this work easier: http://www.colorzilla.com/gradient-editor/

.blur-box {
  margin: 32px;
  padding: 10 -20%;
  text-align: center;
  width: 100px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+15,1+85,0+100 */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
  color: white;
}
<div class="blur-box">INICIAR</div>

Browser other questions tagged

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