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

Przyszłość e-commerce: jakie nowe technologie zmieniają rynek?
Zbliża się duża aktualizacja Google. Core Web Vitals będzie czynnikiem rankingowym.
Czy warto zainwestować w swój serwer sieciowy?
Doświadczenie najlepszym nauczycielem w tworzeniu stron www
Najlepsze alternatywy dla Google Analytics w 2021 roku
Tylko jeden nagłówek H1 na stronie? Niekoniecznie!
10 najpopularniejszych języków programowania
8 trendów w SEO i pozycjonowaniu, które będą królować w 2021 roku
Jak zwiększyć autorytet swojej domeny dzięki SEO (Domain Authority)?
5 kroków, by Twoja strona była mobile friendly. Jak stworzyć responsywną stronę www?
Nowa odsłona IT Agencji!
9 niesamowitych witryn z gotowymi pakietami dla projektantów

POPROŚ O WYCENĘ