html - How do I style JUST the reflection of the content without affecting its original source? -


i’m using -webkit-box-reflect reflect div , inside it.

however know how can reflect content , able fiddle reflection in css. let's want change opacity of reflection, how go doing it?

oh , curiosity, how not give reflection mirrored effect using -webkit-box-reflect? instead looks i've multiplied div/content? can below, above, or beside it.

    .div1 {          color: white;          background-color:green;          position: absolute;          height: 50px;          width: 150px;          margin left: 50px;          left: 100px;          margin-bottom: 200px;          margin-top: 100px;          top: 15px;          -webkit-box-reflect: right 1px;      }                  .div2 {          color: white;          background-color:blue;          position: absolute;          height: 50px;          width: 150px;          margin left: 50px;          left: 100px;          margin-bottom: 200px;          margin-top: 100px;          top: 70px;          -webkit-box-reflect: below 1px;      }
    <html>         <head>              <div class="div1">div1 test</div>               <div class="div2">div2 test</div>            </head>      </html>

you can define -webkit-gradients in same line or images etc.

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white)); 

source

you shouldn't using this, though. there better ways achieve better browser support.

i think displaying same content twice possible in jquery. source


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -