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

Czas na Pythona! Poradnik jak przygotować prosty projekt w Pythonie – krok po kroku
Zbliża się duża aktualizacja Google. Core Web Vitals będzie czynnikiem rankingowym.
Doświadczenie najlepszym nauczycielem w tworzeniu stron www
Minimalizm w projektowaniu stron internetowych
TOP 10 trendów w projektowaniu stron internetowych, które zauważyliśmy w 2020 roku
5 pytań, jakie firmy powinny sobie zadać, planując przeprojektowanie strony internetowej
Porady, jak sprawić, by Twoja strona kontaktu konwertowała
Pozycjonowanie oparte na trikach? Nie tędy droga. Oto trzy zwycięskie strategie w SEO
Na co zwrócić uwagę tworząc stronę wizytówkę dla swojej firmy?
Dziś Dzień Singla! 8 najlepszych aplikacji randkowych w 2023 roku
Dlaczego powinieneś zadbać o swoją wizytówkę w Google?
Czy warto skorzystać z wizytówki Google Moja Firma i czy jest ona płatna?

POPROŚ O WYCENĘ