Memberikan Efek Bayangan 3D pada Text
Ini adalah Sebuah demonstrasi sederhana dari CSS3, dapat menampilkan teks menjadi terlihat "solid" dan memiliki efek bayangan yang natural. Dengan CSS Skew/ miring dan beberapa text sebelum pseudo-class, hal ini memungkinkan anda untuk menerapkan efek bayangan pada setiap Text yang anda gunakan.
sumber: cssplay
Demo :
Dahe Ugi
More Detail :
Letakan Kode CSS kedalam tag <head> template anda dan Kode HTML kedalam tag <body>. Untuk Text yang akan diberikan efek, lihat syntax seperti contoh dalam Kode HTML.Kode CSS
<style type="text/css">
.bgrd {width:auto; height:350px; background:#aaa; margin:0 auto; text-align:center;
-moz-border-radius:10px;
border-radius:10px;
}
h1.skew {
font-family: 'times new roman', serif;
padding:0; margin:200px 0 0 150px;
position:relative;
color:#fff;
font-size: 100px;
text-shadow:
-1px -1px 0 #f8f8f8,
-2px -2px 0 #f0f0f0,
-3px -3px 0 #e8e8e8,
-4px -4px 0 #e0e0e0,
-5px -5px 0 #d8d8d8,
-6px -6px 0 #d0d0d0,
-7px -7px 0 #c8c8c8;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewY(-15deg);
-webkit-transform: skewY(-15deg);
-ms-transform: skewY(-15deg);
-o-transform: skewY(-15deg);
transform: skewY(-15deg);
position: absolute;
z-index: 100;
}
.skew:before {
content:attr(title);
color:transparent;
position:absolute;
left:0; bottom:0;
text-shadow:
0 0 5px rgba(0,0,0,.25);
0 0 10px rgba(0,0,0,.2);
0 0 20px rgba(0,0,0,.15);
0 0 40px rgba(0,0,0,.1);
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewX(60deg);
-webkit-transform: skewX(60deg);
-ms-transform: skewX(60deg);
-o-transform: skewX(60deg);
transform: skewX(60deg);
z-index:-1;
}
</style>
.bgrd {width:auto; height:350px; background:#aaa; margin:0 auto; text-align:center;
-moz-border-radius:10px;
border-radius:10px;
}
h1.skew {
font-family: 'times new roman', serif;
padding:0; margin:200px 0 0 150px;
position:relative;
color:#fff;
font-size: 100px;
text-shadow:
-1px -1px 0 #f8f8f8,
-2px -2px 0 #f0f0f0,
-3px -3px 0 #e8e8e8,
-4px -4px 0 #e0e0e0,
-5px -5px 0 #d8d8d8,
-6px -6px 0 #d0d0d0,
-7px -7px 0 #c8c8c8;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewY(-15deg);
-webkit-transform: skewY(-15deg);
-ms-transform: skewY(-15deg);
-o-transform: skewY(-15deg);
transform: skewY(-15deg);
position: absolute;
z-index: 100;
}
.skew:before {
content:attr(title);
color:transparent;
position:absolute;
left:0; bottom:0;
text-shadow:
0 0 5px rgba(0,0,0,.25);
0 0 10px rgba(0,0,0,.2);
0 0 20px rgba(0,0,0,.15);
0 0 40px rgba(0,0,0,.1);
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewX(60deg);
-webkit-transform: skewX(60deg);
-ms-transform: skewX(60deg);
-o-transform: skewX(60deg);
transform: skewX(60deg);
z-index:-1;
}
</style>
Kode HTML
<div class="bgrd">
<h1 class="skew" title="Dahe Ugi">Dahe Ugi</h1>
</div>
<h1 class="skew" title="Dahe Ugi">Dahe Ugi</h1>
</div>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon