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

Strony internetowe w 2022 roku. Jakie trendy niesie nowy rok?
ITF uruchamia darmowy serwis z fontami Fontshare. Alternatywa dla Google Fonts?
Zbliża się duża aktualizacja Google. Core Web Vitals będzie czynnikiem rankingowym.
Paradoks Webdesignera: uproszczenie projektu jedną z najtrudniejszych czynności
WordPress: instalacja krok po kroku. Jak zainstalować WordPressa?
Joomla czy WordPress – który CMS jest lepszy?
Dziś Dzień Singla! 8 najlepszych aplikacji randkowych w 2023 roku
Najlepsze wtyczki do WordPressa – Luty 2021
Najlepsze wtyczki do WordPressa w 2022 roku
Jak zaktualizować motywy i wtyczki WordPress za pomocą pliku ZIP
Tworzysz nową stronę www? Użyj obrazu w celu przekazania treści!
Jaka przyszłość czeka bukmacherów?

POPROŚ O WYCENĘ