הבנת פסאודו-אלמנט לפני ואחרי
גיליון סגנונות (CSS) מיועד בעיקר להחלת סגנונות על סימון HTML, אולם במקרים מסוימים כאשר הוספת סימון נוסף למסמך הוא מיותר או בלתי אפשרי, יש למעשה תכונה ב- CSS המאפשרת לנו להוסיף סימון נוסף מבלי להפריע את המסמך בפועל, כלומר אלמנטים פסאודו.
שמעת על המונח הזה, במיוחד כאשר אתה כבר בעקבות כמה הדרכות שלנו.
יש למעשה כמה בני משפחה CSS מסווגים כמו אלמנטים פסאודו כמו ה :שורה ראשונה, :מכתב ראשון, :: מבחר, :לפני ו :לאחר. אבל, עבור מאמר זה, נוכל להגביל את הכיסוי שלנו רק :לפני ו :לאחר, “אלמנטים פסאודו” כאן יתייחסו ספציפית לשניהם. נבחן את הנושא הספציפי הזה מהיסודות.
תחביר ותמיכה בדפדפן
ה אלמנטים פסאודו יש ממש בסביבה מאז CSS1, אבל ה :לפני ו :לאחר כי אנחנו מדברים כאן שוחררו ב CSS2.1. בהתחלה, אלמנטים פסאודו להשתמש במעי הגס יחיד עבור התחביר, ואז כמו האינטרנט התפתח, ב- CSS3 אלמנטים פסאודו עודכנו לשימוש פעמיים המעי הגס ::לפני & ::לאחר - כדי להבדיל את זה עם כיתות פסאודו (כלומר. : רחף, : פעילים, וכן הלאה).
עם זאת, אם אתה משתמש בתבנית המעי הגס או בתבנית המעי הגס, הדפדפנים יזהו זאת. ומכיוון ש- Internet Explorer 8 תומך רק בתבנית המעי הגס, זה בטוח יותר להשתמש במעי הגס בודד אם אתה רוצה תאימות דפדפן רחבה יותר.
מה זה עושה?
בקיצור, אלמנטים פסאודו תוסיף רכיב נוסף לפני או לאחר אלמנט התוכן, לכן כאשר אנו מוסיפים את שניהם, הם שווים מבחינה טכנית, עם הסימון הבא.
:לפני זה התוכן הראשי. :לאחר
אבל אלמנטים אלה לא נוצרו בפועל על המסמך. הם עדיין גלויים על פני השטח, אבל לא תמצאו אותם על מקור המסמך, אז למעשה הם מדברים מזויף אלמנטים.
שימוש באלמנטים פסאודו
שימוש אלמנטים פסאודו הוא קל יחסית; התחביר הבא בורר: לפני תוסיף אלמנט לפני בורר התוכן בזמן התחביר בורר: לאחר יוסיף אחרי זה, וכדי להוסיף תוכן בתוכם אנחנו יכולים להשתמש תוכן נכס.
לדוגמה, קטע הקוד שלהלן יוסיף סימן ציטוט לפני ואחרי בלוקוטה.
בלוקוטה: לפני content: open-quote; blockcoote: after content: close-quote;
עיצוב אלמנטים פסאודו
למרות היותו גורם מזויף, אלמנטים פסאודו למעשה לפעול כמו “אמיתי” רכיבים אנו יכולים להוסיף כל הצהרת סגנונות עליהם, כגון שינוי צבע, הוספת רקע, התאמת גודל הגופן, יישור הטקסט בתוכו וכן הלאה.
בלוקוטה: לפני content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; צבע: #fff; רקע: #ddd; צף: משמאל; מקומות קרובים top: 30px; blockcoote: after content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; צבע: #fff; רקע: #ddd; צף: ימינה; מקומות קרובים bottom: 40px;
ציון המאפיין
האלמנטים שנוצרו הם כברירת מחדל אלמנט ברמה מוטבעת, לכן כאשר אנו עומדים לציין את הגובה ואת הרוחב, עלינו להגדיר אותו תחילה כרכיב בלוק באמצעות בלוק תצוגה הצהרה.
בלוקוטה: לפני content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; צבע: #fff; רקע: #ddd; צף: משמאל; מקומות קרובים top: 30px; border-radius: 25px; / ** להגדיר את זה כמו אלמנט בלוק ** / להציג: בלוק; גובה: 25px; רוחב: 25px; blockcoote: after content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; צבע: #fff; רקע: #ddd; צף: ימינה; מקומות קרובים bottom: 40px; border-radius: 25px; / ** להגדיר את זה כמו אלמנט בלוק ** / להציג: בלוק; גובה: 25px; רוחב: 25px;
צרף תמונת רקע
אנחנו יכולים גם להחליף את התוכן עם תמונה ולא רק טקסט רגיל. למרות ש תוכן הנכס מספק כתובת אתר () מחרוזת כדי להוסיף תמונה, אבל ברוב המקרים אני מעדיף להשתמש רקע כללי רכוש יותר שליטה על התמונה המצורפת.
בלוקוטה: לפני content: ""; font-size: 24pt; text-align: center; line-height: 42px; צבע: #fff; צף: משמאל; מקומות קרובים top: 30px; border-radius: 25px; background: url (images / quot-mark.png) -3px -3px #ddd; בלוק תצוגה; גובה: 25px; רוחב: 25px; blockcoote: after content: ""; font-size: 24pt; text-align: center; line-height: 42px; צבע: #fff; צף: ימינה; מקומות קרובים bottom: 40px; border-radius: 25px; background: url (images / quot-mark.png) -1px -32px #ddd; בלוק תצוגה; גובה: 25px; רוחב: 25px;
עם זאת, כפי שניתן לראות מקטע הקוד לעיל, אנו עדיין מכריזים על כך תוכן רכוש הפעם עם מחרוזת ריקה. ה תוכן רכוש הוא דרישה ויש תמיד ליישם; אחרת ה אלמנט פסאודו לא יעבוד בכלל.
שילוב עם כיתות פסאודו
למרות שהם סוג אחר של מדומה, אנחנו יכולים להשתמש כיתות פסאודו ביחד עם אלמנטים פסאודו יחד כלל CSS אחד, למשל, אם אנחנו רוצים להפוך את רקע של מרכאות קצת יותר כהה כשאנחנו מרחפים מעל בלוקוטה.
ציטוט על התמונה: hover: after, block block: hover: before background-color: # 555;
הוספת אפקט מעבר
ואנחנו יכולים אפילו ליישם את המעבר רכוש עליהם ליצור אפקט המעבר צבע חינני.
מעבר: כל 350ms; - מעבר: כל 350ms; -Moz המעבר: כל 350ms; -webkit- מעבר: כל 350ms;
למרבה הצער, אפקט המעבר נראה לעבוד רק בגירסה האחרונה של פיירפוקס. יש לקוות כי יותר דפדפנים יתעדכן כדי לאפשר את המאפיין המעבר להיות מיושם אלמנטים פסאודו בעתיד.
- הדגמה
- הורד מקור
עוד השראה
כדי לעורר אותך, בחרנו שלוש דוגמאות מגניב שיכול לתת לך רעיונות עבור עיצוב האינטרנט שלך.
צללים מרתקים
במדריך זה פול אנדרווד הסביר כיצד ליצור אפקט צל מציאותי יותר מרתק באמצעות :לפני ו :לאחר אלמנטים פסאודו. שניהם ממוקמים לחלוטין והניח בחלק האחורי מאוד עם שלילי z-index ערך.
אפקט תמונה מוערם
משתמש ב אלמנטים פסאודו ליצירת אפקט מבולגן התמונה רק עם תמונה אחת על הסימון הוא אפשרי גם. ה אלמנטים פסאודו משמש ליצירת אשליה של התמונות מוערמים בחלק האחורי של התמונה בפועל באמצעות שלילי z-index.
סיכום
עמ 'אלמנטים seudo זה פשוט “מגניב” ובסופו של דבר שמיש, בעצם יש לנו שני רכיבי בונוס עבור כל אלמנט אנו מוסיפים מבלי להפריע למבנה HTML בפועל בכלל, ולאחר מכן להפוך אותם כמעט כל דבר שאנחנו יכולים לדמיין.
למעשה יש שיפור מסוים אלמנטים פסאודו כי כרגע הוא עבד, כגון אלמנטים פסאודו קינונים div :: before :: before content:; ו אלמנטים פסאודו מרובים div :: before (3) תוכן: " אשר ללא ספק יפתח הרבה יותר אפשרויות בתרגול עיצוב אתרים בעתיד. בזמן שהם מיושמים בדפדפנים הנוכחיים, בואו נחכה בסבלנות לעת עתה.
