News Hi-Technology

Selasa, 11 Agustus 2009

CSS Untuk Membuat Effect 3D pada Tulisan Text

Demo: (Try highlighting the text belowto verify that they are indeed text!)

Written by

Software Angel, Inc.
Software Angel, Inc.



Shadow

Shadow




Emboss Background Example

Emboss Background Example

Emboss Background Example







Emboss Color Example

Emboss Color Example

Emboss Color Example







Color Highlight Example

Color Highlight Example

Color Highlight Example

 

 

Developer's view:


<html>
<head>
<!----------------- PLEASE ATTACH THIS IF USED -------------->
<meta name=author
content="Raul R. Edwards">
<meta name=copyright
content="Software Angel, Inc. (c) April 1, 1999"> <meta license=GNU
content="GNU General Public License Version 1.2
as published by the Free Software Foundation"
<!----------------------------------------------------------->
<style>
body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; }
div { position:absolute; }
</style>

<title>Emboss & 3D Letters</title>
<head>

<body>

Written by<br>

<style>
a { text-decoration: none; color:maroon; vlink:maroon; alink:red;}
a:hover {color: red }
.info { font-family:Times New Roman; positon:relative;}
.light { top:-1; left:-1; color:white;}
.shade { top:+1; left:+1; color:pink; }
.fill { top:0; left:0; color:red; } </style>

<div class="info">
<div class="light">
<i>Software Angel, Inc.</i>
</div>
<div class="shade">
<i>Software Angel, Inc.</i>
</div>
<div class="fill">
<i>
<a href="mailto:rre@scs.howard.edu"
onmouseover="status='Software Angel, Inc. &copy 1999'; return true;"
onmouseout="status='Emboss & 3D Letters'; return true;">
Software Angel, Inc.</a>
</i>
</div>


</div>
<br><br><br>

<!--- Example #1 --->
<style>
.shade1 { top:+5; left:+5; color:black; }
.fill1 { top:0; left:0; color:red; }
</style>
<div class=Example1>

<div class="shade1">
<center><h1>Shadow</h1></center>
</div>
<div class="fill1">
<center><h1>Shadow</h1></center>
</div>

</div>

<br><br><br>

<!--- Example #2 --->
<style>
.light2 { top:-1; left:-2; color:white; }
.shade2 { top:+1; left:+2; color:black; }
.fill2 { top:0; left:0; color:silver; } </style>
<div class=Example2>
<div class="light2">
<center><h1>Emboss Background Example</h1></center>
</div>
<div class="shade2">
<center><h1>Emboss Background Example</h1></center>
</div>
<div class="fill2">
<center><h1>Emboss Background Example</h1></center>
</div>
</div>

<br><br><br>

<!--- Example #3 --->
<style>
.light3 { top:-2; left:-2; color:white; }
.shade3 { top:+2; left:+2; color:lightblue; }
.fill3 { top:0; left:0; color:blue; } </style>
<div class=Example3>
<div class="light3">
<center><h1>Emboss Color Example</h1></center>
</div>
<div class="shade3">
<center><h1>Emboss Color Example</h1></center>
</div>
<div class="fill3">
<center><h1>Emboss Color Example</h1></center>
</div>
</div>

<br><br><br>


Sisipkam Script Css berikut ini untuk memberikan effect Warna Hilghlight Pada Text.. Semua ukuran dan ketebalan Highlight nya dapat disesuaikan sesuai dengan yang dinginkankan.Dan kita hanya perlu mengubah nilai value disetiap variable class light4, shade4 dan fill4..

<!--- Example #4 --->
<style>
.light4 { top:-2; left:-2; color:yellow; }
.shade4 { top:+2; left:+2; color:yellow; }
.fill4 { top:0; left:0; color:darkgreen; } </style>
<div class=Example4>
<div class="light4">
<center><h1>Color Highlight Example</h1></center>
</div>
<div class="shade4">
<center><h1>Color Highlight Example</h1></center>
</div>
<div class="fill4">
<center><h1>Color Highlight Example</h1></center>
</div>
</div>

</body>
</html>


0 komentar:

Posting Komentar

 

Tips dan Trik Web Master Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal