כל מי שיש לו ניסיון בעיצוב אתרים, בין אם השתמשת בבוני אתרי עשה זאת בעצמך או יצרת אתר מאפס, סביר להניח ששמע על CSS בעבר. הכלי החזק להפליא הזה יכול לשמש כדי לשנות את פריסות האינטרנט שלך, לתת לך את הכוח להשתלט על האתר שלך ולהשיג את החזון היצירתי שלך. אבל איך אתה יכול להשתמש בגיליונות סגנונות מדורגים כדי לנצל את הפוטנציאל של האתר הבא שלך?
מדריך זה יפרט רק מגוון מאפייני CSS ששימשו כולם ליצירת הכותרת שתוכל לראות בתמונה למעלה. אתה יכול למצוא את הפרויקט הזה כאן CodePen, נותן לך את ההזדמנות לנסות את זה בעצמך.
מניפולציה של תמונות CSS
הצעד הראשון שעלינו לעשות כדי לבנות את מדור הכותרות שלנו הוא הוספת תמונות לעמוד. אתה יכול להשתמש במגוון שיטות כדי להשיג מטרה זו, אז כיסינו את הפופולריים ביותר, יחד עם כמה טריקים שיעזרו לך לתפעל את התמונות שלך.
1. תמונת רקע של CSS
אנו רוצים שתהיה תמונת רקע במסך מלא עבור הכותרת שלנו, ומאפיין ה-CSS של תמונת רקע הוא אידיאלי. ראשית, עלינו ליצור קונטיינר עבור התמונה שלנו (ושאר האלמנטים בתוך הכותרת).
התחלנו בהוספת תג div עם "header" בתור המחלקה שלו, ולאחר מכן הגדרתו גובה עד 100Vh
ואת שלה רוחב עד 100vw; זה נותן לנו קופסה שזהה בדיוק בגודל של יציאת התצוגה. הוספנו גם כלל CSS לגוף העמוד, עם שלו הצפה מוגדרת לנסתר ואת שלה השוליים מוגדרים ל-0px.עם המכולה במקום, אנחנו יכולים להוסיף תמונת רקע, ויש שלושה כללי CSS שונים שאנחנו צריכים כדי להשיג מטרה זו. הראשונה, תמונת רקע, צריכה כתובת URL כדי לפעול כמקור תמונת הרקע, והשתמשנו בקטלוג השימושי של Unsplash לשם כך. אנחנו צריכים גם להגדיר את גודל רקע לכיסוי וה מיקום הרקע לתחתית, אבל אולי תרצה להתנסות עם אלה לקבלת התוצאות הטובות ביותר.
2. CSS רקע-Blend-Mode
מצבי מיזוג CSS מאפשרים למזג תמונות וטקסט, בדומה לתכונת המיזוג בתוכנה כמו Adobe Photoshop. כדי לגרום למצבי מיזוג לעבוד עם תמונת הרקע שלנו, הגדרנו את צבע רקע ללבן חצי שקוף לפני הוספת מצב המיזוג שבו רצינו להשתמש.
בעקבות זה, מצב-תערובת רקע הוגדר ל-soft-light, מה שמאפשר לנו לרכך את התמונה.
3. CSS Clip-Path
עבור הטריק הבא שלנו, נשתמש בכלל שנקרא clip-path. בעת שימוש בתגיות HTML של img, אתה יכול להגדיר נתיב שיסתיר חלקים מהתמונות שאתה עובד איתן. אתה יכול לבחור להשתמש בצורות כלליות בשביל זה, אבל אתה יכול גם להשתמש באפליקציה לייצור SVG כדי ליצור עיצוב מורכב יותר.
הוספנו תגית div עם "flex_image_box" כדי לפעול כמיכל לשלוש תמונות, תוך שימוש במאפיין display CSS כדי להפוך אותו ל-flexbox (נדבר על זה מאוחר יותר). שלוש תגיות img נוספו בתוך תג ה-div, כאשר המזהים מוגדרים כ-"img1", "img2" ו-"img3". הגדרת ה רוחב כל תמונה עד 600 פיקסלים, אנחנו מסוגלים ל השאר את מאפיין הגובה ריק מבלי לשנות את יחס הגובה-רוחב של התמונות; עכשיו הגיע הזמן להוסיף את נתיב הקליפ שלנו!
כדי ליצור את שלושת המשולשים שלנו, השתמשנו באותו נתיב קליפ מצולע עבור img1 ו-img3, עם גרסה הפוכה במקום עבור img2. היינו צריכים לשחק גם עם המיקום של מיכל ה-flex-box שלנו כדי לוודא שהתמונות יושבות במיקום הנכון על המסך. ניתן לראות את כללי ה-clip-path שלנו למטה.
4. אטימות CSS
אטימות קובעת את רמת השקיפות של כל רכיב HTML. קבענו את האטימות של התמונות שלנו ל-90%, מה שהופך אותם מעט אטומים כך שהם מתמזגים יפה עם הרקע.
טקסט ותמונות רספונסיביות ב-CSS
כבר חקרנו את האמנות של יצירת אתרים רספונסיביים מרהיבים באמצעות HTML, CSS ו-JavaScript בעבר, אבל אנחנו יכולים להתבסס על העקרונות שאתה כבר מבין כדי לספק תובנה עמוקה יותר לגבי המיומנויות שאתה צריך כדי לשלוט בפריסות האתר שלך.
1. CSS רספונסיבי/יחידות יחסיות
יחידות CSS כמו px, pt ו-cm הן יחידות אבסולוטיות, ומשמעות הדבר היא שדפדפן אינטרנט יציג אותן באותו גודל ללא קשר לרוחב וגובה החלון שהם תופסים. יחידות יחסיות שונות ומייצרות גבהים ואורכים ביחס למידות אחרות, כמו חלון הדפדפן או אלמנט אב. היחידות היחסיות למטה נמצאות בשימוש נפוץ וחיוניות לעיצוב אתרים רספונסיבי.
- em: יחידה זו משמשת בדרך כלל עם טקסט. זה יחסית לגודל הגופן של האלמנט הנוכחי, מה שהופך את 4em לגדול פי 4 מגודל הגופן שהוגדר.
- rem: כמו em, rem הוא יחסי לגודל הגופן של אלמנט; אלמנט השורש בהיררכיה משמש להגדרת גודל הפלט.
- vw/vh: קביעת רוחב וגובה על סמך גודל התצוגה, 2vw שווה ל-2% מרוחב הדפדפן בעוד 2vh שווה ל-2% מגובה הדפדפן.
- %: יחידת % מחשבת מידות על סמך גודל האב של אלמנט.
- vmin/vmax: יחידות אלה מייצרות ממדים ביחס ל-1% מהממדים הקטנים או הגדולים ביותר של נקודת התצוגה, ומספקות לאלמנטים את האמצעים להגיב ישירות לגודל של חלון דפדפן.
2. גודל גופן CSS
ניתן להגדיר מאפיין זה באמצעות ערכי ברירת מחדל המוגדרים מראש על ידי גיליון הסגנונות הראשי של האתר או דפדפן האינטרנט של המשתמש. ערכים אלה כוללים בינוני, xx-small, x-small, small, large, x-large ו-xx-large, כאשר בינוני מוגדר כברירת המחדל עבור כל טקסט שאין בו תג CSS בגודל גופן. לחלופין, ניתן להשתמש בערכים יחסיים בעת שימוש במאפיין CSS בגודל גופן, וזהו שיטה שבה השתמשנו כדי להבטיח שהטקסט בחלק הכותרות שלנו יהיה בגודל המתאים לכל אחד נקודת מבט.
הוספנו שני תגיות כותרת ל-HTML שלנו, מה שאפשר לנו להוסיף טקסט לפרויקט. האחת היא כותרת ראשית גדולה, ואילו השנייה היא כותרת משנה, ושניהם משתמשים ביחידות יחסיות.
קָשׁוּר: כיצד לשנות את גודל גופן HTML ב-CSS
3. רוחב וגובה CSS
כל רכיבי ה-HTML מגיעים עם ממדי גובה ורוחב, בין אם הם div, img, a או כל סוג אחר של תג. ניתן להגדיר מידות אלו באופן אוטומטי לערכי ברירת מחדל, אך הם יכולים גם להיות מוכתבים על ידי מעצבי אתרים באמצעות הכללים הנכונים; השתמשנו בשתי השיטות הללו עבור כותרת זו.
נעשה שימוש ביחידות רספונסיביות לתמונת הרקע, כאשר הגובה מוגדר ל-100vh והרוחב מוגדר ל-100vw, אך השתמשנו גם ביחידות אבסולוטיות עבור שלוש התמונות שלנו. כדאי לחקור ולהתנסות ביחידות רוחב וגובה של CSS, כאשר אפשרויות כמו "לרשת" מספקות את פירושו לאמץ את הממדים של אלמנט אב, ויש עוד המון טריקים כמו זה שאתה יכול להשתמש בהם.
4. CSS Mix-Blend-Mode
מצב שילוב-תערובת CSS דומה מאוד למצב ערבוב רקע, רק שניתן להחיל אותו על כל אלמנט, במקום להיות רק עבור רקעים. השתמשנו בנכס זה בכותרת H1 שלנו כדי להוסיף מרקם ולהפוך את הפרויקט למעניין יותר. התחלנו בהגדרת שלנו צבע טקסט לשחור, ולאחר מכן הגדרת ה מצב ערבוב לשכבת-על.
כדאי מאוד לבחון את אפשרויות המיזוג השונות שיש לך בעת התמודדות עם טקסט, שכן רקעים עם פרופילי צבע ייחודיים יגיבו אחרת להגדרות שבהן אתה משתמש.
5. CSS-טרנספורמציה של טקסט
שינוי טקסט ב-CSS הוא מאפיין חכם המאפשר למעצבים לשנות את המקרה של הטקסט באתרים שלהם מבלי להשפיע על האופן שבו מנועי החיפוש קוראים אותו. למשל, יש לנו הגדר טרנספורמציה של טקסט לאותיות רישיות בכותרת H1 שלנו, מה שהופך כל אות לאותית גדולה, לא משנה איך נזין אותה ב-HTML שלנו.
מאפייני הצפה של CSS
HTML יכול להיראות לעתים קרובות כמו מסגרת נוקשה שמגדירה גבולות נוקשים לתוכן באתרי האינטרנט שלך, אבל זה לא קורה כאשר משתמשים במאפייני גלישה.
CSS Overflow & Text-Overflow
Overflow ו-text-overflow הם מאפייני CSS דומים מאוד. ניתן להחיל גלישה על כל אלמנט, מה שנותן לך שליטה על התוכן שמסוגל לחמוק מגבולותיו. הצפת טקסט דומה, אם כי היא חלה רק על טקסט, ונותנת לך את היכולת להוסיף פרמטרים נוספים לכללים שלך. השתמשנו רק בגלישה עבור הפרויקט הזה (השתמשנו בו כדי להגביל את גודל גוף העמוד שלנו), אבל אתה יכול לקרוא על הצפת טקסט ב- W3Schools אתר אינטרנט.
שימוש ב-CSS עבור פריסות האינטרנט שלך
CSS הוא כלי חזק להפליא, המאפשר למעצבי אתרים ולמפתחים ליצור אתרים מדהימים באמצעות קוד. אנו ממליצים לך להעיף מבט ב-CodePen שסיפקנו בתחילת המאמר, מכיוון שזה ייתן לך תובנה עמוקה עוד יותר לגבי אופן הפעולה של כל הכלים הללו. בנוסף, אתה יכול לשחק עם הכותרת שעשינו כדי להוסיף את הגימור שלך.
האם אתה משתמש בשיטות ה-CSS העיקריות הללו לזרימת עבודה מהירה ועיצוב אינטרנט יפה?
קרא הבא
- תִכנוּת
- CSS
- תִכנוּת
- עיצוב אתרים
- שפות תכנות
סמואל הוא סופר טכנולוגיה מבוסס בריטניה עם תשוקה לכל מה שקשור ל-DIY. לאחר הקמת עסקים בתחומי בניית אתרים והדפסת תלת מימד, לצד עבודתו ככותב שנים רבות, סמואל מציע תובנה ייחודית לעולם הטכנולוגיה. הוא מתמקד בעיקר בפרויקטים טכנולוגיים של עשה זאת בעצמך, הוא לא אוהב יותר מאשר לחלוק רעיונות מהנים ומרגשים שתוכלו לנסות בבית. מחוץ לעבודה, בדרך כלל ניתן למצוא את סמואל רוכב על אופניים, משחק במשחקי מחשב או מנסה נואשות לתקשר עם סרטן המחמד שלו.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחץ כאן כדי להירשם