Tworzenie serdecznych elementów na stronach internetowych może dodawać uroku i przyciągać uwagę odwiedzających. Jednym z popularnych elementów jest serduszko, które można skopiować i umieścić na swojej stronie.
Tworzenie struktury HTML
Aby stworzyć serduszko, zaczynamy od utworzenia odpowiedniej struktury HTML. Możemy użyć elementu <div> jako kontenera dla naszego serca:
<div class="heart"></div>
Dodanie CSS
Teraz, gdy mamy strukturę HTML, możemy dodać style CSS, które nada naszemu serduszku odpowiedni wygląd. Wykorzystamy pseudo-elementy ::before i ::after:
.heart {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-45deg);
margin: 20px;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
.heart::before {
border-radius: 50%;
top: -50px;
left: 0;
}
.heart::after {
border-radius: 50%;
top: 0;
left: 50px;
}
Dodanie animacji (opcjonalne)
Jeśli chcemy nadać naszemu sercu delikatny efekt pulsowania, możemy dodać prostą animację CSS:
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.heart:hover {
animation: heartbeat 0.6s infinite;
}
Tworzenie serduszka do skopiowania na stronie internetowej nie jest trudne. Za pomocą HTML i CSS możemy stworzyć unikalny element, który dodaje uroku i przyciąga uwagę odwiedzających. Pamiętajmy, że serduszko może być dostosowane pod kątem koloru, rozmiaru i animacji, dzięki czemu możemy dopasować je do naszych indywidualnych potrzeb.
Gotowe do kopiowania:
Kod HTML:
<div class="heart"></div>
Kod CSS:
.heart {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-45deg);
margin: 20px;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
.heart::before {
border-radius: 50%;
top: -50px;
left: 0;
}
.heart::after {
border-radius: 50%;
top: 0;
left: 50px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.heart:hover {
animation: heartbeat 0.6s infinite;
}