40 সিএসএস ফর্ম যা কোনও ওয়েবসাইটে অনুপস্থিত হতে পারে না

লগইন ফরম

যদি এমন কোনও কিছু থাকে যা সাধারণত যে কোনও ওয়েবসাইটের জন্য খুব সাধারণ হয় তবে এগুলি ফর্ম। যোগাযোগের তথ্য পূরণ করতে আমরা যে ফর্মগুলি ব্যবহার করি, ব্যাঙ্কের বিশদ লিখুন, একটি সোশ্যাল নেটওয়ার্কে লগ ইন করুন বা গুগল অনুসন্ধান ইঞ্জিনে আমরা সাধারণত প্রতিদিনের মতো একটি অনুসন্ধান সম্পাদন করি।

তাই আজ আমরা আপনাকে দেখাতে যাচ্ছি সিএসএসে 40 টি ফর্ম পরিচিতি ফর্ম, ক্রেডিট কার্ড চেকআউট, লগইন, সহজ, সাবস্ক্রিপশন বা এমনকি বৈধতা থেকে শুরু করে। থিম নির্বিশেষে আপনার ওয়েবসাইটটিতে সেই বিশেষ বক্তব্য দেওয়ার জন্য দুর্দান্ত কৌতুক এবং শৈলীর ফর্মগুলির একটি সিরিজ।

নূন্যতম যোগাযোগের ফর্ম

ফর্ম-মিনিমালিস্ট

একটি সহ একটি সাধারণ যোগাযোগ ফর্ম প্রভাব বিভিন্ন ধরণের যেমন ভাসমান চিহ্ন বা লাইন অ্যানিমেশন। কিছুটা জাভাস্ক্রিপ্ট সহ মার্জিত সিএসএস কোড। যদি আপনি খুঁজছেন নূন্যতম যোগাযোগের ফর্ম এটি আপনার জন্য উপযুক্ত।

সিএসএস
সম্পর্কিত নিবন্ধ:
ওয়েব ডিজাইনের জন্য 23 উচ্চমানের সিএসএস লাইব্রেরি

নূন্যতম ফর্ম

নূন্যতম

Otro ন্যূনতম ফর্মযদিও কেবল সিএসএসে একটি হতে হবে সহজ এবং উচ্চ-প্রভাব ফর্ম। এটিতে আগেরটির সংক্ষিপ্ত অ্যানিমেশন নেই তবে এটি তার উদ্দেশ্যটি খুব ভালভাবে পূরণ করে।

মদ যোগাযোগ ফর্ম

মদ

মদ যোগাযোগ ফর্ম, একটি খুব মার্জিত নকশা। এই ওয়েবসাইটগুলির জন্য প্রতিক্রিয়াশীল মোবাইল থেকে দেখাযদিও এটিতে বৈধতা নেই।

চিঠি যোগাযোগের ফর্ম

চিঠি

এস্তে যোগাযোগ ফর্ম এটি একটি বরং কৌতূহল অ্যানিমেশন আছে: একটি চিঠি গঠিত হয়। সহজ, তবে অনেক রঙের সাথে খুব দরকারী।

হোভার কার্ড
সম্পর্কিত নিবন্ধ:
ব্লগ, ই-বাণিজ্য এবং আরও অনেক কিছুর জন্য 27 টি বিনামূল্যে এইচটিএমএল এবং সিএসএস কার্ড

সম্প্রসারিত যোগাযোগের ফর্ম

বিস্তৃত যোগাযোগ ফর্ম

এস্তে প্রসারিত যোগাযোগ ফর্ম এটি কেবল সামনের প্রান্তে এবং এর রয়েছে jQuery সঙ্গে বৈধতা। আমরা ভাসমান বোতামটিতে ক্লিক করি এবং ফর্মটি একটি প্রাণবন্ত অ্যানিমেশন সহ প্রদর্শিত হবে। বকেয়া।

যোগাযোগের ফর্ম UI

যোগাযোগের ফর্ম

যোগাযোগের ফর্ম UI এটি এইচটিএমএল এবং সিএসএসে তৈরি একটি ফর্ম। এটি সত্তা জন্য দাঁড়িয়ে একটি সাধারণ যোগাযোগ কার্ড যেটি আমরা পূরণ করতে পারি যাতে এটি ক্লিক করা হলে কেবল পাঠ্য ক্ষেত্র পরিবর্তন হয়।

