Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Monday, September 25, 2017

Tutorial Efek CSS3 Rounded Corners Dan Shadows Pada Imej Di Entri Blogger



PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> 

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (CTRL + F) kod dibawah:
]]></b:skin>
6. Copy (CTRL+C) dan Paste (CTRL+V) salah satu code CSS dibawah sebelum kod ]]></b:skin> .

a) Efek 1 :

.post-body img {border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
b) Efek 2 :

 .post-body img {
background:#FFF; /* background color around the image */
padding:15px; /* space between border and image */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 0% 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
    c) Efek 3 :

     .post-body img {
    background:#FFF; /* the background color around the image */
    padding:15px; /* The Space Between Border and Image */
    border-radius: 50% 0; /* Rounded border */
    box-shadow: 0px 0px 15px #000; /* Shadow */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .post-body img:hover {
    border-radius:0; /* This removes the border roundness (value 0) */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }
    d) Efek 4 :

     .post-body img {
    box-shadow: 0px 0px 15px #000; /* Shadow */
    border-radius: 50%; /* Rounded border */
    border:0;
    padding:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .post-body img:hover {
    box-shadow: 0; /* With this we remove the shadow (value 0) */
    border-radius: 0; /* This removes the border roundness (value 0) */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }
    e) Efek 5 :

     .post-body img {
    border-radius: 45% / 20%; /* Rounded border */
    box-shadow: 0px 0px 15px #000; /* Shadow */
    padding:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .post-body img:hover {
    border-radius: 0; /* This removes the roundness of border (value 0) */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }

    7. Klik Preview template dan jikalau ok, klik Save Template


    Sumber https://faiz-tutorial.blogspot.co.id/

    Share on Facebook
    Share on Twitter
    Share on Google+

    Related : Tutorial Efek CSS3 Rounded Corners Dan Shadows Pada Imej Di Entri Blogger