Image reflection with HTML5 and LESS/CSS

HTML Code 

 

<!DOCTYPE html>
<head>
<title>Fiddle Salad Debug View</title>

<style>

#theReflection {
background: url(‘https://d4dilip.files.wordpress.com/2013/06/idea1.jpg&#8217;) no-repeat;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.2)));
/* just set the length and opacity of the reflection. */

width: 350px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
}

</style>
</head>
<div id=”theReflection”>

</div>

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s