i

t

a

g

e

n

c

j

a

Jak zrobić serduszko walentynkowe w HTML/CSS?

Dziś Walentynki i chcielibyśmy zaproponować coś specjalnego dla naszych czytelników. Dzisiaj chcemy pokazać, jak stworzyć serduszko walentynkowe w CSS.

Aby stworzyć serduszko, będziemy używać pseudoelementów ::before i ::after w połączeniu z transformacją i obramowaniem. Wystarczy dodać klasę „heart” do elementu HTML, aby uzyskać pełne serce.

Oto kod CSS, który stworzy serduszko walentynkowe:

.heart {
  position: relative;
  width: 50px;
  height: 50px;
}

.heart::before,
.heart::after {
  position: absolute;
  content: "";
  left: 25px;
  top: 0;
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 25px 25px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Możesz oczywiście dostosować wielkość i kolor serduszka do swojego projektu.

Aby uzyskać pełne serce, możesz dodać klasę „heart” do elementu HTML:

<div class="heart"></div>

Mamy nadzieję, że ten krótki artykuł pomógł Ci stworzyć serduszko walentynkowe w CSS. Daj znać w komentarzach, czy udało Ci się to zrobić i czy masz jakieś inne ciekawe pomysły na projektowanie stron internetowych związanych z Walentynkami.

Oto efekt:

Przeczytaj także

Dziś Dzień Singla! 8 najlepszych aplikacji randkowych w 2023 roku
Czy warto używać języka PHP? Kiedy najlepiej go wykorzystać?
Nowa odsłona IT Agencji!
W jaki sposób wirtualny spacer może pomóc Twojej firmie?
Jak zaktualizować motywy i wtyczki WordPress za pomocą pliku ZIP
5 największych wyzwań stawianych przy realizacji stron internetowych
Wpływ sztucznej inteligencji na sieć rośnie
Najlepsze platformy blogowe roku (2022)
Porady, jak sprawić, by Twoja strona kontaktu konwertowała
Jaką domenę wybrać dla swojej strony? Obalamy 7 mitów na temat domen
Core Update Light – marcowa aktualizacja Google bez oficjalnego potwierdzenia?
Strony internetowe w 2022 roku. Jakie trendy niesie nowy rok?

POPROŚ O WYCENĘ