CSS נכס "שקיפות" - דרך פשוטה להפוך את אתר עיצוב מעניין יותר

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

פרמטרים מציינים את האלמנטים של שקיפות

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

• אטימות;
• לסנן;
• PNG דימוי כרקע.

CSS ערך הנכס "שקיפות" מוחלף כדלקמן: ככל שהמספר גבוה יותר, כך יורדת רמת השקיפות של האלמנט. השקיפות, זה משתנה בין 0 ל -1, במסנן - מ 10 עד 100. וזו משמשת דפדפן Interet Explorer, וכל רכוש האטימות הרלוונטי האחר.

שקיפות תמונה (שינוי)

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

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

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

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

שקיפות של גושי טקסט ועמוד

באשר טקסט או לחסום (div שקוף), CSS מציעה אפשרות שלה, דומה ליצירת תמונה שקופה, אתה צריך להשתמש ב- CSS-קובץ מחובר, שבו הפרמטרים הרצויים נקבעים. אתה יכול ללכת בדרך פשוטה יותר. כאשר אתה מגדיר את הסגנון div style לחסום או טקסט p לקבוע את ה- HTML-הקוד הבא onmouseover ו onmouseout אלמנטים. שתי האפשרויות לעבוד ולייצר את התוצאה הרצויה.

מתמיד שקיפות

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

רכיב CSS לשקיפות תינתן על ידי קוד הבאה. בסגנון div בלוק לקבוע ערכים עבור הרקע (לדוגמה, # ff8800), אטימות (למשל, 0.5) ואת רוחב (רוחב) ריפוד (padding).

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

RGBA-השיטה

ישנן אפשרויות אחרות לשימוש CSS נכס זה: שקיפות ניתן ליישם צבע הבסיס של כל אלמנט העיצוב. היא משתמשת בשיטת RGBA. לשלושת המכתבים הראשונים לעמוד של צבעי היסוד (אדום, ביקוע, כחול), ואת האחרון - אלפא, אשר קובע את רמת השקיפות. שימוש בפורמט RGBA קובע שקיפות, וכיוון אותו אל הספרה האחרונה. לדוגמה, כ: רקע: RGBA (240,2,33,0.4035).

מסקנה

לפיכך, על ידי שימוש במהלך העבודה על עיצוב אתר פשוט אך יעיל תכונה css "שקיפות", אתה יכול לעשות את זה יותר מעניין ויותר אלמנטים מורגש במינימום מאמץ. ההתגלמות תארה הן תכונות שקיפות מנהג תעזורנה לך עם זה.