Nah kita sering lihat Massage Box atau peringatan di beberapa
web Peringatan itu ada yang berbentuk pop up sederhana bawaan java script atau
pun bukan .. nah kali ini kita akan berbagi atau membahas cara membuat massage box atau allert
menggunakan Css, sbenernaya ada cara gampang membuat tampilan alert lebih hidup
tanpa kita perlu susah susah membuat script css yaitu dengan menggunakan
bootstrap ataupun sejenisnya .
Namun kali ini kita akan
blejar cara membuat massage box agar lebih hidup dengan membuat Css
Sendiri sebenarnya cara ini simple dan ga ribet langsung aja Lets, the code
Langkah Pertama :
Kita buat Cssnya terlebih dahulu
<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>
Langkah Ke dua :
Kita buat code untuk menampilkan allert tersebut
<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>
Sampai di sini sudah selesai tinggal kita coba
nah untuk codenya silahkan anda download di sini mungkin sekian postingan kali
ini semoga bermafaa
0 Komentar