Hai berjumpa lagi dengan saya Boy Panjaitan,
kali ini saya akan berbagi tutorial mengenai CSS
Dibeberapa website banyak kita temukan beberapa element yang memiliki bentuk menarik dan estetis. Namun tak jarang kita ditipu, karena ternyata hal tersebut tidak murni suatu elemen, hanya saja pembuatnya menggunakan media gambar sebagai background dan kita mengira bahwa itu adalah elemen asli html.
Contoh nya seperti gambar berikut
Bagaimana jika kita membuatnya bahkan tanpa bantuan satu image sekalipun?
Pertama kita membutuhkan framework bootstrap yang akan mengatur responsive layout website kita anda bisa mendownloadnya di http://www.getbootstrap.com seperti biasa tautkan file css nya, kita hanya membahas layout disini jadi tidak perlu menggunakan javascript.
style.css adalah script css saya, dan disini saya hanya akan menggunakannya untuk design hurf saja jadi anda tidak perlu menggunakannya
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
kemudian kita memerlukan beberapa styling pada elemen yang akan kita buat
<style>
.elemen {
background:#ff6347;
min-height:300px;
border-bottom:5px solid #0c3c3d;
padding:30px;
text-align:center;
}
.icon {
position:relative;
margin:auto auto 0 auto;
bottom:-200px;
background:#0c3c3d;
text-align:center;
width:60px;
height:60px;
color:#fff;
font-size:30px;
border:5px solid #fff;
border-radius:50px;padding:10px 0 20px 0;
}
body { padding:20px; margin:0;}
</style>
Keterangan :
- semua tag meta ditujukan untuk responsive layout kita
- kita menggunakan styling langsung pada page yang sama agar tidak terlalu ribet untuk dijelaskan
- untuk styling elemen saya rasa kita semua sudah tau, karena properti css yang digunakan bukan lah properti yang rumit
- position relative digunakan agar bisa diatur lebih leluasa dan bebas
- kita menggunakan bottom pada class icon dalam nilai negatif, agar posisinya menjorok kebawah syarat penggunan properti bottom adalah harus position relative atau absolute dan fixed
- tag <span> yang ada didalam class icon adalah salah satu icon dari bootstrap jadi kita tidak perlu menggunakan gambar
border radius untuk membentuk sudut pada elemen icon
class lobster besar pada tag <span> itu adalah styling font yang saya ambil dari file css saya agar lebih terlihat indah
Maka full codenya akan terlihat seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
.elemen {background:#ff6347;min-height:300px;
border-bottom:5px solid #0c3c3d;padding:30px;
text-align:center;}
.icon {position:relative;margin:auto auto 0 auto;
bottom:-200px;background:#0c3c3d;text-align:center;
width:60px;height:60px;color:#fff;font-size:30px;
border:5px solid #fff;border-radius:50px;
padding:10px 0 20px 0;}
body { padding:20px; margin:0;}
</style>
</head>
<body>
<div class='elemen'>
<span class="lobster besar">Content Element</span>
<div class='icon'>
<span class='glyphicon glyphicon-chevron-down'></span>
</div>
</div>
</body>
</html>
Begini Tampilan Hasilnya
