www.webdeveloper.com
Results 1 to 4 of 4

Thread: Create a reflection

  1. #1
    Join Date
    Dec 2012
    Posts
    20

    Question Create a reflection

    Hi there guys I want to know simple css code for creating the reflection of following heading

    Code:
    <html>
      <head>
        <h1>Heading</h1>
      </head>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,134
    There are some CSS3 methods of producing reflections, but there are cross-browser support issues. You can find some fun examples by searching on "css reflection". But overall, I'd be inclined to rely on graphics to produce reflections for a while yet.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Posts
    1,206
    By the way, <h1> belongs in the <body>, not <head>. <title> belongs in <head> but that is another story.

  4. #4
    Join Date
    Dec 2012
    Posts
    42
    Hi friends,

    Please try with this code:
    .image-block { width:78px; margin:0px 10px; float:left; }
    .reflection { position:relative; }
    .reflection img {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; opacity:0.20;
    filter: alpha(opacity='20');
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles