CSS வடிகட்டி ஜெனரேட்டர்
தனிப்பயன் CSS பட வடிப்பான்களை உருவாக்கி காட்சிப்படுத்தவும்
Preview
CSS Code
வடிகட்டி கட்டுப்பாடுகள்
பிரபலமான வடிப்பான்கள்
Vintage
Neon Glow
Polaroid
விண்டேஜ் திரைப்படம்
டிஜிட்டல் கலை
CSS வடிகட்டிகளை எவ்வாறு பயன்படுத்துவது
CSS வடிகட்டிகள் என்றால் என்ன?
CSS வடிப்பான்கள் ஒரு உறுப்புக்கு மங்கலான அல்லது வண்ண மாற்றுதல் போன்ற வரைகலை விளைவுகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன. அவை பொதுவாக படங்கள், பின்னணிகள் மற்றும் எல்லைகளுக்கு பயன்படுத்தப்படுகின்றன.
வெளிப்புற பட எடிட்டிங் கருவிகளின் தேவை இல்லாமல் காட்சி விளைவுகளை உருவாக்க, படங்களை மேம்படுத்த அல்லது தனித்துவமான வடிவமைப்பு கூறுகளை உருவாக்க வடிப்பான்கள் பயன்படுத்தப்படலாம்.
ஆதரிக்கப்படும் CSS வடிகட்டி பண்புகள்
-
blur()- உறுப்புக்கு ஒரு காஸியன் மங்கலைப் பயன்படுத்துகிறது. -
brightness()- உறுப்பின் பிரகாசத்தை சரிசெய்கிறது. -
contrast()- உறுப்பு மாறுபாடு சரிசெய்கிறது. -
grayscale()- உறுப்பை கிரேஸ்கேலாக மாற்றுகிறது. -
hue-rotate()- உறுப்புக்கு ஒரு சாயல் சுழற்சியைப் பயன்படுத்துகிறது. -
invert()- உறுப்புகளின் வண்ணங்களை தலைகீழாக மாற்றுகிறது. -
opacity()- உறுப்பின் ஒளிபுகாநிலையை சரிசெய்கிறது. -
saturate()- உறுப்பு நிறைவுற்றது அல்லது சிதைக்கிறது. -
sepia()- தனிமத்தை செபியாவாக மாற்றுகிறது.
வடிப்பான்களை எவ்வாறு பயன்படுத்துவது
இந்த கருவியால் உருவாக்கப்பட்ட CSS குறியீட்டைப் பயன்படுத்தி, நீங்கள் எந்த HTML உறுப்புக்கும் வடிப்பான்களைப் பயன்படுத்தலாம். எப்படி என்பது இங்கே:
1. ஒரு உறுப்பைத் தேர்ந்தெடுக்கவும்
நீங்கள் வடிகட்டியைப் பயன்படுத்த விரும்பும் HTML உறுப்பைத் தேர்வுசெய்க. இது ஒரு படம், பின்னணி அல்லது வேறு எந்த உறுப்புமாக இருக்கலாம்.
2. வகுப்பு அல்லது ஐடியைச் சேர்க்கவும்
உறுப்புக்கு ஏற்கனவே வகுப்பு அல்லது ஐடி இல்லையென்றால், CSS உடன் இலக்கு வைப்பதை எளிதாக்க ஒன்றைச் சேர்க்கவும்.
3. வடிகட்டியைப் பயன்படுத்துங்கள்
CSS ஐப் பயன்படுத்தவும்filterஉருவாக்கப்பட்ட வடிப்பானைப் பயன்படுத்த உங்கள் நடைதாள் அல்லது இன்லைன் பாணியில் சொத்து.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. பல வடிப்பான்களை இணைக்கவும்
இடைவெளிகளால் பிரிக்கப்பட்டு, ஒன்றன் பின் ஒன்றாக பட்டியலிடுவதன் மூலம் பல வடிகட்டி செயல்பாடுகளை நீங்கள் இணைக்கலாம்.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);உலாவி இணக்கத்தன்மை
Chrome, Firefox, Safari, Edge மற்றும் Opera உள்ளிட்ட நவீன உலாவிகளில் CSS வடிப்பான்கள் பரவலாக ஆதரிக்கப்படுகின்றன. இருப்பினும், இன்டர்நெட் எக்ஸ்ப்ளோரர் போன்ற பழைய உலாவிகள் அவற்றை ஆதரிக்காது.
Related Tools
CSS மாற்றிக்கு Sass
உங்கள் Sass குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.
CSS மாற்றிக்கு குறைவு
உங்கள் குறைவான குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.
CSS Minifier
தொழில்முறை துல்லியத்துடன் உங்கள் CSS குறியீட்டை சுருக்கி மேம்படுத்தவும்
அதிர்வெண் அலகு மாற்றி
உங்கள் பொறியியல் மற்றும் அறிவியல் கணக்கீடுகளுக்கு துல்லியத்துடன் அதிர்வெண் வெவ்வேறு அலகுகளுக்கு இடையில் மாற்றவும்
ஆன்லைன் உரை நிழல் CSS ஜெனரேட்டர்
உங்கள் வலைத்தளத்திற்கான அதிர்ச்சியூட்டும் சாய்வு உரை விளைவுகளை உருவாக்கவும்
நம்பக இடைவெளி கால்குலேட்டர்
உங்கள் மாதிரி தரவுக்கான நம்பக இடைவெளிகளை துல்லியமாகவும் எளிதாகவும் கணக்கிடுங்கள்.