#main width: 400px; גובה: 50px; רקע: # f2f2f2; ריפוד: 6px 10px; border: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), השיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 #dfdede; -webkit-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), השיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 #dfdede; תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), שיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 # dfdede;  

החלק החשוב של הקוד כאן הוא רדיוס הגבול הצהרה ו צל קופסא הצהרה. ליצירת פינות מעוגלות, השתמשנו בהצהרת CSS רדיוס CSS, "-Moz-" ו "-webkit-" הקידומות דפדפן שימשו כדי להבטיח כי זה עובד שממית ו webkit מבוסס דפדפנים. הצהרות צל תיבת עשוי להיראות קצת מבלבל אבל זה בעצם מאוד פשוט.

 תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), שיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 # dfdede; 

הסבר: הנה, את מילת המפתח יש להגדיר את הגדרת אם הצל יהיה בתוך התיבה. שני האפס הראשונים מצביעים על x-offset ו- y-offset ו- 3px מציינים את הטשטוש. הבא הוא הצהרת צבע. השתמשתי ערכי rgba כאן; rgba מייצג אדום ירוק כחול אלפא (אטימות). כך 4 הערכים בתוך סוגריים מצביעים על כמות של אדום, ירוק, כחול ואת אלפא שלה (אטימות). תוכלו להבחין כי 5 סטים של הצהרות צל כבר clubbed יחד. זה יכול להיעשות על ידי הפרדת אותם עם פסיק. שני הצללים הראשונים מגדירים את אפקט "הזוהר הפנימי" הלבן, וההצהרות הבאות מעניקות לתיבה מראה מוצק / צנום.

לשחק עם ערכים אלה כדי להבין איך זה עובד.

תצוגה מקדימה

.3 עצב את שדה הקלט

כעת, כאשר הקופסה הושלמה, מאפשר לנוע אל הסטיילינג של שדה הקלט.

 קלט [type = "text"] float: left; רוחב: 230px; ריפוד: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; border: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -Moz-box-shadow: Inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: Inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;  

סגנונות שהוכרזו עבור שדה קלט דומים למדי לאלה decared עבור התיבה הגדולה #main. השתמשנו באותו רדיוס הגבול (5px). שוב, מספר רב של צללי תיבות היה מועדוני.

 box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; 

הסבר: תוכלו להבחין כי הפעם, הטשטוש צל נשמרה ב 0 כדי להשיג צל חדה היסט אופקי של 5px משמש. בהצהרות הבאות, הטשטוש נשמר ב- 0px, אך הצבע וה- y-offset השתנו. שוב, לשחק עם ערכים אלה כדי להשיג תוצאות שונות.

תצוגה מקדימה

4. עיצוב לחצן 'שלח'

הבה נסמן את לחצן החיפוש.

 קלט [type = "submit"] מוצק float: left; הסמן: מצביע; רוחב: 130px; ריפוד: 8px 6px; margin-left: 20px; צבע רקע: # f8b838; צבע: rgba (134, 79, 11, 0.8); טקסט-המרה: אותיות רישיות; מודגש; border: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1 px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), השיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 מ -6 פיקסלים 0 # 593a11, 0 13px 0 #ccc; (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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 x 13px 0 #ccc; 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 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 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 x ccc; -webkit- מעבר: רקע 0.2s הקלות;  

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

 text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1 px 0 rgba (64, 38, 5, 0.9); 

הסבר: בתוך ה צל טקסט ההצהרה, שלושת הערכים המספריים הראשונים הם x-offset, y-offset והטשטוש בהתאמה. ערכי rgba מציינים את צבע הצל. במערך ההצהרה הבא (מופרד באמצעות פסיק), y-offset מקבל ערך של -1. זה נעשה כדי לתת את הטקסט “צל פנימי” השפעה. במצב השהייה / מיקוד של לחצן השליחה יש ערכים שונים של צבעי רקע וצללים.

תצוגה מקדימה

מצב "פעיל" ללחצן

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

 קלט [type = "submit"] solid: פעיל background: # f6a000; מקומות קרובים top: 5px; border: 1px solid # 702d00; -moz-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), השיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; (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 x 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 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 x 8px 0 #ccc; תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), שיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 -8 פיקסל 0 # ccc;  

השלם (CSS) קוד

פעולה זו משלימה את שדה החיפוש שלנו. השתמשנו לא מעט תכונות חדשות CSS3. הנה CSS מלא ו- HTML של שדה זה החיפוש.

 #main width: 400px; גובה: 50px; רקע: # f2f2f2; ריפוד: 6px 10px; border: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), השיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 #dfdede; -webkit-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), השיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 #dfdede; תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.8), שיבוץ 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 מ -6 פיקסלים 0 # 989,898, 0 13px 0 # dfdede;  קלט [type = "text"] float: left; רוחב: 230px; ריפוד: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; border: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -Moz-box-shadow: Inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: Inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;  קלט [type = "submit"] מוצק float: left; הסמן: מצביע; רוחב: 130px; ריפוד: 8px 6px; margin-left: 20px; צבע רקע: # f8b838; צבע: rgba (134, 79, 11, 0.8); טקסט-המרה: אותיות רישיות; מודגש; border: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1 px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), השיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 מ -6 פיקסלים 0 # 593a11, 0 13px 0 #ccc; (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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 x 13px 0 #ccc; תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), שיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 מ -6 פיקסלים 0 # 593a11, 0 13px 0 # ccc; -webkit- מעבר: רקע 0.2s הקלות;  קלט [type = "submit"] solid.: hover, input [type = "submit"] solid: focus background: # ffd842; -Moz-box-shadow: Inset 0 0 3xx rgba (255, 255, 255, 0.9), 2 0xx 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -Webkit-box-shadow: Inset 0 0 3px rgba (255, 255, 255, 0.9), 2 0xx 1 px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.9), שיבוץ 0 2px 1px RGBA (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 מ -6 פיקסלים 0 # 593a11, 0 13px 0 # ccc;  קלט [type = "submit"] solid: פעיל background: # f6a000; מקומות קרובים top: 5px; border: 1px solid # 702d00; -moz-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), השיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: השיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), השיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; תיבה-צל: שיבוץ 0 0 3px RGBA (255, 255, 255, 0.6), שיבוץ 0 1px 2px RGBA (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 -8 פיקסל 0 # ccc;  

מקווה שאתה נהנה זה הדרכה. אתה מוזמן להתנסות עם תכונות אלה ואל תשכח לשתף את המחשבות שלך.

הערת העורך: פוסט זה נכתב על ידי ברהני M עבור Hongkiat.com. Bharani הוא מעצב / מפתח מ ניו דלהי, הודו.