Cara Membuat Flat Text Shadow Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

apa kabar semuanya ? ^_^

semoga sehat semua yah, dan masih semangat untuk belajar codingnya heheh ^_^
bertemu lagi dengan saya selaku admin codingpintar ^_^
pada tutorial sebelumnya saya sudah membuat tutorial tentang Cara Membuat Animasi Text Dengan CSS3.
nah, kesempatan kali ini saya akan memberikan tutorial Cara Membuat Flat Text Shadow Dengan CSS,
pada kali ini text yang saya buat tidak ada animasinya, Jadi hanya berupa text saja :D
biar gak penasaran,
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Membuat File HTML
Silahkan anda buat file bernama index.html lalu ketikkan lah script di bawah ini

<!DOCTYPE html>
<html>
<head>
 <title>Text Shadow</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<h1 class="shadow">Contoh Text<br /><br />Yang Di Tampilkan</h1>
<p><a href="http://codingpintar.blogspot.com.com" target="_blank">Belajar Coding</a></p>

</body>
</html>

Coba anda jalankan terlebih dulu file index.html nya dan lihat di browser anda. .
ya benar tampilannya akan seperti ini,

itu di sebabkan karena kita belum membuat file cssnya .
silahkan ikuti langkah selanjutnya

2. Membuat File CSS
Nah ini dia file inti pada tutorial kali ini, kenapa di sebut file inti, ya karena tanpa file css kita tidak akan bisa membuat effect yang kita inginkan. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini

/*
-- SHADOW
*/
.shadow {
  text-shadow: 1px 1px 0 #505050, 2px 2px 0 rgba(80, 80, 80, 0.95), 3px 3px 0 rgba(80, 80, 80, 0.9), 4px 4px 0 rgba(80, 80, 80, 0.85), 5px 5px 0 rgba(80, 80, 80, 0.8), 6px 6px 0 rgba(80, 80, 80, 0.75), 7px 7px 0 rgba(80, 80, 80, 0.7), 8px 8px 0 rgba(80, 80, 80, 0.65), 9px 9px 0 rgba(80, 80, 80, 0.6), 10px 10px 0 rgba(80, 80, 80, 0.55), 11px 11px 0 rgba(80, 80, 80, 0.5), 12px 12px 0 rgba(80, 80, 80, 0.45), 13px 13px 0 rgba(80, 80, 80, 0.4), 14px 14px 0 rgba(80, 80, 80, 0.35), 15px 15px 0 rgba(80, 80, 80, 0.3), 16px 16px 0 rgba(80, 80, 80, 0.25), 17px 17px 0 rgba(80, 80, 80, 0.2), 18px 18px 0 rgba(80, 80, 80, 0.15), 19px 19px 0 rgba(80, 80, 80, 0.1);
}


body {
  background-color: #FFA631;
  font: 32px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
  color: #19B5FE;
  line-height: 0.8em;
  text-align: center;
  margin: 50px 0 0 0;
  text-transform: uppercase;
  font-style: italic;
}

p {
  text-align: center;
  margin: 50px 0 0 0;
  font-size: 50%;
}

a {
  color: #505050;
  text-decoration: none;
}

a:hover {
  color: #EF695B;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

Sangat simple kan ? :D
silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
lihat apa yang terjadi di browsermu :D

Demikianlah tutorial Cara Membuat Flat Text Shadow Dengan CSS
Mohon maaf jika tidak ada demonya :D
Silahkan anda coba dan anda kembangkan sendiri .
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D