Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Activity
  • Members
  • Announcement
  • Need help?

Categories

  • Android (17)
  • Apps (39)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (74)
  • News (3)
  • OS (16)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (159)
  • Tips (79)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (48)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (22)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN WhatsApp Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
Home Web Blogger
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
1.1k
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.

RelatedPosts

Cara Mengatasi Komentar Spam di Website WordPress

Daftar Kata Komentar yang Wajib Diblokir Supaya Website Terhindar dari Spam

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

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

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

Just content creator

Related Posts

Cara Mengatasi Komentar Spam di Website WordPress
Wordpress

Cara Mengatasi Komentar Spam di Website WordPress

March 23, 2023
25
Daftar Kata Komentar yang Wajib Diblokir Supaya Website Terhindar dari Spamming
Wordpress

Daftar Kata Komentar yang Wajib Diblokir Supaya Website Terhindar dari Spam

March 23, 2023
25
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan
Apps

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

March 13, 2023
105
Tutorial Cara Format Disk lewat DiskPart, Kamu Bisa Menghapus Data Tanpa Aplikasi di Windows
Tutorial

Tutorial Cara Format Disk lewat DiskPart Terbaru, Kamu Bisa Menghapus Data Tanpa Aplikasi di Windows (Laptop/Komputer/PC)

March 7, 2023
28.7k
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)
Android

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

March 3, 2023
163
Cara Membuat Website di Jagoan Hosting
Wordpress

Cara Membuat Website WordPress di Jagoan Hosting, 100% Mudah dan Cepat untuk Pemula!

February 26, 2023
67
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)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

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

Add New Playlist