DCSIMG
background CSS3 - שלמה גולדברג (הרב דוטנט)

שלמה גולדברג (הרב דוטנט)

מרצה בסלע ויועץ בעולם ה - net.

background CSS3

 

מהם השינויים במאפיין background בתקן CSS3

 
 
כחלק מהתקן של CSS3 נכנסו מספר שינויים במאפיין background, חלקם כבר ממומשים וחלקם עדיין לא.
 
בפוסט זה אני אתאר את חלק מהמאפיניים החדשים הממומשים בו.
 
 
מאפיינים:
box-shadow
size
Image
clip
attachment
 
 
box-shadow
מאפיין זה נותן את היכולת לתת צל לכל אלמנט בעמוד, הוא מקבל ששה פרמטרים:
 
מספר מה ההפרש לצד ימין (או לשמאל אם מדובר במספר הקטן מ - 0) מהאלמנט עצמו.
מספר מה ההפרש למטה (או למעלה אם מדובר במספר הקטן מ - 0) מהאלמנט עצמו.
מספר המאפיין את עוצמת הטישטוש של הצל.
מספר המציין את ההתפשטות של הצל.
צבע הצל.
פרמטר בשם inset המגדיר האם הצל הוא חיצוני לאלמנט או בתוך האלמנט.
 
 
שני המאפיינים הראשונים הם חובה, השאר אופציונליים.
 
דוגמא:
 

div

{

    width: 150px;

    height: 150px;

    margin: 20px;

    box-shadow: 5px -5px 0px 0px rgb(150,150,150);

    border: 1px solid black;

}

 
נקבל את האפקט הבא
 
box shadow
 
אפשר גם לתת כמה שכבות של צל, למשל:
 
 

div

{

    width: 150px;

    height: 150px;

    margin: 20px;

    box-shadow: 5px -5px 0px 0px rgb(150,150,150),

                7px -7px 0px 0px rgb(175,175,175),

                10px -10px 0px 0px rgb(200,200,200);

    border: 1px solid black;

}

 
שווה לשחק עם הפרמטרים השונים כדי לראות את האפקט היפה של הצל שאפשר לתת.
 
 

div

{

    width: 150px;

    height: 150px;

    margin: 20px;

    box-shadow: 0px 0px 0px 5px rgba(0,0,0, 0.1) inset,

                0px 0px 0px 10px rgba(0,0,0, 0.2) inset,

                0px 0px 0px 15px rgba(0,0,0, 0.2) inset,

                0px 0px 0px 20px rgba(0,0,0, 0.3) inset,

                0px 0px 0px 25px rgba(0,0,0, 0.4) inset,

                0px 0px 0px 5px rgba(0,0,0, 0.5) inset;

    border: 1px solid black;

    background-color: Orange;

}

 

box-shadow

 
 
 
background-size
בכל סביבות הפיתוח שאנחנו מכירים יש אפשרות לקבל תמונה מהגרפיקאי ולהגיד לאובייקט שמכיל את התמונה באפליקצייה לשנות את גודל התמונה לפי הגודל הרצוי, גם ב - html כשאנחנו שמים אובייקט img אפשר לשנות את גודל התמונה, אבל אף פעם לא יכולנו לשנות תמונה כשהיא הייתה מוגדרת ברקע של האלמנט, מעכשיו נוכל לעשות זאת, המאפיין מקבל את האופציות הבאות:
 
auto - מה שהיה עד היום (ברירת מחדל).
contain - מתאים את גודל התמונה לגודל הכי גודל שמתאים לרוחב וגובה האלמנט שמכיל אותו. כשהוא שומר על היחס גובה רוחב.
cover - מתאים את גודל התמונה לגודל הכי קטן שמתאים לרוחב וגובה האלמנט שמכיל אותו. כשהוא שומר על היחס גובה רוחב.
מספר בפיקסלים.
מספר באחוזים.
 
 
background-image
יודע לקבל יותר מתמונה אחת בו זמנית (בעזרת הפרדה עם פסיקים) כך שיהיה ניתן לשים כרקע יותר מתמונה אחת.
 

background-image: url(m.png), url(c.png);

 
background-clip
מגדיר מהיכן מתחיל שטח הציור של הרקע,מקבל את האופציות הבאות.
 
border-box - ברירת המחדל, מתחיל מהנקודה העליונה כולל השטח של ה - border.
padding-box - מתחיל מאחרי ה - border.
content-box - מתחיל מהתוכן.
 
clip
 
 
 
background-attachment
יודע לקבל שני פרמטרים.
scroll - ברירת המחדל, מגדיר שתמונת הרקע תגלל יחד עם האלמנט במידה ויש גלילה.
fiexd - מגדיר שבמידה ויש גלילה התמונה לא נגללת.
פורסם: Apr 10 2011, 07:38 AM by Shlomo | with 2 comment(s)
תגים:, ,

תוכן התגובה

נחמן 555 כתב/ה:

בהחלט ה shadow דבר מגניב.

גם ה border-radius (שלא ציינת במאמר).

הבאסה שזה נתמך רק בכרום.

בIE9 לא בדקתי, אבל ב IE8 וב FF זה לא נתמך.

# May 1, 2011 12:59 AM

נחמן 555 כתב/ה:

יש פה טבלה שעזרה לי הרבה,

עם התאמות CSS שונים

לגרסאות שונות של IE

msdn.microsoft.com/.../cc351024(v=vs.85).aspx

# May 2, 2011 6:59 PM
שלח תגובה

(שדה חובה)  

(שדה חובה)  

(אופציונלי)

(שדה חובה) 

Please add 2 and 6 and type the answer here:


Enter the numbers above: