CSS kullanarak alert mesajı oluşturmak için aşağıdaki adımları izlemek gerekmektedir:
- HTML Yapısı: Alert mesajını içeren bir
div
elemanı oluşturulur 13. - Temel Stil:
.alert
sınıfı kullanılarak genel stiller tanımlanır; bu sınıf, padding, border-radius ve font-size gibi özellikleri içerir 1. - Özel Sınıflar:
.success
,.warning
,.error
gibi sınıflarla belirli arka plan, kenarlık ve metin renkleri atanır 1. - Mesaj Ekleme: Her alert kutusu, türüne uygun bir mesaj görüntüler 1.
- Responsive Tasarım: Relative birimler ve scalable font boyutları kullanılarak alert'lerin farklı ekranlarda uyum sağlaması sağlanır 1.
Örnek CSS kodu:
.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; font-size: 16px; font-weight: bold; } .success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; } .warning { color: #856404; background-color: #fff3cd; border: 1px solid #ffeeba; } .error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; } ``` [1](https://www.geeksforgeeks.org/how-to-create-an-alert-message-box-using-css/).
5 kaynaktan alınan bilgiyle göre: