Cara Ngajieun Box ku Efek Poek-Caang (Fade Effect) CSS3

Panduan atawa tutorial (blogger & blogdetik) midamel box kalawan efek poek caang ieu tiasa dipake henteu ngan di blogger,nanging tiasa oge dipake di blogdetik.

Fade Effect anu tercipta ngaliwatan opacity effect sanaos mangrupa efek anu basajan pisan nanging dugi ayeuna saleresna mangrupa hiji efek anu seueur dilibatkeun dina sagala rupa desain/fungsi. Jabi midamel na cekap gampil,tak tiasa dipungkiri yen fade effect sanggem masihan pangaruh anu istimewa metot,leuwih lamun dikompakkeun kalawan efek-efek anu sanes.

CSS3 minangka hiji pengembangan anyar kode css masihan andil anu cekap ageung kanggo blogger kanggo ngembangkeun efek caang poek atawa fade efect ieu. Sagala rupa efek anu kawitna kedah diwangun ngaliwatan javascript kiwari sumawonten tak peryogi deui dipigawe. Ngeunaan kompabilitas css3? Urang tak deui peryogi deui kuwatir. Sagala rupa browser ageung saban detik na oge sok ngaronjatkeun kompabilitas maranehanana ka css3. Yah... margi kode css3 tak kenging henteu ahirna bade barobah kaayaan kode utami pembangun desain blog/website margi kesederhanaannya sarta kamampuhanana kanggo ngawangun sagala rupa desain animatif. Diwaktu ka hareup urang bade langkung ngarasakeun na sabot sadaya browser atos kompatible kalawan css3 animation.

Kode CSS Box Terang Gelap

.mybox{
        position:relative;
        display:block;
        width:200px;
        max-height:400px;
        background:#fff;
        color:#000;
        overflow:auto;
        padding:20px 15px;
        margin:20px 5px;
        border:2px solid #777;
        border-radius:6px;
        opacity:0.2;
        filter:alpha(opacity=20);
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}

xHTML

<div class="mybox">
Letakkan teks,image atawa anu lianna di dieu!
</div>

xHTML dengan tag p

<p class="mybox">
Letakkan teks,image atawa anu lianna di dieu!
</p>

Contoh xHTML

<div class="mybox">
<a href="http://www.thainudies.com/galleries/meandmyasian/kinky-and-hot-asian-babes/05.jpg" title="my photo"><img src="http://www.terzarepubblica.it/news_images/i1_articoli3259.jpg" width="200" height="150" style="float:left;margin:5px 10px 5px 0;padding:3px;border:2px solid #222;border-radius:6px;" /></a>Photo masa  ketika jadi lelaki tulen  kemudian tiba-tiba jadi perempuan cakep !!
</div>

Cara midamel Box kalawan Efek Caang - Poek

• Login ke Blogger
• Dasboard
• Design (Rancangan)
• Edit HTML
• Teangan kode ]]></b:skin>
• Tempelkeun kode CSS di luhur kode ]]></b:skin>
• Klik Save Template
• Gunakeun xHTML di halaman posting atawa di sidebar blog.

Mangga oge buka Tutorial sanes anu metot pisan sarta patut di turutan sampeyan sadaya. Akses ngaliwatan link handap ieu :

» Happy Blogging - mitrabewarasunda «