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 משמעו ללא שקיפות (ואז איןן ממש צורך בזה).
התוצאה היא כזו:
שימו לב לכך שהטקסט נשאר קריא ואילו הרקע שלנו מקבל את השקיפות.
לסיום רק אוסיף את ההערה שתמיד צריך לקחת בחשבון את התמיכה העלובה לcss3 באינטרנט אקספלורר. כדי לתמוך בשקיפות בIE יש צורך בדרך המסורתית.