Przezroczysty napis z obramowaniem HTML/CSS

Dzisiaj pokażę wam jak w bardzo prosty sposób stworzyć przezroczysty napis z obramowaniem na stronę internetową korzystając jedynie z HTML i CSS. Do wykonania tego efektu będzie nam też potrzebna podstawowa wiedza z obu tych języków + kilka mniej znanych właściwości CSS.

Zanim wszystkich wrzucę na otwartą wodę warto jest przypomnieć sobie trochę podstaw. Tak więc:

Jak dodać obramowanie do tekstu na stronie internetowej?

Istnieje kilka meto na to by tekst na stronie posiadał obramowanie. Jedną z nich jest dodanie cienia pod tekst a drugą użycie właściwości CSS text-stroke.

Jak działa -webkit-text-stroke?

Zasada działania text-stroke nie jest specjalnie zbyt trudna. Jako jej parametry ustawiamy bowiem jedynie:

• grubość obramowania,
• kolor.

Przykładowo:

-webkit-text-stroke: 2px navy;  

przykładowo:

Obramowanie może się różnić w zależności od fontu jaki wybierzemy. Więc dobieranie odpowiedniego kroju pisma jest bardzo istotne.

Kod przykładu:

<div style="font-weight: 700; border:1px solid;">
<p style="-webkit-text-stroke: 2px navy; font-size:25px;">Przykładowy tekst</p>
<p style="-webkit-text-stroke: 5px pink; font-size:58px;">Kolejny tekst</p>
</div>

Obramowanie z pomocą cienia

O dodawaniu cienia pod obiekty HTML pisałam już kilka razy na blogu więc nie będę się tutaj rozpisywać. Nas będzie interesowało ustawienie cienia w poniższy sposób:

text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333;

Przykład:

Jak widać z tą metodą należy uważać.

<div style="font-weight: 700; border:1px solid;">
<p style="text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333; font-size:25px;">Przykładowy tekst</p>
<p style="text-shadow: -3px 0 #ccc, 0 3px #ccc, 3px 0 #ccc, 0 -3px #ccc; font-size:25px;">Kolejny tekst</p>
</div>

Przeczytaj -> Dodawanie cienia pod obiekty HTML

Jak zrobić przezroczysty tekst?

Na początek warto zapoznać się z tym jak uzyskać efekt przezroczystości. Bo CSS daje nam kilka opcji. Nie każda z nich się nadaje.

Zapoznaj się z: Przezroczystość na stronie

Przezroczystość z -webkit-text-stroke

Ja zdecydowałam się na najprostszą metodę uzyskania przezroczystości czyli użycie koloru RGB z 4 parametrami.

• pierwsze 3 to numer koloru
• 4 daje efekt prześwitywania, gdzie 100% to jego brak a 0% to całkowita przezroczystość.

Tak więc przykładowo przy ustawieniu

color: rgb(204 204 204 / 0%);

Mamy całkowity prześwit, koloru nie ma.

Przezroczystość z cieniem

Coś takiego nie istnieje. To oszustwo, dajemy kolor fontu taki sam jak tło.