התראה צפה
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 76 מתוך 76.
אתגר
קלבאתגר הזה, תשחזר התראה צפה שנראית כמו התמונה שלמטה (או עיצוב דומה). זהו תרגיל חזרה, ולכן תיישם את מה שלמדת על מיקום ב-CSS כדי למקם נכון את ההתראה ואת כפתור הסגירה שלה.
פעל לפי השלבים שלהלן כדי לעצב את ההתראה הצפה:
1. עצב את תיבת ההתראה:
- מקם אותה בקרבת ראש העמוד, בערך באמצע.
- הגדר רוחב קבוע והוסף מעט ריווח פנימי.
- השתמש בצבעים לבחירתך עבור הרקע, הגופן והגבולות, כדי ליצור סגנון התראה בולט.
- הוסף פינות מעוגלות וצל עדין כדי להבליט אותה.
2. עצב את כפתור הסגירה:
- השתמש ב-
position: absoluteכדי למקם את כפתור הסגירה בפינה הימנית העליונה של מיכל ההתראה. - בחר רקע ושנה את גודל הגופן.
- ודא שהוא נראה לחיץ ובולט על רקע הסביבה.
💡 נסה צבעים, ריווח ומיקום שונים כדי להשיג את העיצוב הרצוי!
נסו בעצמכם
<html>
<head>
<title>Floating Notification</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="notification">
<button class="close-btn">×</button>
<p>This is a floating notification! Click the "X" to close.</p>
</div>
</body>
</html>כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין