Gürkan Özsoy Blog

CSS Alert Box

Web sitelerinize ekleyeceğiniz iki güzel uyarı kutusu örneği yazacağım. Bunlardan ilkini bir yerden almıştım fakat nereden aldığımı hatırlamadığım için linkini ekleyemeyeceğim. Diğeri ise bana ait. İlk önce benim burada sık kullandığım tasarımı vereyim.

Bu iki tasarım Font Awesome 6.5.1 ile uyumludur. İkisini aynı anda kullanmayın.

Alert box 1

Kodları ve demoyu görmek için tıklayın .

Hangi kutuyu kullanacaksınız HTML kodunu ona göre çoğaltabilirsiniz. Örneğin Info kutusu kullanacaksanız HTML koddaki note--success yerine note--info yazacaksınız. Font awesome sitesinden bir tane info ikonu seçersiniz.

Bu da bir başka örnek.

Alert box 2

Kodları ve demoyu görmek için tıklayın .

Çıktı