אמנות ה-CSS: בניית קריסנטיום

אמנות CSS משלבת עיצוב עם מיומנות טכנית. אתם יוצרים רישומים מפורטים מבלי להשתמש בקובצי תמונה. אתם משתמשים ב-HTML וב-CSS בלבד.

לקריסנטיום יש עלי כותרת רבים וצפופים. ניתן לבנות את הפרח הזה באמצעות שימוש במאפיינים ספציפיים:

  • border-radius לצורות רכות
  • linear-gradient לעומק צבע
  • box-shadow ליצירת ממד
  • transform לסיבוב

כדי ליצור פרח, מציירים צורות. קריסנטיום הוא אוסף של אלמנטים מסוג div בשכבות ושל pseudo-elements. עליכם לפרק את הפרח לחלקים: עלי כותרת, שכבות ומרכז.

יוצרים צורת עלה כותרת באמצעות border-radius. לאחר מכן משתמשים ב-transform: rotate() כדי להזיז אותה. סיבוב הצורות הללו סביב נקודת מרכז יוצר את דפוס הפריחה.

השתמשו בטיפים הללו כדי לשפר את עבודתכם:

  • השתמשו ב-z-index כדי לשכב את עלי הכותרת.
  • שנו את ה-opacity כדי להוסיף עומק.
  • השתמשו ב-pseudo-elements מסוג ::before ו-::after. זה שומר על ה-HTML שלכם נקי.

אמנות CSS עוזרת לכם לשלוט ב-box model ובמיקום (positioning). היא מלמדת אתכם כיצד דפדפנים מרנדרים (render) אלמנטים.

פתחו את עורך הקוד שלכם ונסו לבנות עיצוב פרחוני היום.

מקור: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d