10 (עוד) CSS טריקים אתה כנראה התעלמו
יש שפע של קטעי קוד שמפתחי אינטרנט יכולים להשתמש בהם כדי להשיג תוצאות מסוימות, ולאחר מכן יש טריקים CSS שניתן להשתמש בהם עבור דברים כמו יישור תוכן אנכית. עם CSS להיות ישות מתפתחת אי פעם, שוב ושוב אנו נתקלים טריקים CSS מגניב כי הם כיף לדעת.
בהודעה של היום, אני מציג אותך 10 תכונות CSS וטריקים נוספים שאולי אינך מכיר.
1. כתוב אנכית
יש תכונה בשם CSS מצב כתיבה המקבל אחד משלושת הערכים הללו; אופקי- tb, אנכית- rl ו אנכית- lr.
אופקי- tb היא ברירת המחדל והיא גורמת לזרימת טקסט אופקי שמאלה לימין באלמנט.
ה אנכיים- * ערכים הם עבור זרימת בלוק אנכי, גרימת טקסט להיות כתוב מלמעלה למטה על ידי הדפדפנים. ב אנכית- rl, שורות חדשות מתווספות משמאל לקודמות, ולהיפך אנכית- lr.
זה שימושי עבור הצגת שפות כמו סינית ויפנית שנכתבים בדרך כלל מלמעלה למטה וגם עבור כאשר ברצונך להציג טקסט אנכית כדי לשמור רווח אופקי, כמו בכותרות טבלה.
הערה: אם ברצונכם לשלוט בכיווני אותיות בודדים, אתם יכולים להשתמש בכיוון-כיוון של טקסט ולהפוך אותם לקביים או לצדדים, לפי הצורך.
-webkit-writing-mode: אנכית-רל; -ms-writing-mode: tb-rl; מצב כתיבה: אנכית-רל;
2. שימוש חוזר ערך צבע
מילת המפתח currentColor נושא את הערך של צבע תכונה ויכול לשמש תכונות אחרות אשר מקבלים ערכי צבע כמו רקע כללי.
div רקע: שיפוע לינארי (90deg, currentColor 50%, שחור 50%); ... צבע: # FFD700; / * currentColor הוא # FFD700 * /
3. למזג רקעים
אלמנט יכול להכיל יותר מרקע אחד (צבע רקע ותמונות רקע מרובות). ה מצב מיזוג-רקע מערבל את כולם יחד בהתאם למצב המיזוג הנתון. ישנם בסך הכל 16 מצבי למזג כרגע.
רקע- blend מצב: הבדל;
4. מיזוג אלמנטים
תערובת לערבב מצב תערובות התוכן ואת הרקע של אלמנטים חופפים. נראה ש- Chrome אינו תומך בכל המצבים, למרות ש- Firefox עושה זאת.
ערבוב- blend מצב: צבע;
לקחתי שני אלמנטים, א img מראה תמונה של ורד א span עם רקע גרפי, ערם אותם והחל כמה לערבב- modes-modes.
5. התעלם מצביע על אירועים
אתה יכול לעשות אלמנט מתעלם כל אירוע המצביע באמצעות תכונה אחת בשם אירועי מצביע. באמצעות נתינה אירועי מצביע הערך של אף אחד באלמנט, זה מונע ממנו להיות מטרה להצביע על אירועים. IE11 + תמיכה כלל.
בהדגמה הבאה, יש תיבת סימון מתחת לשתי תמונות מוערמות זו על גבי זו. שתי התמונות לשאת אירועי מצביע: אף אחד, המאפשר לנו ללחוץ על תיבת הסימון קבור מתחת להם. בהתבסס על מצב הסימון של תיבת הסימון, התמונה הרצויה מוצגת בזמן שההסתרה מוסתרת.
6. לקשט תיבות פיצול
בדרך כלל כאשר תיבת מפוצל (כמו כאשר אלמנט מוטבע עדים קו מעברי), את הקצוות של חלקים מפוצלים נטולי כל סגנונות תיבת נראה פרוס. כדי להימנע מכך, אתה יכול להשתמש box-decoration-break: clone.
עכשיו כדי לעקוב אחר זה עם דוגמה מוקדמת "חג המולד באופק" תזכורת, הנה רשימה של איילים של סנטה כל הקלדת יחיד span! הו! הו! הו!
הערה: למרות IE המודרנית תומכת תיבת-קישוט-הפסקה, על קצה הגבול לפצל את החלק, עיבוד לא חלקה ואת הרקע נראה פרוס. אבל זה עושה לדקלם צל קופסא ובכן, ולכן השתמשתי צללים תיבת עבור הגבול ואת הרקע. יש גם חוסר ריפוד אופקית בשוליים ב- IE, כי ייתכן שתרצה למלא עם רווחים.
7. כווץ אלמנטים בטבלה
נראות: קריסה היא תכונה שנוצרה רק עבור אלמנטים בטבלה, כמו שורות ועמודות. אם ישתמשו בכל דבר אחר זה ינהג הראות: מוסתר. Chrome אף מטפל בו מוסתר אפילו עבור אלמנטים בטבלה.
כאשר אתה מקצה נראות: קריסה על אלמנט שולחן, הוא מוסתר והחלל שלו מתמלא על ידי התוכן הסמוך - כמו איך זה היה מתנהג על השימוש אל תציג דבר במקום זאת.
אבל שלא כמו אל תציג דבר אשר משנה את פריסת הטבלה לאחר הסרת החלל, הפריסה נשארת זהה נראות: קריסה. אתה יכול לראות איך זה עובד בפירוט רב יותר כאן.
8. יצירת עמודות
ניתן ליצור פריסת עמודות עבור התוכן שלך באמצעות עמודות תכונה. זה מאפשר לך לציין כמה עמודות (ספירת עמודות) ואיך רוחב כל עמודה (רוחב העמודה) יפורסמו באלמנט.
אם התוכן הוא שונה מטקסט, כמו למשל תמונה, יהיה עליך לזכור את רוחב הרוחב של העמודה. עבור הדוגמה הבאה, השתמשתי רק ספירת עמודות כדי לציין כמה עמודות אני רוצה.
-webkit-column-count: 2; -moz-column-count: 2; טור-ספירה: 2;
9. הפוך את האלמנטים resizeable
אלמנט יכול להיות resizeable (אנכית, אופקית או שניהם) עם התכונה CSS3 גודל . את resisability ב טקסט יכול להיות מושבת באמצעות אותו.
שינוי גודל: אנכי; גודל: אופקי; גודל: שניהם; resize: none;
10. יצירת דפוסי
לא יכול להיות מספר רב של CSS3 gradients (הן ליניארי & רדיאלי) עבור אלמנט אחד והם יכולים להיות נערמים אחד על השני כדי ליצור דפוסים. זה מאפשר לנו ליצור רקע נחמד עבור אלמנטים ללא שימוש בתמונות חיצוניות. מה שהופך אותו לעבודה עשוי לדרוש קצת תרגול אף.
