Cara Membuat Bingkai Foto dengan CSS3
Bingkai image adalah sebuah sebuah hiasan yang betul-betul populer, terutama bikin para remaja yang ingin menghias image dan memajang disudut rumah bingkai ialah alternatif utama yang mesti digunakan. Dengan kecanggihan teknologi ketika ini kalian dapat membangun bingkai di laman terutama bikin kalian yang suka posting galeri image, dengan CSS3 kalian dapat membangun sebuah tampilan bingkai image, berikut ialah panduan bagaimana Cara Membuat Bingkai Foto dengan CSS3. Simak strategi nya berikut ini.
Sebelum memulai praktek, kalian wajib menyiapkan bahan-bahan berikut ini.
Dapat pun dengan image masing-masing kalian, dan setelah seluruh bahan terdapat, langkah berikutnya ialah tahapan menuliskan sintak-sintak berikut HTML5 dan CSS3.
Pertama-tama ketikan sintak HTML5 berikut selaku struktur awal dari bingkai image yang akan kita bikin.
<body>
<img class=mat src=http://www.hikingston.co.uk/uploads/images/wedding/wedding_22.jpg>
</body>
Di bagian sintak img src silahkan kalian isikan image yang telah disediakan tadi, kemudian berikutnya kita akan desain image diatas dengan sintak CSS3 bagi membangun bingkai di image serta efek lain nya.
img.mat {
width: 50%;
height: auto;
display: block;
margin: 4rem auto;
padding: 10%;
background-color: #A67B5B;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cardboard.jpg');
background-repeat: no-repeat;
background-size: cover;
border: 6px double #483C32;
box-shadow: 0 0 0 50px rgba(244, 240, 236, 0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0, 0, 0, 0.8) inset;
outline: 2px solid #333;
outline-offset: 0px;
}Setelah seluruh sintak HTML dan CSS3 kalian ketikan seluruh, silahkan simpan file dengan format .html, dan silahkan kalian buka di browser masing-masing dan lihat hasilnya. Kalian pun dapat modifikasi sintak diatas bagi mengatur ketebalan border dan yang lain nya di bingkai image nya, di bagian sintak berikut.
border: 6px double #483C32;
box-shadow: 0 0 0 50px rgba(244, 240, 236, 0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0, 0, 0, 0.8) inset;
outline: 2px solid #333;
outline-offset: 0px;
Sintak diatas kalian dapat ubah nilai dari masing-masing properti CSS3 sesuai keinginan. Bagi lebih jelasnya kalian pun dapat lihat hasil panduan diatas di link dibawah ini.
Baiklah sekianlah panduan dan pembahasan mengenai bagaimana Cara Membuat Bingkai Foto dengan CSS3. Semoga bermanfaat dan selamat mencoba 🙂
Sumber https://kursuswebsite.org
