Alert Message Html Css Codepen

4 min read Jun 28, 2024

Alert Message dengan HTML, CSS, dan CodePen

Artikel ini akan memandu Anda membuat pesan alert yang menarik menggunakan HTML, CSS, dan CodePen. Kita akan membuat pesan alert sederhana yang bisa Anda sesuaikan untuk kebutuhan Anda.

1. HTML (Struktur)




  Alert Message
  



  
    × 
    Perhatian!  Anda berhasil menyelesaikan tugas.

Penjelasan:

div class="alert": Ini adalah wadah utama untuk pesan alert.
span class="closebtn": Elemen ini digunakan untuk tombol close.
onclick="this.parentElement.style.display='none';": Ini adalah JavaScript sederhana yang menyembunyikan alert saat tombol close diklik.
<strong>Perhatian!</strong>: Ini adalah judul atau teks penting dalam pesan alert.
Anda berhasil menyelesaikan tugas.: Ini adalah teks pesan utama.

2. CSS (Styling)

.alert {
  padding: 20px;
  background-color: #f44336; /* Merah */
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
  border: 1px solid #f44336;
  border-radius: 5px;
  width: 30%;
  margin: auto;
  position: relative;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

Penjelasan:

background-color: #f44336;: Warna latar belakang (merah). Anda bisa mengubahnya sesuai kebutuhan.
color: white;: Warna teks.
opacity: 1;: Transparansi (1 = tidak transparan).
transition: opacity 0.6s;: Efek transisi saat menyembunyikan alert.
border: 1px solid #f44336;: Garis tepi alert.
border-radius: 5px;: Membulatkan sudut alert.
width: 30%;: Lebar alert.
margin: auto;: Menetapkan alert di tengah secara horizontal.
position: relative;: Agar kita bisa meletakkan elemen lain di dalam alert secara tepat.

3. CodePen

Buka CodePen:
Buat pen baru.
Salin kode HTML dan CSS yang telah Anda buat ke CodePen.
Atur Result untuk menampilkan alert.

4. Sesuaikan

Anda bisa menyesuaikan tampilan alert Anda:

Warna: Ubah background-color untuk mengubah warna latar belakang.
Teks: Ubah konten teks dalam <div class="alert">.
Ukuran: Atur width untuk menyesuaikan lebar alert.
Posisi: Gunakan properti CSS seperti position, top, left untuk mengatur posisi alert.

Contoh Variasi

Alert Sukses: Gunakan warna hijau untuk pesan sukses.
Alert Peringatan: Gunakan warna kuning untuk pesan peringatan.
Alert Kesalahan: Gunakan warna merah untuk pesan kesalahan.

Tips:

Anda bisa menambahkan animasi CSS untuk efek yang lebih menarik.
Gunakan JavaScript untuk menambahkan lebih banyak interaksi pada alert.

Dengan menggunakan HTML, CSS, dan CodePen, Anda dapat membuat pesan alert yang stylish dan informatif untuk situs web Anda.