הנקודות החשובות
- 01כל פרמטר box-shadow יש slider משלו בתוספת קלט מספרי עבור pixel-דיוק tuning.
- 02Inset החלף מעברים בין drop צל ו-פנימי צל עבור לחץ או neumorphic השפעות.
- 03צבע ו-opacity הם בשלוט בנפרד, outputting rgba() עבור קריא CSS.
- 04תצוגה מקדימה משתמש בפועל CSS קניין בפועל אלמנט - מה אתה לצפות הוא בדיוק מה stylesheet שלך מרניצים.
למה השתמש בחזותי Box-Shadow גנרטור
CSS box-shadow לוקח עד שישה ערכים - offset אופקי, offset אנכי, blur רדיוס, spread רדיוס, צבע, וכלי אופציונלי inset. הקלדה אותם מ-זיכרון עבודה עבור צללים רציני, אבל עבור דבר יותר nuanced - glow חדר, עמוק drop צל, רך הגבהה שכבה - אתה ניחוש וreloading עד דבר נראה נכון.
גנרטור חזותי collapses כי תשובה לולאה. זוז slider, לצפות השינוי באופן מיידי, והעתק רק כאשר אתה מרוצה. גנרטור box-shadow של Handytool פועל לחלוטין בדפדפן שלך, כדי תצוגה מקדימה היא בפועל CSS קניין משומש לפועל אלמנט - לא rendering הבדלים בין כלי ואמיתית דף שלך.
כיצד כדי עיצוב Box צל
- 01
כיוונן הOffsets אופקיים ואנכיים
חיובי ערכים זוז צל ימינה ומטה. שלילי ערכים זוז את זה שמאלה ואם. צל קנוני (0, 0) יוד glow השפעה.
- 02
קבע blur רדיוס
גבוה יותר blur ערכים יוד רך, יותר diffuse צללים. אפס blur מייצור קשה, טוקו צל outline.
- 03
כיוונן spread רדיוס
חיובי spread מגדיל צל לפני blurring. שלילי spread shrinks את זה, איזה שימושית עבור חדר תת-אלמנט צללים.
- 04
בחר צבע ו-opacity
השתמש בעורך צבע כדי בחר צל hue, אז חוג מטה opacity עבור subtlety. פלט משתמש rgba() כדי שמור ערכים קריא.
- 05
החלף inset אם צריך
Inset מעברים מ-drop צל כדי פנימי צל - שימושית עבור לחץ כפתורים, בעקבות קלטים, וneum morphic משטחים.
- 06
העתק את CSS הצהרה
לחץ על Copy כדי תפיסה את מלא box-shadow ערך והדבק את זה לתוך stylesheet שלך.
לא עלייה, לא חשבון
גנרטור הוא לחלוטין צד-הלקוח. צבע בחירות שלך, ערכים מספרי, וקדם מיסתרים נשארות בדפדפן שלך - שום דבר לא שלח לשרת. יש חשבון כדי יצור וללא שימוש מגביל.
כי קטע תצוגה מקדימה משתמש בפועל CSS box-shadow קניין, פלט דיוק לפי הגדרה - יש לא בד rendering או screenshot approximation מעורב. ה-pixel ערכים אתה העתק הם pixel ערכים הדפדפן משתמש.
Box-Shadow Generator FAQ
מה עושה spread ערך עשות?
חיובי spread מגדיל את צל בתוך כל כיוונים לפני blur משומש; שלילי spread shrinks את זה. שימושית עבור חדר, מוגדר glows כאשר matched עם נמוך blur.
האם אני יכול כדי להוסיף מרובה box צללים?
גנרטור זה פלט צל יחיד בזמן. כדי שכבה אותם, העתק את ערך ומפריד מרובה צללים עם פסיקים בתוך CSS שלך - box-shadow קבל רשימה פסיק-מפרידים.
למה inset צל שלי בלתי נראה?
Inset צללים ציור בתוך אלמנט, כדי הם צריך רקע צבע או נראה ריפוד כדי הצג. הם לא יתממשכו בתוך transparent או אפס-גודל אלמנטים.
האם תצוגה מקדימה pixel-דיוק?
כן - תצוגה מקדימה משתמש בפועל CSS box-shadow קניין בפועל DOM אלמנט, כדי מה אתה לצפות הוא בדיוק מה stylesheet שלך יוצר.
מה זה neumorphic צל?
Neumorphism משתמש שתי צללים - אחד קל ואחד אפל - offset בתוך כיוונים נגדיים כדי עשות אלמנט מופיע הרם או לחץ מ-רך משטח. שתיהן צללים בדרך כלל inset עבור לחץ variant.