Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Rabu, 21 April 2010

Membuat Text Shadow

Kategori : ,
Membuat Text ShadowSudah lama tidak memosting tentang trik karena sibuk mengurusi tugas sekolah jadi saya memosting informasi yang tidak harus memakai pikiran dan tidak untuk mencobanya hanya untuk di baca lalu di terbitkan deh di blog saya. Banyak teman-teman blogger mengirim email ke saya untuk memosting tentang trik css3 namun bukannya saya tidak mau teman melainkan saya belum bisa Bermain CSS3, maaf iya tapi untuk ke depannya saya akan belajar tentang css3 dan saya akan membagikannya kepada teman-teman semua.

Untuk postingan kali ini saya akan menjelaskan Membuat Text Shadow dengan mudah dan simple (katanya g bisa css3 qo sudah mulai membahas?) Joget. Mungkin sebagian teman-teman semua sudah tahu tentang Text Shadow, kalau di artikan dalam bahasa Indonesia yaitu kata yang mempunyai bayangan seperti yang ada di blog ini.

Untuk Template yang saya pakai, saya menggunakan Text Shadow dan Box Shadow pada bagian komentar. nah untuk melihat Demo yang lebih jelas saya sarankan sobat melihat ke bawah ini


TEXT SHADOW CSS3 - TIMBUL

kode:

h1 {background:#FF6C17; font-size:24px; text-shadow:2px 2px 2px #A6250C; color:#FFE9C7;}




TEXT SHADOW CSS3 - TENGGELAM

kode:

h1 {background:#FF6C17; font-size:24px;text-shadow:1px 1px 1px #FF9924; color:#823210;}



TEXT SHADOW CSS3 - 3D

kode:

h1 {background:#FF6C17; font-size:24px; text-shadow:-1px -1px 1px #FF9924, 1px 1px 1px #A6250C; color:#FF6C17;}


Demo sumber : (Choen)

Nah setelah melihat demonya marik kita buat di template kita dengan menambahkan sedikit kode css3 yang terbaru ini :
  1. Seperti biasa login ke blogger
  2. Masuk ke Tata Letak => Edit HTML
  3. disini saya akan menjelaskan bagaimana Membuat Text Shadow di link
  4. sekarang cari kode yang hampir mirip seperti kode di bawah ini biasanya kode ini terletak di atas


    a:link {
    color:#4D4DFF;
    text-decoration:none;
    }


  5. Setelah itu tambahkan kode text shadow yang sudah sobat pilih dari demo di atas ke dalam kode tersebut contoh


    a:link {
    color:#4D4DFF;
    text-decoration:none;
    text-shadow:-1px -1px 1px #ffffff, 1px 1px 1px #0000ff; /* Masing-masing kode warna bisa sobat ubah sesuai keinginan /*
    }


  6. Setelah itu selesai deh dan sobat bisa melihat hasilnya
  7. Selesai
Bagaimana Mudah bukan Membuat Text Shadow? mungkin untuk kedepannya saya akan menjelaskan tentang Trik CSS baik yang versi jadul maupun versi terbaru seperti CSS3 ini, Mungkin hanya sekian yang bisa saya sampaikan saya akhiri. Terima Kasih dan Happy Blogging nananana.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

9 Komentar untuk Membuat Text Shadow

keren sob.. postingan ini sudah lama ku cari.. ahirnya ketemu di blog sobat..

keren ! ! !
langsung dicoba !
tp dijamin berhasil ?
wkwkwkwkw
oke" di coba

Mantap dan bagus untuk dipelajari.

Terima kasih

kayanya keren nih bolehlah d coba, to kayanya kalau d sedoe bukin pembaca jd g nyaman deh

emm bagus nih sob. kapan2 aku coba deh. thanx

wah bagus juga nich nnt praktek ah ^^ http://sixooninele.blogspot.com

wah bisa jadi tambah atraktif kalo gitu ya sob.

maaf kawan baru bisa berkunjung.

wah mantab banget infonya gan....!!

Keep blogging and sharing yah, Ane pasti dukung terus nih blognya keren sih....!!!

Petamax dan pertama kali sob