CSS Functions Reference

CSS செயல்பாடுகள் மற்றும் அவற்றின் பயன்பாடு

CSS செயல்பாடுகள்

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

CSS செயல்பாடுகள் பொதுவாக பல்வேறு CSS பண்புகளுக்கான மதிப்புகளாகப் பயன்படுத்தப்படுகின்றன.

CSS செயல்பாடுகள் அட்டவணை

செயல்பாடு விளக்கம்
acos() -1 மற்றும் 1 க்கு இடையே உள்ள எண்ணின் தலைகீழ் கொசைனை வழங்குகிறது
asin() -1 மற்றும் 1 க்கு இடையே உள்ள எண்ணின் தலைகீழ் சைனை வழங்குகிறது
atan() -∞ மற்றும் ∞ க்கு இடையே உள்ள எண்ணின் தலைகீழ் டேன்ஜென்டை வழங்குகிறது
atan2() -infinity மற்றும் infinity க்கு இடையே உள்ள இரண்டு மதிப்புகளின் தலைகீழ் டேன்ஜென்டை வழங்குகிறது
attr() தேர்ந்தெடுக்கப்பட்ட உறுப்பின் பண்பின் மதிப்பை வழங்குகிறது
blur() ஒரு உறுப்புக்கு ப்ளர் விளைவைப் பயன்படுத்துகிறது
brightness() ஒரு உறுப்பின் பிரகாசத்தை சரிசெய்கிறது (பிரகாசமாக அல்லது இருண்டதாக)
calc() CSS பண்பு மதிப்புகளை தீர்மானிக்க கணக்கீடுகளை செய்ய உங்களை அனுமதிக்கிறது
circle() ஒரு வட்டத்தை வரையறுக்கிறது
clamp() காட்சிப் பெட்டியின் அளவைப் பொறுத்து குறைந்தபட்ச மதிப்புக்கும் அதிகபட்ச மதிப்புக்கும் இடையில் பதிலளிக்கும் வகையில் சரிசெய்யும் ஒரு மதிப்பை அமைக்கிறது
color() ஒரு குறிப்பிட்ட, குறிப்பிட்ட வண்ண இடத்தில் ஒரு வண்ணத்தை குறிப்பிட அனுமதிக்கிறது
color-mix() கொடுக்கப்பட்ட வண்ண இடத்தில், கொடுக்கப்பட்ட அளவு மூலம் இரண்டு வண்ண மதிப்புகளை கலக்கிறது
conic-gradient() ஒரு கோனிக் சரிவை உருவாக்குகிறது
contrast() ஒரு உறுப்பின் காண்ட்ராஸ்டை சரிசெய்கிறது
cos() ஒரு கோணத்தின் கொசைனை வழங்குகிறது
counter() பெயரிடப்பட்ட கவுண்டரின் தற்போதைய மதிப்பை வழங்குகிறது
counters() பெயரிடப்பட்ட மற்றும் கூடு கவுண்டர்களின் தற்போதைய மதிப்புகளை வழங்குகிறது
cubic-bezier() ஒரு கியூபிக் பெசியர் வளைவை வரையறுக்கிறது
drop-shadow() ஒரு படத்திற்கு டிராப் நிழல் விளைவைப் பயன்படுத்துகிறது
ellipse() ஒரு நீள்வட்டத்தை வரையறுக்கிறது
exp() குறிப்பிடப்பட்ட எண் x (Ex) இன் சக்திக்கு உயர்த்தப்பட்ட E ஐ வழங்குகிறது
fit-content() அதன் உள்ளடக்கத்தின் அடிப்படையில் ஒரு உறுப்பின் அளவை அனுமதிக்கிறது
grayscale() ஒரு படத்தை கிரேஸ்கேலாக மாற்றுகிறது
hsl() / hsla() Hue-Saturation-Lightness மாடலை (HSL) பயன்படுத்தி ஒரு வண்ணத்தை வரையறுக்கிறது; விருப்ப ஆல்பா கூறு உடன்
hue-rotate() ஒரு உறுப்புக்கு வண்ண சுழற்சியைப் பயன்படுத்துகிறது
hwb() Hue-Whiteness-Blackness மாடலை (HWB) பயன்படுத்தி ஒரு வண்ணத்தை வரையறுக்கிறது; விருப்ப ஆல்பா கூறு உடன்
hypot() அதன் அளவுருக்களின் சதுரங்களின் கூட்டுத்தொகையின் வர்க்க மூலத்தை வழங்குகிறது
inset() குறிப்பு பெட்டியின் ஒவ்வொரு பக்கத்திலிருந்தும் குறிப்பிடப்பட்ட உள் தூரங்களில் ஒரு செவ்வகத்தை வரையறுக்கிறது
invert() ஒரு படத்தின் வண்ணத்தை தலைகீழாக மாற்றுகிறது
lab() CIE L*a*b வண்ண இடத்தில் ஒரு வண்ணத்தை குறிப்பிடுகிறது
lch() LCH (Lightness-Chroma-Hue) வண்ண இடத்தில் ஒரு வண்ணத்தை குறிப்பிடுகிறது
light-dark() இரண்டு வண்ண-மதிப்பு அமைப்புகளை இயக்குகிறது, மேலும் பயனர் ஒளி வண்ண தீத்தை அமைத்திருந்தால் முதல் மதிப்பையும், பயனர் இருள் வண்ண தீத்தை அமைத்திருந்தால் இரண்டாவது மதிப்பையும் வழங்குகிறது
linear-gradient() ஒரு நேரியல் சரிவை உருவாக்குகிறது
log() குறிப்பிட்ட எண்ணின் இயற்கை மடக்கை (அடிப்படை E) அல்லது குறிப்பிட்ட அடிப்படைக்கு எண்ணின் மடக்கையை வழங்குகிறது
matrix() ஆறு மதிப்புகளின் அணியைப் பயன்படுத்தி 2D மாற்றத்தை வரையறுக்கிறது
matrix3d() 16 மதிப்புகளின் 4x4 அணியைப் பயன்படுத்தி 3D மாற்றத்தை வரையறுக்கிறது
max() மதிப்புகளின் கமாவால் பிரிக்கப்பட்ட பட்டியலிலிருந்து மிகப்பெரிய மதிப்பைப் பண்பு மதிப்பாகப் பயன்படுத்துகிறது
min() மதிப்புகளின் கமாவால் பிரிக்கப்பட்ட பட்டியலிலிருந்து சிறிய மதிப்பைப் பண்பு மதிப்பாகப் பயன்படுத்துகிறது
minmax() குறைந்தபட்ச மதிப்பை விட அதிகமான அல்லது சமமான மற்றும் அதிகபட்ச மதிப்பை விட குறைவான அல்லது சமமான அளவு வரம்பை வரையறுக்கிறது (CSS கிரிட்களுடன் பயன்படுத்தப்படுகிறது)
mod() ஒரு எண்ணை மற்றொரு எண்ணால் வகுக்கும்போது மீதமுள்ளதை வழங்குகிறது
oklab() OKLAB வண்ண இடத்தில் ஒரு வண்ணத்தை குறிப்பிடுகிறது
oklch() OKLCH வண்ண இடத்தில் ஒரு வண்ணத்தை குறிப்பிடுகிறது
opacity() ஒரு உறுப்புக்கு ஒளிஊடுருவு விளைவைப் பயன்படுத்துகிறது
perspective() 3D மாற்றப்பட்ட உறுப்புக்கான ஒரு முன்னோக்கு காட்சியை வரையறுக்கிறது
polygon() ஒரு பலகோணத்தை வரையறுக்கிறது
pow() ஒரு எண்ணின் (x) மதிப்பை மற்றொரு எண்ணின் (y) சக்திக்கு உயர்த்தியதை வழங்குகிறது
radial-gradient() ஒரு ரேடியல் சரிவை உருவாக்குகிறது
ray() அனிமேஷன் செய்யப்பட்ட உறுப்பு பின்பற்ற வேண்டிய ஆஃப்செட்-பாதி வரிப் பகுதியை வரையறுக்கிறது
rem() ஒரு எண்ணை மற்றொரு எண்ணால் வகுக்கும்போது மீதமுள்ளதை வழங்குகிறது
repeat() ஒரு கிரிட்டில் நெடுவரிசைகள் அல்லது வரிசைகளின் தொகுப்பை மீண்டும் செய்கிறது
repeating-conic-gradient() ஒரு கோனிக் சரிவை மீண்டும் செய்கிறது
repeating-linear-gradient() ஒரு நேரியல் சரிவை மீண்டும் செய்கிறது
repeating-radial-gradient() ஒரு ரேடியல் சரிவை மீண்டும் செய்கிறது
rgb() / rgba() Red-Green-Blue மாடலை (RGB) பயன்படுத்தி வண்ணங்களை வரையறுக்கிறது; விருப்ப ஆல்பா கூறு உடன்
rotate() ஒரு உறுப்பின் 2D சுழற்சியை வரையறுக்கிறது
rotate3d() ஒரு உறுப்பின் 3D சுழற்சியை வரையறுக்கிறது
rotateX() x-அச்சைச் (கிடைமட்ட) சுற்றி ஒரு உறுப்பின் 3D சுழற்சியை வரையறுக்கிறது
rotateY() y-அச்சைச் (செங்குத்து) சுற்றி ஒரு உறுப்பின் 3D சுழற்சியை வரையறுக்கிறது
rotateZ() z-அச்சைச் சுற்றி ஒரு உறுப்பின் 3D சுழற்சியை வரையறுக்கிறது
round() குறிப்பிட்ட வட்டமிடும் மூலோபாயத்தின் படி ஒரு எண்ணை வட்டமிடுகிறது
saturate() ஒரு உறுப்பின் செறிவூட்டலை (வண்ண தீவிரம்) சரிசெய்கிறது
scale() ஒரு உறுப்பின் 2D அளவிடலை வரையறுக்கிறது
scale3d() ஒரு உறுப்பின் 3D அளவிடலை வரையறுக்கிறது
scaleX() ஒரு உறுப்பை கிடைமட்டமாக (அகலம்) அளவிடுகிறது
scaleY() ஒரு உறுப்பை செங்குத்தாக (உயரம்) அளவிடுகிறது
sepia() ஒரு படத்தை செபியாவாக மாற்றுகிறது
sin() ஒரு எண்ணின் (கோணம்) சைனை வழங்குகிறது
skew() ஒரு உறுப்பை x- மற்றும் y-அச்சில் சாய்க்கிறது
skewX() ஒரு உறுப்பை x-அச்சில் சாய்க்கிறது
skewY() ஒரு உறுப்பை y-அச்சில் சாய்க்கிறது
sqrt() ஒரு எண்ணின் வர்க்க மூலத்தை வழங்குகிறது
steps() அனிமேஷன்களுக்கான படிப்படியான நேரத்தை உருவாக்குகிறது
tan() ஒரு எண்ணின் டேன்ஜென்டை வழங்குகிறது
translate() ஒரு உறுப்பை x- மற்றும் y-அச்சில் மீண்டும் நிலைநிறுத்த உங்களை அனுமதிக்கிறது
translateX() ஒரு உறுப்பை x-அச்சில் மீண்டும் நிலைநிறுத்த உங்களை அனுமதிக்கிறது
translateY() ஒரு உறுப்பை y-அச்சில் மீண்டும் நிலைநிறுத்த உங்களை அனுமதிக்கிறது
url() பாணித் தாளில் ஒரு கோப்பைச் சேர்க்க உங்களை அனுமதிக்கிறது
var() தனிப்பயன் பண்பின் மதிப்பைச் செருகுகிறது

CSS செயல்பாடுகள் பயிற்சி

உங்கள் CSS செயல்பாடுகள் அறிவை சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

CSS பண்பு மதிப்புகளை தீர்மானிக்க கணக்கீடுகளை செய்ய அனுமதிக்கும் சரியான CSS செயல்பாடு எது?

max()
✗ தவறு! max() என்பது மதிப்புகளின் பட்டியலிலிருந்து மிகப்பெரிய மதிப்பைத் தேர்ந்தெடுக்கப் பயன்படுகிறது
min()
✗ தவறு! min() என்பது மதிப்புகளின் பட்டியலிலிருந்து சிறிய மதிப்பைத் தேர்ந்தெடுக்கப் பயன்படுகிறது
calc()
✓ சரி! calc() என்பது CSS பண்பு மதிப்புகளை தீர்மானிக்க கணக்கீடுகளை செய்ய அனுமதிக்கிறது
clamp()
✗ தவறு! clamp() என்பது குறைந்தபட்ச மதிப்புக்கும் அதிகபட்ச மதிப்புக்கும் இடையில் பதிலளிக்கும் வகையில் சரிசெய்யும் ஒரு மதிப்பை அமைக்கிறது