পেমেন্ট কার্ড চেকআউট

চেকআউট কার্ডের অর্থ প্রদান

Un পেমেন্ট কার্ড চেকআউট এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট যা তৈরি অ্যানিমেশন ঘোরার মাধ্যমে পৃথক করা হয় ক্রেডিট কার্ড যখন আমরা সিভিসি বা সুরক্ষা নম্বর ক্ষেত্রে চাপি press

ক্রেডিট কার্ড ফ্ল্যাট ডিজাইন

খাঁটি সিএসএস ক্রেডিট কার্ড

খাঁটি সিএসএস এ জন্য চেকআউট ফ্ল্যাট রঙে ক্রেডিট কার্ড। রঙিন এবং খুব সহজ যা গুণমান এবং পেশাদারিত্ব বোঝাতে সক্ষম।

ক্রেডিট কার্ড ইউআই

নাস্তাযোগ্য

এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে আর একটি ক্রেডিট কার্ড যা এটি কতটা ভাল তা প্রমাণ করে সামগ্রিক নকশা চয়ন। আমরা আপনার ওয়েবসাইটের এই কোডের টুকরোটিতে অ্যানিমেশনগুলি ভুলে গেছি। এটি এই লিঙ্কে ডাউনলোড করুন.

প্রতিক্রিয়া চেকআউট

প্রতিক্রিয়া

প্রতিক্রিয়া চেকআউট, React.js দিয়ে তৈরি, দ্বারা আলাদা করা হয় পাশের চিত্রটি আমরা কাস্টমাইজ করতে পারি আমাদের ইকমারসে আমরা যে পরিষেবাগুলি বা পণ্য বিক্রি করি তা সহ

চেকআউট পেমেন্ট কার্ড

পপভ

এই চেকআউটটি কার্ডে একটি চিত্র রাখার সম্ভাবনাটিকে বোঝায়। ক CSS3, এইচটিএমএল 5 দিয়ে তৈরি সহজ এবং স্পষ্ট ফর্ম এবং কিছুটা jQuery। উচ্চ মানের এবং এই তালিকার বাকি চেকআউটগুলির থেকে পৃথক। তুমি ডাউনলোড করতে পারো এখানে এই পেমেন্ট কার্ড চেকআউট।

ক্রেডিট কার্ড পেমেন্ট

ডোরা

এস্তে ক্রেডিট কার্ড পেমেন্ট ফর্ম অনুশীলন প্রোগ্রাম করা হয় DOM হেরফের জন্য জাভাস্ক্রিপ্ট। আপনি ডিজাইনে স্ট্রিপের মার্জিত কোড, ডিজিটাল ব্যাংকিং পরিষেবাটি পেপালের কাছাকাছি আসার কথা মনে করতে পারেন।

ক্রেডিট কার্ড

দৈনিক

একটি মার্জিত কার্ড প্রদানের জন্য চেকআউট অন্যদের থেকে পৃথক এবং ভিত্তিক শীর্ষে অবস্থিত একটি ক্রেডিট কার্ড যাতে নীচে আমাদের ইকমার্সে অর্থ প্রদানের জন্য গ্রাহককে পূরণ করতে হয় এমন বিভিন্ন ডেটা সহ পুরো ফর্মটি থাকে

ধাপে ধাপে ফর্ম

ধাপে ধাপে

Un ধাপে ধাপে ফর্ম এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে নিবন্ধকরণের জন্য। পয়েন্ট প্রতিটি জন্য চারটি পদক্ষেপ বাম দিকে অবস্থিত। অত্যন্ত সমাপ্ত ফর্মটির জন্য ভাল সমাপ্ত অ্যানিমেশন। অত্যন্ত বাঞ্ছনীয়.

ইন্টারেক্টিভ ফর্ম

ইন্টারেক্টিভ

Un ইন্টারেক্টিভ ফর্ম এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে মাল্টি-স্টেপ তৈরি করা হয়েছে। এটি প্রতিটি পদক্ষেপের মধ্যে রূপান্তর অ্যানিমেশনটির জন্য দাঁড়িয়েছে। এটির একটি মার্জিত স্পর্শ রয়েছে যা নজরে পড়বে না।

ধাপে ধাপে ফর্ম

ধাপে ধাপে

