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

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

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

שקיפות

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

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

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

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

שקיפות div

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

נתחיל עם האפשרות כאשר השקיפות תופיע בעת מעבר עם העכבר מעל אלמנט של סמן העכבר.

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

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

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

שקיפות תמונה

שקיפות של טקסט וחסימות דפים

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

שקיפות קבועה

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

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

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

שקיפות טקסט

שיטת RGBA

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

מסקנה

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

חדשות קשורות


תגובות (0)

הוסף תגובה