15 שימושי טריקים CSS שאולי אתה התעלמו

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

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

1. מספור כותרות וכותרות משנה

   תגיד שיש לך קבוצה של כותרות subheadings במסמך שלך ואתה מספור אותם ידנית או באמצעות סקריפט. במקום זאת, ניתן להשתמש ב - CSS כדי לעשות זאת. יש כאן כבר הודעה מעמיקה על זה כאן. ומכיוון שהוא מן המפרט CSS2, אתה יכול להתערב שהוא נתמך על ידי כל הדפדפנים, למעט אולי IE 6.

2. ספייס למעלה קו תחתון קו תחתון

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

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

   אתה יכול להשתמש אלה כדי לסמן סגנון, overline, אפילו להפוך את הטקסט למצמץ, ועוד. החל מאפריל 2015 רק Firefox תומך במיקום זה, אך ניתן להפעיל אותו “פלטפורמת אינטרנט ניסיוני תכונות” כדי להשתמש בו ב- Chrome.

3. ציטטה ציטוט

   קודם כל, אין צורך לטרוח עם הקלדת ציטוטים מתולתל הנכון ציטוטים קצרים כי יש HTML עבור זה: תג המציין ציטוטים מוטבעים.

   ה תג גם מטפל ציטוטים הפנימיים ציטוטים עם ציטוטים בודדים. אז איפה הוא “יש 'CSS' בשביל זה” ברגע זה?

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

4. ניהול לוחות פרועים

   ייתכן שיהיה לך לבוא על שולחן גדול עם משתנה גודל התוכן לכל תא אשר מסרב להישאר בתוך רוחב שציינת, לא משנה מה אתה מנסה. מאלף את הטבלה עם פריסת שולחן רכוש (לגובה עמודה שווה, לחץ על קישור זה).

   כדי להיות ספציפי, התיקון הוא ב פריסת שולחן: קבוע; ערך. כאשר אתה מקצה פריסה קבועה לטבלה, הטבלה ורוחב התא נקבעים לפי רוחב הטבלה או השורה הראשונה של תאים (שניתן להגדיר על-ידי המשתמש) ולא על-ידי התוכן. זה נתמך על ידי כל הדפדפנים.

5. לעשות את זה דביק

   אלמנטים נדבקים הם אלמנטים בדף שלא יוצגו בגלוי. במילים אחרות הוא נדבק לאזור גלוי (Viewport או תיבת גלילה). ניתן ליצור את זה באמצעות CSS מיקום: דביק;.

   הם פועלים כמו אלמנטים postioned יחסית לפני כל גלילה ולאחר מכן כמו אלמנטים קבועים פעם סף גלילה הוא הגיע. לעת עתה, רק אתר תומך בו.

6. קבל את הטקסט שלך בצורה

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

7. שדות חובה

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

8. בררן עם צבעים

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

9. האם אני בודק את זה??

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

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

10. כמו סיפור

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

11. האם אתה רוצה לדעת יותר?

    אלמנט עשוי להכיל את הכיתה X או את הנתונים Y או ערך אחר לתכונה. אם אי פעם נצטרך להציג ערך תכונה כזה של אלמנט לידו, נוכל להשתמש ב- תוכן: ATR (X). זה מאחזר את הערך של התכונה X של האלמנט, ואז אנחנו יכולים להראות אותו לצד אלמנט.

12. קצת יותר משמאל

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

13. לחשוף תבנית קובץ של קישורים

    ראית פעם תמונה קטנה ליד קישור המציין מה זה קישור? PDF? או DOC? כן, יש CSS כדי להשיג את זה. ה content: url () הוא מה נשתמש כדי להציג את התמונה מאחורי הקישורים.

14. טריגר

    אפקט הפרלקסה הוא אפקט המשמש לתיאור התנועה האיטית לכאורה של הרקע ביחס לקידמה. אפקט זה פופולרי באתרי אינטרנט אשר מיישמים גלילה parallax. ישנן דרכים שונות ליישם את זה, את הדוגמה הבאה פועלת עם background-attachment: fixed;.

15. כוח של CSS אנימציות

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

עכשיו קרא: 50 שימושי קטעי קוד כל מעצב צריך