এস্তে ধাপে ধাপে ফর্ম বেশ সৃজনশীল হয়ে দাঁড়িয়েছে। আপনি প্রশ্নের উত্তর দিতে হবে যাতে আপনি সমস্ত সময় স্ক্রিনে দৃষ্টিভঙ্গি উপস্থিত হয়ে যে কোনও সময়ে তাদের কাছে ফিরে আসতে পারেন।

ধাপে ধাপে

এর মধ্যে paso

ধাপে ধাপে ফর্ম সম্পন্ন এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এ। এটি প্রতিটি পদক্ষেপের মধ্যে রূপান্তর অ্যানিমেশন দ্বারা চিহ্নিত করা হয়েছে।

মাল্টি স্টেপ জ্যাকুরি ফর্ম

জিকিউরি মাল্টি স্টেপ

আপনার যদি একটি আছে খুব দীর্ঘ ফর্ম, এটি খুব আকর্ষণীয় অগ্রগতি বার সহ বিভিন্ন বিভাগের জন্য উপযুক্ত। JQuery এবং CSS এর উপর ভিত্তি করে, এটি এর নকশা এবং এর দুর্দান্ত কমনীয়তার জন্য দাঁড়িয়েছে।

ইউআই অ্যানিমেশন ফর্ম

অ্যানিমেশন ফর্ম

এর রূপান্তর ইউআই অ্যানিমেশন ফর্ম তারা হয় ডোমিংক মার্সকিউজিক ভিত্তিক। আমরা দুটি লগইন বা সেশন ক্ষেত্রের কয়েকটিতে ক্লিক করলে নীল বাক্সটির সৃজনশীল প্রভাবের দিকে মনোযোগ দিন।

অ্যাকাউন্ট তৈরি / লগইন ফর্ম

লগইন তৈরি

একটি চালাকি লগইন এবং অ্যাকাউন্ট তৈরি যা অ্যানিমেশন ভিত্তিক এই দুটি বিভাগের মধ্যে কী ঘটে। এইচটিএমএল, জাভাস্ক্রিপ্ট এবং সিএসএসে করা খুব বর্তমান এবং আকর্ষণীয় উপস্থিতি।

সাপের হাইলাইট

সাপ

সাপের হাইলাইট যে কোনও তালিকার সবচেয়ে আকর্ষণীয় লগইন মার্জিত অ্যানিমেশন জন্য দাঁড়িয়েছে যে দুটি মুহুর্তে আমরা দুটি ক্ষেত্রের একটিতে ক্লিক করি সেই মুহুর্তটি তাড়াতাড়ি উপস্থিত হয়।

লগইন স্ক্রিন

লগইন

এই নকশা Divশ্বরিক লগইন স্ক্রিন তাদের হয় অ্যানিমেশন এবং এটি কতটা সৃজনশীল। ওয়েব ডিজাইনের ক্ষেত্রে আপনি যদি সর্বাধিক বর্তমান হতে চান তবে এই ফর্মটি অনুপস্থিত হতে পারে না। অপরিহার্য।

লগইন ইউআই ডিজাইন

লগইন ফরম

এইচটিএমএল, স্যাস এবং jQuery ব্যবহার করে ডিজাইন করা। লগইন ইউআই ডিজাইন es eসাময়িক এবং পরিষ্কার তালিকায় পছন্দের আর একটিতে সূক্ষ্ম অ্যানিমেশনগুলির অভাব নেই এমন বিষয়ে।

লগইন এবং ইউআই অ্যাকাউন্ট তৈরি

লগইন নিবন্ধন

একটি বিশেষ লগইন ডিজাইন এবং অ্যাকাউন্ট তৈরি ইউআই  রঙগুলির জন্য এবং উপস্থাপনের জন্য একটি বড় কার্ড দুটি বিভাগ। মৃত্যুদন্ড কার্যকর করার মধ্যে আরও একটি সুন্দর যা আমরা মিস করতে পারি না। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে তৈরি।

উদ্বেগজনক ত্রুটি

অবাধ্য

উদ্বেগজনক ত্রুটি এটির অ্যানিমেশনের কারণে এটি দুর্দান্ত লগইন obnoxious.css সহ ক্ষেত্রগুলি। মজাদার, যত্নহীন এবং খুব আলাদা লগইন হতে আসল। আমাদের ওয়েবসাইটের জন্য কোনও সন্দেহ ছাড়াই মূল।

সিএসএস এইচএমএল লগইন করুন

সিএসএস

