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));
you shouldn't using this, though. there better ways achieve better browser support.
i think displaying same content twice possible in jquery. source
Comments
Post a Comment