poniedziałek,
CSS: Jajko
Aby wykonać kształt jajka w CSS, możesz wykorzystać właściwości CSS takie jak border-radius, aby manipulować kształtem elementu div.
Kod HTML
Utwórz element HTML, który będzie służył jako jajko.
<div class="egg"></div>
Kod CSS
Stylizuj element, aby uzyskać kształt jajka.
.egg {
width: 200px;
height: 300px;
background: radial-gradient(circle, #fffcec, #ffd79a);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Właściwość border-radius pozwala kontrolować zaokrąglenie narożników elementu. W powyższym przykładzie zaokrąglenie zostało dostosowane w taki sposób, aby górna część była bardziej zaokrąglona niż dolna, co przybliża kształt do jajka. Wartości procentowe border-radius można dostosować, aby zmienić kształt jajka według preferencji.
Własność radial-gradient(circle, #fffcec, #ffd79a) tworzy gradient radialny, który zaczyna się od koloru #fffcec na brzegach i przechodzi do #ffd79a w środku. Użycie słowa kluczowego circle określa, że gradient ma być okrągły, co dobrze współgra z kształtem jajka. Ten efekt gradientu nadaje jajku bardziej realistyczny wygląd, symulując sposób, w jaki światło może padać na trójwymiarowy obiekt i tworzyć subtelne przejścia kolorystyczne. Możesz dostosować kolory gradientu, aby lepiej dopasować je do swojego projektu lub aby uzyskać różne efekty wizualne.
Demo
