How to leave the ends of a div transparent?

Navigation
0

I want to apply a color in div and on the sides of it it becomes clearer until transparent, can you do it with CSS?

    
asked by anonymous 15.01.2018 / 20:56

3 answers

1

Almost sure that it was done with background-image: linear-gradient

See in 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>
    
15.01.2018 / 23:51
1

Friend you can use a "linear gradient" 

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

You set a percentage for the solid color that in the case will be in the middle and the sides whitening up to which tone you want. Of course it does not have to be 50% of the black div, you can put less if you prefer.

    
15.01.2018 / 21:20
0

You can use box-shadow to apply this effect:

Okay, you can not do with this% shadow effect on the sides you want.

But you can use CSS gradients, they're kind of complex, and each browser has a syntax, but an automatic generator can make that work easier: link 

.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>
    
15.01.2018 / 21:03
Using SQL Query with Asp MVC5 What is the difference between the query with '(quotation marks) and without' (quotation marks)?