Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Pisanka

poniedziałek,

CSS: Pisanka

Sposób na wykonanie pisanki za pomocą języka CSS jest prosty i bazuje na metodzie opisanej w materiale CSS: Jajko.

Kod HTML

Możesz utworzyć div, który będzie imitował jajko.

<div class="egg"></div>

Kod CSS

Następnie dodaj odpowiedni styl do tego diva, aby uzyskać pożądany efekt.

.egg {
  width: 200px; /* Dostosuj szerokość do swoich potrzeb */
  height: 300px; /* Dostosuj wysokość do swoich potrzeb */
  background-image: url('ścieżka/do/twojego/obrazu.jpg'); /* Ścieżka do obrazu */
  background-size: cover; /* Obraz tła pokryje cały element */
  background-position: center; /* Centruje obraz tła */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Tworzy kształt jajka */
  display: flex;
  justify-content: center;
  align-items: center;
}

W tym przykładzie border-radius został skonfigurowany tak, aby górna połowa elementu była inaczej zaokrąglona niż dolna, co przybliża kształt do jajka. Właściwość background-image jest używana do umieszczenia obrazu jako tła dla elementu, a background-size: cover; oraz background-position: center; zapewniają, że obraz tła będzie odpowiednio rozciągnięty i wyśrodkowany, aby najlepiej pasować do kształtu jajka.

Pamiętaj, aby zmienić 'ścieżka/do/twojego/obrazu.jpg' na faktyczną ścieżkę do obrazu, którego chcesz użyć.

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