CSS இல் பட ஹோவர் விளைவை எவ்வாறு உருவாக்குவது

உங்களைப் போன்ற வாசகர்கள் MUO ஐ ஆதரிக்க உதவுகிறார்கள். எங்கள் தளத்தில் உள்ள இணைப்புகளைப் பயன்படுத்தி நீங்கள் வாங்கும் போது, ​​நாங்கள் ஒரு இணை கமிஷனைப் பெறலாம். மேலும் படிக்க.

பட மிதவை விளைவுகள் உங்கள் இணையதளத்தில் கூடுதல் மெருகூட்டலைச் சேர்க்கலாம். அவை மென்மையான விளைவை உருவாக்குகின்றன, படக் காட்சியகங்கள் அல்லது கொணர்விகளை வழிசெலுத்துவதற்கு மிகவும் இனிமையானவை. சிறந்த அம்சம் என்னவென்றால், இந்த விளைவுகளை நீங்கள் CSS மற்றும் ஜாவாஸ்கிரிப்ட் இல்லாமல் உருவாக்க முடியும்.

உங்கள் படங்களில் அனிமேஷனின் வெவ்வேறு பாணிகளை உருவாக்கலாம். பின்னணியை மங்கலாக்குதல் அல்லது பெரிதாக்குதல், உரையில் மறைதல் அல்லது சறுக்குதல் மற்றும் பின்னணி நிறத்தை மாற்றுதல் ஆகியவை இதில் அடங்கும்.

---

---

ஐபோனில் தீம்பொருளை எவ்வாறு சரிபார்க்கலாம்

அன்றைய வீடியோவை உருவாக்கவும் உள்ளடக்கத்துடன் தொடர உருட்டவும்

HTML ஐ உருவாக்குதல்

ஒன்றை உருவாக்குவதன் மூலம் தொடங்கவும் index.html உங்கள் கணினியில் உள்ள வெற்று கோப்புறைக்குள் கோப்பு, பின்னர் உரை திருத்தி மூலம் கோப்பை திறக்கவும். கோப்பின் உள்ளே, HTML எலும்புக்கூட்டை உருவாக்கி, தொடக்க மற்றும் மூடும் உடல் குறிச்சொற்களுக்குள் பின்வரும் மார்க்அப்பைச் சேர்க்கவும்:

 <div class="grid"> 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=1" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="zoom blur" src="https://picsum.photos/500?random=2" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="grey" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
</div> 

இது நான்கு பட ரேப்பர்களைக் கொண்ட ஒரு கட்டம் கொள்கலன். உடன் div கூறுகள் படத்தை போர்த்தி வர்க்கம் படம் மற்றும் அதனுடன் தொடர்புடைய உரைக்கு ஒரு போர்வையாக செயல்படுகிறது. ஒவ்வொரு பிரிவின் படமும் உள்ளடக்கமும் தனித்தனி வகுப்புகளின் தொகுப்பைக் கொண்டுள்ளன.

ஸ்டைல் ​​ஷீட்டின் உள்ளே, நீங்கள் செய்வீர்கள் இந்த கூறுகளை அவற்றின் வர்க்கப் பெயர்களால் குறிவைக்கவும் மற்றும் பல்வேறு ஸ்டைலிங் மற்றும் அனிமேஷன் விளைவுகளைப் பயன்படுத்துங்கள். உரை முன்னிருப்பாகக் காட்டப்படாது; நீங்கள் பட ரேப்பரின் மேல் வட்டமிடும்போது மட்டுமே அதைக் காண்பிப்பீர்கள், மேலும் படம் செயல்பாட்டில் வெவ்வேறு விளைவுகளைச் சந்திக்கும்.

அடிப்படை CSS சேர்க்கிறது

இப்போது நீங்கள் HTML ஐ உருவாக்கியுள்ளீர்கள், அதை CSS மூலம் வடிவமைக்க வேண்டிய நேரம் இது. உருவாக்கு a style.css கோப்பு மற்றும் உங்கள் HTML கோப்பிலிருந்து இந்த நடை தாளுடன் இணைக்கவும் <தலை> பிரிவு:

 <link rel="stylesheet" href="style.css">

