CSS Box Shadow ஜெனரேட்டர்
ஸ்லைடர்களை நகர்த்தி ஓர் அட்டையில் முடிவைப் பார்த்து box-shadow-ஐ உருவாக்குங்கள். மென்மையான, இயல்பான நிழல்களுக்கு ஆறு அடுக்குகள் வரை அடுக்கலாம்; அழுந்திய விளைவுக்கு inset பயன்படுத்தலாம்; மென்மை, மிதப்பு, ஒளிர்வு, neumorphism போன்ற முன்அமைவுகளிலிருந்து தொடங்கலாம். ஒரே கிளிக்கில் CSS-ஐ நகலெடுங்கள்.
எப்படிப் பயன்படுத்துவது
- முன்அமைவைத் தேர்ந்தெடுங்கள் அல்லது நிழலின் ஆஃப்செட், மங்கல், விரிவு, நிறம், ஒளிபுகாமையை மாற்றுங்கள்.
- + மூலம் அடுக்குகளைச் சேர்த்து, ஒவ்வொன்றையும் தேர்ந்தெடுத்துத் திருத்துங்கள்; உங்கள் வடிவமைப்புக்கு ஏற்பப் பின்னணி, பெட்டி நிறம், மூலை வளைவை மாற்றுங்கள்.
- CSS-ஐ நகலெடுத்து உறுப்பின் விதியில் ஒட்டுங்கள்.
அடிக்கடி கேட்கப்படும் கேள்விகள்
மங்கலும் விரிவும் என்ன செய்கின்றன?
மங்கல் நிழலின் விளிம்பை மென்மையாக்கும்; பூஜ்யம் கூர்மையான விளிம்பைத் தரும். விரிவு மங்கலாக்குவதற்கு முன் நிழலை எல்லாத் திசைகளிலும் பெரிதாக்கும்; எதிர்மறை விரிவு அதைச் சுருக்கும்; இது பெரிய மங்கல் நிழல் உறுப்புக்குக் கீழேயே இருக்க உதவும்.
ஏன் பல நிழல் அடுக்குகளைப் பயன்படுத்த வேண்டும்?
உண்மையான நிழல்கள் பொருளுக்கு அருகில் அடர்ந்தும் தொலைவில் மங்கியும் இருக்கும். சிறிய கூர்மையான நிழலையும் பெரிய மென்மையான நிழலையும் இணைத்தால் அது போலவே தோன்றும்; ஒற்றை நிழலைவிட இயல்பாகவும் இருக்கும். பட்டியலில் முதல் அடுக்கு மேலே வரையப்படும்.
box-shadow பக்கத்தை மெதுவாக்குமா?
இயல்பான பயன்பாட்டில் இல்லை. பல உறுப்புகளில் மிகப் பெரிய மங்கல், அல்லது நிழலையே அனிமேட் செய்வது, மெதுவான தொலைபேசிகளில் செயல்திறனைப் பாதிக்கலாம்; அனிமேட் செய்ய, நிழல் உள்ள pseudo-element-இன் ஒளிபுகாமையை மாற்றுங்கள்.
🏷️ மெட்டா டேக் ஜெனரேட்டர்
🖼️ Open Graph ஜெனரேட்டர்
🔗 UTM இணைப்பு உருவாக்கி
🌈 CSS கிரேடியன்ட் ஜெனரேட்டர்