Hi bloggers :)
Kali ini saya mau membuat artikel tutorial tentang Cara Membuat Text 3D atau Timbul di Blog dengan Efek text-shadow. Sebelum kita masuk ke topik pembahasan alangkah lebih baik nya kita mengenal Dasar / Basic Modifikasi Text menjadi 3D atau timbul di blog. Dalam tutor ini saya menggunakan #CSS style "Text-Shadow" untuk lebih jelas nya mari lihat gambar di bawah yah ...
Pada Gambar di atas bisa kita lihat Penggunaan Kode nya :)
nah. mari kita bahas satu persatu kode di atas pada bagian text-shadow sesuai pada gambar yah :keren
1px Merupakan value untuk mengatur posisi bayangan mau ke kanan (+) atau kekiri(-)
2px Merupakan value untuk mengatur posisi bayangan mau ke atas(-) atau kebawah(+)
3px Merupakan value untuk mengatur efek blur(+) / ketajaman (0px) pada bayangan.
rgb(red,green,blue) / #color merupakan warna bayangan.
Saya rasa untuk Basic Text-Shadow sudah cukup kali yah :) sisahnya tinggal kreasikan sendiri ajah :wee
kalau basic Text-Shadow sudah paham sekarang kita akan lanjut ke Level Selanjutnya atau bisa di bilang back to topic :D Haha ...
Mari kita kembali ke topik awal yah mengenai Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow. Pada tahap ini sebenar nya kita tetap menggunakan CSS Text-Shadow dan juga menggunakan value yang sama namun untuk membuat text seolah-olah menjadi 3D atau serasa timbul gitu pada blog kita harus menambahkan beberapa value Shadow pada Style Element Text-shadow nya :)
biar makin jelas mari lihat contoh nya saja yah :p
Blog Mas Komo
Text-Shadow with CSS
pada Contoh Text-Shadow di atas saya menggunakan Kode CSS seperti berikut
kalau lihat CSS nya pasti waw yah kok banyak bener Value Shadow yang kita gunakan :D disini lah tata letak trik atau cara membuat Text Menjadi 3D atau terlihat Timbul di blog :)
kalau sudah tahu CSS nya sekarang tinggal memahami cara membuat CSS seperti di atas :) cara nya itu simpel saja kita hanya membuat tumpukan shadow di dalam text :) untuk membuat shadow baru di text / element yang sama kita cukup menambahkan tanda koma(,) Sebagai tanda pemisah.
pada contoh CSS di atas value shadow pertama menggunakan 0px 0px 0 rgb(226, 226, 226) lalu di lanjutkan dengan tanda koma(,) dan di tambahkan lagi Value Shadow Dst.
Tips:
Hal yang perlu di ingat ! untuk membuat effect text-shadow menjadi lebih jelas kita harus menambahkan value di tiap tingkatan value bayangan. misal pada value bayangan pertama kita buat 0px dan pada value berikut nya kita buat 1px dst. :keren
Setelah kita memahami cara kerja CSS Text-Shadow pasti banyak timbul pertanyaan.
Trus Bisa tidak yah kalau shadow / bayangan nya kita ganti warna nya ?
Jawaban. Tentu Bisa kita tinggal ubah rgb(red,green,blue) nya saja atau kamu bisa menggunakan #color.
agar lebih menarik kita bisa membuat shadow dengan warna pelangi :) contoh nya seperti di bawah ini
Blog Mas Komo
Text-Shadow with CSS
Keren Bukan :wee sekarang tinggal kita kreasikan sendiri saja mau nya bagaimana :) untuk menambahkan kedalam CSS Template blog kita bisa menambahkan Element baru jadi nanti kita hanya perlu memanggil kode element tersebut saja :)
Kode CSS Shadow 3D Normal
Kode CSS Shadow 3D pelangi (Warna-Warni)
Tambahkan Kode CSS tersebut Di atas ]]></b:skin> atau </style>
untuk menggunakan kode CSS di atas cukup kita menggunakan Class="teks-bayangan" atau class="teks-bayangan-pelangi"
Perhatian :
Perlu diketahui class="element" bisa kamu tambahkan pada Tag <i> <b> <p> <a> dll. :)
Sekian dulu Tutorial tentang Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow dari saya :hebat Untuk pertanyaan bisa di diskusikan di dalam forum blog / lewat komentar juga boleh :) jangan lupa untuk like + share Artikel ini yah :keren
Peringatan:
Dilarang Keras Mencopy Artikel ini secara keseluruhan :keren Jika ingin repost silahkan cantumkan link sumber ke artikel ini. Jika tidak mencantumkan Link Sumber saya akan mengajukan ke DMCA Google :hebat
Original Article By Blog X Komo
Terimakasih