כיום הופכת יצירת עיצוב אתראמנות אמיתית. זו לא סתם קבוצת אלמנטים של עמוד בצבע וגודל מסוים, גופנים בסגנונות שונים וציורים נושאיים. על מנת להפוך את האתר שונה מאחרים, כדי למשוך את תשומת ליבם של המבקרים ולהפנות אותו לאלמנטים מסוימים, משתמשים במספר עצום של שיטות וכלים. ביניהם יש מאפיין פופולרי מאוד של css - שקיפות. טכניקה זו די אופנתית ומרהיבה, ולכן משתמשים בה לעתים קרובות. ניתן להעניק שקיפות לאובייקטים שונים בדף האתר - טקסט, חסימה שלמה או תמונה, למשל. זה מושג גם בדרכים שונות. שקול אותם למטה.
פרמטרים להגדרת שקיפות של אלמנטים
פרמטרים המאפשרים להתאים את התואראלמנטים שקיפות, כמה. הם משמשים בהתאם למטרות הספציפיות, כמו גם לדפדפן שמתוכו "מותאם אישית" של העיצוב. אלה כוללים את המאפיינים הבאים:
- אֲטִימוּת;
- פילטר;
- תמונת PNG כרקע.
ערכי ה- "שקיפות" של ה- css משתניםכדלקמן: ככל שהספרה גדולה יותר, כך רמת השקיפות של האלמנט נמוכה יותר. באטימות זה משתנה בין 0 ל -1, במסנן - בין 10 ל 100. יתר על כן, האחרון משמש לדפדפן Interet Explorer, ונכס האטימות משמש לכל האחרים.
שקיפות תמונה (משתנה)
נתחיל באפשרות כאשר שקיפות תופיע כשאתה מרחף מעל אלמנט של סמן העכבר.
בואו נבחן כיצד להגדיר את השקיפות של התמונה. CSS מציע שתי אפשרויות. כדי לעשות זאת, עליך לכתוב אותו ישירות בקוד של מסמך ה-html באופן הבא:
- ציין את הנתיב לתמונה.
- אנו קובעים את פרמטרי השקיפות כשאתה מרחף ולא. לשם כך אנו משתמשים בתכונות onmouseover ו- onmouseout, בהן אנו כותבים את ערכי האטימות והסינון.
אותם מאפיינים ניתנים לכתיבה במסמך ה- css, ובקוד המקור להוסיף רק קישור אליו. התוצאות יהיו זהות.
שקיפות של בלוקים של טקסט ודפים
לגבי טקסט או בלוק (שקיפות div),css מציע להשתמש באפשרות הדומה ליצירת שקיפות תמונה, כלומר שימוש בקובץ css הכלול, בו יוגדרו הפרמטרים הדרושים. אתה יכול ללכת בדרך פשוטה יותר. בעת עיצוב בלוק בסגנון div או טקסט p, הוסף את קוד ה-html הבא עבור הרכיבים onmouseover ו-onmouseout. שתי האפשרויות עובדות ונותנות את התוצאה הרצויה.
שקיפות מתמדת
במקרים מסוימים, ייתכן שיהיה צורך להגדיר לצמיתות את השקיפות של אובייקט, אלמנט עיצובי או טקסט. במצב זה, הפתרון אפילו קל יותר מאשר ריחוף מעל העכבר.
עבור רכיב css, שקיפות תוגדרעם הקוד הבא. בבלוק בסגנון div, כתוב את הערכים עבור הרקע (לדוגמה, # ff8800), האטימות (למשל, 0.5), כמו גם את הרוחב והריפוד.
עבור התמונה, הזינו את ערכי האטימות והסינון בקוד, וציין גם את הנתיב לתמונה.
שיטת RGBA
יש גם מקרי שימוש אחריםמאפיין זה css: ניתן להחיל שקיפות על צבע הרקע של כל אלמנט עיצובי. לשם כך, נעשה שימוש בשיטת RGBA. שלוש האותיות הראשונות מייצגות את צבעי היסוד (אדום, מלא, כחול), והאחרונה היא אלפא, הקובעת את רמת השקיפות. באמצעות פורמט RGBA, אנו קובעים את מידת השקיפות, ומציינים אותה בספרה האחרונה. לדוגמה, כך: רקע: rgba (240,2,33,0.4035).
מסקנה
לפיכך, באמצעות במהלך העבודה עלהעיצוב של האתר הוא מאפיין css פשוט אך יעיל "שקיפות", אתה יכול להפוך את האלמנטים שלו למעניינים ומורגשים יותר במינימום מאמץ. האפשרויות המתוארות לציון מאפייני השקיפות יעזרו לך בכך.
