Cara menambahkan efek pada teks HTML menggunakan CSS

Cara menambahkan efek pada teks di blog - selamat datang kembali di blog sederhana saya, pada kesempatan kali ini saya akan kembali membagikan tutorial mengenai blog atau sesuatu yang bersangkutan dengan HTML dan CSS, tentunya dengan tutorial yang sederhana saja yang akan saya bagikan karena saya sendiri bukanlah orang yang ahli di bidang tersebut melainkan hanya seorang penulis yang belajar dari para blogger yang sudah profesional.

Awalnya tujuan saya menambahkan efek pada blog hanya sekedar untuk mempercantik tampilan blog saya saja, namun pada akhirnya saya terpikir untuk membagikan saja siapa tahu masih ada pengunjung yang masih membutuhkan artikel seperti ini, meskipun sebenarnya sudah banyak blogger lain yang memposting artikel seperti ini di blog mereka.

Tanpa berlama-lama lagi langsung saja sobat simak tutorial sederhana saya tentang Cara menambahkan efek pada tulisan blog

Contoh sederhananya seperti Tulisan ini

Tulisan diatas menggunakan skrip HTML seperti berikut:

Contoh sederhananya seperti <span class="textblog">Tulisan ini</span>

class="textblog" berfungsi untuk memanggil CSS agar tulisan yang terkurung tag span dapat terbentuk, dan untuk Skrip CSS nya kamu bisa membuat nya seperti berikut:

<style>
.textblog {
 font-weight: bolder; /* ketebalan Teks */
 font-size: large; /* Ukuran Teks */
 background: ; /* Warna Background */
 color:#9a9d0b;/* Warna Teks */
 text-shadow:/* Warna Bayangan Teks */
   1px 1px #404206,
   2px 2px #727415,
   3px 3px #727415,
   4px 4px #727415,
   5px 5px #727415,
   6px 6px #727415,
   7px 7px #404206,
   8px 8px 7px #000;
}
</style>

Untuk ukuran dan warna kamu bisa sesuaikan dengan selera masing masing, untuk bagian Background silahkan mau kamu gunakan warna apa terserah karena pada skrip diatas saya tidak menambahkan warna pada background dan untuk Skrip CSS diatas kamu bisa menyimpannya di widget blog kamu tanpa perlu edit HTML pada template kamu. Jadi kamu tinggal menambahkan skrip HTML nya saja pada postingan blog seperti berikut:

<span class="textblog">Tulisan kamu</span>

Selain efek diatas kamu juga bisa menggunakan efek lainnya seperti berikut:

1. Efek Bayangan

EFEK TEKS 1

<style>.text1 { font-weight:700px; font-size:35px; background:#4aacf7; color:#064475; text-shadow: 1px 2px 1px #9ad2fe, -1px -2px 1px #1895f7; } </style>

2. Efek Gelembung

EFEK GELEMBUNG

<style>.text2 { font-weight:710px; font-size:35px; background:#3e6a06; color:#3e6a06; text-shadow: -1px -1px 1px #528e06, -1px -1px 3px #528e06, 1px 1px 1px #243d05, 1px 1px 3px #243d05, 1px -1px 1px #eafed2, -1px 1px 1px #eafed2; } </style>

3. Efek Border / garis tepi

EFEK TEKS BORDER

<style>.text3 { font-weight:700px; font-size:35px; background:#fafafa; color:#91080b; text-shadow: 1px 0px 0px #fff, -1px 0px 0px #fff, 0px 1px 0px #fff, 0px -1px 0px #fff, 1px 1px 2px #000; } </style>

4. Efek 3D

EFEK 3 DIMENSI

<style>.text4 { font-weight:680px; font-size:35px; background:#f9f9d7; color:#9a9d0b; padding:0 20px 0 0; text-shadow: 1px 1px #404206, 2px 2px #727415, 3px 3px #727415, 4px 4px #727415, 5px 5px #727415, 6px 6px #727415, 7px 7px #404206, 8px 8px 7px #000; } </style>

5. Efek 3D 2

EFEK 3 DIMENSI 2

<style>.text5 { font-weight:680px; font-size:35px; background:#eee; color:#45BEF7; text-shadow: 0px 1px #577079, 0px 2px #577079, 0px 3px #577079, 0px 4px #577079, 0px 5px #577079, 0px 6px #577079, 0px 7px #577079, 0px 7px 10px #333; } </style>

6. Efek Bersinar

EFEK BERSINAR

<style>.text6 { font-weight:755px; font-size:35px; background:black; color:#fff; text-shadow: 0 0 3px #FFFFA0, 0 0 5px #FFFF4D, 0 0 9px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 40px #F7F700; } </style>

7. Efek Menyala

EFEK MENYALA

<style>.text7 { font-weight:600px; font-size:42px; background:black; color:black; text-shadow: 0px 0px 4px #ccc, -1px -5px 4px #ff3, 2px -10px 6px #fd3, -3px -15px 11px #f80, 3px -18px 18px #f20; } </style>

8. Efek Rainbow

EFEK PELANGI

<style>.text8 { font-weight:900px; font-size:47px; background:#f5e6fe; color:#fff; text-shadow: -1px -1px 0px #ddd, 2px 1px 0px #f93e47, 4px 2px 0px #f59b0f, 6px 3px 0px #f5dc0f, 8px 4px 0px #19a305, 10px 5px 0px #057fa3, 12px 6px 0px #052aa3, 14px 7px 0px #7605a3, 14px 8px 2px #000, 14px 5px 10px #000, 14px 5px 25px #000; } </style>

Untuk pemasangannya sama saja seperti yang sudah saya jelaskan di atas hanya saja pada skrip HTML kamu ubah tag class nya dengan tag CSS yang akan digunakan.

<span class="textblog">Tulisan kamu</span>

Contohnya : textblog kamu ganti dengan text1, text2 atau text8 sesuai dengan efek yang mau kamu gunakan. Untuk lebih jelasnya kamu bisa kunjungi link sumber nya yaitu sahabatblogger77.blogspot.com

Demikian artikel saya kali ini semoga postingan ini bermanfaat. Terimakasih