אז בזמן האחרון, משום מה, יצא לי לשחק הרבה עם הצללות שונות באלמנטור פלוס קצת css, אז החלטתי לעשות פוסט מקיף, עם דוגמאות שונות של הצללות מיוחדות שאתם יכולים להוסיף בקלות.
אז נתחיל עם הסבר של כמה דברים בסיסיים לגבי הצללות.
בcss קיימים שני סוגים נפוצים של הצללות,
- הצללה לטקסט (text-shadow)
- הצללה לקופסה (box-shadow)
יש עוד סוג די נדיר בשם drop-shadow שנדבר עליו בסוף הפוסט.
בהצללת טקסט (text-shadow) קיימים 4 ערכים: אופקי, אנכי, טשטוש וצבע.
ככה זה נראה באלמנטור:
וככה כותבים את זה בcss,
text-shadow: 5px 5px 10px blue;
לעומת זאת בהצללת קופסה (box-shadow) קיימים 6 ערכים (יש עוד, אלה הנפוצים): אופקי, אנכי, טשטוש, פיזור, צבע ומיקום (חיצוני או פנימי).
ככה זה באלמנטור (בדר”כ בלשונית מתקדם-מסגרת):
וככה כותבים את זה בcss (במקרה של חיצוני-ללא הinset),
box-shadow: 5px 5px 10px 20px blue inset;
ועוד משהו קטן (וממש חשוב) לפני שמתחילים, החסרון הכי גדול של אלמנטור בהצללות, זה חוסר היכולת לתת יותר מהצללה אחת לעומת זאת עם css אפשר לתת כמה הצללות שרוצים, פשוט מפרידים ביניהם עם פסיק (דוגמאות בהמשך).
טוב אז בואו נתחיל לעבוד,
תוכן עניינים
טקסט זוהר (ניאון)
יש כמה דרכים ליצור טקסט זוהר, בדר”כ זה יהיה על רקע שחור, ונשחק עם צבע הטקסט וההצללה שלו.
אני טקסט זוהר
כן, אני יודע, לא משהו, זה בערך הכי טוב שאפשר להגיע עם אלמנטור לבד, הסיבה היא שבהצללה לטקסט אין את האפשרות של פיזור (בכפתור למשל-כן אפשר לתת פיזור), לכן בשביל להגיע לתוצאות טובות יותר, אנחנו חייבים לתת יותר מהצללה אחת.
אני טקסט זוהר
יותר טוב, לא?
הנה הקוד של זה,
selector {text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;}
והנה עוד דוגמא,
אני טקסט זוהר
ואם אתם רוצים להגזים, אז הנה זה במהבהב,
אני טקסט זוהר
זה משתמש באנימציות css, לא ממש הנושא של הפוסט הזה, בכל אופן הנה הקוד,
selector {
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
פולסים
גם זה משתמש באנימצית css לתת את האפקט הפועם,
selector
{background: #500523;
border-radius: 50%;}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
}
70% {
box-shadow: 0 0 0 50px rgba(168, 63, 57, 0);
}
100% {
box-shadow: 0 0 0 150px rgba(168, 63, 57, 0);
}
}
selector {
animation: pulse 2s infinite;
}
צללית צד
לא יודע מה השם הנכון לזה, אבל לאחרונה אני רואה את זה בכל מקום, ככה זה נראה,
די קל לעשות את זה עם אלמנטור, הרעיון זה להוסיף ווידג’ט מרווח, לתת לזה הצללה, להעלות את זה למעלה (שוליים חיצוניים – מינוס), ואז לתת לזה הטיה קלה (תצטרכו לשחק קצת עם ההצללה והשוליים החיצוניים עד שזה ייצא טוב), הנה הקוד להטיה,
selector{transform: rotate(-3deg)}
הנה עוד דוגמה יפה, פשוט להוסיף עוד מרווח, עם הטיה לצד השני,
הצללה עגולה
שוב לא סגור על איך קוראים לזה, אבל זה ממש יפה,
נורא פשוט עם אלמנטור (בלי קוד),הרעיון זה שוב להוסיף ווידג’ט מרווח, ולתת לו רקע צבע מעבר – מעגלי, הנה תמונה של ההגדרות,
ניאומורפיזם
ניאומורפיזם בדר”כ מיושם על כפתורים, הוא נותן מראה של תלת מימד, והדרך לעשות את זה באמצעות הצללה כהה בצד אחד, והצללה בהירה בצד השני.
הנה דוגמא לכפתורים ניאומרפיסטים,
אבל כבר עשיתי על זה פוסט שלם, הנה זה.
הצללות מרובות
כאמור באלמנטור אי אפשר להוסיף יותר מהצללה אחת, לעמות זאת עם css אפשר, הנה דוגמא בסיסית למה שאפשר לעשות,
2021
למעשה ההצללה הראשונה היא באותו צבע של הרקע.
הנה הקוד,
selector{
text-shadow:
4px 4px 0px #d5d5d5,
7px 7px 0px rgba(0, 0, 0, 0.2);
}
טקסט תלת מימד
הרעיון הוא לתת כמה הצללות אחד אחרי השני,
תלת מימד
הנה הקוד,
selector {
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
והנה דוגמא יפה במעבר עכבר,
מעבר עכבר
הצללה לאותיות בודדות
הנה דוגמא,
1
2
0
2
הרעיון הוא שלמרות שזה נראה כמו מילה אחת, באמת כל מספר (או אות), הוא בפני עצמו, זה מאפשר לתת לכל אות עיצוב שונה או לשים אחת על גבי השנייה.
למעשה זה לא נוגע רק להצללות, אפשר לתת צבע שונה לכל אות, להטות, לתת אפקט תנועה ובעצם כל דבר.
הדרך לעשות את זה, בלשונית מתקדם-מיקום, צריך לתת מיקום בתוך השורה.
8 תגובות
קצת דילגת, אבל שכחת להסביר את נושא ה-‘animation’ שמאפשר ליצור דינמיות בעיצוב (כמו שהשתמשת בזה למעלה). למתקדמים כמונו זה בסדר. אבל תסביר למתחילים מה עשית…
אולי זה יעזור למישהו
selector:{transition: 0.5s;
text-shadow: 1px 1px #fe4902,
2px 2px #fe4902,
3px 3px #fe4902;
}
מגניב ממש!
תודהההה
תודה רבה! מחכים לעוד מאמרים! 🙂
אהבתי ממש!
רק לא ראיתי קוד להצללה תלת מימד במעבר עכבר- אפשר?
מדהים
מחכים מאוד
תודה 🙂
תודה!
אשמח לדעת איך ניגשים לצל של תמונה בCSS בסליידר תמונות