CSS కళ: ఒక క్రైసంతమమ్ (Chrysanthemum) నిర్మించడం

CSS art అనేది డిజైన్‌ను సాంకేతిక నైపుణ్యంతో మిళితం చేస్తుంది. మీరు ఇమేజ్ ఫైల్‌లను ఉపయోగించకుండానే వివరణాత్మక చిత్రాలను సృష్టించవచ్చు. దీని కోసం మీరు కేవలం HTML మరియు CSS మాత్రమే ఉపయోగిస్తారు.

క్రైసంతమమ్ (Chrysanthemum) పూలకు చాలా దట్టమైన రేకులు ఉంటాయి. మీరు కొన్ని నిర్దిష్ట ప్రాపర్టీలను ఉపయోగించి ఈ పువ్వును నిర్మించవచ్చు:

  • మృదువైన ఆకృతుల కోసం border-radius
  • రంగుల లోతు కోసం linear-gradient
  • కొలతల (dimension) కోసం box-shadow
  • భ్రమణం (rotation) కోసం transform

ఒక పువ్వును తయారు చేయడానికి, మీరు ఆకృతులను గీయాలి. క్రైసంతమమ్ అనేది లేయర్‌లుగా ఉన్న div ఎలిమెంట్స్ మరియు pseudo-elementsల సమూహం. మీరు పువ్వును రేకులు, పొరలు (layers) మరియు మధ్య భాగం (center core) అని విభాగాలుగా విభజించాలి.

మీరు border-radius ఉపయోగించి రేకు ఆకృతిని సృష్టిస్తారు. ఆ తర్వాత దానిని కదిలించడానికి transform: rotate() ఉపయోగిస్తారు. ఈ ఆకృతులను ఒక కేంద్ర బిందువు చుట్టూ తిప్పడం ద్వారా పూత (bloom pattern) ఏర్పడుతుంది.

మీ పనిని మెరుగుపరచుకోవడానికి ఈ చిట్కాలను ఉపయోగించండి:

  • రేకులను లేయర్‌లుగా అమర్చడానికి z-index ఉపయోగించండి.
  • లోతును జోడించడానికి opacity మార్చండి.
  • ::before మరియు ::after pseudo-elements ఉపయోగించండి. ఇది మీ HTMLని క్లీన్‌గా ఉంచుతుంది.

CSS art అనేది బాక్స్ మోడల్ (box model) మరియు పొజిషనింగ్‌లో నైపుణ్యం సాధించడంలో మీకు సహాయపడుతుంది. బ్రౌజర్‌లు ఎలిమెంట్స్‌ను ఎలా రెండర్ చేస్తాయో ఇది మీకు నేర్పిస్తుంది.

మీ కోడ్ ఎడిటర్‌ను ఓపెన్ చేసి, ఈరోజే ఒక ఫ్లోరల్ డిజైన్‌ను నిర్మించడానికి ప్రయత్నించండి.

మూలం: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d