ஆன்லைன் ஆதாரங்கள் கிட்டத்தட்ட எல்லையற்றவை, ஆனால் தரத்தைக் கண்டுபிடிப்பது உண்மையில் கடினமான விஷயம்கொஞ்சம் தேடி, வடிவமைப்பிற்காக அர்ப்பணிக்கப்பட்ட வலைத்தளங்களின் நல்ல பட்டியலைக் கொண்டிருந்தாலும், விஷயங்கள் எளிதாகின்றன. HTML மற்றும் CSS போன்ற மொழிகள் மிகச் சிறந்த நேரத்தில், இலவசத்துடன் நெருங்கி வருவது, உயர்தர வளங்கள் கிட்டத்தட்ட சில கிளிக்குகளில் உள்ளன.
நாங்கள் ஒரு தொடரை பட்டியலிடப் போகிறோம் HTML மற்றும் CSS இல் இலவச அட்டைகள் அவை எல்லா வகையான வலைப்பதிவு, வணிகம், ஈ-காமர்ஸ் மற்றும் பலவற்றிற்கும் மிகவும் பொருத்தமானவை. ஒரு நீண்ட தூர சேகரிப்பு, இதன் மூலம் நீங்கள் அனைத்து வகையான வாடிக்கையாளர்களுக்கும் செய்து வரும் சில வேலைகளில் இணைக்க முடியும். HTML மற்றும் CSS இரண்டிலும் குறியீட்டைப் பெற, codepen.io ஐப் பயன்படுத்தும் இந்த பட்டியலில் இதைச் செய்வோம்.
வலைப்பதிவு அட்டை வேடிக்கை # 1
ஒரு சிறந்த வடிவமைப்பு அட்டை அது பிரதிபலிக்கும் படத்தை கிட்டத்தட்ட எல்லாவற்றையும் கூறுகிறது, நீங்கள் தொடர்புடைய குறியீட்டைப் பெற codepen.io க்குச் சென்று அதை உங்கள் இணையதளத்தில் நிறுவலாம்.
CSS செய்தி அட்டைகள் CSS மட்டுமே
இந்த அட்டை, உடன் பின்னணியாக அந்நியன் விஷயங்கள், உள்ளடக்கத்தை வெளிப்படுத்தும் அதன் மென்மையான அனிமேஷனைக் குறிக்கிறது. இது தூய CSS ஆகும்.
வலைப்பதிவு இடுகை பொருள்
மவுஸ் சுட்டிக்காட்டி அதன் மீது கொண்டு வருவதன் மூலம் வலையின் முன்னோட்டம். இது CSS மற்றும் HTML ஐக் கொண்டுள்ளது எளிதாக இணைக்க.
வலைப்பதிவு அட்டைகள்
குறைந்தபட்ச பதிலளிக்கக்கூடிய வலைப்பதிவு அட்டை வடிவமைப்பு. வேகமான மற்றும் மென்மையான அனிமேஷன்கள் யாரையும் அலட்சியமாக விடாத உயர் தரம்.
பதிலளிக்கக்கூடிய வணிக அட்டைகள்
வெளியே நிற்கிறது சிறிய அனிமேஷன் அட்டைப் படத்தின் மீது மவுஸ் சுட்டிக்காட்டி நகர்த்துவதன் மூலம்.
மற்றொரு வலைப்பதிவு அட்டை
தோன்றுகிறது வட்டமிடும் போது அட்டை உரை அதே.
வணிக அட்டைகள்
ஒரு எளிய ஆனால் தற்போதைய அட்டை HTML மற்றும் CSS இல் டெமோ மற்றும் குறியீட்டைப் பார்வையிடவும்.
3D வணிக அட்டை
இந்த அட்டை மதிப்பு HTML மற்றும் CSS உடன் ஒரு 3D அனிமேஷன். எலெனா நசரோவாவால் தயாரிக்கப்பட்டது, இது வண்ணத்தைத் தாக்கும் வணிக அட்டைக்கு ஏற்றது.
CSS வணிக அட்டை
CSS இல் மிகவும் குறிப்பிடத்தக்க வணிக அட்டை 3D இல் சுழலும் மவுஸ் சுட்டிக்காட்டிக்கு நாங்கள் கீழே வைக்கும் தருணத்தில் பதிலளிக்கும் தொடர்ச்சியான URL முகவரிகளுக்கு வழிவகுக்க.
அட்டை கட்டங்கள்
உடன் நன்கு வைக்கப்பட்ட அட்டைகளின் தொடர் கண்கவர் வடிவமைப்பு. அதன் எளிமையான அழகியலுக்கு இது ஆச்சரியமாக இருக்கிறது, ஆனால் HTML, CSS மற்றும் SCSS குறியீட்டில் நல்ல வெற்றியைப் பெற்றது.
3 டி கார்டுகள் வெளிப்படுத்தப்படுகின்றன
அட்டை கட்டங்களின் இந்த தொடர் இந்த நேரத்தில் கூடுதல் தகவல்களை வெளிப்படுத்தவும் ஐகானில் சுட்டியை பச்சை நிறத்தில் விட்டுவிட்டோம். நாம் சுட்டிக்காட்டி விட்டு வெளியேறும் அதே நேரத்தில், மீதமுள்ள கட்டம் அதற்கேற்ப நகரும்.
பொறுப்பு பொருள் வடிவமைப்பு அட்டை
உடன் google வடிவமைப்பு மொழி, இந்த தொடர் அட்டைகள் மெனு ஐகானைக் குறிக்கும், இது நடிகர்களின் அனைத்து தகவல்களையும் எடுத்துக்காட்டு வழக்கில் திறக்கும். சிறந்த காட்சி தோற்றத்துடன் அழகான மற்றும் உள்ளுணர்வு அனிமேஷன்கள்.
ஃப்ளெக்ஸ் பாக்ஸ் அட்டை கட்டம்
அட்டை முன்மாதிரி கட்டம் நெகிழ்வு வடிவத்தைப் பயன்படுத்துவதற்கு அவை தனித்து நிற்கும் அதே உயரத்தில். அதன் மதிப்புகளில் மற்றொரு CSS விகித விகிதங்கள் மற்றும் CSS வடிப்பான்களின் பயன்பாடு ஆகும்.
குல அட்டைகளின் மோதல்
El பிரபலமான மொபைல் விளையாட்டு ஆண்ட்ரே மதரங் உருவாக்கிய HTML மற்றும் CSS இல் அவரது அட்டைகள் உள்ளன. துல்லியமான மற்றும் அதிக காட்சி அனிமேஷன் மூலம் நாம் அவற்றுக்கு இடையே செல்ல முடியும்.
இணையவழிக்கான ஸ்லைடு அட்டைகள்
ஒரு சுறுசுறுப்பான அனிமேஷன்இந்த கார்டுகள் அவற்றின் உறுப்புகளைத் தேடுவதைத் தேட உங்களை ஊக்குவிக்கின்றன. உமர் டோகியிடமிருந்து சிறந்த வடிவமைப்புடன்.
இடைமுக வடிவமைப்பு - தயாரிப்பு அட்டை
வடிவமைக்க சரியான அட்டை எங்கள் இணையவழி தயாரிப்பு. HTML மற்றும் CSS இல் தயாரிக்கப்பட்டது.
தயாரிப்பு அட்டை
அதே அட்டையிலிருந்து நம்மால் முடியும் பல படங்கள் வழியாக செல்லுங்கள் தயாரிப்பை சிறப்பாகக் காண. இது வண்டியில் சேர் பொத்தானை உள்ளடக்கியது மற்றும் HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கொண்டுள்ளது.
நெகிழ்வான தயாரிப்பு அட்டைகள்
அதன் பெயர் குறிப்பிடுவது போல, நெகிழ்வு பெட்டியைப் பயன்படுத்துகிறது add to cart பொத்தானைக் கிளிக் செய்யும் போது ஒரு சுவாரஸ்யமான அனிமேஷனை உருவாக்க.
அட்டைகளை புரட்டவும்
மென்மையான மற்றும் சில அட்டைகளுக்கான சிறிய குறியீடு சரியான அனிமேஷன். சில நிமிடங்களில் நீங்கள் அவற்றை இணைக்கலாம். சமீபத்தில் குறியீட்டுடன் சேர்க்கப்பட்டது.
3D தயாரிப்பு அட்டைகளாக அட்டைகள்
இந்த அட்டைகள் என்பதை கவனத்தில் கொள்ள வேண்டும் எங்களிடம் ஒரு மேஜையில் தொடர்ச்சியான அட்டைகள் இருப்பது போல. சுட்டிக்காட்டி போஸ் செய்யப்பட்டு, அவை பெரிதாக்கி, ஒவ்வொன்றையும் கிளிக் செய்து, தயாரிப்புத் தகவலைக் காட்ட அட்டையின் பின்புறத்தைக் காண்பிக்கும். நாங்கள் மீண்டும் கிளிக் செய்து முன்பக்கத்தைப் போலவே விட்டுவிடுகிறோம். 3D CSS பண்புகளைக் கற்க ஏற்றது.
இடமாறு அட்டை
ஒரு மிக காட்சி சோதனை கண்கவர் திருப்பு விளைவு. அது எதைப் பற்றி பேசுகிறது என்பதை அறிய நீங்கள் அதைப் பார்ப்பது நல்லது.
அட்டைகளுக்கான விளைவு மிதவை
ஒரு எளிய விளைவு ஆனால் வித்தை மிதவை அட்டைகள் பற்றி.
எளிய மிதவை விளைவு
மாறாக எளிய விளைவு, ஆனால் நாம் அதைக் காட்சிப்படுத்தும் தருணத்தில் அது ஒரு பெரிய விளைவைக் கொண்டுள்ளது.
இடமாறு ஆழ அட்டைகள்
இந்த அட்டைகள் தாங்குகின்றன இடமாறு கருத்து வடிவமைப்பு மூலம் சில வேலைநிறுத்த அட்டைகளை உருவாக்க. எங்கள் வலைப்பதிவில் சில வகைகளை நீங்கள் தேர்ந்தெடுக்கும்போது பயனருக்கு அது ஏற்படுத்தும் விளைவை நன்கு புரிந்துகொள்ள நீங்கள் அதைப் பார்க்க வேண்டும்.
திரைப்படங்களுக்கான UI அட்டை
ஒரு அட்டை HTML உடன் செய்யப்பட்ட சிறந்த தளவமைப்பு மற்றும் CSS.
சுயவிவர அட்டை
மிகவும் நல்ல அனிமேஷன்கள் சமூக அட்டை சுயவிவரங்களுக்கான அணுகலை நாங்கள் செயல்படுத்தக்கூடிய தொடர்பு அட்டைக்காக. HTML மற்றும் CSS.
போலராய்டு தொகுக்கப்பட்ட அட்டைகள்
பண்புகள், வடிப்பான்கள் மற்றும் CSS தனிப்பயன் மாற்றங்கள் இந்த தொடர் போலராய்டு தொகுக்கப்பட்ட அட்டைகள் உருவாக்கப்படுகின்றன; இந்த எஸ்.வி.ஜி படங்கள் வலையை தவறவிடாதீர்கள்.
இந்த அட்டைகளில் ஏதேனும் ஒன்றை வேர்ட்பிரஸ் கொண்ட ஒரு பக்கத்தில் செருக முடியும்
நான் அவர்களை நேசிக்கிறேன்