יצירת טופס כניסה לערימת נייר

מאמר זה הוא חלק שלנו "HTML5 / CSS3 סדרת הדרכות" - ייעודי כדי לעזור לך לעשות מעצב טוב יותר ו / או מפתח. לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה.

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

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

1. סימון HTML בסיסי

סימון ה- HTML שבו נשתמש הוא פשוט מאוד, לאחר הצהרת ה- HTML5 Doctype, יש לנו את ו </code> תגים. בתוך ה <code><body></code> תג, יש לנו <code><section></code> עם מחלקה של 'מוערמים'. זה <code><section></code> תג משמש להגדרת רוחב תיבת התוכן וליישור אותה למרכז הדף. אנו נשתמש גם בשם המחלקה של התג כדי למקד לתג זה באמצעות CSS. א <code><form></code> להלן <code><section></code> תג. לתג הטופס אין ערך חוקי עבור המאפיין 'פעולה', שכן הוא משמש רק לצורך הדגמה. בתוך השדה טופס ההצהרות של תוויות דוא"ל וסיסמה ושדה קלט, ואחריו כפתור שלח. הנקודה החשובה לציין כאן היא כי השתמשנו שדה קלט עם סוג של "דוא"ל". זה מסופק לנו על ידי ההצהרה HTML5 והוא מבזה בחן לשדה קלט טקסט רגיל בדפדפנים ישנים.</p> <p>הנה הסימון כולו של HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>טופס התחברות פשוט

  התחברות
   דוא"ל  
   סיסמה

     והנה תצוגה מקדימה של מה שיצרנו עד כה:
  
 2. הוספת סגנונות בסיסיים
 צור קובץ css חדש שנקרא master.css והוסף קישור לקובץ זה בקובץ HTML הראשי שלך. אנו נתחיל קובץ CSS שלנו עם איפוס מהיר כדי להשיג אחידות בין דפדפנים שונים. בואו גם להוסיף תמונת רקע יפה לדף שלנו. התמונה שבה השתמשתי נלקחה מ SubtlePatterns. אתה מוזמן לגלוש באתר כדי למצוא תמונת רקע שמתאים לטעם שלך. ניתן להוסיף את תמונת הרקע בעזרת ההצהרה הבאה. כמו כן, שים לב שאני משתמש פתח את Sans גופן מ - Google Web גופן עבור טקסט הגוף.
  / * -------- Base סגנונות --------- * / body, html margin: 0; ריפוד: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") חזרה למעלה למעלה; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; שוליים: 80px אוטומטי; 
 3. אפקט נייר מוערם
 עכשיו שיש לנו את הפריסה הבסיסית והפעלה, מאפשר להתחיל עם עיצוב הטופס. לקבלת האפקט של נייר מוערם, נעשה שימוש :לאחר ו :לפני אלמנטים פסאודו. אלמנטים פסאודו אלה משמשים בעיקר להוספת אפקטים חזותיים לכל בורר. 
 ה :לפני אלמנט פסאודו משמש להוספת תוכן לפני התוכן של הבורר :לאחר אלמנט פסאודו עבור לאחר תוכן של בורר. 
 נתחיל על ידי מתן סעיף, עם מעמד של "מוערמים", רוחב של 400px וגובה של 300px. יתר על כן, אנו נותנים תיבה זו צבע רקע של # f6f6f6 ו 1 פיקסל עבה הגבול עם צבע #bbb. הדברים המרכזיים שיש לשים לב אליהם הם הצהרת רדיוס הגבול והצהרת תיבת הצל. כאן, "-Moz-" ו "-webkit-" הקידומות בדפדפן כבר בשימוש על מנת להבטיח כי זה עובד ב שממית ו webkit מבוססי דפדפנים. 
 הכרזת הגבול רדיוס היא פשוטה מאוד משמש ליצירת פינות מעוגלות, עם 3px המייצג את העקמומיות. התחביר של הצהרת הצלילים עשוי להיראות מסובך, אבל הבה נשבור אותו לגושים קטנים יותר כדי להבין אותו טוב יותר. 
  / * -------- הגבול רדיוס --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; / * -------- צל צל --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -Moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 שני האפס הראשונים מצביעים על x-offset ו- y-offset ו- 3px מציינים את הטשטוש. הבא הוא הצהרת צבע. השתמשתי ערכי rgba כאן; rgba מייצג אדום ירוק כחול אלפא (אטימות). כך 4 הערכים בתוך סוגריים מצביעים על כמות של אדום, ירוק, כחול ואת אלפא (אטימות).
  .מוערמים background: # f6f6f6; border: 1px solid #bbb; גובה: 300px; שוליים: 50px אוטומטי; מקומות קרובים width: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -Moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
 עכשיו כשיצרנו את תיבת התיחום הבסיסית לטופס, נתחיל עם :לאחר ו :לפני אלמנטים פסאודו. 
  .מוערמים: לאחר, .packed: before background: # f6f6f6; border: 1px solid #aaa; bottom: -8px; (0,0,0,2); (0,0,0,2,0); גובה: 250px, שמאל: 2px, מיקום: מוחלט; רוחב: 394px; z- אינדקס: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2) (0,0,0, .2); 0 0 x 0; 0 0 x 0 0 0 0 0 0 0 0 0 0 0 0 0) moz-border-radius: 3px; border-radius: 3px; נארז: לפני bottom: -14px; משמאל: 5px; רוחב: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; רדיוס גבול: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0.5); -Moz-box-shadow: 0 0 15px rgba (0,0,0,0.5); box -צל: 0 0 15px rgba (0,0,0,0.5);
 הקוד עבור: אחרי ו: לפני אלמנטים פסאודו הם כמעט זהים כמעט לזה של התיבה התוחמת הנדון לעיל. הדבר החשוב היחיד לציין כאן הוא כי אלה אלמנטים פסאודו ממוקמים לחלוטין לגבי התיבה התוחמת. כל אחד מהפסאודו-אלמנט מוריד בהדרגה על ידי כמה פיקסלים כדי לתת לו מראה נייר מוערם.
 4. שדות קלט
 בסימון ה- HTML, הוספנו מחלקה של 'קלט טקסט' הן לשדה האימייל והן לשדה הסיסמה כדי לאפשר לנו למקד בקלות אלמנטים אלה באמצעות הצהרות ה- CSS שלנו. הנה ההצהרה CSS מוחל על שני שדות קלט.
  טופס input.text-input outline: 0; בלוק תצוגה; רוחב: 330px; ריפוד: 8px 15px; border: 1px solid solid; font-size: 16px; משקל גופני: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; box-shadow: inset 0 2px 8px rgba (0,0,0,0.3); 
 כאן, שוב, עשינו שימוש ברדיוס הגבול ובהצהרות הצללים. במקרה של שדות טקסט, רדיוס הגבול מקבל ערך גבוה יותר כדי להבטיח יותר עקמומיות. במקרה של הצהרת תיבת צלצול, נעשה שימוש באינדקס מילות המפתח כדי לציין שהצל יהיה בתוך שדה הטקסט. כאן, היסט אופקי עבור הצל הוא 2px ויש לו טשטוש של 8px, את הצבע להיות הכריז באמצעות פורמט rgba.
 כדי להוסיף אינטראקטיביות לשדות הקלט, נשנה את המאפיין צל תיבת עבור שדה הקלט במצב 'רחף'. ההצהרה החדשה צל צלילה יש אפס x ו- y offets אבל יש טשטוש 5px, עם הצבע הוכרז בפורמט rgba.
 5. שלח כפתור
 החלק האחרון של הטופס הזה שאנחנו צריכים להשלים הוא כפתור שלח. בדומה לשדה הקלט, אנו נספק את הלחצן שלח ברדיוס של 25px באמצעות המאפיין רדיוס הגבול. המאפיין צל צל עם y- אופסט של 1px נוספה גם לתת את הכפתור “צל פנימי” השפעה.
  טופס קלט [type = 'submit'] float: right; ריפוד: 10px 20px; בלוק תצוגה; הסמן: מצביע; font-size: 16px; משקל גופן: 700; צבע: #fff; text-shadow: 0 1px 0 # 000; צבע רקע: # 0074CC; border: 1px solid # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-image: -Moz-linear-gradient (למעלה, # 08C, # 05C); background-image: -ms-linear-gradient (למעלה, # 08C, # 05C); background-image: -webkit-linear-gradient (למעלה, # 08C, # 05C); תמונת רקע: שיפוע ליניארי (למעלה, # 08C, # 05C); -webkit-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); -Moz-box-shadow: Inset 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0.5); 
 הדבר החשוב לציין כאן הוא ההכרזה על הוספת שיפוע כפתור זה. CSS3 gradients הוא נושא גדול למדי ואנחנו רק לגרד את פני השטח. עבור לחצן שלח זה, אנו נוסיף שיפוע לינארי הולך מ # 08C ל # 05C. כמו בכל התכונות האחרות של CSS3 שהשתמשנו בהן עד כה, אנו נוסיף קידומות של הספק "-moz", "-webkit" ו- "-ms" כדי להבטיח את העבודה של מדרוג בין דפדפנים שונים.
 6. הדגמה והורדה
 טופס ההתחברות שלנו הושלם. בדוק את ההדגמה כדי לראות איך נראה הטופס המלא. אם אתה אבוד בכל נקודה או לא יכול לעקוב אחר עם הדרכה, אל תדאג, פשוט להוריד את הקבצים לשולחן העבודה שלך להתעסק עם קוד ה- CSS הקיים כדי להבין איך זה עובד.
 מקווה שאתה נהנה זה הדרכה. אתה מוזמן להתנסות עם תכונות אלה ואל תשכח לשתף את המחשבות שלך.
 הדגמה
 להוריד קבצים
 
הערת העורך: פוסט זה נכתב על ידי ברהני M עבור Hongkiat.com. Bharani הוא מעצב / מפתח מ ניו דלהי, הודו. הוא עובד כרגע על Resumonk.com - בונה קורות חיים מקוון המסייע לך ליצור קורות חיים מקצועי ויפה בתוך דקות. גם לבדוק את הפרויקט בצד שלו - Quotescube.com - המינון היומי של ציטוטים.