אם יש משהו שבדרך כלל נפוץ מאוד לכל סוג אתר, אלו הטפסים. הטפסים בהם אנו משתמשים כדי למלא את פרטי הקשר, להזין פרטי בנק, להיכנס לרשת חברתית או פשוט לבצע חיפוש כמו זה שאנו עושים בדרך כלל מדי יום במנוע החיפוש של גוגל.
אז היום אנחנו הולכים להראות לך 40 טפסים ב- CSS החל מטפסים ליצירת קשר, קופות כרטיסי אשראי, כניסה, פשוט, מנוי או אפילו אימות. סדרה של צורות של אלגנטיות וסגנון נהדר כדי לתת את הנקודה המיוחדת לאתר שלך, ללא קשר לנושא.
אינדקס
- 1 טופס יצירת קשר מינימליסטי
- 2 צורה מינימליסטית
- 3 טופס יצירת קשר וינטאג '
- 4 טופס יצירת קשר עם מכתב
- 5 טופס יצירת קשר מורחב
- 6 ממשק משתמש לטופס יצירת קשר
- 7 קופה בכרטיס תשלום
- 8 עיצוב כרטיס אשראי שטוח
- 9 ממשק משתמש של כרטיסי אשראי
- 10 תגובה לקופה
- 11 כרטיס תשלום בקופה
- 12 תשלום בכרטיס אשראי
- 13 כרטיס אשראי
- 14 שלב אחר שלב טופס
- 15 צורה אינטראקטיבית
- 16 שלב אחר שלב טופס
- 17 צעד אחר צעד
- 18 טופס Jquery רב-שלבי
- 19 טופס אנימציה של ממשק המשתמש
- 20 טופס יצירת / כניסה לחשבון
- 21 הדגשת הנחש
- 22 מסך כניסה
- 23 עיצוב ממשק משתמש לכניסה
- 24 כניסה ויצירת חשבון ממשק משתמש
- 25 שגיאות מגונות
- 26 התחבר ל- CSS HTML
- 27 טופס כניסה מודאלי
- 28 טופס פלקסבוקס
- 29 תיבת אנימציה
- 30 שדה חיפוש
- 31 לחץ על שדה חיפוש פשוט
- 32 אפקט קלט טקסט CSS
- 33 חיפוש במסך מלא
- 34 לחפש
- 35 אין שאלות
- 36 טופס מנוי קופץ
- 37 ממשק משתמש של תיבת מנוי
- 38 תיבת מנוי CSS
- 39 תיבת מנוי
- 40 טופס אימות EMOJI
טופס יצירת קשר מינימליסטי
טופס יצירת קשר פשוט עם מגוון גדול של אפקטים כגון סימנים צפים או אנימציות קו. קוד CSS אלגנטי עם קצת JavaScript. אם אתם מחפשים א טופס יצירת קשר מינימליסטי זה מושלם בשבילך.
צורה מינימליסטית
אחר צורה מינימלית, אם כי רק ב- CSS להיות א צורה פשוטה ואפקט גבוהה. אין בו את האנימציות המינימליסטיות של הקודמת, אך היא ממלאת את מטרתה היטב.
טופס יצירת קשר וינטאג '
טופס יצירת קשר וינטאג ', עיצוב אלגנטי מאוד. מגיב לאתרים אלה להיראות מהנייד, אם כי זה לא כולל אימות.
טופס יצירת קשר עם מכתב
זה טופס יצירת קשר יש לו אנימציה די מוזרה: נוצר מכתב. פשוט, אבל מאוד שימושי עם הרבה צבע.
טופס יצירת קשר מורחב
זה טופס יצירת קשר מורחב זה רק חזית ויש לו אימות באמצעות jQuery. אנו לוחצים על הכפתור הצף והטופס יופיע עם אנימציה תוססת. יוצא מן הכלל.
ממשק משתמש לטופס יצירת קשר
ממשק משתמש לטופס יצירת קשר זהו טופס המיוצר ב- HTML ו- CSS. זה בולט בהיותו כרטיס איש קשר פשוט שנוכל למלא כך שרק שדה הטקסט ישתנה כאשר לוחצים עליו.
קופה בכרטיס תשלום
Un קופת כרטיס תשלום מיוצר ב- HTML, CSS ו- JavaScript אשר מובחן על ידי אנימציה מסתובבת את כרטיס האשראי ברגע שאנחנו לוחצים על שדה CVC או מספר האבטחה.
עיצוב כרטיס אשראי שטוח
CSS טהור עבור a קופה עבור כרטיסי אשראי בצבעים שטוחים. צבעוני ופשוט מאוד המסוגל לציין איכות ומקצועיות.
ממשק משתמש של כרטיסי אשראי
כרטיס אשראי נוסף ב- HTML, CSS ו- JavaScript שבולט בכמה שהוא טוב בחרו בעיצוב הכללי. שכחנו את האנימציות בקטע הקוד הזה לאתר שלך. הורידו אותו בקישור זה.
תגובה לקופה
תגובה לקופה, המיוצר עם React.js, נבדל על ידי את תמונת הצד שנוכל להתאים אישית עם השירותים או המוצרים שאנו מוכרים במסחר האלקטרוני שלנו.
כרטיס תשלום בקופה
קופה זו בולטת באפשרות לשים תמונה על הכרטיס. א טופס פשוט וברור שנעשה עם CSS3, HTML5 וקצת jQuery. איכותי ושונה משאר הקופות ברשימה זו. אתה יכול להוריד כאן קופת כרטיס תשלום זו.
תשלום בכרטיס אשראי
זה טופס תשלום בכרטיס אשראי מתוכנת להתאמן איתו JavaScript למניפולציה של DOM. אתה יכול לזכור בתכנון את הקוד האלגנטי של Stripe, שירות הבנקאות הדיגיטלית שמתקרב לפייפאל.
כרטיס אשראי
אלגנטי קופה לתשלום בכרטיס שונה מהאחרים ומבוסס על כרטיס אשראי שנמצא בחלקו העליון כך שלמטה יש לנו את כל הטופס עם הנתונים השונים שעל הלקוח למלא כדי לבצע את התשלום במסחר אלקטרוני.
שלב אחר שלב טופס
Un שלב אחר שלב טופס לרישום שנעשה ב- HTML, CSS ו- JavaScript. ארבעה שלבים לכל אחת מהנקודות ממוקם בצד שמאל. אנימציות מוגמרות היטב עבור צורה מוגמרת מאוד. מומלץ מאוד.
צורה אינטראקטיבית
Un טופס אינטראקטיבי ריבוי מעבר שנעשה עם HTML, CSS ו- JavaScript. זה בולט באנימציית המעבר בין כל אחד מהשלבים. יש לו מגע אלגנטי שלא ייעלם מעיניו.
שלב אחר שלב טופס
זה שלב אחר שלב טופס בולט בכך שהוא די יצירתי. תענה על השאלות כך שתוכל לחזור אליהם בכל עת על ידי נוכחות חזותית על המסך כל הזמן.
צעד אחר צעד
שלב אחר שלב טופס נעשה ב- HTML, CSS ו- JavaScript. הוא מאופיין באנימציית המעבר בין כל אחד מהשלבים.
טופס Jquery רב-שלבי
אם יש לך צורה ארוכה מאוד, זה מושלם עבור חלקים שונים עם סרגל התקדמות בולט מאוד. בהתבסס על jQuery ו- CSS, הוא בולט בעיצובו ובאלגנטיות רבה שלו.
טופס אנימציה של ממשק המשתמש
המעברים של זה טופס אנימציה של ממשק המשתמש הם מבוסס על דומינק מרסקוסיץ '. תשומת לב לאפקט היצירתי של התיבה בכחול כאשר אנו לוחצים על חלק משני השדות של הכניסה או הכניסה.
טופס יצירת / כניסה לחשבון
גימיק כניסה ויצירת חשבון שמבוסס על אנימציה מה קורה בין שני החלקים האלה. נוכחות עדכנית ומדהימה שיש לבצע ב- HTML, JavaScript ו- CSS.
הדגשת הנחש
הדגשת הנחש הוא אחד הכניסה המדהימה ביותר מכל רשימה בולט באנימציה האלגנטית שמופיע במהירות ברגע שאנחנו לוחצים על אחד משני השדות.
מסך כניסה
אלוהי את העיצוב הזה מסך כניסה כך גם שלהם אנימציות וכמה זה יצירתי. אם אתה רוצה להיות העדכני ביותר בכל הנוגע לעיצוב אתרים, טופס זה לא יכול להיעדר. חִיוּנִי.
עיצוב ממשק משתמש לכניסה
עוצב באמצעות HTML, Sass ו- jQuery. עיצוב ממשק משתמש לכניסה es eרדום וברור בנושא שלא חסר לו אנימציות עדינות כדי להפוך לאחד המועדפים ברשימה.
כניסה ויצירת חשבון ממשק משתמש
מיוחד עיצוב כניסה ויצירת ממשק משתמש לצבעים ולהצגה ב- קלף אחד גדול בשני החלקים. עוד אחת היפות בביצוע שלא נוכל לפספס. מיוצר ב- HTML, CSS ו- JavaScript.
שגיאות מגונות
שגיאות מגונות זהו כניסה נהדרת בגלל האנימציה של שדות עם obnoxious.css. מקורי כדי להיות כניסה מהנה, חסרת דאגות ושונה מאוד. מקורי ללא כל ספק עבור אתר האינטרנט שלנו.
התחבר ל- CSS HTML
כניסה מוזרה לפי הסמלים השונים שמראים לכל אחד מהשדות לקחת את המבקר לאן שנרצה. גם הגוונים שנבחרו בצבעים בולטים. אין בו כל אנימציה. הוא מיוצר ב- HTML וב- CSS כדי להטמיע אותו באתר עבור לקוח או משלנו.
טופס כניסה מודאלי
זה טופס כניסה מודאלי הוא בהשראת השפה של עיצוב ידוע בעיצוב חומרים. ראינו את זה ביישומים רבים במכשירים ניידים. בקוד זה יש לנו לוח כניסה ולוח רישום שמוסתר כברירת מחדל. ניתן להפעיל את לוח הרישום על ידי לחיצה על העמודה הכחולה הממוקמת בצד ימין. יש לו אנימציה נהדרת כדי להיות כניסה מיוחדת ומדהימה.
טופס פלקסבוקס
אנו מתחילים בזה את טפסי החיפוש טופס מבוסס על פלקסבוקס. זה בולט בצבע האדום של "החיפוש" ובעוד מעט יותר בשדה חיפוש אלגנטי לאתר שלך.
תיבת אנימציה
עם זה תיבת אנימציה לחץ על סמל הזכוכית המגדלת ו תופיע אנימציה כחולה בהירה כדי שנצטרך רק להקליד את החיפוש שאנחנו הולכים לבצע באתר. מיוצר עם HTML, CSS ו- JavaScript.
שדה חיפוש
א קו גדול עובר על פני המסך כך שכשאנחנו לוחצים עליו נתחיל להקליד את החיפוש. כפתור איסוף להגדרת זאת טופס חיפוש פשוט.
לחץ על שדה חיפוש פשוט
לחץ על שדה חיפוש פשוט מבוסס על אינטראקציה שנראית ב אפליקציית קהילת נהג Waze שֶׁל כְּלֵי רֶכֶב. כל הסמלים והתמונות מיוצרים באמצעות CSS. זה בולט באותם סמלים שמאפשרים לנו לבצע חיפושים ספציפיים אחר מוצר או שירות. מכה בגלל כמה זה מגניב.
אפקט קלט טקסט CSS
אפקט קלט טקסט CSS כולל סדרה של אנימציות בטקסט ובמגירת החיפוש להיות מחפש זהיר בצורה.
חיפוש במסך מלא
ערך זה מ חיפוש מסך מלא זה עובד עם כל סוג של פריסה או מיקום. דורש סגנונות אלמנט ספציפי למכולה וכיסוי חיפוש להיות ממוקם בשורש. זה מאופיין באנימציה מקפצת ברגע שאנחנו לוחצים על כפתור החיפוש.
לחפש
Un טופס חיפוש פשוט זה הוא אוהב לשחק עם העמדות השונות ואנימציות. אנו לוחצים על כפתור החיפוש והמגירה השלמה מופיעה כדי להקליד את המילים. עדכני מאוד ומומלץ מאוד לכמה שהוא פשוט.
אין שאלות
אין שאלה es טופס פשוט עם שדה טקסט והאפשרות לבחור כמה תשובות שהמשתמש יבחר בהן. הרבה מאוד מבחינה ויזואלית להיות אחד הטובים ביותר.
טופס מנוי קופץ
עם זה טופס מנוי קופץ, אנו לוחצים על הכפתור הצף וזה ייקח אותנו ל צורה עם טון מאוד מצחיק ושדה שבו להזין את הדוא"ל. מושלם לשיווק בדוא"ל.
ממשק משתמש של תיבת מנוי
א תיבת מנוי עם פעמון אזעקה ו קצת יותר מצבעים שטוחים בעיצוב.
תיבת מנוי CSS
א תיבת מנוי חכמה על העובדה של השתמש בהדרגות עבור כפתור המנוי ממש כמו הגוון הסגול של השדה.
תיבת מנוי
א תיבת מנוי פשוטה אך בעל השפעה רבה על ידי עיצוב.
טופס אימות EMOJI
בטהרה CSS זה טופס אימות כדי ליצור את המפתח או סיסמא. בזמן שאנו כותבים, האימוג'י ימדוד את רמת האבטחה של הטופס. מצחיק וסקרן ללא ספק.
אל תחמיץ את זה רשימה של 23 חצים מונפשים ב- CSS.
2 תגובות, השאר את שלך
מדגם מצוין של דוגמאות המוצגות כאן. המגוון וההתאמה להקשרים שונים והדבר הטוב ביותר הוא שהקישור של כל כותרת כולל את ההדגמה ואת קוד המקור, אם כי כדאי להדגיש אותו באמצעות כפתור «ראה הדגמה» מכיוון שבגלל סקרנות גיליתי אותו ב כותרת. תודה על התרומה. ברכות מקראקס.
זה עזר לי מאוד, תודה.