CSS-ன் கலை: ஒரு சாமந்திப் பூவை உருவாக்குதல்
CSS கலை வடிவமைப்பையும் தொழில்நுட்பத் திறனையும் ஒருங்கிணைக்கிறது. படக் கோப்புகளைப் பயன்படுத்தாமல் நீங்கள் விரிவான வரைபடங்களை உருவாக்கலாம். நீங்கள் HTML மற்றும் CSS-ஐ மட்டுமே பயன்படுத்துகிறீர்கள்.
சாமந்திப் பூவிற்கு அடர்த்தியான பல இதழ்கள் உள்ளன. குறிப்பிட்ட பண்புகளைப் பயன்படுத்தி நீங்கள் இந்த மலரை உருவாக்கலாம்:
- மென்மையான வடிவங்களுக்கு border-radius
- வண்ண ஆழத்திற்கு linear-gradient
- பரிமாணத்திற்கு box-shadow
- சுழற்சிக்கு transform
ஒரு மலையை உருவாக்க, நீங்கள் வடிவங்களை வரைய வேண்டும். சாமந்திப் பூ என்பது அடுக்குகளாக அமைக்கப்பட்ட div உறுப்புகள் மற்றும் pseudo-elements ஆகியவற்றின் தொகுப்பாகும். நீங்கள் மலையை இதழ்கள், அடுக்குகள் மற்றும் மையப்பகுதி எனப் பிரித்து உருவாக்க வேண்டும்.
border-radius பயன்படுத்தி நீங்கள் ஒரு இதழ் வடிவத்தை உருவாக்குகிறீர்கள். பின்னர் அதை நகர்த்த transform: rotate() ஐப் பயன்படுத்துகிறீர்கள். இந்த வடிவங்களை ஒரு மையப் புள்ளியைச் சுற்றிச் சுழற்றுவதன் மூலம் மலர் போன்ற அமைப்பை உருவாக்க முடியும்.
உங்கள் வேலையை மேம்படுத்த இந்த குறிப்புகளைப் பயன்படுத்தவும்:
- இதழ்களை அடுக்கி வைக்க z-index ஐப் பயன்படுத்தவும்.
- ஆழத்தைச் சேர்க்க opacity ஐ மாற்றவும்.
- ::before மற்றும் ::after pseudo-elements ஐப் பயன்படுத்தவும். இது உங்கள் HTML-ஐத் தூய்மையாக வைத்திருக்கும்.
CSS கலை நீங்கள் box model மற்றும் positioning ஆகியவற்றில் தேர்ச்சி பெற உதவுகிறது. உலாவிகள் உறுப்புகளை எவ்வாறு காண்பிக்கின்றன என்பதை இது உங்களுக்குக் கற்பிக்கிறது.
உங்கள் குறியீட்டுத் தொகுப்பைத் திறந்து, இன்று ஒரு மலர் வடிவமைப்பை உருவாக்க முயற்சி செய்யுங்கள்.
ஆதாரம்: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d