30
Jul
2012
0
Satu catatan yang perlu diingat adalah bahwa tanpa CSS3 dan Javascript, HTML5 adalah HTML (normal / tradisional) Kita tidak bisa melakukan lebih banyak lagi kecuali menempatkan jenis baru.
Beberapa hari lalu saya bermain dengan CSS3 properti dan saya membuat efek teks menggunakan properti bayangan Teks. Saya telah menggunakan hanya CSS untuk membuat efek shadow ini. Menggunakan CSS Text Shadow dan properti Transisi yang sama.
HTML Markup
<html> <body> <div> <h1>C</h1> </div> <div> <h1>S</h1> </div> <div> <h1>S</h1> </div> </body> </html>
CSS Code
<style>
.span4
{
width:10;
float: left;
margin-right: 100px;
margin-left: 100px;
}
h1
{
font-family: 'Junge', cursive;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
/* CSS Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
color: #8D3737;
}
h1.first:hover
{
text-shadow: 40px 0px 0px #92AE57, 80px 0px 0px #00aae9,
-40px 0px 0px #92AE57, -80px 0px 0px #00aae9;
}
h1.second:hover
{
text-shadow: 40px 0px 0px #00aae9, 80px 0px 0px #92AE57,
-40px 0px 0px #00aae9, -80px 0px 0px #92AE57, 0px 50px 0px #00aae9,
0px 100px 0px #FFE13B, 0px -50px 0px #00aae9, 0px -100px 0px #92AE57;
}
h1.third:hover
{
text-shadow: 40px 30px 0px #92AE57, 80px 60px 0px #FFE13B,
-40px -30px 0px #393A39, -80px -60px 0px #00aae9,
40px -30px 0px #92AE57, 80px -60px 0px #00aae9,
-40px 30px 0px #393A39, -80px 60px 0px #FFE13B;
}
</style>
Nah sekarang tinggal lihat hasilnya. kira kira seperti berikut ini :
