إذا كان هناك شيء شائع جدًا لأي نوع من مواقع الويب ، فهذه هي النماذج. النماذج التي نستخدمها لملء معلومات الاتصال ، أدخل التفاصيل المصرفية أو سجل الدخول إلى إحدى الشبكات الاجتماعية أو قم ببساطة بإجراء بحث مثل الذي نقوم به عادةً يوميًا في محرك بحث Google.
لذلك اليوم سوف نعرض لكم 40 نموذجًا في CSS بدءًا من نماذج الاتصال أو الخروج من بطاقة الائتمان أو عمليات تسجيل الدخول أو البساطة أو الاشتراك أو حتى التحقق من الصحة. سلسلة من أشكال الأناقة والأناقة الرائعة لإعطاء تلك النقطة الخاصة لموقعك على الويب ، بغض النظر عن الموضوع.
نموذج الاتصال البسيط
نموذج اتصال بسيط مع ملف مجموعة كبيرة ومتنوعة من التأثيرات مثل العلامات العائمة أو الرسوم المتحركة الخطية. كود CSS أنيق مع القليل من JavaScript. إذا كنت تبحث عن ملف نموذج الاتصال المبسط هذه مناسبة لك.
شكل مبسط
آخر شكل مبسط، على الرغم من أنه فقط في CSS ليكون ملف شكل بسيط وعالي التأثير. لا يحتوي على الرسوم المتحركة المبسطة للرسوم المتحركة السابقة ، لكنه يحقق هدفه جيدًا.
نموذج اتصال قديم
نموذج اتصال قديم، تصميم أنيق للغاية. تستجيب لتلك المواقع ليتم رؤيته من الهاتف المحمول، على الرغم من أنه لا يشمل التحقق من الصحة.
نموذج اتصال إلكتروني
هذا نموذج الاتصال لديها رسوم متحركة غريبة إلى حد ما: يتكون خطاب. بسيطة ولكنها مفيدة للغاية مع الكثير من الألوان.
استمارة اتصال موسعة
هذا توسيع نموذج الاتصال إنها الواجهة الأمامية فقط ولها الامتداد التحقق من الصحة باستخدام jQuery. نضغط على الزر العائم وسيظهر النموذج بحركة حيوية. متميز.
نموذج الاتصال UI
نموذج الاتصال UI إنه نموذج مصنوع في HTML و CSS. انها تبرز لكونها بطاقة اتصال بسيطة يمكننا ملؤه بحيث يتغير حقل النص فقط عند النقر فوقه.
الخروج من بطاقة الدفع
Un الخروج من بطاقة الدفع صنع في HTML و CSS و JavaScript والتي تتميز بتدوير الرسوم المتحركة بطاقة الائتمان عندما نضغط على رمز التحقق من البطاقة (CVC) أو حقل رقم الأمان.
تصميم مسطح لبطاقة الائتمان
Pure CSS لملف الخروج ل بطاقات الائتمان بألوان ثابتة. ملونة وبسيطة للغاية يمكنها أن تدل على الجودة والاحتراف.
واجهة مستخدم بطاقة الائتمان
بطاقة ائتمان أخرى بتنسيق HTML و CSS و JavaScript تتميز بمدى جودتها اختار التصميم العام. لقد نسينا الرسوم المتحركة في هذا الجزء من الكود لموقعك على الويب. قم بتنزيله على هذا الرابط.
رد فعل الخروج
رد فعل الخروج، المصنوع من React.js ، يتميز بـ الصورة الجانبية يمكننا تخصيصها مع الخدمات أو المنتجات التي نبيعها في التجارة الإلكترونية لدينا.
بطاقة الدفع
يبرز هذا الخروج لإمكانية وضع صورة على البطاقة. أ شكل بسيط وواضح مصنوع من CSS3 و HTML5 وقليلا من مسج. جودة عالية ومختلفة عن بقية الإعارات في هذه القائمة. يمكنك تنزيل ملفات هنا بطاقة الدفع هذه.
الدفع ببطاقة الائتمان
هذا نموذج الدفع ببطاقة الائتمان تمت برمجته للتدرب مع JavaScript لمعالجة DOM. يمكنك أن تتذكر في التصميم الرمز الأنيق لـ Stripe ، الخدمة المصرفية الرقمية التي تقترب من PayPal.
بطاقة ائتمان
أنيق الخروج لدفع البطاقة يختلف عن الآخرين ويعتمد على بطاقة ائتمان موجودة في الأعلى بحيث يكون لدينا أدناه النموذج الكامل بالبيانات المختلفة التي يتعين على العميل تعبئتها لإجراء الدفع في التجارة الإلكترونية.
شكل خطوة بخطوة
Un شكل خطوة بخطوة للتسجيل في HTML و CSS و JavaScript. أربع خطوات لكل نقطة تقع على الجانب الأيسر. رسوم متحركة جيدة التجهيز لشكل مكتمل للغاية. ينصح به بشده
نموذج تفاعلي
Un شكل تفاعلي متعدد الخطوات باستخدام HTML و CSS و JavaScript. إنها تبرز للرسوم المتحركة الانتقالية بين كل خطوة من الخطوات. لها لمسة أنيقة لن تمر مرور الكرام.
شكل خطوة بخطوة
هذا شكل خطوة بخطوة تبرز لكونها مبدعة تمامًا. سوف تجيب على الأسئلة حتى تتمكن من العودة إليهم في أي وقت من خلال التواجد بشكل مرئي على الشاشة طوال الوقت.
خطوة خطوة
خطوة بخطوة شكل القيام به في HTML و CSS و JavaScript. يتميز بالحركة الانتقالية بين كل خطوة.
نموذج مسج متعدد الخطوات
إذا كان لديك شكل طويل جدا، هذا مثالي لأقسام مختلفة مع شريط تقدم مذهل للغاية. استنادًا إلى jQuery و CSS ، يتميز بتصميمه وأناقته الرائعة.
نموذج الرسوم المتحركة لواجهة المستخدم
التحولات من هذا نموذج الرسوم المتحركة لواجهة المستخدم هم على أساس Domink Marskusic. انتبه إلى التأثير الإبداعي للمربع الأزرق عندما نضغط على بعض حقلي تسجيل الدخول.
إنشاء الحساب / نموذج تسجيل الدخول
وسيلة للتحايل تسجيل الدخول وإنشاء الحساب الذي يعتمد على الرسوم المتحركة ماذا يحدث بين هذين القسمين. حضور حديث للغاية وملفت للنظر يجب القيام به في HTML و JavaScript و CSS.
تسليط الضوء على الأفعى
تسليط الضوء على الأفعى هي واحدة من أكثر عمليات تسجيل الدخول لفتًا للانتباه في أي قائمة تبرز للرسوم المتحركة الأنيقة التي تظهر بسرعة في اللحظة التي نضغط فيها على أحد الحقلين.
شاشة الدخول
إلهي هذا التصميم شاشة الدخول هكذا هم الرسوم المتحركة ومدى إبداعها. إذا كنت تريد أن تكون الأحدث عندما يتعلق الأمر بتصميم الويب ، فلا يمكن أن يكون هذا النموذج مفقودًا. لا غنى عنه.
تصميم واجهة المستخدم لتسجيل الدخول
مصمم باستخدام HTML و Sass و jQuery. تصميم واجهة المستخدم لتسجيل الدخول es eساق وواضح حول الموضوع الذي لا ينقصه الرسوم المتحركة الدقيقة ليصبح أحد العناصر المفضلة في القائمة.
تسجيل الدخول وإنشاء حساب واجهة المستخدم
خاص تصميم تسجيل الدخول وإنشاء حساب واجهة المستخدم للألوان وللتقديم في بطاقة واحدة كبيرة القسمين. آخر من أجمل ما في الإعدام لا يمكننا تفويته. صنع في HTML و CSS و JavaScript.
أخطاء بغيضة
أخطاء بغيضة إنه تسجيل دخول رائع بسبب الرسوم المتحركة لـ الحقول ذات obnoxious.css. أصلي ليكون تسجيل دخول ممتع وخالي من الهموم ومختلف للغاية. الأصل دون أي شك لموقعنا.
تسجيل الدخول CSS HTML
تسجيل دخول فضولي بواسطة الرموز المختلفة تُظهر كل حقل من الحقول لنقل الزائر إلى أي مكان نريده. تبرز أيضًا الظلال المختارة في الألوان. ليس لديها أي رسوم متحركة. إنه مصنوع في HTML و CSS لتنفيذه على موقع الويب لعميل أو خاص بنا.
نموذج تسجيل دخول مشروط
هذا نموذج تسجيل دخول مشروط مستوحى من لغة تصميم معروف بتصميم المواد. لقد رأينا ذلك في العديد من التطبيقات على الأجهزة المحمولة. في هذا الرمز لدينا لوحة تسجيل دخول ولوحة تسجيل مخفية افتراضيًا. يمكن تفعيل لوحة التسجيل من خلال النقر على العمود الأزرق الموجود على الجانب الأيمن. إنه يحتوي على رسوم متحركة رائعة ليكون تسجيل دخول خاص جدًا ومذهلًا.
شكل فليكس بوكس
نبدأ نماذج البحث بهذا شكل على أساس flexbox. يتميز باللون الأحمر لـ "بحث" وللمزيد بقليل لحقل بحث أنيق لموقع الويب الخاص بك.
صندوق متحرك
مع هذا صندوق متحرك انقر فوق رمز العدسة المكبرة و ستظهر الرسوم المتحركة الزرقاء الساطعة بحيث يتعين علينا فقط كتابة البحث الذي سنقوم به على الموقع. مصنوع باستخدام HTML و CSS و JavaScript.
مجال البحث
ل الخط الكبير يمر عبر الشاشة لذلك عندما نضغط عليه نبدأ في كتابة البحث. زر لاقط لتحديد هذا نموذج بحث بسيط.
اضغط على حقل البحث البسيط
اضغط على حقل البحث البسيط يستند إلى تفاعل تمت رؤيته في تطبيق مجتمع Waze Driver Community مركبة. جميع الرموز والصور مصنوعة باستخدام CSS. إنها تبرز لتلك الرموز التي تسمح لنا بإجراء عمليات بحث محددة عن منتج أو خدمة. ملفتة للنظر كم هو رائع.
تأثير إدخال نص CSS
تأثير إدخال نص CSS يتضمن سلسلة من الرسوم المتحركة في النص ودرج البحث ليكون طالبًا دقيقًا في الشكل.
بحث ملء الشاشة
هذا الدخول من البحث بملء الشاشة إنه يعمل مع أي نوع من التخطيط أو الموضع. يتطلب الأنماط عنصر خاص بالحاوية وتراكب البحث ليكون موجودا في الجذر. يتميز بحركة ارتدادية في اللحظة التي نضغط فيها على زر البحث.
البحث
Un نموذج البحث هذا بسيط يحب اللعب بالمراكز المختلفة والرسوم المتحركة. نضغط على زر البحث ويظهر الدرج الكامل لكتابة الكلمات. حديث للغاية وموصى به للغاية لمدى بساطته.
أي الأسئلة
لا شك es شكل بسيط مع حقل النص وخيار تحديد بعض الإجابات ليقوم المستخدم بتحديدها. قدر كبير من الناحية المرئية لتكون واحدة من الأفضل.
استمارة الاشتراك المنبثقة
مع هذا نموذج الاشتراك المنبثق، نضغط على الزر العائم وسيأخذنا إلى شكل بنبرة مضحكة جدا وحقل حيث يتم إدخال البريد الإلكتروني. مثالي للتسويق عبر البريد الإلكتروني.
واجهة مستخدم مربع الاشتراك
ل صندوق الاشتراك مع جرس إنذار و أكثر بقليل من الألوان المسطحة في التصميم.
مربع الاشتراك CSS
ل صندوق الاشتراك الذكي لحقيقة استخدم التدرجات لزر الاشتراك تمامًا مثل اللون الأرجواني للحقل.
مربع الاشتراك
ل مربع الاشتراك البسيط ولكن تأثير كبير حسب التصميم.
نموذج التحقق من صحة EMOJI
نقي CSS هذا نموذج التحقق لإنشاء المفتاح أو كلمة المرور. أثناء الكتابة ، ستقيس الرموز التعبيرية مستوى أمان النموذج. مضحك وفضولي بلا شك.
لا تفوت هذا قائمة 23 سهمًا متحركًا في CSS.
عينة ممتازة من الأمثلة المقدمة هنا. التنوع والتكيف مع السياقات المختلفة وأفضل شيء هو أن رابط كل عنوان يشتمل على العرض التوضيحي وكود المصدر على الرغم من أنه يجب عليك إبرازه بزر «شاهد العرض التوضيحي» لأنه كان بدافع الفضول أنني اكتشفته في العنوان . شكرا على المساهمة. تحيات من كاراكاس.
لقد ساعدني كثيرا شكرا لك