உங்கள் உள்ளே style.css கோப்பு, நீங்கள் செய்ய வேண்டிய முதல் விஷயம், உடலில் உள்ள விளிம்பை பூஜ்ஜியத்திற்கு மீட்டமைத்து, சில கீழ் விளிம்பை அமைக்கவும்:

---

---

 body { 
  margin: 0; 
  margin-bottom: 20rem; 
}

அடுத்து, நீங்கள் வெளிப்புற கொள்கலனை a ஆக மாற்ற வேண்டும் இரண்டு பரிமாணங்களில் கூறுகளை அமைக்க நீங்கள் பயன்படுத்தக்கூடிய CSS கட்டம் . பின்வரும் குறியீடு பொருந்தக்கூடிய பல நெடுவரிசைகள் அல்லது வரிசைகளைக் கொண்ட கட்டத்தை உருவாக்குகிறது. ஒவ்வொரு நெடுவரிசையின் குறைந்தபட்ச அளவு 300px மற்றும் அதிகபட்ச அளவு கொள்கலனின் 1 பகுதி:

 .grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

உரையை அதன் கொள்கலனுடன் ஒப்பிட விரும்புவதால், பட ரேப்பருடன் தொடர்புடைய நிலையை நீங்கள் அமைக்க வேண்டும்:

---

---

 .image-wrapper { 
  position: relative; 
  overflow: hidden; 
} 

அடுத்த படி படத்தை ஸ்டைல் ​​​​செய்ய வேண்டும். படத்தை ஒரு தொகுதி உறுப்பாகக் காட்டி, முழு கொள்கலனின் அகலத்தையும் பரப்பி, அதன் கொள்கலனின் மையத்தில் பொருத்தவும்:

 .image-wrapper > img { 
  display: block; 
  width: 100%; 
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
  object-position: center; 
} 

