Efek Bayangan Pada Teks Dengan Css

Sebenarnya mau posting tentang efek bayangan pada teks sudah lama tapi saya lupa scriptnya,dan akhirnya saya coba membuka lagi drive D dikomputer saya,karna kebetulan banyak banget trik-trik html dan css,setelah beberapa lama mencari akhirnya ketemu,terus jadi kepengen posting di blog.
Efek bayangan atau shadow memang sangat mempercantik blog,dengan adanya banyangan blog kita jadi terlihat unik dan keren,tapi tentu saja kembali kepada sipengguna blogger tersebut,jadi seperti ini,kalau si blogger tersebut membuat efek bayangan disetiap teks posting tentu saja tulisan dalam postingan dia akan sulit terbaca,jadi saya sarankan untuk membuat efek bayangan ini di judul blog atau judul artikel saja,seperti blog saya,saya hanya memberikan efek bayangan di judul artikel saja.
Langsung praktekin saja lah takut nanti saya lupa lagi.hehe

Sebenarnya kalau ingin memberikan efek banyangan pada teks anda hanya perlu menambahkan kode seperti dibawah ini.

text-shadow:1px 1px 1px #000000;
keterangan : untuk efek bayangan yang berwarna hitam dan ketebalan 1 pixel,tapi bisa anda tambahkan lagi.

Kita contohkan untuk sebuah judul blog saja,jadi disini kita akan membuat efek bayangan pada judul blog,seperti yang tadi saya sebutkan diatas anda hanya perlu meletakan kode untuk efeknya tersebut,kurang lebihnya seperti ini.

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
text-shadow:1px 1px 1px #006400;
}

Tetapi bukan hanya judul blog saja,anda juga bisa menambahkan efek banyangan ini pada judul-judul utama dari blog anda,seperti pada judul sidebar, judul artikel, komentar,tapi kalau anda bingung dengan kode-kode tersebut saya akan jelaskan dh..
  • Kode yang dibawah ini adalah untuk menambahkan efek bayangan pada judul sidebar.
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor; text-shadow:1px 1px 1px #006400; }

  • Kode yang berikut ini untuk efek di judul artikel blog anda.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor; text-shadow:1px 1px 1px #006400; }

  • Dan kode yang satu ini untuk bayangan pada komentar,kalau tidak salah yang bertuliskan poskan komentar.
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor; text-shadow:1px 1px 1px #006400; }

Untuk menambahkan efek-efek seperti yang saya sebutkan anda hanya perlu mencari judul dari kode tersebut,contohnya jika saya ingin menambahkan efeknya pada judul artikel berarti saya hanya perlu mencari kode  .post h3 dan menambahkan kode untuk bayangan tersebut.
Ok bagaimana apakah sudah mengerti,atau apakah penjelasan saya yang membuat anda tidak mengerti..hehe
mungkin untuk para master blogger menambahkan efek-efek itu sangat mudah apalagi sangat mengerti apa itu bahasa HTML atau CSS..jadi untuk newbie sajalah seperti saya..

1 comments:


Anonymous said...

penempatan kodenya dimana brooow

:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:
:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Post a Comment

Terima kasih bila anda sudah memberikan komentar,karna komentar anda sangat berguna bagi saya.Tapi jika Spam saya mohon maaf karna akan saya hapus...
Terima kasih