Create heading style with effect using CSS3

Lightbox demo dan tutorial

Link di atas adalah salah satu contoh penggunaan heading style with effect yang dimanfaatkan sebagai sebuah link. Jika anda mengarahkan cursor pada link di atas maka akan terlihat effek yang tercipta berupa opacity effect yang digabungkan dengan css3 transition. Pada dasarnya heading style with effect dapat digunakan tidak hanya sebagai sebuah pembentuk/box bagi judul/title sebuah paragraf saja namun bisa dimanfaatkan untuk banyak hal dalam blog. Termasuk di bawah ini, yang digunakan sebagai sebuah judul/title.

Kode CSS Heading Style with Effect

Kode CSS :

h4.GRheading{
        font-family:Times New Roman; 
        font-size:18px; 
        font-weight:bold; 
        padding:5px  0; 
        border-bottom:1px solid #aaa; 
        border-left:30px solid #aaa; 
        opacity:0.7;
        filter:alpha(opacity=70);
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
}
h4.GRheading:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        border-color:#900;
}
h4.GRheading,h4.GRheading span{
        transition:0.8s linear;
        -o-transition:0.8s linear;
        -moz-transition:0.8s linear;
        -webkit-transition:0.8s linear;
        -ms-transition:0.8s linear;
}
h4.GRheading span{
        border-top-right-radius:5px;
        padding:3px 10px;
        margin-left:3px;
        margin-top:-5px;
        display:block;
        color:#900;
        border-top:3px solid #888;
        border-right:2px silid #888;
        background:#555;
}
h4.GRheading:hover span{
        color:#orange;
        background:#aaa;
}

Tutorial :

Back to tutorial » Heading style with effect