Sunday, July 28, 2013

Element Effects Using CSS - Bevel, Emboss, and Transformed Shadow

It's not "really" beveled if you compare this with Photoshop, or the actual stone/wax/wood carving. More of carved down (symmetrically chiseling) stuff, as you see on many websites nowadays. Well, bevel is a result of carving anyway. You can see some tiny amount of bevel on the border-side of the "carved" text. I'll stop talking. Let's just take a look at the browser rendered elements below.


Element beveled (inside) of some sort
This one is like having two elements overlapping. The canvas and the inside element. Actually this one is just one element with mixing different shadows positions and border.

Element embossed and text beveled

Element and text embossed

Element and text beveled

This one is actually two elements. The actual text element, and the transformed shadow. You can see the HTML elements below. I put rotation, scale on X axis with minus value (mirroring), and skewing.
You can see the CSS below. There are classes:
  • .element for general wrapper element stying
  • .emboss for creating wrapper element emboss
  • .bevel for creating wrapper element bevel
  • .tex for general styling of the text inside the element
  • .tex-emboss for creating the emboss on the text inside the element
  • .tex-bevel for creating the bevel on the text inside the element
  • .tex-fx for creating shadow on the last "MEEP MEEP" text

HTML of the demo above

No comments:

Post a Comment

Tell me what you think...