Membuat Drop Cap menggunakan CSS

0 komentar
Berikut bagaimana cara membuat dropcap dengan menggunakan css.




<p><span>Lspan>orem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo. Donec nibh lectus, vulputate a aliquet quis, sollicitudin eget metus. Nullam quis tellus nibh. Praesent fermentum risus sit amet turpis eleifend dapibus. Duis tellus leo, tempor sit amet ultricies viverra, mollis at quam. Suspendisse hendrerit sagittis risus nec faucibus. Nam urna magna, porta vitae tincidunt sit amet, blandit eget diam. Vivamus a ornare augue. Vivamus sapien sem, facilisis vitae molestie eget, tempus ut augue. Sed suscipit facilisis mi, eu laoreet est gravida eu. Nulla et arcu quam, pellentesque adipiscing felis. Nam pretium augue sed sapien malesuada tempor. Nulla facilisi. Donec eu tempor mi. Sed congue dolor risus, et ornare massa.p> 
>




p + span {
        display:block;
    float:left;
    font-family:Georgia;
    font-size: 310%;
    font-weight: bold;
    line-height: 90%;
    margin-right: 6px;
    margin-bottom:-2px;
    margin-top: 7px;
}
>
Jika anda menggunakan css3, anda bisa menggunakan first-letter




7

p:first-letter {

    display:block;
    float:left;
    font-family:Georgia;
    font-size: 310%;
    font-weight: bold;
    line-height: 90%;
    margin-right: 6px;
    margin-bottom:-2px;
    margin-top: 7px;
}
>
NB : Tidak semua browser support dengan css3. So be careful. Hehe.. Sampai disini gan!

Labels