הוסף אפקט צל לתמונות באמצעות מחולל קוד אוטומטי של CSS3

click fraud protection

CSS מאפשר לך לעצב את דפי האינטרנט שלך בקלות, בקלות רבה. אתה יכול להגדיר יותר ממאה סגנונות טקסט בעמוד אחד (כמובן שהדף שלך ייראה כמו אוהל קרקס) אבל זה נוגע לקלות והגמישות שמגיעים עם השימוש ב- CSS בדפי אינטרנט.ThemeShock יש גנרטור מקודד CSS שיעזור לך להוסיף אפקטים של צל טיפה שונים לתמונות שלך בכמה לחיצות פשוטות. אתה בוחר את האפקט והוא כותב את הקוד; ניתן להוסיף אפקטים בחלק התחתון, הצדדים, העליונה והתחתונה, השמאלית התחתונה, הימנית התחתונה, הימנית העליונה והשמאלית התחתונה או בפינות האלכסוניות.

css-Shadow-Generator_HQ

לפני שאתה מתחיל; בדוק את מימד התמונה שלך (זה שאליו תרצה להוסיף את האפקט). למחולל הקוד מוגדר גבול עליון ותחתון מוגדר מראש של 130 - 347 פיקסלים לרוחב וגובה התמונה. אם ממדי התמונה שלך חורגים מזה, תמיד תוכל לערוך את הרוחב והגובה מאוחר יותר. הקוד מאפשר גם לקבוע את אטימות הצל וטשטושו. אינך יכול להעלות את התמונה שלך במחולל הקוד, ישתמש בתמונת ברירת מחדל כדי שתוכל להציג תצוגה מקדימה של האפקט.

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

instagram viewer

Css3 טיפת צל

לאחר שהכל מוגדר, העתק את קוד ה- CSS לקובץ CSS והעניק לו שם לדף האינטרנט שלך (או נושא). קוד ה- HTML המופיע בדף האינטרנט שלך נוצר גם הוא (הוא ייחודי לכל אפקט שתבחר מהתפריט הנפתח), העתק אותו והניח את קוד התמונה (img src = "") במקום בו כתוב 'הקוד שלך כאן'.

הדבר הטוב ביותר במחולל הקוד הזה הוא שהוא עובד וזה בחינם. יש לו אילוצי מימד לתמונות, אך ניתן לערוך אותם מהקוד. אם אתה משתמש בתמונה שקופה (כמו זו שלמעלה), זה ייתן רקע אפור עמום. ניתן לערוך את צבע הרקע מאוחר יותר מהקוד. (ערוך רקע של שורת קוד: #ccc). הקוד גם נותן מסגרת של 5 פיקסלים לכל התמונות, תוכלו לערוך את המסגרת גם כן, אך הגדלת והקטנת הרוחב תסתיר או תחשוף את הצל יותר מהנדרש, כך שהכי טוב הוא יהיה לבד.

בקר ב- ThemeShock CSS מחולל צלליות

watch instagram story