שיווק תוכן
תכונות CSS3 שאולי אינך מודע להן: Flexbox, פריסות רשת, מאפיינים מותאמים אישית, מעברים, אנימציות ורקעים מרובים
גיליונות סגנון מדורגים (CSS) ממשיכים להתפתח וייתכן שהגרסאות האחרונות כוללות כמה תכונות שאולי אפילו אינך מודע להן. להלן כמה מהשיפורים והמתודולוגיות העיקריות שהוצגו עם CSS3, יחד עם דוגמאות קוד:
- פריסת קופסה גמישה (Flexbox): מצב פריסה המאפשר ליצור פריסות גמישות ומגוונות עבור דפי אינטרנט. עם flexbox, אתה יכול בקלות ליישר ולהפיץ אלמנטים בתוך מיכל. בדוגמה זו, ה
.container
שימושים בכיתהdisplay: flex
כדי לאפשר מצב פריסת flexbox. הjustify-content
נכס מוגדר לcenter
למרכז אופקית את אלמנט הצאצא בתוך המיכל. הalign-items
נכס מוגדר לcenter
למרכז אנכית את אלמנט הילד. ה.item
class מגדיר את צבע הרקע והריפוד עבור אלמנט הילד.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
תוֹצָאָה
אלמנט ממורכז
- פריסת רשת: מצב פריסה נוסף המאפשר ליצור פריסות מורכבות מבוססות רשת עבור דפי אינטרנט. עם רשת, אתה יכול לציין שורות ועמודות, ולאחר מכן למקם אלמנטים בתוך תאים ספציפיים של הרשת. בדוגמה זו, ה
.grid-container
שימושים בכיתהdisplay: grid
כדי לאפשר מצב פריסת רשת. הgrid-template-columns
נכס מוגדר לrepeat(2, 1fr)
כדי ליצור שתי עמודות ברוחב שווה. הgap
המאפיין מגדיר את המרווח בין תאי הרשת. ה.grid-item
class מגדיר את צבע הרקע והריפוד עבור פריטי הרשת.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
תוֹצָאָה
פריט 1
פריט 2
פריט 3
פריט 4
- מעברים: CSS3 הציגה מספר מאפיינים וטכניקות חדשות ליצירת מעברים בדפי אינטרנט. לדוגמה, ה
transition
ניתן להשתמש בנכס להנפשת שינויים במאפייני CSS לאורך זמן. בדוגמה זו, ה.box
class מגדיר את הרוחב, הגובה וצבע הרקע הראשוני עבור האלמנט. הtransition
נכס מוגדר לbackground-color 0.5s ease
להנפשת שינויים במאפיין צבע הרקע במשך חצי שנייה עם פונקציית תזמון קלה-אין-אאוט. ה.box:hover
class משנה את צבע הרקע של האלמנט כאשר מצביע העכבר מעליו, ומפעיל את הנפשת המעבר.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
תוֹצָאָה
לְרַחֵף
כאן!
כאן!
- אנימציות: CSS3 הציגה מספר מאפיינים וטכניקות חדשות ליצירת אנימציות בדפי אינטרנט. בדוגמה זו, הוספנו אנימציה באמצעות ה-
animation
תכונה. הגדרנו את א@keyframes
כלל עבור האנימציה, המציין שהתיבה צריכה להסתובב מ-0 מעלות ל-90 מעלות במשך 0.5 שניות. כאשר התיבה מרחפת מעל, הspin
הנפשה מופעלת כדי לסובב את התיבה. הanimation-fill-mode
נכס מוגדר לforwards
כדי להבטיח שהמצב הסופי של האנימציה נשמר לאחר סיום.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
תוֹצָאָה
לְרַחֵף
כאן!
כאן!
- מאפייני CSS מותאמים אישית: ידוע גם כ משתני CSS, מאפיינים מותאמים אישית הוצגו ב-CSS3. הם מאפשרים לך להגדיר ולהשתמש במאפיינים מותאמים אישית משלך ב-CSS, שבהם ניתן להשתמש כדי לאחסן ולעשות שימוש חוזר בערכים בכל גיליונות הסגנונות שלך. משתני CSS מזוהים על ידי שם שמתחיל בשני מקפים, כגון
--my-variable
. בדוגמה זו, אנו מגדירים משתנה CSS בשם –primary-color ונותנים לו ערך של#007bff
, שהוא צבע כחול המשמש בדרך כלל כצבע עיקרי בעיצובים רבים. השתמשנו במשתנה הזה כדי להגדיר אתbackground-color
מאפיין של רכיב כפתור, באמצעות ה-var()
פונקציה והעברת שם המשתנה. זה ישתמש בערך המשתנה כצבע הרקע של הכפתור.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- רקעים מרובים: CSS3 מאפשר לך לציין מספר תמונות רקע עבור אלמנט, עם יכולת לשלוט במיקום ובסדר הערימה שלו. הרקע מורכב משתי תמונות,
red.png
וblue.png
, אשר נטענים באמצעות הbackground-image
תכונה. התמונה הראשונה,red.png
, ממוקם בפינה הימנית התחתונה של האלמנט, בעוד שהתמונה השנייה,blue.png
, ממוקם בפינה השמאלית העליונה של האלמנט. הbackground-position
מאפיין משמש לשליטה במיקום של כל תמונה. הbackground-repeat
מאפיין משמש כדי לשלוט כיצד התמונות חוזרות. התמונה הראשונה,red.png
, מוגדר לא לחזור (no-repeat
), בעוד התמונה השנייה,blue.png
, מוגדר לחזור (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}