Jumat, 21 Juni 2013

Animasi Gambar Buat Dropcap Artikel


B
eberapa tampilan artikel memang sudah banyak yang pasang cara ini coba sobat lihat pada awal penulisa ,disitu nampak fonts yang lebih besar dari pada yang lain nya ,Nah penulisan seperti itulah yang akan kang Mahfid Posting pada pertemuan kali ini (disini jam menunjukkan 00.15 WIB)penulisan jenis tersebut sering kita sebut penulisan jenis DROPCAP atau juga penulisan Koran ,nah oleh karena penulisan jenis tersebut sudah sering kita lihat bahkan kita pasang ,maka dari itu kang mahfid akan membuat penulisan jenis Dropcap akan tetapi kali ini kang mahfid akan memberi sedikit sentuhan animasi,Animasi Gambar Buat Dropcap Artikel Untuk cara membuatnya sangat lah mudah kita hanya menambahkan sedikit sentuhan CSS3 Key frame ,silahkan sobat loggin dulu ke blogger lalu sobat masuk ke pengeditan HTML jangan lupa save template dulu untuk jaga jaga jika terjadi kesalahan saat pengeditan nantinya . Cari kode ]]></b:skin Lalu sobat taruh kode berikut tepat di atas kode ]]></b:skin> berikut kode nya :

Kode CSS

.koran{float: left; color: #903; font-size: 75px; line-height: 60px; padding-top:5px; padding-right: 8px; padding-left: 3px; font-family: Georgia;background: url(http://www.angelfire.com/sk/sonicknuckles/images/amy.gif )no-repeat bottom ;animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */}
@-moz-keyframes mymove /* Firefox */
{
0% {color:red}25% {color:blue}75% {color:yellow}100% {color:green}

}
Setiap sobat akan melakukan penulisan artikel silahkan gunakan kode di bawah ini :

Kode penulisan pada modus HTML

<div class="koran">L</div>
sobat lihat huruf L yang berwarna hijau huruf itulah yang nantinya akan menjadi besar sedang untuk penulisan selanjutnya setelah text penutup
Semoga penjelasan saya tadi dapat di mengerti jika ada pertanyaan silahkan saja sobat ajukan di kotak komentar
Original Article By  

2 Comment:

  1. nyimak dulu mas, saya agak bingung kalau masalah kode2 css yang ada di template hehe... terima kasih tipsnya...


    BalasHapus
    Balasan
    1. silahkan gan, makasih atas kunjunganya....keep on blogging,,,,

      Hapus