Monkey Raptor: 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.

{DEMO}

Element beveled (inside) of some sort

TEXT EMBOSSED

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

TEXT BEVELED

Element and text embossed

TEXT EMBOSSED

Element and text beveled

TEXT BEVELED

MEEP MEEP

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

<!--CSS-->
<style>
.element, .tex {
    font-family: consolas, menlo, monaco, courier, monospace;
}
.element {
    background: #bbb;
    height: 100px;
    width: 300px;
    display: block;
    border-radius: 30px;
    margin: 20px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;    
    color: #777;
}
.emboss {
    box-shadow: 0 -30px 50px #777 inset;
    border: 15px solid #bbb;
}
.bevel {
    box-shadow: 0 -30px 50px #aaa inset, 0 0 15px #222 inset;
    border: 15px solid #bbb;
}
.tex {
    font-size: 20px;
    letter-spacing: 5px;
    margin: 20px 0 20px 20px;
    font-weight: bold;
    color: #888;
}
.tex-emboss {
    text-shadow: 0px 1px 2px #222, 0px 1px 2px #333;
}
.tex-bevel {
    text-shadow: 1px 1px 1px #eee;
}
.tex-fx {
    font-size: 20px;
    color: transparent;
    text-shadow: 5px 20px 2px #aaa;
    
    /*Transformers*/
    -webkit-transform: rotate(180deg) skew(45deg, 0deg) scale(-1, 0.7);
    -moz-transform: rotate(180deg) skew(45deg, 0deg) scale(-1, 0.7);
    -o-transform: rotate(180deg) skew(45deg, 0deg) scale(-1, 0.7);
    transform: rotate(180deg) skew(45deg, 0deg) scale(-1, 0.7);
    
    /*Aligners*/
    margin-left: 32px;
    margin-top: -28px;
}
</style>

<!--HTML Elements-->
<hr/>
<span class='tex'>Element beveled (inside) of some sort</span>
<div class='element bevel tex-emboss'>TEXT EMBOSSED</div>

<hr/>
<span class='tex'>Element embossed and text beveled</span>
<div class='element emboss tex-bevel'>TEXT BEVELED</div>

<hr/>
<span class='tex'>Element and text embossed</span>
<div class='element emboss tex-emboss'>TEXT EMBOSSED</div>

<hr/>
<span class='tex'>Element and text beveled</span>
<div class='element bevel tex-bevel'>TEXT BEVELED</div>

<hr/>
<div class='tex'>MEEP MEEP</div>
<div class='tex tex-fx'>MEEP MEEP</div>

Monkey Raptor

Sunday, July 28, 2013

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

No comments:

Post a Comment