Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Jajko

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

Artykuł: Światowy Dzień Książki i Praw Autorskich

Światowy Dzień Książki i Praw Autorskich

Artykuł: Hiszpańska przygoda

Hiszpańska przygoda

Artykuł: Certyfikaty bezpieczeństwa dla zasilaczy komputerowych

Certyfikaty bezpieczeństwa dla zasilaczy komputerowych

Artykuł: DRAM Speculative Leadoff

DRAM Speculative Leadoff

Artykuł: Burst Mode DMA

Burst Mode DMA

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły