Cara Membuat Efek Tulisan Dengan CSS Text Shadow Keren !!!

MP4U - Cara Membuat Efek Tulisan Dengan CSS Text Shadow Keren !!! - Membuat efek teks bayangan sebenarnya tidaklah begitu sulit untuk dilakukan .. karena untuk menciptakan efeknya .. Anda cukup bermain dengan CSS TEXT SHADOW .. semua pengaturan untuk membuat efek teks dengan berbagai model dan warna .. anda cukup mengatur nilai value dari kode text shadow .. sehingga offset sumbu (y) dan (x) dapat kita bentuk dan kita sesuaikan dengan keinginan ..

Baca Juga : Cara Buat Efek Text Shadow Animasi Dengan CSS Keren !!!

Berbagai koleksi pilihan Efek Teks Bayangan Dengan CSS Text Shadow yang dapat anda jadikan sebagai referensi buat model Judul blog anda .. supaya terlihat semakin menarik dan keren .. seperti Contoh - Contoh Nya di bawah ini ..

1. Contoh Efek Shadow | ( A )

MP4U


BY :


OCHA

Code CSS Text Shadow | ( A )

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

Gimana .. keren kan ?? itu masih belum seberapa .. karena masih banyak yang jauh lebih keren .. seperti apa hasilnya ?? lihat aja di bawah ini .. dan ini Efek teks yang paling saya suka . karena desain tampilan style-nya terkesan seperti ukiran relief .. Sedangkan pada warna saya menggunakan hijau gelap pada bayangan teks yang sama dengan warna teks aslinya .. sehingga seakan membuat teks timbul ( Teks Emboss ) ..

2. Contoh Text Shadow ( Efek Emboss ) | ( B )

MP4U


BY :


OCHA

Code CSS Text Shadow ( Efek Emboss ) | ( B )

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

3. Contoh Text Shadow Garis Sisi | ( C )

MP4U


BY :


OCHA

Code CSS Text Shadow Garis Sisi | ( C )

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

4. Contoh Text Shadow ( Efek Tiga Dimensi » Versi 01 ) | ( D )

MP4U


BY :


OCHA

Code CSS Text Shadow ( Efek Tiga Dimensi » Versi 01 ) | ( D )

text4 h2 {
font-weight:680px;
font-size:35px;
background:#f9f9d7;
color:#9a9d0b;
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;
}

5. Contoh Text Shadow ( Efek Tiga Dimensi » Versi 02 ) | ( E )

MP4U


BY :


OCHA

Code CSS Text Shadow ( Efek Tiga Dimensi » Versi 02 ) | ( E )

text5 h2 {
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;
}

gimana sekarang ?? sangat keren - keren bukan ?? .. tapi itu juga masih belum seberapa keren lho .. karena admin MP4U .. masih punya 2 lagi text shadow yang keren banget .. mau tau seprti apa ?? .. biar gk penasaran .. yuk simak dulu penjelasan nya di bawah ini ..

untuk text shadow berikut nya .. admin buatkan dengan gaya text meyala .. atau light efek .. Pada Light efek teks ini besaran angka value pada deret bayangan sama besar saat menambakhan tingkat ketajaman BLUR .. dengan tambahan sedikit demi sedikit pada efek bayangan teks aslinya .. jika warna teks putih maka latar belakang kita ubah menjadi hitam .. dan nilai offset sumbu (y) menjadi nol (0) .. sehingga anda akan dapat menghasilkan efek teks menyala seperti berikut ..

6. Contoh Text Shadow ( Efek Menyala » Versi 01 ) | ( F )

MP4U


BY :


OCHA

Code CSS Text Shadow ( Efek Menyala » Versi 01 ) | ( F )

text6 h2 {
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;
}

wiihhh .. tambah keren aja bukan ?? sangat cocok dan bagus jika sobat terapkan pada judul blog .. dengan gaya - gaya lampu menyala .. background hitam .. text putih dan sentuhan shadow warna kuning menyala .. ini bukan sebuah gambar yang sering kali sobat temui pada software maupun editor photo yang biasa nya suka ada penambahan gaya text menyala seperti itu .. melainkan ini text murni yang di hasilkan oleh CSS .. keren nya bukan main - main ya :D .. tapi itu juga masih belum seberapa lho guys .. di bawah ini admin kreasikan menjadi lebih keren dengan gaya seperti api menyala lho .. penasaran seperti apa ?? .. lihat aja dibawah ini :D

7. Contoh Text Shadow ( Efek Menyala » Versi 02 ) | ( G )

MP4U


BY :


OCHA

7. Contoh Text Shadow ( Efek Menyala » Versi 02 ) | ( G )

text7 h2 {
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;
}

eumm .. makin keren aja ya .. cuma dengan CSS bisa menghasilkan berbagai macam gaya Text yang keren .. menurut mu keren apa nggk nih ?? .. dan masih kurang apa udah ?? .. sebagai tambahan aja ya .. admin masih punya 1 gaya lagi .. text shadow yang gk kalah keren nya dari semua yang ada di atas .. mau tau seprti apa dan sekeren apa ?? .. lihat aja sendiri dibawah ini :D .. dengan gaya - gaya rainbow gitu dweh .. efek - efek pelangi biar lebih berwarna gitu lho guys :D

8. Contoh Text Shadow Pelangi | ( H )

MP4U


BY :


OCHA

Code CSS Text Shadow Pelangi | ( H )

text8 h2 {
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;
}

Nah, itulah tadi mengenai Cara Membuat Efek Tulisan Dengan CSS Text Shadow Keren !!! yang dapat Admin MP4U Berikan .. Semoga Bermanfaat dan sebagai referensi buat pembaca semua nya .. untuk berkreasi menciptakan text - text yang keren dengan sentuhan - sentuhan gaya shadow ( tekt bayangan ) .. yang tentunya jauh lebih keren dari apa yang Admin MP4U Ciptakan ini :D ..

Baca Juga :

• Cara Membagi Postingan Di Blogspot Menjadi Beberapa Halaman ( Beberapa Bagian )

Source :

• Cara Buat Text Shadow Untuk Judul Blog Keren !!!

Tag : #Cara, #Cara Buat, #Cara Membuat, #Cara Ngebuat, #Cara Bikin, #Cara Membikin, #Cara Bikinin, #Shadow, #Rainbow, #3D Efek, #Text 3D, #Text Shadow, #Text Rainbow, #Cara Membuat Efek Tulisan Dengan CSS Text Shadow Keren !!!