𝗧𝗵𝗲 𝗔𝗿𝘁 𝗼𝗳 𝗖𝗦𝗦: 𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 𝗖𝗵𝗿𝘆𝘀𝗮𝗻𝘁𝗵𝗲𝗺𝘂𝗺 CSS کا فن: ایک گلِ داؤدی (Chrysanthemum) بنانا

CSS آرٹ ڈیزائن کو تکنیکی مہارت کے ساتھ جوڑتا ہے۔ آپ امیج فائلوں کا استعمال کیے بغیر تفصیلی خاکے تیار کرتے ہیں۔ آپ صرف HTML اور CSS کا استعمال کرتے ہیں۔

ایک گلِ داؤدی میں بہت سی گھنی پنکھڑیاں ہوتی ہیں۔ آپ مخصوص پراپرٹیز کا استعمال کرتے ہوئے یہ پھول بنا سکتے ہیں:

  • نرم اشکال کے لیے border-radius
  • رنگوں کی گہرائی کے لیے linear-gradient
  • جہت (dimension) کے لیے box-shadow
  • گھماؤ (rotation) کے لیے transform

پھول بنانے کے لیے، آپ اشکال بناتے ہیں۔ ایک گلِ داؤدی تہوں والے div عناصر اور pseudo-elements کا ایک مجموعہ ہے۔ آپ کو پھول کو حصوں میں تقسیم کرنا ہوگا: پنکھڑیاں، تہیں، اور ایک مرکزی حصہ۔

آپ border-radius کا استعمال کرتے ہوئے پنکھڑی کی شکل بناتے ہیں۔ پھر اسے حرکت دینے کے لیے transform: rotate() کا استعمال کرتے ہیں۔ ان اشکال کو ایک مرکزی نقطہ کے گرد گھمانے سے کھلتے ہوئے پھول کا نمونہ بن جاتا ہے۔

اپنے کام کو بہتر بنانے کے لیے ان تجاویز کا استعمال کریں:

  • پنکھڑیوں کی تہیں بنانے کے لیے z-index کا استعمال کریں۔
  • گہرائی پیدا کرنے کے لیے opacity تبدیل کریں۔
  • ::before اور ::after pseudo-elements کا استعمال کریں۔ اس سے آپ کا HTML صاف ستھرا رہتا ہے۔

CSS آرٹ آپ کو box model اور positioning میں مہارت حاصل کرنے میں مدد دیتا ہے۔ یہ آپ کو سکھاتا ہے کہ براؤزرز عناصر کو کیسے رینڈر (render) کرتے ہیں۔

اپنا کوڈ ایڈیٹر کھولیں اور آج ہی ایک پھول کا ڈیزائن بنانے کی کوشش کریں۔

ماخذ: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d