Przezroczysty napis z obramowaniem [html + css]
Czy kiedykolwiek zastanawiałeś się, jak stworzyć efektowny, przezroczysty napis z obramowaniem na swojej stronie internetowej? Jeśli tak, to świetnie trafiłeś! W dzisiejszym artykule odkryjemy, jak za pomocą prostego kodu HTML i stylów CSS osiągnąć ten efekt.
Niezależnie od tego, czy prowadzisz bloga, tworzysz portfolio czy projektujesz stronę internetową dla klienta, umiejętność tworzenia efektownych tekstów może znacznie wzbogacić wizualny aspekt Twoich projektów.
Tworzymy szkielet strony html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przezroczysty napis z obramowaniem</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Witajcie<br> w naszej<br> bajce!</h1>
</div>
</body>
</html>
Tworzymy plik style.css:
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url("bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
font-family: Arial, sans-serif;
font-size: 6rem;
color: rgba(255, 255, 255, 0); /* przeźroczysty kolor czcionki */
text-align: center;
text-transform: uppercase;
-webkit-text-stroke-width: 1px; /* szerokość obramowania */
-webkit-text-stroke-color: rgb(255, 255, 255); /* kolor obramowania */
}
Aby stworzyć efektowny napis na stronie internetowej, umieśćmy wszystkie pliki w jednym katalogu. Następnie, aby podłączyć plik CSS do naszego kodu HTML, użyjemy następującej linii kodu:
<link rel="stylesheet" href="style.css">
W pliku stylów CSS możemy dopracować wygląd naszego napisu. Możemy dodać tło, aby tekst był lepiej widoczny na stronie. Dodatkowo istnieje możliwość pogrubienia obramowania napisu oraz zmiany jego koloru, co dodatkowo podkreśli jego wyjątkowość.
Po zakończeniu edycji stylów CSS, nasz napis nabiera elegancji i charakteru. Dzięki odpowiednio dobranemu tłu oraz dopracowanym szczegółom takim jak kolor i grubość obramowania, nasz tekst staje się nie tylko czytelny, ale także atrakcyjny dla klientów, przyciągając ich uwagę na stronie internetowej.
