XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Profile
No Result
View All Result
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
No Result
View All Result
  • Profile
XKOMODOTCOM
Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow

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

Febri Tri Harmoko by Febri Tri Harmoko
May 13, 2014
in Blogger, Tutorial
1
0
2
SHARES
972
VIEWS
ShareTweet

Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow. Halo sahabat blogger indonesia, 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 atas.

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);
}

Mari kita bahas satu persatu kode di atas pada bagian text-shadow sesuai pada gambar yah

  • 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, kalau basic Text-Shadow  sudah paham sekarang kita akan lanjut ke Level Selanjutnya atau bisa di bilang back to topic 😀

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 🙂

Cara Membuat Teks 3D di Blog

Biar makin jelas mari lihat contoh beriktu:

Blog X Komo
Text-Shadow with CSS
 

Pada Contoh Text-Shadow di atas saya menggunakan Kode CSS seperti berikut

BACAJUGA

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

/*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 😀 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.

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 X Komo
Text-Shadow with CSS

Keren Bukan, 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>
Penting:
Perlu diketahui class=”element” bisa kamu tambahkan pada Tag dll.

Sekian dulu Tutorial tentang Cara Membuat Text 3D / Timbul di Blog dengan Efek CSS3 text-shadow dari saya, Untuk pertanyaan bisa di diskusikan di dalam forum blog / lewat komentar juga boleh 🙂 Semoga bermanfaat.

Tags: BlogCodingCSSHTML
Share2Tweet
Previous Post

Cara Earn Token Ninja Saga Lewat SupersonicAds dan TokenAds

Next Post

Download Script Mouse Macro Tt Esport For AWP SG AW (No Recoil)

Febri Tri Harmoko

Febri Tri Harmoko

Hanya pemuda tersesat yang gemar menulis dan berbagi informasi di internet dan juga gemar membaca komik, nonton anime dan pencinta kucing sejati pastinya.

Related Posts

Cara Setting Private atau Public DNS di Android - PC - Laptop
Internet

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

3 weeks ago
241
Solusi Tidak Bisa Main Game Online Dengan Internet Indihome
Tips

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

3 weeks ago
24.4k
Cara Login Akun Admin Modem IndiHome Huawei HG8245H
Tutorial

Cara Login Akun Admin Modem IndiHome HUAWEI HG8245H / HG8245A

1 month ago
195.6k
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem IndiHome ZTE F609 / F660 (Username & Password)

1 month ago
270.5k
Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows
Windows

Cara Mengatasi Warna Background Putih Menjadi Kuning di Windows

1 month ago
12
Cara Mengganti DNS Google - Cloudflare di Windows PC atau Laptop
Windows

Cara Mengganti DNS Google / Cloudflare di Windows (PC/Laptop)

2 months ago
168
Load More
Next Post
Download Script Mouse Macro Tt Esport For AWP SG AW (No Recoil)

Download Script Mouse Macro Tt Esport For AWP SG AW (No Recoil)

Please login to join discussion
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Advertise with us

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

No Result
View All Result
  • Profile
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.