10 טכניקות יצירתיות באמצעות CSS3 Box Box
ראינו מספר עצום של התקדמות בפיתוח CSS3 אינטרנט במהלך השנים האחרונות. אתרי אינטרנט פופולריים בכל רחבי האינטרנט החלו לשלב סגנונות ייחודיים רבים כגון פינות מעוגלות ושאלות מדיה לנייד. אבל עוד יותר חשוב זה פתח את הדלת עבור ממשקים יצירתיים להיות prototyped בתוך דקות.
במאמר זה אני רוצה לשתף 10 קטעי קוד הנוגעים עיצובים מבריק CSS3 עיצוב תיבת. אני אסביר איך עובד קוד ואיך אתה יכול ליישם כל צל תיבת לתוך אתר האינטרנט שלך.
סגנונות אלה כולם מיוחסים השפעה עיצוב נהדר מאתרים פופולריים אחרים. זוהי דוגמה מצוינת כיצד מפתחי האינטרנט הנוכחי בונה מגמות השפעה על העתיד של עיצוב אתרים.
1. סרגל הכלים למעלה קבוע
הרומני שירות מדיה חברתית Trilulilu משתמש בסרגל העליון צף סביב האתר כולו שלהם. זה יכול להיות שנוצר במהירות באמצעות מיקום: קבוע; רכוש על כל רכיב בר העליון. אבל זה תוספת תיבת צל לוקח את האפקט לרמה חדשה לגמרי.
#banner position: fixed; גובה: 60px; רוחב: 100%; top you01; משמאל: 0; border-top: 5px solid # a1cb2f; רקע: #fff; -Moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-index: 999999; #banner h1 line-height: 60px;
תוכל להבחין נכס צל צל הוא למעשה להגדיר עם שילוב ערך פשוט למדי. הצל יפול מתחת לתיבה, וצלם של 3px בכל צד.
אנחנו יכולים להשתמש rgba () שיטה להחלת אטימות קלה על הצל, ולכן האלמנט אינו מופיע כהה מדי. זה תוספת עדינה אשר בוודאי ללכוד את תשומת הלב של המבקר שלך.
- הדגמה
2. תת תפריט נפתח
הנה עוד יצירתי תיבת צל שיטת להחיל על התפריט הנפתח Scalar תת תפריט. אפקט דומה ניתן לראות על היזם כפי שאתה מרחף מעל כל אחד הקישורים הניווט הראשי. זה בהחלט קצת יותר מסובך להגדיר אבל שווה את הסבלנות.
#bar display: block; גובה: 45px; רקע: # 22385a; padding-top: 5px; margin-bottom: 150px; מקומות קרובים # ul ul margin: 0px 15px; משפחת גופן: קנדרה, קאליברי, "ממשק משתמש של סגו", סגו, אריאל, סאנס-סריף; #bar ul li background: # 22385a; בלוק תצוגה; font-size: 1.2em; מקומות קרובים צף: משמאל; #Bar ul סוללת Li display: block; צבע: # fffff7; line-height: 45px; מודגש; ריפוד: 0px 10px; text-decoration: none; z-index: 9999; #bar ul li a: hover, #bar ul li a.selected color: # 365977; רקע: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; #bar ul .subnav display: block; משמאל: 14px; top: 48px; z-index you -1; width: 500px; תפקיד מוחלט גובה: 90px; border: 1px solid # edf0f3; border-top: 0; ריפוד: 10px 0 10px 10px; overflow: hidden; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -Moz-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (כוח = 3, כיוון = 180, צבע =" # 333333 "); מסנן: progid: DXImageTransform.Microsoft.Shadow (כוח = 3, כיוון = 180, צבע = "# 333333");
הקישורים ניווט יכול להיות מנוסח כדי לשנות את צבע כאשר נבחר או על העכבר לרחף. אני גם מוסיף כמה גבולות מעוגלים על הקישורים מעל התפריט הנפתח בתפריט. זה נותן תחושה נעימה יותר מאשר הקצוות קשה מסביב. אני גם עושה שימוש טוב -ms- מסנן ו מסנן תכונות שהן קנייניות בלבד ל- Internet Explorer.
אם אתה מגדיר מערכת ניווט מלאה, תוכל לשנות את התצוגה המוגדרת ללא ולהסתיר את התפריט לאחר טעינת הדף. לאחר מכן באמצעות jQuery כמה אתה יכול למקד את האירוע. Hover () ולהציג את סרגל subnav עם תוכן מעודכן.
- הדגמה
3. לחצן צל מבריק
זה אולי אחד הסגנונות האהובים עלי ליצור רק בגלל כמה דינמי זה מופיע בדף. אם אינך יכול לדעת, זהו הלחצן הכחול הקטן שנמצא בדף הבית של YouTube לאחר הכניסה הראשונה.
בלוז color: #fff; רוחב: 190px; גובה: 35px; הסמן: מצביע; משפחת גופן: Arial, Tahoma, sans-serif; font-size: 1.0em; מודגש; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-width: 1px; border-color: # 0053a6 # 0053a6 # 000; צבע רקע: # 6891e7; background-image: -Moz-linear-gradient (למעלה, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-gradient (למעלה, # 4495e7 0, # 0053a6 100%); background-image: -o-linear-gradient (למעלה, # 4495e7 0, # 0053a6 100%); תמונת רקע: -webkit-gradient (ליניארי, שמאלי למעלה, תחתון שמאלי, צבע-עצור (0, # 4495e7), צבע (100%, # 0053a6)); background-image: -webkit-linear-gradient (למעלה, # 4495e7 0, # 0053a6 100%); background-image: ליניארי-שיפוע (לתחתית, # 4495e7 0, # 0053a6 100%); טקסט בצל: 1px 1px 0 rgba (0, 0, 0, .6); -Moz-box-shadow: Inset 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); מסנן: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6); .blues: רחף border-color: # 002d59 # 002d59 # 000; -Moz-box-shadow: Inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 25); מסנן: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image: -Moz-linear-gradient (למעלה, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-gradient (למעלה, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linear-gradient (למעלה, # 3a8cdf 0, # 0053a6 100%); תמונת רקע: -webkit-gradient (צבע לינארי, שמאלי, תחתון שמאלי, צבע-עצור (0, # 3a8cdf), color-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (למעלה, # 3a8cdf 0, # 0053a6 100%); תמונת רקע: שיפוע לינארי (לתחתית, # 3a8cdf 0, # 0053a6 100%); .blues: פעיל border-color: # 000 # 002d59 # 002d59; -Moz-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; מסנן: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -Moz-linear-gradient (למעלה, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-gradient (למעלה, # 005ab4 0, # 175ea6 100%); background-image: -o-linear-gradient (למעלה, # 005ab4 0, # 175ea6 100%); תמונת רקע: -webkit-gradient (ליניארי, שמאלי למעלה, שמאל למטה, צבע-עצור (0, # 005ab4), צבע (100%, # 175ea6)); background-image: -webkit-linear-gradient (למעלה, # 005ab4 0, # 175ea6 100%); תמונת רקע: שיפוע ליניארי (לתחתית, # 005ab4 0, # 175ea6 100%);
כל קוד הכפתור הוא הרבה להסתכל, אבל אנחנו מנסים כדי לתמוך בדפדפנים רבים ככל האפשר. ישנם צללי טקסט וצללי תיבה עם תמיכה נלווית עבור MS Internet Explorer 7+. גם אנחנו הגדרת תמונת רקע רכוש עם מעברי CSS3 על פני מספר רב של קידומות הספקים הספציפיים.
אבל אם אתה אוהב את סגנון העיצוב אז מצבים מרחפים ומצבים פעילים ימשכו גם את תשומת הלב. אנחנו בעצם מעדכנים את הגבול כדי לכלול כמה צללים בפנים תוך כדי לחיצה למטה, תוך עדכון צבע הרקע כדי להראות קצת יותר כהה.
מאחר שאין תמונות על כפתור אתה יכול לעדכן את ערכי hex ו morph זה כדי למזג לתוך כמעט כל ערכת צבעים.
- הדגמה
4. הודעות תפריט
אני לא משתמש גדול של פייסבוק אבל שמתי לב כמה טכניקות ממשק המשתמש שלהם מחדש. ניתן להשוות את תפריט העקיפה הזה להודעות או לחלון קופץ שנמצא בדף הבית.
.flyout width: 310px; margin-top: 10px; font-size: 11px; מקומות קרובים משפחת גופן: 'לוסידה גרנדה', טאהומה, ורדנה, אריאל, סאנס-סריף; צבע רקע: לבן; ריפוד: 9px 11px; רקע: rgba (255, 255, 255, 0.9); border: 1px solid # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -Moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; .flyout #tip background-image: url ('images / tip.png'); רקע-לחזור: לא לחזור; background-size: אוטומטי; גובה: 11px; תפקיד מוחלט top: -11px; משמאל: 25px; width: 20px; .flyout h2 text-transform: uppercase; צבע: # 666; font-size: 1.2em; ריפוד תחתון: 5px; margin-bottom: 12px; border-bottom: 1px solid #dcdbda; . עמ 'padding-bottom: 25px; font-size: 1.1em; צבע: # 222; אין כאן הרבה קוד כיפוף מוח חדש שמוצג כאן. אני משתמש קטן .טיפ עם רכיב span פנימי כדי להוסיף את המשולש tooltip. ניתן ליצור משולשים CSS3 טהור אבל שיטה זו אינה קלה, כפי שאתה יכול לדמיין. אם אתה מעדיף את השיטה זה עשוי להיות שווה פריצה משהו ביחד. אבל תכונות סיבוב CSS3 אינן נתמכות בכל מקום; בינתיים התמונות אינן דורשות שום שיטת חזרה.
- הדגמה
5. Apple Wrapper עמוד
יש כל כך הרבה צלחות מרשים CSS3 תיבת אתה יכול למצוא באתר הרשמי של אפל. דוגמה זו להלן היא מיכל קטן עם כמה שורות עמודה. כאשר מסתכלים על הפריסה של אפל תוכלו להבחין רבים של הדפים שלהם מורכב תיבות עטיפה רבים.
.applewrap רוחב: 100%; בלוק תצוגה; גובה: 150px; רקע: לבן; border: 1px solid; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; -Moz-box-shadow: rgba (0,0,0,0.3) 0 1x 3px; box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; .applewrap .col float: left; box-sizing: border-box; רוחב: 250px; גובה: 150px; ריפוד: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; צבע: # 343434; border-right: 1px solid #dadada;
אתה יכול להרכיב דף דומה נפרדו על ידי תיבות התוכן של רוחב וגובה שונים. אמנם יש לי כמה טורים לתוך הדגמה זו היא לא טכניקה עיצוב הכרחי בכל אמצעי. צל התיבה יתאים בצורה הטובה ביותר על רקע לבן / אפור. אבל אני חושב להציג על כל צבע האור ייראה די טוב.
- הדגמה
6. תיבת תוכן של אפל
זה סגנון אחר של תיבת תוכן באתר האינטרנט של אפל משמש בעיקר עבור עיצובים עמודה. אלה הם בעיקר בחלק התחתון של הדף לראווה עסקאות ומידע רלוונטי אחר. זה סגנון עיצוב שונה לחלוטין עם צל תיבת המוצגים מבפנים מלמעלה למטה.
.applebox width: auto; גובה: 85px; box-sizing: border-box; רקע: # f5f5f5; ריפוד: 20px 20px 10px; שוליים: 10px 0 20px; border: 1px solid #ccc; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: Inset 0px 1px 1px rgba (0, 0, 0, .3); -Moz-box-shadow: Inset 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); .applebox .col width: 140px; צף: משמאל; margin: 0 0 0 30px;
אני לא חושב שקוד זה צריך להיות קשה מדי לעקוב ולהעתיק על גבי מיכל div אחר. רק את תיבת צל אנו להחיל משתמש הַבלָעָה עם קודי צבע אלפא שקופים. אז למרות שיש לנו את טיפת צל מוגדר שחור טהור אנחנו רק מציג על אטימות 30%.
- הדגמה
7. קישורים מומלצים
זה כנראה הסגנון האהוב עלי תיבת צל מהאתר הנוכחי של אפל. אתה צריך למצוא סגנון הדגמה חיה של טכניקה זו בדף iCloud עם סדרה של תיבות קישור צף.
.applefeature גובה: 150px; שוליים: 8px; An University An University הצג: inline-block; .applefeature a display: block; רוחב: 168px; גובה: 140px; border: 1px solid #ccc; צבע: # 333; text-decoration: none; מודגש; line-height: 1.3em; רקע: # f7f7f7; -webkit-box-shadow: Inset 0 1x 2px rgba (0, 0, 0, .3); -Moz-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; .applefeature a: העבר את העכבר background: #fafafa; רקע: -webkit-gradient (ליניארי, 0% 0%, 0% 100%, מ- (#fff), אל (# f7f7f7 #); background: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: inset 0 1x 2px rgba (0,0,0, .3); -Moz-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; . applefeature a img display: block; שוליים: 26px auto 4px; .applefeature a h4 display: block; רוחב: 160px; font-size: 1.3em; משפחת גופן: Arial, Tahoma, sans-serif; צבע: # 646464; text-align: center;
הקישורים המוצגים נקבעים לרוחב קבוע וכוללים סמל נפרד וטקסט לתצוגה. הדוגמה של Apple משתמשת בצל תיבת דומה כפי שראינו בתיבת התוכן הקודמת. למרות זאת את כל התיבה יכול להיות מופעל כעת כקישור אשר כולל הן את : רחף ו : פעילים מדינות. יש הרבה גמישות עם הקישור קישור ואתה צריך לנסות לשחק עם קוד המקור.
ניתן לקצר את גובה / רוחב וליצור רשימה הרבה יותר קטן של קישורים. אלה יכולים להיות קבוצה של פרקים או דפים במאמר, או שאתה יכול לעשות תפריט משנה מוגבל עם סמלים הקישור. זה באמת קבוצה גדולה של טכניקות CSS3 חדש אשר להדגים כמה כוח יש לך בתור מעצב אינטרנט.
- הדגמה
8. תמונות ממוסגרות
הוספתי רקע אפור לדוגמה זו, כך שתוכל לראות את סגנונות תיבת הצלילים בצורה ברורה יותר. תיבה זו דומה יריות תצוגה מקדימה המוצגים על wordpress.com למעט הוספתי קצת יותר עומק קוד המקור.
.wpframe רקע: #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; ריפוד: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -Moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;
מאז התמונות מקבלים ריפוד קטן משני צדי מסגרת זו מופיעה כגבול לבן גדול. אתה תמיד יכול לעדכן את צבע הרקע, או אפילו להוסיף גבול חיצוני קטן כדי להפריד את התמונה מהרקע. אבל זו קבוצה פשטנית למדי של סגנונות ניתן לתמרן לתוך מגוון טכניקות צל תיבת. לשחק עם הקוד ולראות איך אתה יכול לשפר את עיצובים תמונה באתר האינטרנט שלך.
- הדגמה
9. שדות קלט זוהרים
יש לי רעיון זה לאחר ביקור בדף הכניסה Pinterest כמה פעמים. סגנונות אנימציה שלהם באמת להציג כמה דוגמאות רהוט של מספר רב של צללי תיבת מוטבעות, הן מחוץ ו inset.
.formwrap display: block; margin-bottom: 15px; . תווית מודפס display: inline-block; רוחב: 80px; font-size: 11px; מודגש; צבע: # 444; משפחת גופן: Arial, Tahoma, sans-serif; .formwrap .shadowfield מיקום: יחסית; רוחב: 250px; font-size: 17px; משפחת גופן: "Helvetica Neue", Arial, sans-serif; משקל גופני: רגיל; רקע: # f7f8f8; צבע: # 7c7c7c; line-height: 1.4; ריפוד: 6px 12px; outline: none; מעבר: כל 0.2s הקלות- out-out 0s; -webkit- מעבר: כל 0.2s הקלות- out-out 0s; -מעבר המעבר: כל 0.2s הקלות- out-out 0s; border: 1px solid # ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) inset, 0 1xx #fff; .formwrap .shadowfield: focus border-color: # 930; רקע: #fff; צבע: # 5d5d5d; box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -Moz-box-shadow: Inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-shadow: Inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);
למרות סגנונות הראשונית הם מאוד אטרקטיבי אני נמשך אל השפעות המעבר תוך כדי התמקדות בכל שדה קלט. אתה יכול לשוחח ביניהם ולראות את ההבדל המיידי כל כך הרבה נכסים. צל הקופסא החיצוני זוהר מוחל יחד עם צל הצללית המעודכן. וגם ה צבע טקסט מקבל קל יותר כפי שאתה מתמקד קלט מסוים, ואז מתעמעם כמו שאתה defocus.
אפילו העתקה על אחת ההשפעות הללו תשפר מאוד את חוויית המשתמש של שדות הטופס שלך. ודא כי אתה לא הולך רחוק מדי עד לנקודה שבה הטפסים שלך בקושי שמיש. עם זאת רוב המבקרים ייהנו ההשפעות האסתטיות הנעימות אשר גם לעודד אינטראקציה ומעורבות נוספת עם אתר האינטרנט שלך.
- הדגמה
.10 לחצני צל גמישים
לחצני צל ייחודיים אלה מעוצבים במעבר איטי במהלך מצבי מעבר בריחוף. אתה יכול למצוא דוגמאות דומות בדף הבית של Mozilla עם גדול שלהם “הורד את” כפתור. חלק מן צל קופסא מאפיינים משלבים למעשה שלושה צללים שונים יחד לתוך פקודה אחת.
.blu-btn display: inline-block; -moz-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2 px 0 0 rgba (0,0,0,0.2); -Moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Inset 0 -2 px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2 px 0 0 rgba (0,0,0,0.2); צבע רקע: # 276195; background-image: -Moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (ליניארי, שמאלי למעלה, שמאל למטה, צבע-להפסיק (0%, # 3c88cc), צבע (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-gradient (# 3c88cc, # 276195); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; תמונת רקע: שיפוע ליניארי (# 3c88cc, # 276195); border you01; הסמן: מצביע; צבע: #fff; text-decoration: none; text-align: center; font-size: 16px; ריפוד: 0px 20px; גובה: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1x 0 rgba (0,0,0,0.35); משפחת גופן: Arial, Tahoma, sans-serif; -webkit- מעבר: כל ליניארי 0.2s; -מעבר המעבר: כל 2 ליניארי; -המעבר: כל 2 ליניארי; -MS המעבר: כל ליניארי 2s; מעברים: 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 rgba (0,0,0,0.3), משוקלל 0 12px 20px 2px # 3089d8; -Moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Inset 0 -2 px 0 0 rgba (0,0,0,0.3), Inset 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Inset 0 -2 px 0 0 rgba (0,0,0,0.3), Inset 0 12px 20px 2px # 3089d8; .blu-btn: פעיל -webkit-box-shadow: Inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3); -Moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0, 0,0.3); 0% 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ); .grn-btn display: inline-block; -moz-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2 px 0 0 rgba (0,0,0,0.2); -Moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Inset 0 -2 px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2 px 0 0 rgba (0,0,0,0.2); צבע רקע: # 659324; background-image: -Moz-linear-gradient (# 81bc2e, # 659324); background-image: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (ליניארי, שמאלי למעלה, שמאל למטה, צבע-עצור (0%, # 81bc2e), צבע (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linear-gradient (# 81bc2e, # 659324); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = '81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '81bc2e', endColorstr =" # 659324 ", GradientType = 0); תמונת רקע: ליניארי-שיפוע (# 81bc2e, # 659324); border you01; הסמן: מצביע; צבע: #fff; text-decoration: none; text-align: center; font-size: 16px; ריפוד: 0px 20px; גובה: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1x 0 rgba (0,0,0,0.35); משפחת גופן: Arial, Tahoma, sans-serif; -webkit- מעבר: כל ליניארי 0.2s; -מעבר המעבר: כל 2 ליניארי; -המעבר: כל 2 ליניארי; -MS המעבר: כל ליניארי 2s; מעבר: כל 2 ליניארי; gnn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2 px 0 0 rgba (0,0,0 , 0.3), Inset 0 12px 20px 2px # 85ca26; -Moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Inset 0 -2 px 0 0 rgba (0,0,0,0.3), Inset 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), Inset 0 -2 px 0 0 rgba (0,0,0,0.3), Inset 0 12px 20px 2px # 85ca26; gnn-btn: פעיל -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3); -Moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0, 0,0.3); 0% 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 );
אני משתמש במעברים מלאים ל 200 מילי-שניות על מצבי לחיצה עם לחצן העכבר. מה כל כך גדול על סגנונות אלה היא שאתה יכול ליישם אותם כמעט כל אלמנט clickable. לחצנים, קישורים עוגן, אלמנטים טופס, או כל דבר אחר שאתה חושב הוא ראוי - למרות סגנונות אלה יש להשתמש בדלילות כדי לא עומס יתר העיצוב שלך.
לחצנים כאלה נשמרים בדרך כלל בצורה הטובה ביותר באותו אופן שבו משתמשת בהם מוזילה. צרף סגנונות אלה לבלוג שלך שבו יש לך לחצנים הורדות בחינם, או משהו דומה. משתמשים אוהבים לתקשר עם ממשקים ייחודיים וזה לעתים קרובות מתרגמת אחוז גבוה הרבה יותר עבור קליקים שלך הדירוג.
- הדגמה
סופי מחשבות
אני מקווה שאתה יכול לקחת כמה שיעורים גדולים מאוסף זה של טכניקות צל תיבת. ישנם אזורים שונים רבים אתה יכול להתמקד כולל טפסים, תיבות מודאלית, לחצנים, סרגלי כלים, ואפילו פריסות אתר מלא.
אתה מוזמן ליישם כל אלה אפקטי צל לחלקים של האתר שלך. יש הרבה טכניקות אחרות שם בחוץ, אבל זה אוסף מושלם הן למתחילים והן למפתחים מתקדמים. כמו כן, אם יש לך הצעות או שאלות על המאמר אתה יכול לחלוק איתנו באזור הדיון הערות להלן.
