שיווק תוכן

תכונות 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;
    }

    תוֹצָאָה

    Douglas Karr

    Douglas Karr הוא CMO של פתח INSIGHTS ומייסד ה Martech Zone. דאגלס סייע לעשרות סטארט-אפים מצליחים של MarTech, סייע בבדיקת נאותות של למעלה מ-5 מיליארד דולר ברכישות והשקעות של Martech, וממשיך לסייע לחברות ביישום ואוטומציה של אסטרטגיות המכירות והשיווק שלהן. דאגלס הוא מומחה ודובר בטרנספורמציה דיגיטלית ומוכר בינלאומי ב-MarTech. דאגלס הוא גם מחבר שפורסם של מדריך Dummy וספר מנהיגות עסקית.

    מאמרים נוספים

    לחצן חזרה למעלה
    סְגוֹר

    זוהה חסימת מודעות

    Martech Zone הוא מסוגל לספק לך תוכן זה ללא עלות מכיוון שאנו מייצרים רווח מהאתר שלנו באמצעות הכנסות ממודעות, קישורי שותפים וחסויות. נשמח אם תסיר את חוסם המודעות שלך בזמן שאתה צופה באתר שלנו.