אזור הבלוק הראשון הוא עטוף תג סעיף כך נוכל לצוף את הפריסה זה לצד זה. העמודה השמאלית מכילה את כל הקלט: טקסט, דואר אלקטרוני, כתובת אתר ומספר טלפון. כאשר אתה לוחץ בטלפון, תצוגת המקלדת הניידת צריכה להתאים בהתאם לסוג הקלט. יש הרבה סיבות טובות לתמוך בתכונות אלה עבור ניידים מאז כולם עובדים על ה- go בימים אלה.
אלמנט textarea יכול גם להגדיר טקסט מציין מיקום ב- pageload. הדבר דומה לתווית הנעלמת לאחר שהמשתמש מזין טקסט כלשהו בשדה. התכונה שאינה נשמרת היא השלמה אוטומטית כי textareas לא בדרך כלל למלא תוכן קשור.
פקדי סרגל צד רציתי לבנות את הטופס כך שהוא יגיב כראוי לשינוי גודל החלון מציג. כאשר החלון מלא מספיק ואז שתי העמודות קלט הן צפות ליד זו. אבל אם הרוחב נחתך מעט, הצד הימני יירד מתחת לתוכן הראשי.
הנה HTML שלי עבור אזור סרגל הצד:
מקבל: צוות האתר עורך ראשי מחלקת טכנולוגיה יחסי ציבור תמיכה כללית קוד זה למעשה הוא לא דבר מבלבל מדי. רק אפשרות פשוטה בתפריט לבחור כמה לחצני רדיו. בנוסף, לאחר אובייקטים אלה שמתי איפוס ולשלוח כפתור לקראת סוף הקטע.
כל זה נראה טוב וטוב, אז עכשיו בואו לזוז לתוך כמה תכונות CSS. יש כל כך הרבה התאמות אתה יכול ליישם כאשר עובדים על אלמנטים טופס. נסו לא להשתעשע עם יותר מדי חשיבה וליהנות!
צלחות תיבת אנימציה תוכל להבחין כפי שאתה הכרטיסייה דרך כל אחד מרכיבי הקלט הראשי כי אני כבר אנימציה צל חיצוני צבעוני. ל- Google Chrome יש מאפיין מתאר שעושה משהו דומה, אבל לא ממש ראוותני. חלק קטן זה של הממשק הוא מפתה למבקרים בפעם הראשונה.
/ ** אלמנטים טופס ** / # hongkiat טופס box-sizing: border-box; # hongkiat-form .txtinput display: block; משפחת גופן: "Helvetica Neue", Arial, sans-serif; border-style: Solid; border-width: 1px; border-color: #dedede; margin-bottom: 20px; font-size: 1.55em; ריפוד: 11px 25px; padding-left: 55px; רוחב: 90%; צבע: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -Moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) הבלעה; מעבר: 0.15s גבול ליניארי 0s, box-shadow 0.15s ליניארי 0s, צבע 0.15s 0 ליניארי ליניארי; -webkit- מעבר: גבול 0.15s 0 ליניארי ליניארי, תיבת 0.15s 0.1x ליניארי 0, 0.15s צבע ליניארי 0s; -מעבר-מעבר: גבול 0.15s ליניארי 0s, box-shadow 0.15s ליניארי 0s, צבע 0.15s 0 ליניארי ליניארי; -המעבר: גבול 0.15s 0 ליניארי ליניארי, 0.15s צל, 0,05 x 0 ליניארי, 0.15s צבע ליניארי 0s; # hongkiat-form .txtinput: focus color: # 333; color-color: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); -Moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); - Webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); outline: 0 none; על מנת למקד כל אלמנט טקסט השתמשתי בכיתה .txtinput. כל אחד ממאפייני המעבר פועל על גבול, על צללית, ועל צבע. אני משתמש box-sizing: border-box; על מכולה טופס כך ריפוד לא לבלגן את עיצוב תגובה שלנו.
הייתי צריך להעתיק את אותם סגנונות ולערוך אותם מעט עבור textarea. שיניתי כמה ריפוד ושוליים, וצרף סמל רקע ייחודי.
# hongkiat-form textarea display: block; משפחת גופן: "Helvetica Neue", Arial, sans-serif; border-style: Solid; border-width: 1px; border-color: #dedede; margin-bottom: 15px; font-size: 1.5em; ריפוד: 11px 25px; padding-left: 55px; רוחב: 90%; גובה: 180px; צבע: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -Moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) הבלעה; מעבר: 0.15s גבול ליניארי 0s, box-shadow 0.15s ליניארי 0s, צבע 0.15s 0 ליניארי ליניארי; -webkit- מעבר: גבול 0.15s 0 ליניארי ליניארי, תיבת 0.15s 0.1x ליניארי 0, 0.15s צבע ליניארי 0s; -מעבר-מעבר: גבול 0.15s ליניארי 0s, box-shadow 0.15s ליניארי 0s, צבע 0.15s 0 ליניארי ליניארי; -המעבר: גבול 0.15s 0 ליניארי ליניארי, 0.15s צל, 0,05 x 0 ליניארי, 0.15s צבע ליניארי 0s; # hongkiat-form textarea: focus color: # 333; color-color: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); -Moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); outline: 0 none; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; קלט צידי לחצני הבחירה ולבחור פריטי תפריט מעוצבים הרבה יותר פשוטים. ניתן להחיל אפקטים זוהר חיצוני וצללים ירידה דומה על אלמנטים אלה, אבל זה לא תמיד נראה טוב. לחלופין מעצבים תיצור ממשקי משתמש מותאמים אישית ולצרף אלה כתמונות רקע. אבל זה עשוי לדרוש פתרון jQuery כדי לשמור את האפשרויות מוצגות כראוי.
span.radiobadge display: block; שוליים-תחתית: 8px; תווית span.radiobadge font-size: 1.2em; ריפוד בתחתית: 4px; select.selmenu font-size: 17px; צבע: # 676767; ריפוד: 9px! חשוב; border: 1px solid #aaa; רוחב: 200px; לא עשיתי הרבה כדי לדחוף את אלה מן האלמנטים קלט הראשי. שפע של ריפוד נוסף הוא חשוב, כך שהמשתמשים שלך מרגישים בנוח אינטראקציה עם הטופס. כאשר הטקסט הוא סופר זעיר זה יכול להיות מאבק רק כדי למלא את כל חלק. שמור על הגופן שלך גדול, אבל לא כל כך גדול שהוא מציף את הדף.
לחצנים מותאמים אישית לחצני האיפוס והשיגור מתוכננים בקטגוריה משלהם. בניתי קבוצה של gradients אור להתאים היטב עם מדגיש כחול בשדות הטופס שלנו.
להלן קוד ה- CSS שלי עבור הלחצן שלח בסטטוס רגיל וברחוף.
#buttons #submitbtn display: block; צף: משמאל; גובה: 3em; ריפוד: 0 1em; border: 1px solid; outline: 0; מודגש; font-size: 1.3em; צבע: #fff; text-shadow: 0px 1px 0px # 222; White-space: nowrap; word-wrap: Normal; An University An University הסמן: מצביע; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color-color: # 5e890a # 5e890a # 000; -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); צבע רקע: rgb (226,238,175); רקע: rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); (3%, rgb (186,216,77)), color-stop (100%, rgb (226,238,175)), צבע (3%, rgb (188,216,77)) %, rgb (144,176,38))); רקע: rbb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); רקע: rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); רקע: rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); רקע: rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: פעיל border-color: # 7c9826 # 7c9826 # 000; צבע: #fff; -Moz-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); רקע: rgb (228,237,189); רקע: -Moz-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); (2%, rgb (228,237,189)), צבע (3%, rgb (207,219,120)), צבע (100%, rgb ( 149,175,54))); הרקע: -webkit-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); רקע: - ליניארי - שיפוע (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); רקע: rsb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); רקע: לינארי-שיפוע (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); זה כמעט בלתי אפשרי לשמור על סוג זה של בורר נקי! יש פשוט יותר מדי נכסים שאתה צריך לרשום ולתמוך בדפדפנים ישנים רבים. Internet Explorer יכול אפילו לעבד אלה gradients עם המסנן הנכון. שים לב מלבד מעברי הרקע אני כולל גם צבע גבול חדש, פינות מעוגלות, וצל תיבת על ריחוף.
כפתור האיפוס נראה דומה אבל אני כבר הלך בדרך אחרת לגמרי עם ערכת הצבעים. אפור בהיר נופל ליפול לתוך הרקע בהשוואה צבעים ירוקים בהירים. כפתור האיפוס שלנו סביר להניח שלא יהיה בשימוש הרבה מאוד, אז זה לא צריך את כל תשומת הלב.
#buttons #resetbtn display: block; צף: משמאל; צבע: # 515151; text-shadow: -1px 1px 0px #fff; margin-right: 20px; גובה: 3em; ריפוד: 0 1em; outline: 0; מודגש; font-size: 1.3em; White-space: nowrap; word-wrap: Normal; An University An University הסמן: מצביע; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; צבע רקע: #fff; רקע: rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); (2%, rgb (240,240,240)), צבע-עצור (100%, צבעי רצועה) (2), rgb (255,255,255) rgb (222,222,222))); רקע: rbb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); רקע: rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); רקע: rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); רקע: rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); border: 1px solid # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -Moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); #buttons #resetbtn: רחף text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); צבע: # 818181; צבע רקע: #fff; רקע: rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); (2%, rgb (244,244,244)), צבע-עצור (100%, צבעי רצועה) (2), rgb (244,244,244) rgb (229,229,229))); הרקע של התמונה: -הרמה, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); רקע התמונה: -o-linear- שיפוע (top, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); רקע: rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); רקע: rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-color: #aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); אתה יכול אפילו לשחרר את סוג איפוס ולהשתמש זה לבן / אפור ערכת צבעים כמו הראשי שלך להגיש כפתור. השתמשתי רבים מאותם סגנונות צבע וצלילה אפקטים, יחד עם צל טקסט עבור התווית הפנימית. זה בהחלט מספק תחושה שונה לחוויית המשתמש.
שינויים פריסה מדורגת מעבר לקובץ ה- CSS האחר שלי, אנו יכולים לבחון את שאילתות המדיה המותאמות הפשוטות שהגדרתי. כל חלון דפדפן מעל 800px יחווה את ממשק הצדדי המלא. כאשר אתה מקבל מתחת לסף זה, העמודה השמאלית מתרחבת לרוחב של 100% ואתה רואה את האלמנטים הצדדיים יורדים למטה.
מסך @media ו- (max-width: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; צף: אף אחד; בלוק תצוגה; # hongkiat-form #aside width: 100%; בלוק תצוגה; צף: אף אחד; # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%; #prioritycase float: left; בלוק תצוגה; #recipientcase float: left; בלוק תצוגה; margin-right: 55px; ככל שאנו מתקרבים לגודל אני מנסה להתאים את כל צורות הקלט. המאפיין רוחב יכול בסופו של דבר יותר מאשר את דף האינטרנט עצמו ולאחר מכן יש לנו טפסים קלט בולט מעל הקצה. זה קורה סביב 550px שבו אני לשבור את השאילתה הבאה, יחד עם שתי החלטות מסך iPhone לרוחב ולנוף.
/ * מסך קטן יותר dropoff ******* / @media מסך בלבד (מקסימום רוחב: 550px) hongkiat-form .txtinput, # hongkiat-form textarea רוחב: 80%; / * נוף ל - iPhone ******** / @media מסך בלבד ו- (max-width: 480px) body padding: 10px 0px; select.selmenu width: 190px; / * דיוקן iPhone ******* / @media מסך בלבד ו- (max-width: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea width: 70%; # hongkiat-form #aligned overflow: hidden; select.selmenu width: 160px; #recipientcase margin-right: 30px; מצב נוף אופקי עדיין מחזיקה הכל ביחד טוב מאוד. עשיתי רק את התפריט הנפתח בחר קצת דק יותר כדי לפנות מקום ללחצני הרדיו. בתצוגה לאורך, שיניתי את כל האלמנטים לרוחב קטן בהרבה. עכשיו הקוד שלנו לא ישבור אפילו בחלונות דפדפן בגודל. אבל זה נחמד לקבל תמיכה עבור iOS / טלפונים חכמים אנדרואיד גם כן.
סיכום אני מקווה שזה הדרכה כבר אינפורמטיבי להסביר רק כמה ניתן לעשות על webforms שלך. התכונות החדשות CSS3 הן חזקות מספיק כדי לבנות אנימציה מתפקדת במלואה עם רק כמה שורות של קוד. זה באמת מרגש זמן להיות עובד בפיתוח האינטרנט הבאים מגמות אלה.
אם יש לך רעיונות או הצעות על קוד הדרכה אל תהסס לשתף אותם איתנו באמצעות הערה בתיבת להלן.
