$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow

Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow

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 ...

Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow

Pada Gambar di atas bisa kita lihat Penggunaan Kode nya :)
/*Text Dengan Efek Shadow*/
.element {
color:rgb(0,0,0);
Text-Shadow: 1px 2px 3px rgb(55,55,55);
}
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
/*Text Dengan Efek Shadow*/
element {
color:#fff;
Text-Shadow:0px 0px 0 rgb(226, 226, 226),1px 1px 0 rgb(218, 218, 218),2px 2px 0 rgb(210, 210, 210),3px 3px 0 rgb(201, 201, 201),4px 4px 0 rgb(193, 193, 193),5px 5px 0 rgb(185, 185, 185),6px 6px 0 rgb(177, 177, 177), 7px 7px 0 rgb(169, 169, 169),8px 8px 7px rgba(0, 0, 0, 0.4),8px 8px 1px rgba(0, 0, 0, 0.5),0px 0px 7px rgba(0, 0, 0, 0.2);
}
     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

.teks-bayangan {
color: white; 
font-size: 50px; 
text-align: center; 
text-shadow: 0px 0px 0 rgb(226, 226, 226),1px 1px 0 rgb(218, 218, 218),2px 2px 0 rgb(210, 210, 210),3px 3px 0 rgb(201, 201, 201),4px 4px 0 rgb(193, 193, 193),5px 5px 0 rgb(185, 185, 185),6px 6px 0 rgb(177, 177, 177), 7px 7px 0 rgb(169, 169, 169),8px 8px 7px rgba(0, 0, 0, 0.4),8px 8px 1px rgba(0, 0, 0, 0.5),0px 0px 7px rgba(0, 0, 0, 0.2);
}

Kode CSS Shadow 3D pelangi (Warna-Warni)

.teks-bayangan-pelangi {
color: white; 
font-size: 50px; 
text-align: center; 
text-shadow:  0px 0px 0 rgb(255, 0, 0),1px 1px 0 rgb(123, 0, 255),2px 2px 0 rgb(0, 134, 255),3px 3px 0 rgb(0, 255, 244),4px 4px 0 rgb(0, 255, 9),5px 5px 0 rgb(154, 255, 0),6px 6px 0 rgb(236, 255, 0), 7px 7px 0 rgb(255, 244, 0),8px 8px 7px rgba(255, 91, 0, 0.4),8px 8px 1px rgba(255, 68, 0, 0.5),0px 0px 7px rgba(255, 0, 0, 0.2);
}

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"

/*efek Text-Shadow 3D normal*/
<div class="teks-bayangan"> Blog X Komo</div>

/*Efek Text-Shadow 3D pelangi*/
<div class="teks-bayangan-pelangi"> Blog X Komo</div>
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

COMMENTS

BLOGGER: 4
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow
Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow
Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow
http://1.bp.blogspot.com/-TWLjrh4Ch0w/U3H86V4eiNI/AAAAAAAABiw/JcVW_2oI-dk/s1600/capture-20140514-180036.png
http://1.bp.blogspot.com/-TWLjrh4Ch0w/U3H86V4eiNI/AAAAAAAABiw/JcVW_2oI-dk/s72-c/capture-20140514-180036.png
BLOG X KOMO
http://www.xkomo.com/2014/05/cara-membuat-text-3d-shadow-timbul-di-blog.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/05/cara-membuat-text-3d-shadow-timbul-di-blog.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy