8 טיפים וטריקים חיוניים ל-CSS שכל מפתח צריך לדעת

CSS משמש להוספת סגנון לדף אינטרנט לאחר הגדרת שלד HTML. יתר על כן, אתה יכול ליצור עיצובים חלקים ב-CSS עם מספר שורות קוד בלבד.

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

1. אפקטי ריחוף

אתה יכול להוסיף אפקט ריחוף לרכיב HTML באמצעות ה- :לְרַחֵף בוחר.

דוגמא: הוספת אפקט ריחוף לרכיב כפתור.

קוד HTML:

רחף מעלי

קוד CSS:

לחצן: רחף {
צבע: #0062FF;
גבול: #0062FF מוצק 1px;
רקע: #FFFF99;
}

אתה יכול לשחק עם הקוד הזה ולהוסיף אפקטים כמו דועך,לגדול פנימה, לְסַלֵף, וכולי. הפוך זאת לשלך!

אפקט דהיית CSS ברחף

לַחְצָן{
אטימות: 0.5;
}
לחצן: רחף{
אטימות: 1;
}

אפקט CSS Grow-in על ריחוף

לחצן: רחף{
-webkit-transform: קנה מידה (1.2);
-ms-transform: קנה מידה (1.2);
טרנספורמציה: קנה מידה (1.2);
}

2. שנה את גודל התמונות כדי להתאים למיכל div

אתה יכול לשנות את גודל התמונה כדי להתאים למיכל div באמצעות גוֹבַה, רוֹחַב, ו התאמה לאובייקט נכסים.

קוד HTML:

קוד CSS:

‎.random-image {
 גובה: 100%;
 רוחב: 100%;
 התאמה לאובייקט: מכיל;
 }

3. עוקף את כל הסגנונות

אתה יכול לעקוף את כל שאר הצהרות הסגנון של תכונה (כולל סגנונות מוטבעים) באמצעות !חָשׁוּב הנחיה בסוף ערך.

קוד HTML:

 שלום עולם!

קוד CSS:

p {
 צבע רקע: צהוב;
 }
 ‎.className {
 צבע רקע: כחול !חשוב;
 }
 #idName {
 צבע רקע: ירוק;
 }

בדוגמה זו, ה !חָשׁוּב הכלל גובר על כל השאר צבע רקע הצהרות ומבטיח שצבע הרקע יוגדר לכחול ולא לירוק.

4. חתוך טקסט עם אליפסיס

אתה יכול לקצץ טקסט שוצף על גדותיו עם אליפסיס (...) משתמש ב הצפת טקסט נכס CSS.

קוד HTML:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

קוד CSS:

‎.text {
 white-space: nowrap;
 overflow: מוסתר;
 טקסט-overflow: אליפסיס;
 רוחב: 200 פיקסלים;
 }

קָשׁוּר: מודל ה-CSS Box מוסבר עם דוגמאות

5. שימוש בהמרת טקסט

אתה יכול לאלץ טקסט להיות באותיות רישיות, באותיות קטנות או באותיות רישיות באמצעות ה שינוי טקסט נכס CSS.

אותיות רישיות

קוד HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

קוד CSS:

‎.uppercase {
 טקסט-טרנספורמציה: אותיות רישיות;
 }

אותיות קטנות

קוד HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

קוד CSS:

‎.lowercase {
 שינוי טקסט: אותיות קטנות;
 }

לְנַצֵל

קוד HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

קוד CSS:

.capitalize {
 טקסט-טרנספורמציה: שימוש באותיות רישיות;
 }

6. שימוש בהצהרת נכס חד-קו

אתה יכול להשתמש במאפייני הקיצור ב-CSS כדי להפוך את הקוד שלך לתמציתי וקריא בקלות.

לדוגמה, CSS רקע כללי הוא מאפיין קיצור המאפשר לך להגדיר את הערכים של צבע רקע, תמונת רקע, רקע-חזרה, ו מיקום רקע. באופן דומה, אתה יכול להגדיר מאפיינים עבור גוֹפָן, גבול, שולים, ו ריפוד.

הצהרת נכס רקע חד קו

צבע רקע: שחור;
רקע-תמונה: url (images/xyz.png);
רקע-חזרה: אין-חזרה;
מיקום רקע: שמאל למעלה;

אתה יכול לפשט את ההצהרה לעיל לשורה אחת:

רקע: כתובת אתר שחורה (images/xyz.png) ללא חזרה משמאל למעלה;

מאפייני הקיצור מאוד נוחים לשימוש, אבל אתה צריך לשקול כמה מקרי קצה מסובכים (כפי שמתואר ב-MDN Web Docs) בזמן השימוש בהם.

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

קוד HTML:

טיפים ימניים
זהו טקסט הסבר הכלים

קוד CSS:

גוף {
 יישור טקסט: מרכז;
 }
 .tooltip_div {
 עמדה: קרוב משפחה;
 תצוגה: בלוק מוטבע;
 }
 .tooltip_div .tooltip {
 נראות: נסתר;
 רוחב: 170 פיקסלים;
 צבע רקע: כחול;
 צבע: #fff;
 יישור טקסט: מרכז;
 border-radius: 6px;
 ריפוד: 5px 0;
 /* מיקום הסבר הכלי */
 מיקום: מוחלט;
 z-index: 1;
 למעלה: -5px;
 שמאל: 105%;
 }
 .tooltip_div: hover .tooltip {
 נראות: גלוי;
 }

קוד HTML:

תיאור כלי משמאל
זהו טקסט הסבר הכלים

קוד CSS:

גוף {
 יישור טקסט: מרכז;
 }
 .tooltip_div {
 עמדה: קרוב משפחה;
 תצוגה: בלוק מוטבע;
 }
 .tooltip_div .tooltip {
 נראות: נסתר;
 רוחב: 170 פיקסלים;
 צבע רקע: כחול;
 צבע: #fff;
 יישור טקסט: מרכז;
 border-radius: 6px;
 ריפוד: 5px 0;
 /* מיקום הסבר הכלי */
 מיקום: מוחלט;
 z-index: 1;
 למעלה: -5px;
 מימין: 105%;
 }
 .tooltip_div: hover .tooltip {
 נראות: גלוי;
 }

קוד HTML:

טיפים מובילים
זהו טקסט הסבר הכלים

קוד CSS:

גוף {
 יישור טקסט: מרכז;
 }
 .tooltip_div {
 שוליים-עליון: 100px;
 עמדה: קרוב משפחה;
 תצוגה: בלוק מוטבע;
 }
 .tooltip_div .tooltip {
 נראות: נסתר;
 רוחב: 170 פיקסלים;
 צבע רקע: כחול;
 צבע: #fff;
 יישור טקסט: מרכז;
 border-radius: 6px;
 ריפוד: 5px 0;
 /* מיקום הסבר הכלי */
 מיקום: מוחלט;
 z-index: 1;
 תחתון: 100%;
 שמאל: 50%;
 שוליים-שמאליים: -60px;
 }
 .tooltip_div: hover .tooltip {
 נראות: גלוי;
 }

קוד HTML:

הסבר כלי תחתון
זהו טקסט הסבר הכלים

קוד CSS:

גוף {
 יישור טקסט: מרכז;
 }
 .tooltip_div {
 שוליים-עליון: 100px;
 עמדה: קרוב משפחה;
 תצוגה: בלוק מוטבע;
 }
 .tooltip_div .tooltip {
 נראות: נסתר;
 רוחב: 170 פיקסלים;
 צבע רקע: כחול;
 צבע: #fff;
 יישור טקסט: מרכז;
 border-radius: 6px;
 ריפוד: 5px 0;
 /* מקם את הסבר הכלי */
 מיקום: מוחלט;
 z-index: 1;
 העליון: 100%;
 שמאל: 50%;
 שוליים-שמאליים: -60px;
 }
 .tooltip_div: hover .tooltip {
 נראות: גלוי;
 }

אתה יכול גם להשתמש בספריית Bootstrap כדי ליצור מותאם אישית טיפים לכלי Bootstrap.

8. הוסף אפקטי צל

אתה יכול להוסיף אפקטי צל של CSS לטקסטים ולאלמנטים באמצעות ה צל טקסט וה צל קופסא מאפייני CSS בהתאמה.

CSS Text Shadow

ה צל טקסט מאפיין CSS מוסיף צללים ושכבות לטקסט. ה צל טקסט מאפיין מקבל רשימה מופרדת בפסיקים של צללים שיש להחיל על הטקסט.

