זוהר חיצוני רך שנוסף לאלמנט בדף האינטרנט שלך גורם לאלמנט להתבלט בפני הצופה. להשתמש CSS3 ו- HTML כדי להחיל זוהר סביב הקצוות החיצוניים של אובייקט חשוב. האפקט דומה לזוהר חיצוני שנוסף לאובייקט בתוך פוטושופ.
צור את האלמנט לזוהר
אפקטים של זוהר עובדים על כל רקע, אבל הם נראים הכי טוב על רקעים כהים כי אז נראה שהזוהר מנצנץ יותר. בדוגמא תיבה מלבנית פינתית מעוגלת, אלמנט DIV ממוקם אלמנט DIV אחר עם רקע שחור. ה- DIV החיצוני אינו נחוץ לזוהר, אך קשה לראות את הזוהר על רקע לבן.
הגדר את הגודל והצבע של האלמנט
אחרי שתבחר את האלמנט שאתה הולך לקשט בזוהר, להוסיף סגנונות אליו, כגון צבע רקע, גודל וגופנים.
דוגמה זו היא מלבן כחול; הגודל מוגדר ל- 147 פיקסלים על 90 פיקסלים; וצבע הרקע מוגדר ל- # 1f5afe, כחול רויאל. הוא כולל שוליים למיקום האלמנט באמצע אלמנט המיכל השחור.
סביב הפינות
יצירת מלבן עם פינות מעוגלות קל עם CSS3. הוסף את המאפיין בסגנון רדיוס הגבול למחלקת הזוהר שלך. רק זכרו להשתמש ב –Webkit– ו –מוז– קידומות לתאימות הגבוהה ביותר.
-רדיוס גבול-רשת: 15 פיקסלים;
-מוז-גבול-רדיוס: 15 פיקסלים;
גבול רדיוס: 15 פיקסלים;
הוסף את הזוהר עם צל של קופסא
הזוהר עצמו נוצר בצל קופסה. מכיוון שהוא מבריק את האלמנט כולו מבלי להקרין את הזוהר מצד אחד כמו צל, הגדר את האורכים האופקיים והאנכיים ל- 0px.
בדוגמה זו, רדיוס הטשטוש מוגדר ל- 15px והתפשטות הטשטוש היא 5px, אך אתה יכול להתעסק עם הגדרות אלה כדי לקבוע עד כמה אתה רוצה שהזוהר יהיה רחב ומפוזר. הצבע rgb (255,255,190) הוא צבע צהוב עם שקיפות אלפא RGBa מוגדר ל 75 אחוז -rgba (255,255,190, .75). בחרו צבע זוהר המתאים ביותר לפרויקט שלכם. כמו בעיגול פינות, אל תשכח להשתמש בקידומות הדפדפן (–Webkit– ו –מוז–) לקבלת התאימות הטובה ביותר.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
תיבת צל: 0px 0px 15px 5px rgba (255, 255, 190, .75);