𝗧𝗵𝗲 𝗔𝗿𝘁 𝗼𝗳 𝗖𝗦𝗦: 𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 𝗖𝗵𝗿𝘆𝘀𝗮𝗻𝘁𝗵𝗲𝗺𝘂𝗺
CSS-kunst combineert design met technische vaardigheid. Je maakt gedetailleerde tekeningen zonder afbeeldingsbestanden te gebruiken. Je gebruikt alleen HTML en CSS.
Een chrysant heeft veel dichte bloemblaadjes. Je kunt deze bloem bouwen door specifieke eigenschappen te gebruiken:
- border-radius voor zachte vormen
- linear-gradient voor kleurdiepte
- box-shadow voor dimensie
- transform voor rotatie
Om een bloem te maken, teken je vormen. Een chrysant is een verzameling gelaagde div-elementen en pseudo-elementen. Je moet de bloem opdelen in onderdelen: bloemblaadjes, lagen en een kern.
Je maakt een vorm voor een bloemblaadje met behulp van border-radius. Vervolgens gebruik je transform: rotate() om het te verplaatsen. Door deze vormen rond een middelpunt te draaien, ontstaat het bloemenpatroon.
Gebruik deze tips om je werk te verbeteren:
- Gebruik z-index om bloemblaadjes te stapelen.
- Verander de opacity om diepte toe te voegen.
- Gebruik ::before en ::after pseudo-elementen. Dit houdt je HTML schoon.
CSS-kunst helpt je om het boxmodel en positionering onder de knie te krijgen. Het leert je hoe browsers elementen renderen.
Open je code-editor en probeer vandaag nog een bloemontwerp te maken.
Bron: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d