css3 rgba

rgb מסמן את אופן יצירת בצבע שבו אנחנו רוצים להשתמש. r = אדום, g = ירוק וb = כחול. שילובם של ערכים שונים שלהם יוצרים את המבע שנרצה בו.

הבעיה היתה תמיד לגבי יצירת שקיפות. כדי להשיג שקיפות היינו מחוייבים להשתמש בקובץ גרפי מסוג PNG (לרוב).

יכולנו להשתמש בתכונת הopacity אבל זה יושם על אלמנט שלם. למשל אם היה לנו טקסט עם רקע והיינו מיישמים עליו את השקיפות הכל (טקסט + רקע) היו מקבלים את השקיפות,

ולא רק הרקע או רק הטקסט.

css3 מעניק לנו שליטה טובה יותר בדברים ומאפשר לנו להמנע משימוש בקבצים גרפיים (מה שמאיץ את השימוש בדף).

בואו ניצור דיב עם id= בוקס. ולשם צפיה בשקיפות נשים על תג הגוף תמונת רקע.

עתה נעצב את הדיב שלנו כך:

body{
              background-image: url("images/found.gif");
              background-repeat: repeat;
          }
          #box{
              width: 300px;
              height: 300px;
              background-color: rgba(239, 221, 29,0.5);
              border: 3px solid #FFF;
          }

          #box h1{
              text-align: center;
              color: rgb(0,0,0);
              background-color: rgba(255, 255, 255,0.8);
              padding: 5px;
          }

 

ה-a שבrgba מסמנת ערך האלפא, והערך צריך להיות בין 0 ל 1. כאשר 1 משמעו ללא שקיפות (ואז איןן ממש צורך בזה).

התוצאה היא כזו:

alpha

 

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

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *