אפקט ריחוף - II

שיעור 31 מתוך 31 בקורס כרטיס תלת־ממדי | פרויקט Front-end של Coddy.

הקוד הזה מעצב כפתורים חברתיים בתוך מכל עם המחלקה "social-buttons-container", שנמצא בתוך רכיב עם המחלקה "bottom". הנה פירוט:

שלושת בלוקי הקוד הראשונים מגדירים מעברים לכפתורים החברתיים. לכל כפתור יש השהיה שונה לפני שהמעבר מתחיל. המעברים חלים על המאפיין "transform" (שכנראה מטפל בתנועה) ועל המאפיין "box-shadow" (שכנראה שולט באפקטים של הצללה). המעברים האלה יוצרים שינוי הדרגתי וחלק בתנועת הכפתור ובהצללה לאורך זמן.
הבלוק הרביעי מגדיר את הרוחב ואת צבע המילוי של סמלי SVG (גרפיקה וקטורית ניתנת להרחבה) בתוך הכפתורים החברתיים.
הבלוק החמישי מגדיר סגנונות למצב שבו מרחפים מעל כפתור חברתי. צבע הרקע משתנה לשחור והסמן משתנה למצביע, כדי לציין שאפשר ללחוץ על הכפתור.
הבלוק האחרון משנה את צבע המילוי של סמל ה-SVG ללבן כשמרחפים מעל הכפתור החברתי, וכך מספק משוב חזותי למשתמש.

אתגר

קל

השתמשו בקוד הזה:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

כרטיס התלת־ממד שלכם מוכן!

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>

כל השיעורים ביחידה כרטיס תלת־ממדי | פרויקט Front-end

תרגלו בעצמכם: Web אונליין