CSS Mask in HTML 5

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

בהמשך לפוסט הקודם על css ב html5 עשיתי עוד ניסוי קטן לגבי masks (אולי  מיסוכים?) .
רציתי להחליף צבעים תכנותית לתמונה קיימת . כדי לעשות את זה ניגשתי למלאכה והתחלתי לנבור ברשת , די מהר מצאתי שגם לזה יש פתרון ב css3.

מיקמתי שני div אחד מעל השני – בראשון תמונה של מכונית (המכונית חייבת להיות לבנה כדי שנוכל לצבוע אותה בקלות)

gist code snippet

בשני צללית של המכונית , הצללית כוללת אך ורק את החלקים שרציתי לצבוע דינאמית.

gist code snippet

ועל זה הוספתי סקריפט jQuery שמשנה את צבע הרקע של div.carMask

gist code snippet

וככה זה ניראה :

frame content