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 மாற்றிக்கு குறைவு
உங்கள் குறைவான குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.
CSS3 உருமாற்றங்களை எளிதாக உருவாக்கவும்
சிக்கலான CSS3 ஐ உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த, உள்ளுணர்வு கருவி குறியீடு எழுதாமல் மாற்றுகிறது. நிகழ்நேரத்தில் மாற்றங்களைக் காட்சிப்படுத்தி, உங்கள் திட்டங்களில் பயன்படுத்த உருவாக்கப்பட்ட CSS ஐ நகலெடுக்கவும்.
CSS மாற்றிக்கு ஸ்டைலஸ்
உங்கள் SCSS குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.
எந்த நோக்கத்திற்காகவும் சீரற்ற சொற்களை உருவாக்கவும்
தனிப்பயன் நீளம், சிக்கலான தன்மை மற்றும் வடிவமைப்பு விருப்பங்களுடன் சீரற்ற சொற்களை உருவாக்கவும்.
RGB முதல் Pantone வரை
டிஜிட்டல் RGB வண்ணங்களை நெருக்கமான Pantone® சமமானதாக மாற்றவும்
சேமிப்பு அடர்த்தி அலகு மாற்றி
தரவு சேமிப்பு அடர்த்தியின் வெவ்வேறு அலகுகளுக்கு இடையில் துல்லியமாக மாற்றவும்