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

Czy motywy premium do WordPressa są warte swojej ceny?
Pozycjonowanie oparte na trikach? Nie tędy droga. Oto trzy zwycięskie strategie w SEO
Najlepsze wtyczki do WordPressa w 2022 roku
Ile kosztuje zrobienie strony internetowej?
WordPress: instalacja krok po kroku. Jak zainstalować WordPressa?
Porady, jak sprawić, by Twoja strona kontaktu konwertowała
5 wskazówek dotyczących projektowania nawigacji na Twojej stronie internetowej
Jaka przyszłość czeka bukmacherów?
Jaką domenę wybrać dla swojej strony? Obalamy 7 mitów na temat domen
Wady i zalety współdzielonego hostingu
Jak stworzyć przyjazny dla użytkownika sklep eCommerce?
Tylko jeden nagłówek H1 na stronie? Niekoniecznie!

POPROŚ O WYCENĘ