מיכל הטופס
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 51 מתוך 76.
אתגר
קלבשיעור הזה נגרום לטופס להיראות מובנה יותר ומושך יותר מבחינה חזותית.
פעלו לפי השלבים הבאים:
- החילו סגנונות על מכל הטופס כדי להבליט אותו. כתבו כלל CSS שמכוון לרכיב עם המחלקה
login-form.- הגדירו צבע רקע (לבן או כל צבע שנראה טוב).
- הוסיפו ריווח פנימי כדי שיהיה לתוכן מקום בפנים.
- עגלו את הפינות.
- החילו box-shadow כדי ליצור אפקט צף ועדין.
- הוסיפו גבול מסביב לטופס (בחרו כל צבע ועובי).
- מרכזו את הטקסט בתוך הטופס באמצעות המאפיין
text-align.
נסו בעצמכם
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין