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
