Macam-macam style teks untuk postingan atau widget

1. Teks dengan background

bikin tulisan pake background warna pink seperti ini

<div style="background-color: pink; padding: 5px;">masukkan teks kamu disini</div>

Atau bikin tulisan pake background warna kuning seperti ini

<div style="background-color: yellow; padding: 5px;">masukkan teks kamu disini</div>

2. Teks dengan border

Pake Border warna biru

<div style="border-bottom-color: blue; border-bottom-style: solid; border-bottom-width: 3px; border-left-color: blue; border-left-style: solid; border-left-width: 3px; border-right-color: blue; border-right-style: solid; border-right-width: 3px; border-top-color: blue; border-top-style: solid; border-top-width: 3px;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Masukkan teks kamu disini</div></div>

3. Teks dengan border dan background

Pake Border dan background

<div style="background-color: yellow; padding: 0px;">
<div style="border-bottom-color: blue; border-bottom-style: solid; border-bottom-width: 3px; border-left-color: blue; border-left-style: solid; border-left-width: 3px; border-right-color: blue; border-right-style: solid; border-right-width: 3px; border-top-color: blue; border-top-style: solid; border-top-width: 3px;">
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Masukkan teks kamu disini</div></div></div>

4. Teks berjalan ke kiri

Hayo Jalan ke arah kiri<marquee>Masukkan teks kamu disini</marquee>

5. Teks berjalan ke kanan

Hayo Jalan ke arah kanan
<marquee direction="right">Masukkan teks kamu disini</marquee>

6. Teks berjalan ke atas
Hayo naik ke atas

<marquee direction="up">Masukkan teks kamu disini</marquee>
7. Teks turun kebawah
Hayo semuanya turuuuun...!
<marquee direction="down">Masukkan teks kamu disini</marquee>

8. Teks naik turun
Naik turun terus, apa gak capek ya?
<marquee direction="up" behavior="alternate">Masukkan teks kamu disini</marquee>

9. Teks Berjalan Zig Zag
Jalan Zig zag keren ya
 <marquee direction="up" behavior="alternate" width="100%"><marquee direction="right">Masukkan teks kamu disini</marquee></marquee>

10. Teks berjalan dengan Border

Teksnya berjalan di dalam Border

<marquee style="border:green 3px solid"> Masukkan Teks Kamu disini</marque>

11. Teks dengan Background yang berjalan

Tulisan pake background berjalan warna pink


<marquee><div style="background-color: pink; padding: 5px;">masukkan teks kamu disini</div></marquee>

12. Teks shadow

Sekarang coba perhatikan bayangan pada tulisan ini

<span class="Apple-style-span" style="text-shadow: rgb(102, 102, 102) 1px 1px 2px;">Masukkan teks kamu disini</span>

13. Teks Shadow dengan background
Sekarang jadi lebih bagus lagi kalo pake background

<div style="background-color: #47fc00; padding: 5px;">
<b><span class="Apple-style-span" style="font-weight: normal;"><b><i><span class="Apple-style-span" style="text-shadow: rgb(102, 102, 102) 2px 2px 4px;"><span class="Apple-style-span" style="font-size: large;">
Masukkan teks kamu disini</span></span></i></b></span></b></div>

14. Teks embos

Teks embos juga bagus lho

<div style="background-color: pink; padding: 5px;">
<div style="text-align: center;">
<b><i><span class="Apple-style-span" style="color: #003399; font-size: 30px; text-shadow: rgb(255, 255, 255) 1px 1px, rgb(51, 51, 51) -1px -1px;">
masukkan teks kamu disini</span></i></b></div>
</div>



Keterangan:

-agar kode berfungsi, maka kode-kode Jenis teks di atas harus ditempatkan dilokasi edit html jangan di compose/teks

-Pada kode warna yellow, pink, blue, bisa kamu ganti dengan kode angka html seperti  #FFF000 dan lain sebagainya. tergantung selera kamu.

Selamat mencoba...!!!

1 komentar:

Silahkan tuliskan komentar anda...!!