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