Oct
12
2011
CSS // CSS3 // HTML5 // Jquery // Jquery

Text Reflecting Pure CSS3

The HTML code is very straight forward and semantic:Reflected Text!

Flipping the text vertically

I used the :after and :before pseudo-elements to insert the reflection. The tricky part is where you have to flip the reflection-text vertically. This can be done with a CSS 2D transformation. One could write a transformation matrix which does the flipping. However this requires knowledge of Linear Algebra and too difficult for us to handle. The trick is simply using a negative value for scaleY.

For the mathematically challenged who are reading my blog: Here’s an excellent article how those transformation matrices work ? and how to create them.

/* CSS code */
.reflected {
position: relative;
}
.reflected:after {
content: 'Reflected Text!';
display: block;
position: absolute;
bottom: -.55em; /* You should change this value to fit your font */
left: 0;
right: 0;
opacity: .5;

/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
}

Fading reflection…

Now we have to fade the reflection out. One could use a fade-out png image with alpha transparency, but what’s the fun in that? I researched on cross-browser CSS gradients and found an interesting article at WebDesignerWall.

/* CSS code */
.reflected:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */

content: ' ';
display: block;
height: 1em;
position: absolute;
bottom: -.8em;
left: 0;
right: 0;
}

And finally you can simplify the whole CSS by grouping common properties together:
/* CSS code */
.reflected {
position: relative;
}
.reflected:before, .reflected:after {
display: block;
position: absolute;
bottom: -.8em; /* You should change this value to fit your font */
left: 0;
right: 0;
}
.reflected:before {
content: 'Reflected Text!';
opacity: .3;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
}
.reflected:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */
content: ' ';
height: 1em;
}

some inconveniences

As you can see, one can actually make a text reflection with CSS3 only. It just comes with some inflexibleness.

  • It only works on a non-changing plain-color background.
  • The reflection text is generated using CSS. Which means you have to change the CSS file if you change the corresponding text in the HTML file.
  • It doesn’t work on all browsers (e.g. Opera)
  • It looks differently on different browsers (see figure below)

Related Posts

About the Author: Vrushank Brahmakshatriya

I am Vrushank Brahmakshatriya a 24 year old Entrepreneur blogger, Founder and Editor of "WebDeveloperGeeks". I spend too much time in front of the computer and find myself telling my wife', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything. You can follow me on @twitter and @facebook

Leave a comment


GeeksLabs Network

Subscribe To My Blog

Enter your email address:

Delivered by FeedBurner

Donate


If you like what I do, please consider donating a token of your appreciation.

Tag Cloud

Ajax (2)
Android (4)
Blackberry (1)
Brochures & Cards (4)
Charts (1)
CMS News (1)
CSS (9)
CSS3 (9)
database (1)
Design (1)
Drupal (1)
Editors (1)
Flash (1)
Font (2)
Form (1)
HTML (6)
HTML5 (8)
Icon (3)
Illustration (7)
Infographics (2)
Insipration (9)
Inspiration (4)
iphone & ipad (1)
Java (1)
JavaScript (3)
Joomla (1)
Jquery (13)
Jquery (9)
Logo (3)
Magento (1)
Mobile News (4)
Open Source (6)
Photography (1)
PHP (6)
PHP (4)
PSD (3)
Resources (3)
SEO (1)
Template (15)
Text Effect (1)
Textures (4)
Tools (5)
Tutorial (1)
Typography (3)
Uncategorized (1)
Vectors (1)
Wallpapers (1)
Web Apps (4)
Web Development (1)
Wordpress (4)

WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.

Buffer