எந்தவொரு வலைத்தளத்திற்கும் பொதுவாக மிகவும் பொதுவான ஒன்று இருந்தால், இவை படிவங்கள். தொடர்பு தகவலை நிரப்ப நாங்கள் பயன்படுத்தும் படிவங்கள், வங்கி விவரங்களை உள்ளிடவும், சமூக வலைப்பின்னலில் உள்நுழையவும் அல்லது கூகிள் தேடுபொறியில் நாம் வழக்கமாக தினசரி செய்வது போன்ற தேடலைச் செய்யவும்.
எனவே இன்று நாங்கள் உங்களுக்குக் காட்டப் போகிறோம் CSS இல் 40 படிவங்கள் தொடர்பு படிவங்கள், கிரெடிட் கார்டு புதுப்பிப்புகள், உள்நுழைவுகள், எளிய, சந்தா அல்லது சரிபார்ப்பு வரை. கருப்பொருளைப் பொருட்படுத்தாமல், உங்கள் வலைத்தளத்திற்கு அந்த சிறப்பு புள்ளியை வழங்குவதற்கான சிறந்த நேர்த்தியுடன் மற்றும் பாணியின் வடிவங்கள்.
குறைந்தபட்ச தொடர்பு படிவம்
ஒரு எளிய தொடர்பு படிவம் a பலவிதமான விளைவுகள் மிதக்கும் மதிப்பெண்கள் அல்லது வரி அனிமேஷன்கள் போன்றவை. ஜாவாஸ்கிரிப்ட் பிட் கொண்ட நேர்த்தியான CSS குறியீடு. நீங்கள் தேடுகிறீர்கள் என்றால் ஒரு குறைந்தபட்ச தொடர்பு படிவம் இது உங்களுக்கு சரியானது.
குறைந்தபட்ச வடிவம்
மற்ற குறைந்தபட்ச வடிவம், CSS இல் மட்டுமே இருக்க வேண்டும் எளிய மற்றும் உயர் விளைவு வடிவம். இதற்கு முந்தைய ஒன்றின் குறைந்தபட்ச அனிமேஷன்கள் இல்லை, ஆனால் அது அதன் நோக்கத்தை மிகச் சிறப்பாக நிறைவேற்றுகிறது.
விண்டேஜ் தொடர்பு படிவம்
விண்டேஜ் தொடர்பு படிவம், மிகவும் நேர்த்தியான வடிவமைப்பு. அந்த வலைத்தளங்களுக்கு பொறுப்பு மொபைலில் இருந்து பார்க்க வேண்டும், இது சரிபார்ப்பைக் கொண்டிருக்கவில்லை என்றாலும்.
கடிதம் தொடர்பு படிவம்
அது தொடர்பு படிவம் இது மிகவும் ஆர்வமுள்ள அனிமேஷனைக் கொண்டுள்ளது: ஒரு கடிதம் உருவாகிறது. எளிய, ஆனால் ஏராளமான வண்ணத்துடன் மிகவும் பயனுள்ளதாக இருக்கும்.
விரிவாக்கப்பட்ட தொடர்பு படிவம்
அது தொடர்பு படிவம் விரிவாக்கப்பட்டது இது முன் இறுதியில் மட்டுமே உள்ளது jQuery உடன் சரிபார்ப்பு. நாங்கள் மிதக்கும் பொத்தானைக் கிளிக் செய்கிறோம், மேலும் படிவம் ஒரு துடிப்பான அனிமேஷனுடன் தோன்றும். நிலுவையில் உள்ளது.
தொடர்பு படிவம் UI
தொடர்பு படிவம் UI இது HTML மற்றும் CSS இல் செய்யப்பட்ட ஒரு வடிவம். அது இருப்பது தனித்து நிற்கிறது ஒரு எளிய தொடர்பு அட்டை அதை நிரப்பும்போது உரை புலம் மட்டுமே மாறும்.
கட்டண அட்டை புதுப்பிப்பு
Un கட்டண அட்டை புதுப்பிப்பு HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றில் தயாரிக்கப்பட்டது சுழலும் அனிமேஷன் மூலம் வேறுபடுகிறது சி.வி.சி அல்லது பாதுகாப்பு எண் புலத்தில் அழுத்தும்போது கிரெடிட் கார்டு.
கிரெடிட் கார்டு பிளாட் வடிவமைப்பு
ஒரு தூய CSS புதுப்பித்து கிரெடிட் கார்டுகள் தட்டையான வண்ணங்களில். வண்ணமயமான மற்றும் மிகவும் எளிமையானது தரம் மற்றும் தொழில்முறையைக் குறிக்கும் திறன் கொண்டது.
கடன் அட்டை UI
HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட்டில் உள்ள மற்றொரு கிரெடிட் கார்டு எவ்வளவு நல்லது என்பதைக் குறிக்கிறது ஒட்டுமொத்த வடிவமைப்பைத் தேர்ந்தெடுத்தது. உங்கள் வலைத்தளத்திற்கான இந்த குறியீட்டில் உள்ள அனிமேஷன்களை நாங்கள் மறந்துவிட்டோம். இந்த இணைப்பில் பதிவிறக்கவும்.
புதுப்பித்தலை எதிர்வினை
புதுப்பித்தலை எதிர்வினை, React.js உடன் தயாரிக்கப்படுகிறது, இதன் மூலம் வேறுபடுகிறது நாம் தனிப்பயனாக்கக்கூடிய பக்க படம் எங்கள் இணையவழி நிறுவனத்தில் நாங்கள் விற்கும் சேவைகள் அல்லது தயாரிப்புகளுடன்.
புதுப்பிப்பு கட்டண அட்டை
இந்த புதுப்பித்து அட்டையில் ஒரு படத்தை வைப்பதற்கான சாத்தியத்தை வெளிப்படுத்துகிறது. அ CSS3, HTML5 உடன் செய்யப்பட்ட எளிய மற்றும் தெளிவான வடிவம் மற்றும் ஒரு பிட் jQuery. இந்த பட்டியலில் உள்ள மீதமுள்ள புதுப்பித்தல்களிலிருந்து உயர் தரம் மற்றும் வேறுபட்டது. நீங்கள் பதிவிறக்கலாம் இங்கே இந்த கட்டண அட்டை புதுப்பிப்பு.
கிரெடிட் கார்டு கட்டணம்
அது கிரெடிட் கார்டு செலுத்தும் படிவம் உடன் பயிற்சி செய்ய திட்டமிடப்பட்டுள்ளது DOM கையாளுதலுக்கான ஜாவாஸ்கிரிப்ட். பேபால் உடன் நெருங்கி வரும் டிஜிட்டல் வங்கி சேவையான ஸ்ட்ரைப்பின் நேர்த்தியான குறியீட்டை வடிவமைப்பில் நீங்கள் நினைவு கூரலாம்.
கடன் அட்டை
ஒரு நேர்த்தியான அட்டை கட்டணத்திற்கான புதுப்பிப்பு மற்றவர்களிடமிருந்து வேறுபட்டது மற்றும் அதன் அடிப்படையில் கிரெடிட் கார்டு மேலே அமைந்துள்ளது எனவே, இணையவழியில் பணம் செலுத்துவதற்கு கிளையன்ட் நிரப்ப வேண்டிய வெவ்வேறு தரவுகளுடன் முழு படிவத்தையும் கீழே வைத்திருக்கிறோம்.
படிப்படியான படிவம்
Un படிப்படியான படிவம் HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றில் பதிவு செய்ய. ஒவ்வொரு புள்ளிகளுக்கும் நான்கு படிகள் இடது பக்கத்தில் அமைந்துள்ளது. மிகவும் முடிக்கப்பட்ட வடிவத்திற்கான நன்கு முடிக்கப்பட்ட அனிமேஷன்கள். அதிகமாக சிபாரிசுசெய்யப்பட்டது.
ஊடாடும் வடிவம்
Un ஊடாடும் வடிவம் HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் மூலம் உருவாக்கப்பட்ட பல படி. இது ஒவ்வொரு படிகளுக்கும் இடையிலான மாற்றம் அனிமேஷனைக் குறிக்கிறது. இது ஒரு நேர்த்தியான தொடுதலைக் கொண்டுள்ளது, அது கவனிக்கப்படாது.
படிப்படியான படிவம்
அது படிப்படியான படிவம் மிகவும் ஆக்கபூர்வமாக இருப்பதற்கு தனித்து நிற்கிறது. கேள்விகளுக்கு நீங்கள் பதிலளிப்பீர்கள் இதன் மூலம் நீங்கள் எந்த நேரத்திலும் திரையில் பார்வைக்கு வருவதன் மூலம் எந்த நேரத்திலும் அவர்களிடம் திரும்பலாம்.
படிப்படியாக
படிப்படியான படிவம் முடிந்தது HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றில். இது ஒவ்வொரு படிகளுக்கும் இடையிலான மாற்றம் அனிமேஷனால் வகைப்படுத்தப்படுகிறது.
பல படி Jquery படிவம்
உங்களிடம் இருந்தால் ஒரு மிக நீண்ட வடிவம், இது மிகவும் குறிப்பிடத்தக்க முன்னேற்றப் பட்டியைக் கொண்ட வெவ்வேறு பிரிவுகளுக்கு ஏற்றது. JQuery மற்றும் CSS ஐ அடிப்படையாகக் கொண்டு, அதன் வடிவமைப்பு மற்றும் அதன் சிறந்த நேர்த்தியுடன் இது தனித்து நிற்கிறது.
UI அனிமேஷன் வடிவம்
இதன் மாற்றங்கள் UI அனிமேஷன் வடிவம் அவர்கள் டொமின்க் மார்ஸ்குசிக் அடிப்படையில். இரண்டு உள்நுழைவு புலங்களில் சிலவற்றைக் கிளிக் செய்யும் போது நீல பெட்டியின் படைப்பு விளைவுக்கு கவனம் செலுத்துங்கள்.
கணக்கு உருவாக்கம் / உள்நுழைவு படிவம்
ஒரு வித்தை உள்நுழைவு மற்றும் கணக்கு உருவாக்கம் இது அனிமேஷனை அடிப்படையாகக் கொண்டது அந்த இரண்டு பிரிவுகளுக்கு இடையே என்ன நடக்கும். HTML, ஜாவாஸ்கிரிப்ட் மற்றும் CSS இல் செய்யப்பட வேண்டிய தற்போதைய மற்றும் வேலைநிறுத்தம்.
பாம்பு சிறப்பம்சமாக
பாம்பு சிறப்பம்சமாக எந்தவொரு பட்டியலிலும் மிகவும் குறிப்பிடத்தக்க உள்நுழைவு ஒன்றாகும் நேர்த்தியான அனிமேஷனைக் குறிக்கிறது இரண்டு புலங்களில் ஒன்றைக் கிளிக் செய்யும் தருணத்தில் அது விரைவாகத் தோன்றும்.
உள்நுழைவு திரை
இந்த வடிவமைப்பை தெய்வீகப்படுத்துங்கள் உள்நுழைவு திரை அவர்களும் அப்படித்தான் அனிமேஷன்கள் மற்றும் அது எவ்வளவு ஆக்கபூர்வமானது. வலை வடிவமைப்பிற்கு வரும்போது நீங்கள் மிகவும் தற்போதையவராக இருக்க விரும்பினால், இந்த படிவத்தை காண முடியாது. தவிர்க்க முடியாத.
உள்நுழைவு UI வடிவமைப்பு
HTML, சாஸ் மற்றும் jQuery ஐப் பயன்படுத்தி வடிவமைக்கப்பட்டுள்ளது. உள்நுழைவு UI வடிவமைப்பு es eதெளிவான மற்றும் தெளிவான பட்டியலில் பிடித்தவைகளில் ஒன்றான நுட்பமான அனிமேஷன்கள் இல்லாத விஷயத்தில்.
உள்நுழைவு மற்றும் UI கணக்கு உருவாக்கம்
ஒரு சிறந்த உள்நுழைவு வடிவமைப்பு மற்றும் கணக்கு உருவாக்கம் UI வண்ணங்கள் மற்றும் வழங்குவதற்காக ஒரு பெரிய அட்டை இரண்டு பிரிவுகள். மரணதண்டனையில் மிக அழகான இன்னொன்று நாம் தவறவிட முடியாது. HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றில் தயாரிக்கப்பட்டது.
அருவருப்பான பிழைகள்
அருவருப்பான பிழைகள் இன் அனிமேஷன் காரணமாக இது ஒரு சிறந்த உள்நுழைவு அருவருப்பான css உடன் புலங்கள். அசல் ஒரு வேடிக்கையான, கவலையற்ற மற்றும் மிகவும் மாறுபட்ட உள்நுழைவு. எங்கள் வலைத்தளத்திற்கு எந்த சந்தேகமும் இல்லாமல் அசல்.
CSS HTML ஐ உள்நுழைக
ஆர்வமுள்ள உள்நுழைவு வெவ்வேறு சின்னங்களால் நாங்கள் விரும்பும் இடத்தில் பார்வையாளரை அழைத்துச் செல்ல ஒவ்வொரு துறையையும் இது காட்டுகிறது. வண்ணங்களில் தேர்ந்தெடுக்கப்பட்ட நிழல்களும் தனித்து நிற்கின்றன. இதற்கு எந்த அனிமேஷனும் இல்லை. இது ஒரு கிளையன்ட் அல்லது எங்கள் சொந்த வலைத்தளத்தில் செயல்படுத்த HTML மற்றும் CSS இல் தயாரிக்கப்பட்டுள்ளது.
மாதிரி உள்நுழைவு வடிவம்
அது மாதிரி உள்நுழைவு வடிவம் இன் மொழியால் ஈர்க்கப்பட்டுள்ளது பொருள் வடிவமைப்புக்கு அறியப்பட்ட வடிவமைப்பு. மொபைல் சாதனங்களில் பல பயன்பாடுகளில் இதைக் கண்டோம். இந்த குறியீட்டில் உள்நுழைவு குழு மற்றும் பதிவு குழு ஆகியவை இயல்பாக மறைக்கப்பட்டுள்ளன. வலது பக்கத்தில் அமைந்துள்ள நீல நெடுவரிசையை கிளிக் செய்வதன் மூலம் பதிவு குழுவை செயல்படுத்தலாம். இது மிகவும் சிறப்பு வாய்ந்த மற்றும் வேலைநிறுத்த உள்நுழைவாக இருக்க சிறந்த அனிமேஷனைக் கொண்டுள்ளது.
நெகிழ்வு பெட்டியை உருவாக்குங்கள்
தேடல் படிவங்களை இதனுடன் தொடங்குகிறோம் வடிவம் நெகிழ்வு பெட்டியை அடிப்படையாகக் கொண்டது. இது «தேடலின் red சிவப்பு நிறத்திற்கும், உங்கள் வலைத்தளத்திற்கான ஒரு நேர்த்தியான தேடல் புலத்திற்கும் இன்னும் கொஞ்சம் அதிகமாக உள்ளது.
அனிமேஷன் பெட்டி
இது அனிமேஷன் பெட்டி பூதக்கண்ணாடி ஐகானைக் கிளிக் செய்க ஒரு பிரகாசமான நீல அனிமேஷன் தோன்றும் எனவே நாங்கள் இணையதளத்தில் மேற்கொள்ளப் போகும் தேடலை மட்டுமே தட்டச்சு செய்ய வேண்டும். HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் மூலம் தயாரிக்கப்பட்டது.
தேடல் புலம்
ஒரு பெரிய வரி திரை முழுவதும் இயங்கும் எனவே அதை அழுத்தும்போது தேடலைத் தட்டச்சு செய்யத் தொடங்குவோம். இதை வரையறுக்க ஒரு இடும் பொத்தான் எளிய தேடல் வடிவம்.
எளிய தேடல் புலம் கிளிக் செய்யவும்
எளிய தேடல் புலம் கிளிக் செய்யவும் இல் காணப்படும் ஒரு தொடர்பை அடிப்படையாகக் கொண்டது Waze இயக்கி சமூக பயன்பாடு வாகனம். அனைத்து சின்னங்களும் படங்களும் CSS உடன் உருவாக்கப்பட்டுள்ளன. ஒரு தயாரிப்பு அல்லது சேவைக்கான குறிப்பிட்ட தேடல்களை மேற்கொள்ள எங்களை அனுமதிக்கும் அந்த ஐகான்களை இது குறிக்கிறது. அது எவ்வளவு குளிராக இருப்பதால் வேலைநிறுத்தம்.
CSS உரை உள்ளீட்டு விளைவு
CSS உரை உள்ளீட்டு விளைவு ஒரு தொடர் அடங்கும் உரை மற்றும் தேடல் அலமாரியில் அனிமேஷன்கள் வடிவத்தில் கவனமாக தேடுபவராக இருக்க வேண்டும்.
முழு திரை தேடல்
இந்த நுழைவு முழு திரை தேடல் இது எந்த வகை தளவமைப்பு அல்லது நிலையில் செயல்படுகிறது. பாணிகள் தேவை கொள்கலன் சார்ந்த மற்றும் தேடல்-மேலடுக்கு உறுப்பு வேரில் அமைந்திருக்கும். தேடல் பொத்தானை அழுத்தும் தருணத்தில் இது ஒரு எதிர்க்கும் அனிமேஷனால் வகைப்படுத்தப்படுகிறது.
தேடல்
Un தேடல் படிவம் எளிமையானது அவர் வெவ்வேறு நிலைகளுடன் விளையாட விரும்புகிறார் மற்றும் அனிமேஷன்கள். தேடல் பொத்தானைக் கிளிக் செய்க, முழுமையான அலமாரியை சொற்களைத் தட்டச்சு செய்யத் தோன்றும். இது எவ்வளவு எளிமையானது என்பதற்கு மிகவும் தற்போதைய மற்றும் மிகவும் பரிந்துரைக்கப்படுகிறது.
கேள்விகள் இல்லை
கேள்வி இல்லை es உரை புலத்துடன் எளிய வடிவம் மற்றும் பயனர் அவற்றைத் தேர்ந்தெடுக்க சில பதில்களைத் தேர்ந்தெடுக்கும் விருப்பம். பார்வைக்கு மிகச் சிறந்த ஒன்றாகும்.
பாப்அப் சந்தா படிவம்
இதனுடன் பாப்அப் சந்தா படிவம், மிதக்கும் பொத்தானைக் கிளிக் செய்கிறோம், அது நம்மை அழைத்துச் செல்லும் மிகவும் வேடிக்கையான தொனியுடன் வடிவம் மற்றும் மின்னஞ்சலை உள்ளிட வேண்டிய புலம். மின்னஞ்சல் மார்க்கெட்டிங் செய்ய ஏற்றது.
சந்தா பெட்டி UI
ஒரு சந்தா பெட்டி ஒரு எச்சரிக்கை மணி மற்றும் தட்டையான வண்ணங்களை விட சற்று அதிகம் வடிவமைப்பில்.
CSS சந்தா பெட்டி
ஒரு ஸ்மார்ட் சந்தா பெட்டி உண்மைக்கு சாய்வுகளைப் பயன்படுத்துங்கள் புலத்தின் ஊதா நிறத்தைப் போலவே சந்தா பொத்தானையும்.
சந்தா பெட்டி
ஒரு எளிய சந்தா பெட்டி ஆனால் வடிவமைப்பால் பெரும் விளைவு.
EMOJI சரிபார்ப்பு படிவம்
தூய்மையானது இதை CSS சரிபார்ப்பு படிவம் விசையை உருவாக்க அல்லது கடவுச்சொல். நாங்கள் எழுதுகையில், ஈமோஜி படிவத்தின் பாதுகாப்பு அளவை அளவிடும். ஒரு சந்தேகம் இல்லாமல் வேடிக்கையான மற்றும் ஆர்வம்.
இதை தவறவிடாதீர்கள் CSS இல் 23 அனிமேஷன் அம்புகளின் பட்டியல்.
இங்கே வழங்கப்பட்ட உதாரணங்களின் சிறந்த மாதிரி. வெவ்வேறு சூழல்களுக்கான பல்வேறு மற்றும் தழுவல் மற்றும் சிறந்த விஷயம் என்னவென்றால், ஒவ்வொரு தலைப்பின் இணைப்பிலும் டெமோ மற்றும் மூல குறியீடு ஆகியவை அடங்கும், இருப்பினும் நீங்கள் அதை ஒரு பொத்தானைக் கொண்டு முன்னிலைப்படுத்த வேண்டும் «டெமோவைப் பார்க்கவும்» ஏனெனில் இது ஆர்வத்தில் இல்லாததால் நான் அதை தலைப்பில் கண்டுபிடித்தேன் . பங்களிப்புக்கு நன்றி. கராகஸிடமிருந்து வாழ்த்துக்கள்.
இது எனக்கு மிகவும் உதவியது, நன்றி.