একটি কৌতূহল লগইন বিভিন্ন আইকন দ্বারা যে যেখানে আমরা চাই সেখানে দর্শনার্থীকে নিতে প্রতিটি ক্ষেত্র দেখায়। রঙগুলিতে নির্বাচিত ছায়াগুলিও বাইরে দাঁড়িয়ে। এটির কোনও অ্যানিমেশন নেই। এটি এইচটিএমএল এবং সিএসএসে তৈরি করা হয়েছে এটি কোনও ক্লায়েন্ট বা আমাদের নিজস্ব জন্য ওয়েবসাইটে প্রয়োগ করা।

মডেল লগইন ফর্ম

প্রকারীয়

এস্তে মডেল লগইন ফর্ম এর ভাষা দ্বারা অনুপ্রাণিত হয় উপাদান নকশা জন্য পরিচিত নকশা। আমরা এটি মোবাইল ডিভাইসে অনেক অ্যাপ্লিকেশনে দেখেছি। এই কোডটিতে আমাদের একটি লগইন প্যানেল এবং একটি রেজিস্ট্রেশন প্যানেল রয়েছে যা ডিফল্টরূপে লুকানো থাকে। ডানদিকে অবস্থিত নীল কলামে ক্লিক করে নিবন্ধকরণ প্যানেলটি সক্রিয় করা যেতে পারে। খুব বিশেষ এবং আকর্ষণীয় লগইন হওয়ার জন্য এটির দুর্দান্ত অ্যানিমেশন রয়েছে।

ফর্ম ফ্লেক্সবক্স

flexbox

আমরা এটি দিয়ে অনুসন্ধান ফর্মগুলি শুরু করি ফর্ম ফ্লেক্সবক্সের উপর ভিত্তি করে। এটি «অনুসন্ধান leg লাল রঙের জন্য এবং আপনার ওয়েবসাইটের জন্য মার্জিত অনুসন্ধানের ক্ষেত্রের জন্য আরও কিছু বিশিষ্ট।

অ্যানিমেটেড বক্স

অ্যানিমেটেড বক্স

এই সঙ্গে অ্যানিমেটেড বক্স ম্যাগনিফাইং গ্লাস আইকনে ক্লিক করুন এবং একটি উজ্জ্বল নীল অ্যানিমেশন প্রদর্শিত হবে যাতে আমাদের কেবল অনুসন্ধানটি টাইপ করতে হবে যা আমরা ওয়েবসাইটে চালিয়ে যাচ্ছি। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে তৈরি।

অনুসন্ধান ক্ষেত্র

অনুসন্ধান অনুসন্ধান করুন

উনা বড় লাইন পর্দা জুড়ে চলে যাতে এটি চাপলে আমরা অনুসন্ধানটি টাইপ করতে শুরু করি। এটি সংজ্ঞায়িত করার জন্য একটি পিকআপ বোতাম সহজ অনুসন্ধান ফর্ম.

সরল অনুসন্ধান ক্ষেত্র ক্লিক করুন

এর Waze

সরল অনুসন্ধান ক্ষেত্র ক্লিক করুন দেখা একটি মিথস্ক্রিয়া উপর ভিত্তি করে ওয়াজে ড্রাইভার সম্প্রদায় অ্যাপ্লিকেশন যানবাহন সমস্ত আইকন এবং চিত্র সিএসএস দিয়ে তৈরি করা হয়। এটি সেই আইকনগুলির জন্য দাঁড়িয়ে রয়েছে যা আমাদের কোনও পণ্য বা পরিষেবার জন্য নির্দিষ্ট অনুসন্ধান চালানোর অনুমতি দেয়। এটি কত শীতল জন্য স্ট্রাইকিং।

সিএসএস পাঠ্য ইনপুট প্রভাব

সিএসএস ইনপুট

সিএসএস পাঠ্য ইনপুট প্রভাব একটি সিরিজ অন্তর্ভুক্ত পাঠ্য এবং অনুসন্ধান ড্রয়ারে অ্যানিমেশন আকারে সতর্ক সন্ধানকারী হতে।

পূর্ণ স্ক্রিন অনুসন্ধান

পূর্ণ স্ক্রিন অনুসন্ধান