תחביר של מאפיין text-shadow CSS:

/* אתה יכול להשתמש ב-4 ארגומנטים עם המאפיין text-shadow CSS:
offset-x, offset-y, blur-radius וצבע */
/* offset-x | offset-y | blur-radius | צבע */
text-shadow: 2px 2px 4px אדום;
/* צבע | offset-x | offset-y | רדיוס טשטוש */
text-shadow: #18fa3e 1px 2px 10px;

הערה: הארגומנטים של הצבע ורדיוס הטשטוש הם אופציונליים.

קָשׁוּר: כיצד להשתמש ב-CSS text-shadow: טריקים ודוגמאות

לדוגמה:

רקע: #e74c3c;
צבע: #fff;
גופן-משפחת: lato;
text-shadow: 1px 1px rgba (123, 25, 15, 0.5), 2px 2px rgba (129, 28, 18, 0.51), 3px 3px rgba (135, 31, 20, 0.52 rgba), 22, 0.53), 5px 5px rgba (145, 36, 24, 0.54), 6px 6px rgba (150, 38, 26, 0.55), 7px 7px rgba (154, 40, 28, 0.56), 8px 8px rgba (158, 42, 30, 0.57), 9px 9px rgba (4,05,1), 10px rgba (166, 45, 33, 0.59), 11px 11px rgba (169, 47, 34, 0.6), 12px 12px rgba (173, 48, 36, 0.61), 13px 13px rgba (176, 50, 37, 0.62), 14px 14px rgba (178, 51, 38, 0.63 ), 515px rgba, 515px 1., 16px 16px rgba (184, 54, 40, 0.65), 17px 17px rgba (186, 55, 41, 0.66), 18px 18px rgba (189, 56, 42, 0.67), 19px 19px rgba (191, 57, 43, 0.68) 195, 59, 45, 0.7), 22px 22px rgba (197, 60, 46, 0.71), 23px 23px rgba (199, 61, 47, 0.72), 24px 24px rgba (201, 62, 47, 0.73), 25px 25px rgba (202, 62, 48, 0.74 ), 620px rgba, 620px rb., 27px 27px rgba (206, 64, 49, 0.76), 28px 28px rgba (207, 65, 50, 0.77), 29px 29px rgba (209, 65, 51, 0.78), 30px 30px rgba (210, 66, 51, 0.79), 31px 31px rgba (2.8px rgba (2.8px rgba) 213, 67, 52, 0.81), 33px 33px rgba (214, 68, 53, 0.82), 34px 34px rgba (215, 69, 53, 0.83), 35px 35px rgba (216, 69, 54, 0.84), 36px 36px rgba (218, 70, 54, 0.85 ), 370px rgba, 5px., 38px 38px rgba (220, 71, 55, 0.87), 39px 39px rgba (221, 71, 56, 0.88), 40px 40px rgba (222, 72, 56, 0.89), 41px 41px rgba (223, 72, 57, 0.9) 225, 73, 57, 0.92), 44px 44px rgba (225, 73, 58, 0.93), 45px 45px rgba (226, 74, 58, 0.94), 46px 46px rgba (227, 74, 58, 0.95), 47px 47px rgba (228, 75, 59, 0.96 ), 448px 9p., 49px 49px rgba (230, 75, 59, 0.98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

ה צל קופסא מאפיין משמש להחלת צל על רכיבי HTML.

תחביר של מאפיין ה-box-shadow CSS

box-shadow: [היסט אופקי] [היסט אנכי] [רדיוס טשטוש] [רדיוס התפשטות אופציונלי] [צבע];

הערה: פרמטרי הטשטוש, הפיזור והצבע הם אופציונליים.

קָשׁוּר: כיצד להשתמש ב-CSS box-shadow: טריקים ודוגמאות

לדוגמה:

box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;

אם אתה רוצה לעיין בקוד המקור המלא המשמש במאמר זה, הנה מאגר GitHub.

עצב את האתר שלך באמצעות טריקים מודרניים של CSS

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

11 דוגמאות CSS Text Shadow שתוכל לנסות באתר שלך

אתה יכול לעשות הרבה עם אפקטי צל של טקסט ב-CSS, אבל זה יכול להיות קשה לדעת בדיוק מה אפשרי. קבל עזרה עם דוגמאות חזותיות אלה.

קרא הבא

על הסופר