Cara Membuat Kotak Pemberitahuan Dengan CSS3

Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat artikel. Tadi di jalan, ga sengaja lihat papan..Coution...ga jauh dari situ juga ada papan, Pemberitahuan, sedang ada perbaikan jalan. Langsung dari otak kanan ke otak kiri terus turun ke dengkul munculah ide ini. Menurut saya, ini penting ga penting, penting jika kita ingin menyampaikan sesuatu kepada visitor yang jelas dan langsung terbaca. Tapi ga penting juga kalau buat main - main. Nah, bagi yang butuh bisa deh, pakai ini :

Langkah 1. CSS3, Notification Box

.alert-box {
    color:#555;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    padding:10px 10px 10px 36px;
    margin:10px;
}

Sekarang lihat ini:

• color : #555; – warna teks
• border-radius:10px; – jarak border radius
• font-family:… – jenis huruf, kesukaan anda
• padding:10px 10px 10px 36px; – padding untuk atas bawah kanan kiri
• margin:10px; – jarak sekeliling

.alert-box span {
    font-weight:bold;
    text-transform:uppercase;
}

Diatas, kenapa?karena kita gunakan span.

Langkah 2, CSS3 Alert

.error {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}

Masalah url gambar bisa anda cari di google yang anda suka.

Langkah 3, CSS3 Alert

<div class="alert-box error"><span>error: </span>Pesan Salah Anda.</div>
<div class="alert-box success"><span>success: </span>Pesan Sukses Anda.</div>
<div class="alert-box warning"><span>warning: </span>Pesan Larangan Anda.</div>
<div class="alert-box notice"><span>notice: </span>Pesan Pemberitahuan Anda.</div>

Okey, langsung donwload gambarnya...

Download Image