𝗧𝗵𝗲 𝗔𝗿𝘁 𝗼𝗳 𝗖𝗦𝗦: 𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 𝗖𝗵𝗿𝘆𝘀𝗮𝗻𝘁𝗵𝗲𝗺𝘂𝗺

CSS sanatı, tasarımı teknik beceriyle harmanlar. Resim dosyaları kullanmadan detaylı çizimler oluşturursunuz. Sadece HTML ve CSS kullanırsınız.

Bir krizantemin çok sayıda yoğun yaprağı vardır. Bu çiçeği belirli özellikler kullanarak oluşturabilirsiniz:

  • yumuşak şekiller için border-radius
  • renk derinliği için linear-gradient
  • boyut için box-shadow
  • döndürme için transform

Bir çiçek yapmak için şekiller çizersiniz. Bir krizantem, katmanlı div öğeleri ve pseudo-element'lerden oluşan bir settir. Çiçeği parçalara ayırmalısınız: yapraklar, katmanlar ve bir merkez çekirdek.

border-radius kullanarak bir yaprak şekli oluşturursunuz. Ardından onu hareket ettirmek için transform: rotate() kullanırsınız. Bu şekilleri bir merkez noktası etrafında döndürmek, çiçeklenme desenini oluşturur.

Çalışmalarınızı geliştirmek için bu ipuçlarını kullanın:

  • Yaprakları katmanlandırmak için z-index kullanın.
  • Derinlik katmak için opacity değerini değiştirin.
  • ::before ve ::after pseudo-element'lerini kullanın. Bu, HTML kodunuzun temiz kalmasını sağlar.

CSS sanatı, box model ve konumlandırma konularında uzmanlaşmanıza yardımcı olur. Tarayıcıların öğeleri nasıl render ettiğini size öğretir.

Kod editörünüzü açın ve bugün bir çiçek tasarımı oluşturmayı deneyin.

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