הנפשת סמל בעת ריחוף
שיעור 12 מתוך 12 בקורס סרגל ניווט תחתון – פרויקט HTML/CSS של Coddy.
נוסיף את אפקט המעבר לכל סמל. לשם כך נשתמש בבורר CSS :hover:
אתגר
קלכדי ליצור אפקט ריחוף על סמל, אפשר להוסיף את קוד ה-CSS הבא (אפשר לשנות את הצבעים!):
.navigation ul li:hover {
color: purple;
transform: scale(1.2);
background-color: #fff;
border-radius: 50%;
}וזהו, סיימנו! סרגל הניווט מוכן כעת. אפשר לרחף מעל כל סמל בסרגל הניווט כדי לראות את אפקט המעבר שהוספת.
תכנות מהנה !!
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- כתבו כאן קוד HTML -->
<script src="script.js"></script>
</body>
</html>כל השיעורים ביחידה סרגל ניווט תחתון – פרויקט HTML/CSS
תרגלו בעצמכם: Web אונליין