CSS-ന്റെ കല: ഒരു ക്രിസന്തമം നിർമ്മിക്കാം

ഡിസൈനും സാങ്കേതിക നൈപുണ്യവും സമന്വയിപ്പിക്കുന്ന ഒന്നാണ് CSS ആർട്ട്. ഇമേജ് ഫയലുകൾ ഉപയോഗിക്കാതെ തന്നെ നിങ്ങൾക്ക് വിശദമായ ചിത്രങ്ങൾ നിർമ്മിക്കാൻ ഇതിലൂടെ സാധിക്കും. HTML, CSS എന്നിവ മാത്രം ഉപയോഗിച്ചാണ് ഇത് ചെയ്യുന്നത്.

ഒരു ക്രിസന്തമത്തിന് ധാരാളം ഇടുങ്ങിയ ഇതളുകൾ ഉണ്ട്. താഴെ പറയുന്ന പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഈ പൂവ് നിർമ്മിക്കാം:

• മൃദുവായ രൂപങ്ങൾക്കായി border-radius
• നിറങ്ങളുടെ ആഴം കൂട്ടാൻ linear-gradient
• ഡൈമൻഷൻ നൽകാൻ box-shadow
• കറക്കത്തിനായി (rotation) transform

ഒരു പൂവ് നിർമ്മിക്കാൻ നിങ്ങൾ രൂപങ്ങൾ വരയ്ക്കണം. ലെയറുകളായി അടുക്കിവെച്ച div എലമെന്റുകളുടെയും pseudo-elements-ന്റെയും ഒരു കൂട്ടമാണ് ക്രിസന്തമം. പൂവിനെ ഇതളുകൾ, ലെയറുകൾ, മധ്യഭാഗം (center core) എന്നിങ്ങനെ വിവിധ ഭാഗങ്ങളായി തിരിക്കണം.

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