Membuat Photo Frame Sederhana Dengan Border-Radius

Pada CSS3 terdapat sebuah properti yang dapat dimanfaatkan untuk membuat kreasi photo frame, property tersebut adalah border-radius. Properti border-radius adalah sebuah properti yang menentukan derajat kelekungan dari sebuah border. Aturan penggunaannya adalah sebagai berikut :

border-radius: top-left top-right bottom-right bottom-left;

Adapun contoh cara penggunaannya :

border-radius: 20% 0% 20% 0%;

Itu artinya diberikan derajat kelekungan 20% untuk top-left, 0% untuk top-right, 20% untuk bottom-right dan 0% untuk bottom-left. Misalkan kita ingin memodifikasi photo-photo berikut ini seperti gambar di atas.

gambar1 gambar2 gambar3 gambar4

Berikut ini kode HTML dan CSS lengkap untuk membuat frame photo seperti contoh gambar dibagian atas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frame Photo</title>
    <style>
        li{
            display:inline-block;
        }
        .frame1{
            border : 5px solid gray;
            border-radius: 20% 0% 20% 0%;
            overflow: hidden;
        }
        .frame2{
            border : 5px solid black;
            border-radius: 50% 20% 40% 30%;
            overflow: hidden;
        }
        .frame3{
            border : 5px solid green;
            border-radius: 0% 50% 0% 50%;
            overflow: hidden;
        }
        .frame4{
            border : 5px solid yellow;
            border-radius: 0% 50% 50% 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h1>Photo Frame</h1>
    <h3>Membuat frame photo dengan teknik border-radius</h3>
    <ul>
        <li class="frame1"><img src="gambar1.jpg"></li>
        <li class="frame2"><img src="gambar2.jpg"></li>
        <li class="frame3"><img src="gambar3.jpg"></li>
        <li class="frame4"><img src="gambar4.jpg"></li>
    </ul>
</body>
</html>

Selamat mencoba dan mengembangkan kreatifitas.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


Block AdBlock - Powered by Admiral