CSS Membuat Sudut Melengkung Round Corner

CSS Membuat Sudut Melengkung Round Corner - Sebagian orang suka dan senang dengan variasi yang di tampilkan pada postingan, termasuk saya juga menyukai hal seperti ini. Sebaiknya kamu membuka postingan ini dengan google chrome karena akan terlihat berbeda jika anda melihat postingan ini dengan Aurora atau Mozilla.

CSS Round Corner pada Gadget Home

CSS 3 memberi kesan halusCSS 3 Smooth

CSS 3 Efek Border & ShadowCSS 3 Shadow

CSS 3 Hover TextCSS 3 Hover

Jika anda ingin memakainya bisa lihat script dibawah ini.
Script CSS :

<style>
.module h2 {
  background-color: #BBB;
  border-radius: 20px 0 0 20px;
  color: #FFF;
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a { 
    border-left: 5px solid #101921;
    color: #101921;
    float: right;

    font-size: 18px;
    text-decoration: none;
    text-shadow: none;

    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #101921;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}
.module.blue h2 a {background-color: #A2D6EB;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D6EB;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.green h2 a {background-color: #9CF1A4;}
.module.green h2 a:hover {background: #BBFFCF;}
.module.green h2 a:after {border-right: 6px solid #9CF1A4;}
.module.green h2 a:hover:after {border-right-color: #BBFFCF;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}
</style>

Script HTML nya berikut ini :

<div class="module blue">
<h2>
CSS Round Corner pada Gadget <a href="http://fidianalestari.blogspot.com/" target="_blank">Home</a></h2>
</div>
<div class="module yellow">
<h2>
CSS 3 memberi kesan halus<a href="http://fidianalestari.blogspot.com/">CSS 3 Smooth</a></h2>
</div>
<div class="module green">
<h2>
CSS 3 Efek Border &amp; Shadow<a href="http://fidianalestari.blogspot.com/">CSS 3 Shadow</a></h2>
</div>
<div class="module red">
<h2>
CSS 3 Hover Text<a href="http://fidianalestari.blogspot.com/">CSS 3 Hover</a></h2>
</div>

Warna kuning gantilah dengan URL postingan atau terserah kamu.
Bisa anda modif menyesuaikan warnanya.

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.