Element HTML z pionowym tekstem
Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML.
Jak uzyskać efekt pionowego tekstu na stronie
Na początek będziemy musieli wybrać jakieś słowo lub tekst, w którym następnie rozdzielamy wszystkie litery naszego tekstu spacjami. Będzie to wyglądać np. tak:
P o n i e d z i a ł e k
W kodzie HTML będzie się to prezentować następująco:
<div clsss="demo"> <p><span>P o n i e d z i a ł e k</span></p> </div>
Domyślnie element span interpretowany jest przez przeglądarki internetowe jako element liniowy (czyli w jednej linii może znaleźć się kilka elementów tego typu). Co go odróżnia od np. p lub div, które jako elementy blokowe domyślnie są same w jednej linii. W celu uzyskania naszego efektu musimy teraz zmienić właściwości jego na blokowe poprzez dodanie display:block;.
W następnym etapie musimy ustawić wielkość czcionki oraz szerokość pola. Bardzo istotne jest by szerokość była mniejsza od wielkości czcionki. Czyli jeżeli font-size:14px; to width:13px;. Mniejsza szerokość pola spowoduje, że litery będą wyświetlały się bezpośrednio pod sobą.
Dodatkowo można jeszcze wyśrodkować całą zawartość pola z pomocą text-align:center. Odległość między literami zyskamy dzięki właściwości line-height.
Dla dekoracji możemy jeszcze zmienić wszystkie litery na wielkie – oraz dodać ciekawe obramowanie.
Tak więc nasz kod CSS wyglądać będzie tak
.demo p span {
display: block;
float: left;
margin-right: 15px;
text-transform: uppercase;
font-size: 14px;
width: 13px;
text-align: center;
padding: 21px;
border: 1px solid #AAA;
line-height: 1.5em;
border-radius: 6px 0 6px 0;
}Teraz możecie przyjrzeć się gotowemu efektowi. W poniższym przykładzie dodałam jeszcze jedno słowo tak byście mogli lepiej poznać zasadę działania kodu.
See the Pen
Top down by Aura (@Julka85)
on CodePen.
<div class="demo"> <p> <span>P o n i e d z i a ł e k</span> <span>W t o r e k</span> </p> </div>
Podobny efekt, ale bez użycia spacji można uzyskać dzięki właściwości word-wrap:break-word;.
Oczywiście istnieją inne metody na uzyskanie podobnego efektu jak np. wstawiania pomiędzy każdą literą znaku końca lini, jednak pokazane powyżej są dużo prostrze.
Dodatkowe tagi:
pionowy tekst czyli literki znajdują się pod sobą
Pionowo pisany tekst na twoją stronię internetową