থেকে এই এন্ট্রি পূর্ণ স্ক্রিন অনুসন্ধান এটি যে কোনও ধরণের লেআউট বা অবস্থানের সাথে কাজ করে। শৈলী প্রয়োজন ধারক-নির্দিষ্ট এবং অনুসন্ধান-ওভারলে উপাদান মূল মধ্যে অবস্থিত। আমরা অনুসন্ধান বোতাম টিপুন এমন মুহুর্তে এটি একটি বাউনিং অ্যানিমেশন দ্বারা চিহ্নিত করা হয়েছে।

অনুসন্ধান

অনুসন্ধান

Un অনুসন্ধান ফর্ম সহজ যে তিনি বিভিন্ন অবস্থানের সাথে খেলতে পছন্দ করেন এবং অ্যানিমেশন। আমরা অনুসন্ধান বোতামে ক্লিক করি এবং শব্দগুলি টাইপ করার জন্য সম্পূর্ণ ড্রয়ারটি উপস্থিত হয়। এটি কতটা সহজ তার জন্য খুব বর্তমান এবং অত্যন্ত প্রস্তাবিত।

কোন প্রশ্ন নেই

কোন প্রশ্ন নেই

কোন প্রশ্ন না es পাঠ্য ক্ষেত্র সহ সহজ ফর্ম এবং ব্যবহারকারীদের সেগুলি নির্বাচন করার জন্য কিছু উত্তর নির্বাচন করার বিকল্প। দর্শনীয়ভাবে সেরা হয়ে উঠতে দুর্দান্ত চুক্তি।

পপআপ সাবস্ক্রিপশন ফর্ম

সাবস্ক্রাইব

এই সঙ্গে পপআপ সাবস্ক্রিপশন ফর্ম, আমরা ভাসমান বোতামে ক্লিক করি এবং এটি আমাদের কাছে নিয়ে যাবে একটি খুব মজার সুর সঙ্গে ফর্ম এবং এমন একটি ক্ষেত্র যেখানে ইমেলটি প্রবেশ করতে হবে। ইমেল বিপণনের জন্য উপযুক্ত।

সাবস্ক্রিপশন বাক্স ইউআই

চাঁদা

উনা সাবস্ক্রিপশন বক্স একটি অ্যালার্ম বেল সহ এবং ফ্ল্যাট রঙের চেয়ে কিছুটা বেশি ডিজাইনে।

সিএসএস সাবস্ক্রিপশন বক্স

চাঁদা

উনা স্মার্ট সাবস্ক্রিপশন বক্স সত্যের জন্য গ্রেডিয়েন্ট ব্যবহার করুন ক্ষেত্রের বেগুনি রঙের মতো সাবস্ক্রাইব বোতামের জন্য।

সাবস্ক্রিপশন বক্স

সাবস্ক্রিপশন বক্স

উনা সাধারণ সাবস্ক্রিপশন বাক্স কিন্তু নকশা দ্বারা দুর্দান্ত প্রভাব।

EMOJI বৈধতা ফর্ম

EMOJI ভাগ করুন

খাঁটি সিএসএস এটি বৈধতা ফর্ম কী তৈরি করতে বা পাসওয়ার্ড আমরা যেমন লিখি, ইমোজি ফর্মটির সুরক্ষা স্তর পরিমাপ করবে। কোনও সন্দেহ ছাড়াই মজার এবং কৌতূহলপূর্ণ।

এটি মিস করবেন না সিএসএসে 23 অ্যানিমেটেড তীরগুলির তালিকা.


আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।

      হুয়ান জোস পেরেজ তিনি বলেন

    এখানে উদাহরণগুলির উদাহরণের দুর্দান্ত নমুনা। বিভিন্ন প্রসঙ্গে এবং সর্বোত্তম বিষয়টির সাথে অভিযোজন এবং সর্বোত্তম বিষয় হ'ল প্রতিটি শিরোনামের লিঙ্কটিতে ডেমো এবং উত্স কোড অন্তর্ভুক্ত রয়েছে যদিও আপনাকে এটি একটি বোতাম দিয়ে হাইলাইট করতে হবে «ডেমো দেখুন» কারণ এটি কৌতূহলের বাইরে ছিল যে আমি শিরোনামে এটি আবিষ্কার করেছি it । অবদানের জন্য ধন্যবাদ। কারাকাসের পক্ষ থেকে শুভেচ্ছা।

      রোডলফো গ্যালেগোস তিনি বলেন

    এটা আমাকে অনেক সাহায্য করেছে, ধন্যবাদ.