Mungkin anda pernah melihat pesan notif atau warning dalam bentuk box yang memiliki tampilan yang enak dipandang mata?.. mungkin Anda berpikir, wah pasti bikinnya pake jQuery?.. atau mikir bikinnya pasti ribet.. eiitss.. ga usah jauh-jauh mikirnya, pada dasarnya itu adalah karena ulah si CSS.. masa iya? Sebenarnya message box disini terletak pada kode css, jadi bukan ada teknik khusus tapi tepatnya adalah desain khusus untuk message box. Bisa Anda ikuti skrip berikut dengan diberi nama index.html
Skrip index.html
<html>
<head>
<title>Message Box</title>
<style>
.n_ok{
background: #F6FFEC;border:
1px solid #89B755;
border-radius: 3px;
margin: 20px 15px;
padding: 1px;
}
.n_ok p{
background: #DFF6C5 url(i_ok.png) no-repeat 4px center;
color: #496528;
margin: 0;
padding: 7px 25px;
}
.n_warning{
background: #FFF7CE;
border: 1px solid #D9C65B;
border-radius: 3px;
margin: 20px 15px;
padding: 1px;
}
.n_warning p{
background: #FDF0B1 url(i_warning.png) no-repeat 4px
center;
color: #756B30;
margin: 0;
padding: 7px 25px;
}
.n_error{
background: #FDE4E1;
border: 1px solid #B16A6C;
border-radius: 3px;
margin: 20px 15px;
padding: 1px;
}
.n_error p{
background: #F4CAC6 url(i_error.png) no-repeat 4px center;
color: #630E18;
margin: 0;
padding: 7px 25px;
}
</style>
</head>
<body>
<div class="n_ok"><p>Message box success.</p></div>
<div class="n_warning"><p>Message box warning.</p></div>
<div class="n_error"><p>Message box error.</p></div>
</body>
</html>
Nah, pada kode diatas, terdapat pemanggilan nama file gambar, adapun file gambarnya bisa Anda save saja, gambarnya ada dibawah kok.. cukup klik kanan dan Save Image As..
Nah, hasilnya bisa Anda lihat nih.. Jreng.. Jreng..
Mantab bukan?.. tanpa ada jquery ataupun semacamnya, cukup perpaduan antara html dan css saja.. lebih ringan bukan?.. semoga tutorial kali ini dapat memberikan manfaat untuk Anda..
Seluruh source code ini, bisa Anda download disini.
