BAGIKAN

BAYANGAN TESK :

CSS 3 memiliki sebuah properti yang dinamakan “Bayangan-tesk” untuk memberikan bayangan pada tiap huruf pada teks. Yang paling sederhana, hal tersebut terlihat sebagai berikut :

.textshadow1 {text-shadow: 0 0 10px #fff;}

Bila anda menaruh sebuah bayangan yang tidak jelas dibelakan text, i.e., tanpa affset, hasilnya akan mengasilkan nyala disekitar hurufnya. Bila nyala daro sebuah bayangan tidak cukup kuat, cukup ulangi bayangan yang sama beberapa kali. Seperti hasil yang terlihat dibawah ini :

Gambar 1: Text Shadow Mambruk Studio.

BAYANGAN TEKS TRANSPARAN :

Bentuk paling sederhana dari properti ‘text-shadow’ mempunyai dua bagian: sebuah warna (seperti yellow) diatas dan offsetnya (0 0 30px untuk contoh dibawah). Hal ini menyebabkan bayangan yang transparan pada offset yang di indikasikan. Tetapi offset dapat juga dibuat tidak jelas, menghasilkan sebuah bayangan yang kurang lebih kabur. Hasilnya akan terlihat di bawah ini :

Gambar 2: Text Shadow Michael Petege.

Pada bagian yang menambahkan sebuah bayangan hitam (#0a0e27) sedikit ke kanan (-14px) dan kebawah (7px 0) relatif terhadap teks yang normal. Hasilnya akan terlihat seperti ini:

Gambar 3: Text Shadow STMIK Akakom.

Dari semua hasil Text Shadow diatas akan anda bisa copas  source code dibawah ini :

Source Code HTML :

 
<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Text Shadow</title> 
<link rel="stylesheet" href="css/style.css">
</head>
<body> 
<div class="textshadow1">Mambruk Studio</div> 
<div class="textshadow2">Michael Petege</div> 
<div class="textshadow3">STMIK Akakom</div> 
</body>
</html>

Souce Code CSS :

 
body { 
width: 840px; 
margin:50px auto; 
font-family: Old English Text MT; 
font-size: 5.5em; 
font-weight: bold; 
background: black;
}
div { 
height: 210px; 
margin-bottom: 100px; 
line-height: 200px; 
text-align: center;
}
.textshadow1 { 
font-weight: normal; 
color: white; 
text-shadow: 0 0 10px #fff,  
0 0 20px #fff,  
0 0 30px #fff,  
0 0 40px #ff00de,  
0 0 70px #ff00de,  
0 0 80px #ff00de,  
0 0 100px #ff00de,  
0 0 150px #ff00de;
}
.textshadow2{ 
font-family: Brush Script MT; 
color: white; 
text-shadow: 0 0 30px yellow;
}
.textshadow3{ 
background-color: #3a50d9; 
color: #e0eff2; 
font-size: 85px; 
font-style: italic; 
font-weight: bold; 
font-family: georgia; 
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
Print Friendly, PDF & Email
0

LEAVE A REPLY