டெயில்விண்ட் CSS இல் உள்ள கிரிட் ஆட்டோ ஃப்ளோ பயன்பாட்டில் மிதவை விளைவைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை எடுத்துக்காட்டுகிறது.
டெயில்விண்டில் உள்ள கிரிட் ஆட்டோ ஃப்ளோவில் ஹோவரை எவ்வாறு பயன்படுத்துவது?
டெயில்விண்டில் உள்ள கிரிட் ஆட்டோ ஓட்டத்தில் மிதவை விளைவைப் பயன்படுத்த, ஒரு HTML கோப்பை உருவாக்கி, ' மிதவை 'வகுப்புடன்' கட்டம்-ஓட்டம்-<முக்கிய சொல்> HTML திட்டத்தில் பயன்பாடு. சுட்டி அவற்றின் மீது வட்டமிடும்போது கட்டம் உருப்படிகளின் இடத்தை மாற்றுகிறது. இறுதியாக, வலை HTML பக்கத்தைப் பார்த்து, மாற்றங்களை உறுதிப்படுத்த, கட்ட உருப்படிகளில் சுட்டியை நகர்த்தவும்.
அதன் நடைமுறைச் செயலாக்கத்திற்கான கொடுக்கப்பட்ட படிகளைப் பாருங்கள்:
படி 1: HTML திட்டத்தில் வரிசை கட்டத்துடன் ஹோவர் பண்பைப் பயன்படுத்தவும்
ஒரு HTML நிரலை உருவாக்கி, '' ஐப் பயன்படுத்தவும் மிதவை 'விரும்பிய சொத்து' கட்டம்-ஓட்டம்-<முக்கிய சொல்> ” பயன்பாடு. உதாரணமாக, நாங்கள் பயன்படுத்தினோம் ' மிதவை: கட்டம்-ஓட்டம்-வரிசை நெடுவரிசையிலிருந்து வரிசைக்கு கிரிட் உருப்படிகளின் இடத்தை மாற்றுவதற்கான வகுப்பு:
< உடல் >
< div வர்க்கம் = 'கிரிட் கிரிட்-ஃப்ளோ-கோல் ஹோவர்: கிரிட்-ஃப்ளோ-ரோ இடைவெளி-3 மீ-3 உரை-மையம்' >
< div வர்க்கம் = 'bg-teal-500 p-5' > 1 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 2 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 3 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 4 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 5 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / உடல் >
இங்கே:
- ' கட்டம் ” வகுப்பு உறுப்பை ஒரு கட்டம் கொள்கலனாக அமைக்கிறது.
- ' கட்டம்-ஓட்டம்-கோல் ” நெடுவரிசைகளில் கட்டம் உருப்படிகளின் ஓட்டத்தை வரையறுக்கிறது.
- ' மிதவை: கட்டம்-ஓட்டம்-வரிசை கன்டெய்னரின் மேல் சுட்டி வட்டமிடும்போது கிளாஸ் கட்டம் உருப்படிகளின் ஓட்டத்தை வரிசைகளாக மாற்றுகிறது.
- ' இடைவெளி-3 ” கட்டம் உருப்படிகளுக்கு இடையே 3 அலகுகள் இடைவெளி சேர்க்கிறது.
- ' மீ-3 ” கட்டம் கொள்கலனைச் சுற்றி 3 அலகுகளின் விளிம்பைச் சேர்க்கிறது.
- ' உரை மையம் ” கட்டம் உருப்படிகளுக்குள் உள்ள உரை உள்ளடக்கத்தை மையத்திற்கு சீரமைக்கிறது.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
கிரிட் ஆட்டோ ஃப்ளோவில் ஹோவர் எஃபெக்ட் பயன்படுத்தப்பட்டுள்ளதா என்பதைச் சரிபார்க்க, இணையப் பக்கத்தைப் பார்த்து, கட்ட உருப்படிகளின் மீது சுட்டியை நகர்த்தவும்:
தொடக்கத்தில் கட்டம் உருப்படிகளின் ஓட்டம் நெடுவரிசைகளில் இருப்பதையும், சுட்டி அவற்றின் மீது வட்டமிடும்போது, ஓட்டம் வரிசைகளாக மாற்றப்படுவதையும் காணலாம். கிரிட் ஆட்டோ ஓட்டத்தில் ஹோவர் விளைவு வெற்றிகரமாகப் பயன்படுத்தப்பட்டதை இது குறிக்கிறது.
முடிவுரை
டெயில்விண்டில் உள்ள கிரிட் ஆட்டோ ஓட்டத்தில் மிதவை விளைவைப் பயன்படுத்த, ' மிதவை 'விரும்பினால் வகுப்பு' கட்டம்-ஓட்டம்-<முக்கிய சொல்> HTML திட்டத்தில் பயன்பாடு. சுட்டி அவற்றின் மீது வட்டமிடும்போது கட்டம் உருப்படிகளின் இடத்தை மாற்றுகிறது. மாற்றங்களை உறுதிப்படுத்த, வலை HTML பக்கத்தைப் பார்க்கவும் மற்றும் கட்ட உருப்படிகளில் சுட்டியை நகர்த்தவும். டெயில்விண்ட் CSS இல் கிரிட் ஆட்டோ ஃப்ளோ பயன்பாட்டில் மிதவை விளைவைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை எடுத்துக்காட்டுகிறது.