உள்ளடக்க சந்தைப்படுத்தல்
CSS3 அம்சங்கள் உங்களுக்குத் தெரியாது: ஃப்ளெக்ஸ்பாக்ஸ், கிரிட் லேஅவுட்கள், தனிப்பயன் பண்புகள், மாற்றங்கள், அனிமேஷன்கள் மற்றும் பல பின்னணி
அடுக்கு நடை தாள்கள் (CSS ஐ) தொடர்ந்து உருவாகி வருகிறது மற்றும் சமீபத்திய பதிப்புகளில் நீங்கள் அறியாத சில அம்சங்கள் இருக்கலாம். குறியீடு எடுத்துக்காட்டுகளுடன் CSS3 உடன் அறிமுகப்படுத்தப்பட்ட சில முக்கிய மேம்பாடுகள் மற்றும் வழிமுறைகள் இங்கே:
- நெகிழ்வான பெட்டி தளவமைப்பு (Flexbox): வலைப்பக்கங்களுக்கான நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கும் தளவமைப்பு முறை. ஃப்ளெக்ஸ்பாக்ஸ் மூலம், நீங்கள் ஒரு கொள்கலனில் உள்ள கூறுகளை எளிதாக சீரமைத்து விநியோகிக்கலாம். இந்த எடுத்துக்காட்டில், தி
.container
வர்க்கம் பயன்படுத்துகிறதுdisplay: flex
ஃப்ளெக்ஸ்பாக்ஸ் லேஅவுட் பயன்முறையை இயக்க. திjustify-content
சொத்து அமைக்கப்பட்டுள்ளதுcenter
கொள்கலனுக்குள் குழந்தை உறுப்பை கிடைமட்டமாக மையப்படுத்த. திalign-items
சொத்து அமைக்கப்பட்டுள்ளதுcenter
குழந்தை உறுப்பை செங்குத்தாக மையப்படுத்த. தி.item
குழந்தை உறுப்புக்கான பின்னணி நிறம் மற்றும் திணிப்பு ஆகியவற்றை வகுப்பு அமைக்கிறது.
HTML ஐ
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS ஐ
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
விளைவாக
மையப்படுத்தப்பட்ட உறுப்பு
- கட்ட தளவமைப்பு: வலைப்பக்கங்களுக்கான சிக்கலான கட்டம் சார்ந்த தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கும் மற்றொரு தளவமைப்பு முறை. கட்டம் மூலம், நீங்கள் வரிசைகள் மற்றும் நெடுவரிசைகளைக் குறிப்பிடலாம், பின்னர் கட்டத்தின் குறிப்பிட்ட கலங்களுக்குள் கூறுகளை வைக்கலாம். இந்த எடுத்துக்காட்டில், தி
.grid-container
வர்க்கம் பயன்படுத்துகிறதுdisplay: grid
கட்ட தளவமைப்பு பயன்முறையை இயக்க. திgrid-template-columns
சொத்து அமைக்கப்பட்டுள்ளதுrepeat(2, 1fr)
சம அகலம் கொண்ட இரண்டு நெடுவரிசைகளை உருவாக்க. திgap
சொத்து கட்டம் செல்கள் இடையே இடைவெளி அமைக்கிறது. தி.grid-item
க்ரிட் உருப்படிகளுக்கான பின்னணி நிறம் மற்றும் திணிப்பு ஆகியவற்றை வகுப்பு அமைக்கிறது.
HTML ஐ
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS ஐ
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
விளைவாக
பொருள் 1
பொருள் 2
பொருள் 3
பொருள் 4
- மாற்றங்கள்: CSS3 பல புதிய பண்புகள் மற்றும் வலைப்பக்கங்களில் மாற்றங்களை உருவாக்குவதற்கான நுட்பங்களை அறிமுகப்படுத்தியது. உதாரணமாக, தி
transition
காலப்போக்கில் CSS பண்புகளில் ஏற்படும் மாற்றங்களை உயிரூட்டுவதற்கு சொத்து பயன்படுத்தப்படலாம். இந்த எடுத்துக்காட்டில், தி.box
வர்க்கம் உறுப்புக்கான அகலம், உயரம் மற்றும் ஆரம்ப பின்னணி வண்ணத்தை அமைக்கிறது. திtransition
சொத்து அமைக்கப்பட்டுள்ளதுbackground-color 0.5s ease
ஒரு ஈஸி-இன்-அவுட் டைமிங் ஃபங்ஷன் மூலம் அரை வினாடிக்கு மேல் பின்னணி வண்ணப் பண்புகளில் மாற்றங்களை அனிமேட் செய்ய. தி.box:hover
மவுஸ் பாயிண்டர் அதன் மேல் இருக்கும் போது கிளாஸ் உறுப்பின் பின்னணி நிறத்தை மாற்றுகிறது, இது மாற்றம் அனிமேஷனைத் தூண்டுகிறது.
HTML ஐ
<div class="box"></div>
CSS ஐ
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
விளைவாக
ஹோவர்
இங்கே!
இங்கே!
- அனிமேஷன்கள்: CSS3 பல புதிய பண்புகள் மற்றும் வலைப்பக்கங்களில் அனிமேஷன்களை உருவாக்குவதற்கான நுட்பங்களை அறிமுகப்படுத்தியது. இந்த எடுத்துக்காட்டில், இதைப் பயன்படுத்தி அனிமேஷனைச் சேர்த்துள்ளோம்
animation
சொத்து. நாங்கள் ஒரு வரையறுத்துள்ளோம்@keyframes
அனிமேஷனுக்கான விதி, இது 0 வினாடிகளில் பெட்டியை 90 டிகிரி முதல் 0.5 டிகிரி வரை சுழற்ற வேண்டும் என்று குறிப்பிடுகிறது. பெட்டியை மேலே நகர்த்தும்போது, திspin
பெட்டியை சுழற்ற அனிமேஷன் பயன்படுத்தப்படுகிறது. திanimation-fill-mode
சொத்து அமைக்கப்பட்டுள்ளதுforwards
அனிமேஷனின் இறுதி நிலை அது முடிந்த பிறகும் தக்கவைக்கப்படுவதை உறுதி செய்ய.
HTML ஐ
<div class="rotate"></div>
CSS ஐ
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
விளைவாக
ஹோவர்
இங்கே!
இங்கே!
- CSS தனிப்பயன் பண்புகள்: எனவும் அறியப்படுகிறது CSS மாறிகள், CSS3 இல் தனிப்பயன் பண்புகள் அறிமுகப்படுத்தப்பட்டன. CSS இல் உங்கள் சொந்த தனிப்பயன் பண்புகளை வரையறுக்கவும் பயன்படுத்தவும் அவை உங்களை அனுமதிக்கின்றன, இது உங்கள் ஸ்டைல்ஷீட்கள் முழுவதும் மதிப்புகளைச் சேமிக்கவும் மீண்டும் பயன்படுத்தவும் பயன்படுகிறது. CSS மாறிகள் இரண்டு கோடுகளுடன் தொடங்கும் பெயரால் அடையாளம் காணப்படுகின்றன
--my-variable
. இந்த எடுத்துக்காட்டில், -primary-color எனப்படும் CSS மாறியை வரையறுத்து அதன் மதிப்பைக் கொடுக்கிறோம்.#007bff
, இது பொதுவாக பல வடிவமைப்புகளில் முதன்மை நிறமாகப் பயன்படுத்தப்படும் நீல நிறமாகும். அமைக்க இந்த மாறியைப் பயன்படுத்தியுள்ளோம்background-color
ஒரு பொத்தான் உறுப்பின் சொத்து, பயன்படுத்துவதன் மூலம்var()
செயல்பாடு மற்றும் மாறி பெயரில் அனுப்புதல். இது பொத்தானின் பின்னணி நிறமாக மாறியின் மதிப்பைப் பயன்படுத்தும்.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- பல பின்னணிகள்: ஒரு உறுப்புக்கான பல பின்னணி படங்களைக் குறிப்பிட CSS3 உங்களை அனுமதிக்கிறது, அதன் நிலைப்பாடு மற்றும் அடுக்கி வைக்கும் வரிசையைக் கட்டுப்படுத்தும் திறன் கொண்டது. பின்னணி இரண்டு படங்களால் ஆனது,
red.png
மற்றும்blue.png
, பயன்படுத்தி ஏற்றப்படும்background-image
சொத்து. முதல் படம்,red.png
, உறுப்பின் வலது கீழ் மூலையில் நிலைநிறுத்தப்பட்டுள்ளது, இரண்டாவது படம்,blue.png
, உறுப்பு இடது மேல் மூலையில் நிலைநிறுத்தப்பட்டுள்ளது. திbackground-position
ஒவ்வொரு படத்தின் நிலைப்பாட்டையும் கட்டுப்படுத்த சொத்து பயன்படுத்தப்படுகிறது. திbackground-repeat
படங்கள் எவ்வாறு மீண்டும் மீண்டும் வருகின்றன என்பதைக் கட்டுப்படுத்த சொத்து பயன்படுத்தப்படுகிறது. முதல் படம்,red.png
, மீண்டும் செய்யாத வகையில் அமைக்கப்பட்டுள்ளது (no-repeat
), இரண்டாவது படம்,blue.png
, மீண்டும் அமைக்கப்பட்டுள்ளது (repeat
).
HTML ஐ
<div id="multibackground"></div>
CSS ஐ
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}