Membuat Tulisan Bayangan Dengan Text Shadow CSS3

Membuat Tulisan Bayangan Dengan Text Shadow CSS, tutorial kali ini kita akan membahas bagaimana caranya membuat tulisan bayangan pada teks dengan bantuan fungsi CSS. Pada umumnya yang sebelumnya jika kita akan membuat tulisan bayangan harus dengan gambar kali ini dengan bantuan CSS3 kita akan membuat efek bayangan pada tulisan dengan cepat dan sederhana.

Untuk kode dasar penggunaan efek bayangan seperti ini :

text-shadow: 10px 20px 30px #fff000;

penjelasan kode :
warna merah : luas bayangan secara horizontal
warna biru : luas bayangan secara vertikal
warna hijau : besaran blur pada teks
warna ungu : warna dari bayangan teks

contoh penggunaan:

<span style="font-weight: bold; color:#FF0000; text-shadow: 5px 5px 10px #000000;">CONTOH PENGGUNAAN TEXT-SHADOW</span>

CONTOH PENGGUNAAN TEXT-SHADOW

Jika dimasukkan ke dalam class CSS

<style type="text/css">
.bayangan{
   font-weight: bold;
   color:#FF0000;
   text-shadow: 5px 5px 10px #000000;
}
</style>

<p class="bayangan">CONTOH PENGGUNAAN TEXT-SHADOW</p>

Selamat mencoba semoga bermanfaat :)

By: Unknown On 00.25

Continue Reading

Membuat Rounded Corner dengan CSS3

Membuat Rounded Corner dengan CSS3, pada tampilan suatu situs web sering kita temukan ada yang menggunakan sudut melengkung atau tidak siku pada design tampilannya. Sudut lengkung atau rounded corner tersebut berguna untuk membuat tampilan website atau blog kita semakin hidup dan menarik sehingga pengunjung merasa lebih nyaman berada di website atau blog kita.

Pada zaman dahulu kala untuk membuat suatu sudut melengkung pada suatu kotak dibutuhkan bantuan gambar untuk ke-empat sisinya sehingga memakan waktu cukup banyak untuk membuatnya, sekarang dengan bantuan CSS3 membuat rounded corner semakin mudah. Adapun code atau script CSS untuk membuat tampilan kotak anda dengan sudut melengkung untuk seluruh browser sebagai berikut :

-moz-box-shadow: 0 0 25px #999;
-webkit-box-shadow: 0 0 25px #999;
-o-box-shadow: 0 0 25px #999;
box-shadow: 0 0 25px #999;

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;

-moz-border: 2px solid #ddd;
-webkit-border: 2px solid #ddd;
-o-border: 2px solid #ddd;
border: 2px solid #ddd;

Keterangan script :

• warna merah untuk membuat efek bayangan pada kotak
• warna hijau untuk membuat efek lengkung pada kotak
• warna biru untuk membuat tebal garis pada kotak
• -moz digunakan untuk browser mozilla
• -webkit digunakan untuk browser chrome dan safari
• -o digunakan untuk browser opera

Demikian semoga tutorial cara membuat rounded corner dengan CSS3 ini bisa membuat tampilan website atau blog anda semakin berwarna dan menarik. Semoga bermanfaat dan selamat mencoba.

By: Unknown On 12.42

Continue Reading