உரையைப் பொறுத்தவரை, அதை மையமாக வைத்து, வெளிப்படையான, வெளிர் சாம்பல் பின்னணி நிறத்தைக் கொடுங்கள்:

 .image-wrapper > .content { 
  position: absolute; 
  inset: 0; 
  font-size: 2rem; 
  padding: 1rem; 
  background: rgba(255, 255, 255, .4); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

CSS கோப்பைச் சேமித்து திறக்கவும் index.html உங்கள் உலாவியில். கீழே உள்ள படத்தில் உள்ளதைப் போன்ற ஒரு பக்கத்தை நீங்கள் காண வேண்டும்.

மாற்றம் மற்றும் உரைகளை அமைத்தல்

இப்போது நீங்கள் படங்களுக்கு அடிப்படை பாணிகளைப் பயன்படுத்தியுள்ளீர்கள், அடுத்த கட்டம் அவற்றில் சில அனிமேஷனைச் சேர்ப்பதாகும். இரண்டு படங்கள் மற்றும் அவற்றுடன் தொடர்புடைய உரைக்கு மாற்றத்தைச் சேர்ப்பதன் மூலம் தொடங்கவும்:

 .image-wrapper > img, 
.image-wrapper > .content { 
  transition: 200ms ease-in-out; 
} 

இதன் பொருள், அனைத்து மாற்ற விளைவுகளும் (அதாவது ஃபேட்-இன், ஜூம் மற்றும் மங்கலானது) 200 மில்லி விநாடிகள் நீடிக்கும் மற்றும் அதே நேர வளைவைக் கொண்டிருக்கும்.

என் தொலைபேசியில் என் மின்விளக்கு எங்கே?

ஃபேட்-இன் மற்றும் ப்ளர் அனிமேஷன்

முதல் அனிமேஷன் பாணி உரையில் மங்குகிறது. ஒரு குறிப்பிட்ட பட ரேப்பரின் மேல் நீங்கள் வட்டமிடும்போது, ​​அதில் உள்ள உள்ளடக்கம் மங்கிவிடும் வர்க்கம் இந்த விளைவை (ஃபேட்-இன் மற்றும் ஃபேட்-அவுட் அனிமேஷன்) கொண்டிருக்கும். ஒளிபுகாநிலையை பூஜ்ஜியமாக அமைப்பதன் மூலமும், ஒரு குறிப்பிட்ட பட ரேப்பரில் சுட்டி வட்டமிடும்போது அதை ஒன்றுக்கு மாற்றுவதன் மூலமும் நீங்கள் இதை அடைகிறீர்கள்:

 .image-wrapper > .content.fade { 
  opacity: 0; 
} 
 
.image-wrapper:hover > .content.fade { 
  opacity: 1; 
} 

கோப்பைச் சேமித்து, உங்கள் உலாவியைச் சரிபார்த்தால், ஃபேட்-இன் அனிமேஷனைக் காண்பீர்கள். ஆனால் உரையை படிப்பது சற்று கடினமாக இருப்பதையும் நீங்கள் கவனிக்கலாம் (படம் அப்பட்டமாக இருந்தால் மற்றும் நிறைய மாறுபாடுகள் இருந்தால்). அனைத்து படங்களுக்கும் ஒரு வகுப்பு பெயர் உள்ளது என்பதை நினைவில் கொள்க தெளிவின்மை . இது படங்களை மங்கலாக்குவதற்காக, அவற்றுக்கும் உரைக்கும் இடையே மிகவும் தேவையான சில வேறுபாடுகளைச் சேர்க்கிறது:

 image-wrapper:hover > img.blur { 
  filter: blur(5px) 
} 

இப்போது படத்தின் மேல் வட்டமிடும்போது, ​​அது மங்கலாவதைக் காணலாம். பிக்சல் மதிப்பை அதிகரித்து, படங்களின் மீது மங்கலை மேலும் உச்சரிக்கச் செய்யலாம், இதன் மூலம் அதற்கும் உரைக்கும் இடையே அதிக மாறுபாட்டைச் சேர்க்கலாம்.

பிற விளைவுகளைச் சேர்த்தல்

மற்ற விளைவுகள் உரையை இடதுபுறத்தில் இருந்து நகர்த்துவது, படத்தை பெரிதாக்குவது மற்றும் படத்திற்கு கிரேஸ்கேலைச் சேர்ப்பது. மூன்று விளைவுகளையும் அடைவதற்கான குறியீடு இங்கே:

 .image-wrapper > .content.slide-left { 
    transform: translateX(100%) 
} 
 
.image-wrapper:hover > .content.slide-left { 
    transform: translateX(0%) 
} 
 
.image-wrapper:hover > img.grey { 
    filter: greyscale(1) 
} 
 
.image-wrapper:hover > img.blur { 
    filter: blur(5px) 
} 
 
.image-wrapper:hover > img.zoom { 
    transform: scale(1.1) 
} 

கோப்பைச் சேமித்து, உங்கள் உலாவிக்குச் சென்று ஒவ்வொரு படத்தின் மீதும் வட்டமிடவும். செயலில் வெவ்வேறு விளைவுகளை நீங்கள் பார்க்க வேண்டும்.

ஸ்லைடு-இன் விளைவுகளை முடிக்க, நீங்கள் மேலும் மூன்று பட ரேப்பர்களை உருவாக்கலாம், ஒவ்வொன்றும் ஒரு படம் மற்றும் உரையைக் கொண்டிருக்கும். ஒவ்வொரு உரைக்கும் வகுப்பின் பெயர் இருக்கும் மேல் நோக்கி சறுக்கு , கீழே சரிய, அல்லது சிறிது-வலது . பின்னர் நீங்கள் சரியான மதிப்பை அனுப்புவீர்கள் பிக்சல், எம் அல்லது ரெம் , உள்ளே மாற்றம் () மூன்று விளைவுகளையும் உருவாக்கும் செயல்பாடு.

CSS கட்டம் மற்றும் Flexbox

CSS கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸ் இரண்டு அம்சங்களாகும், அவை உங்கள் வலைத்தளத்திற்கான அற்புதமான தளவமைப்புகளை உருவாக்க அனுமதிக்கின்றன. நீங்கள் விரும்பும் எந்த தளவமைப்பையும் எளிதாக உருவாக்கலாம் மற்றும் உங்கள் விருப்பப்படி வரிசைகள் மற்றும் நெடுவரிசைகளைத் தனிப்பயனாக்கலாம். நெடுவரிசைகளும் இயல்பாகவே பதிலளிக்கும். ஒன்றை மற்றொன்றை எப்போது பயன்படுத்த வேண்டும் என்பதைக் கற்றுக்கொள்வது, நீங்கள் ஒரு சதவீத CSS டெவலப்பராக மாற உதவும்.