فن الـ CSS: بناء زهرة الأقحوان

يمزج فن الـ CSS بين التصميم والمهارة التقنية. يمكنك إنشاء رسومات مفصلة دون استخدام ملفات الصور، حيث تعتمد فقط على HTML و CSS.

تتميز زهرة الأقحوان ببتلات كثيفة ومتعددة. يمكنك بناء هذه الزهرة باستخدام خصائص محددة:

  • border-radius للأشكال الناعمة
  • linear-gradient لعمق الألوان
  • box-shadow لإضافة الأبعاد
  • transform للتدوير

لصنع زهرة، عليك رسم أشكال. زهرة الأقحوان هي عبارة عن مجموعة من عناصر div المتداخلة والعناصر الزائفة (pseudo-elements). يجب عليك تقسيم الزهرة إلى أجزاء: البتلات، والطبقات، واللب المركزي.

تقوم بإنشاء شكل البتلة باستخدام border-radius ، ثم تستخدم transform: rotate() لتحريكها. يؤدي تدوير هذه الأشكال حول نقطة مركزية إلى إنشاء نمط التفتح.

استخدم هذه النصائح لتحسين عملك:

  • استخدم z-index لترتيب طبقات البتلات.
  • قم بتغيير الشفافية (opacity) لإضافة العمق.
  • استخدم العناصر الزائفة ::before و ::after؛ فهذا يحافظ على نظافة كود HTML الخاص بك.

يساعدك فن الـ CSS على إتقان نموذج الصندوق (box model) والتموضع (positioning). كما يعلمك كيفية قيام المتصفحات بمعالجة العناصر (render).

افتح محرر الأكواد الخاص بك وحاول بناء تصميم زهري اليوم.

المصدر: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d