• Cara Membuat Gambar Bulat dengan CSS



    Cara Membuat Gambar Bulat dengan CSS yaitu dengan membuat beberapa baris Code CSS saja, seperti di bawah ini.

    Mengunakan Border warna warni

    .bulat{
    border-radius:100em;
    opacity:0.5;
    border-top:2px solid #cf2031;
    border-right:2px solid #0f7dc8;
    border-bottom:2px solid #2eb31a;
    border-left:2px solid #eab823;
    width:160px;
    height:160px;
    }

    Tanpa Menggunakan Border

    .bulat{
    border-radius:100em;
    opacity:0.5;
    width:160px;
    height:160px;
    }

    Menggunakan Border 1 Warna

    .bulat{
    border-radius:100em;
    opacity:0.5;
    border:2px solid #ddd;
    width:160px;
    height:160px;
    }


    Jika sobat ingin menerapkannya di blogger, begini caranya
    Masuk ke Blogger => Template => Edit HTML
    Kemudian pastekan salah satu code CSS di atas sebelum tag </style>
    Kemudian save template.
    Dan setiap sobat menampilkan gambar maka cukup tambahkan class bulat, contohnya seperti ini

    <img class="bulat" src="LINK GAMBAR SOBAT" />

    Catatan :

    Untuk merubah ukuran gambar sobat tinggal mengganti value pada bagian width dan height namun ukurannya harus sama, jika width="120px" maka height juga harus 120px

    Selamat Mencoba...!!!

  • 0 komentar:

    Posting Komentar

    Powered by PLASA WEBSITE