Menu

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

Who’s Online

There are no users currently online

Categories

  • Android (10)
  • Apps (33)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (29)
  • Event (17)
  • Game (3)
  • Internet (17)
  • Laptop (71)
  • OS (8)
  • Peripheral (21)
  • Personal (260)
  • Publisher (3)
  • Review (23)
  • Smartphone (52)
  • Social Media (6)
  • Technology (145)
  • Tips (66)
  • Travel (5)
  • Tutorial (125)
  • Unboxing (17)
  • Video (33)
  • Web (17)
  • Windows (5)
  • Wordpress (14)
  • YouTube (9)

Subscriptions

  • Febri Tri Harmoko
  • Ahmad Imam Arifin
  • Al Annas
  • Ampera 94
  • Arif Sutarlie

Recent News

  • Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
  • Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
  • Bagaimana Performa ASUS ZenBook Pro Duo 15 OLED (UX582) – Test Benchmark
XKOMODOTCOM
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM
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
November 30, 2018
in Blogger, Tutorial
1
0
ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia ASUS Online Store Official Indonesia
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

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

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

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android
Android

Tutorial Cara Setting DNS Pribadi Menggunakan AdGuard DNS di HP Android

February 1, 2023
11
Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

February 2, 2023
35
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

November 19, 2022
451.9k
Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android
Video

Tutorial Cara Buka Situs yang Diblokir Tanpa Aplikasi Tambahan di Android (VPN/DNS Pribadi) – 100% Pasti Berhasil!

February 2, 2023
75
Cara Setting VPN Gratis di Windows (PC / Laptop)
Tutorial

Cara Setting VPN Gratis di Windows (PC/Laptop)

October 5, 2022
39
Cara Setting VPN di Android Tanpa Aplikasi Tambahan
Internet

Cara Setting VPN di Android Tanpa Instal Aplikasi Tambahan 100% WORK!

September 30, 2022
510
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
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • 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