Thursday, February 6, 2014

Creating Mirror-shadow for Text and Image


    Here I am going to share some coding to achieve special effects - creating Text shadow/mirroring (full reflection) - using (HTML5) Canvas and CSS3.

 Now I Start first explaining with Canvas (& javascript):
  •  Write the Text (Raju Dasa) on Canvas with some styling & color. 
  •  Then again I write the same Text on Canvas but, now with changing matrix-transformation (axis-change). 
  •  And at last I applied some styling, coloring and rotating the Text. 

Below is the screenshot for Canvas-Text-Shadow from Firefox

Now its time to achieve the same effect using CSS3:
  • To achieve shadow/mirror with CSS, I used 3 DIV containers.
  • And then applied the styles like, Matrix Origin-changing, rotating the text and skewed it to some degrees.
  • And at last applying the color (grey), all using the CSS.

Below is the screenshot for CSS-Text-Shadow from Firefox

Now its time to achieve reflection/mirror using CSS3 on Image:
  • Follow the same steps described above, instead of text, we use image in one of the DIV. 
  • Add same image as background to another DIV with required fixed-height. 
  • Add the opacity and position (like SPRITE) to the background-image. 

 Below is the screenshot for CSS-Image-Shadow from Firefox

Point of note: in code, you will see the repetition of CSS rules for each specific browsers!
Tested with Opera 11, FF 3.6, Chrome.

 Its easy to achieve mirror-shadow with CSS than with Canvas.
Hope you like this post!

   download the Zip file here!

No comments:

Post a Comment