Element HTML z pionowym tekstem

kursy, tutoriale

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 5,00 z 5)
Loading...

Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML.

Jak uzyskać efekt pionowego tekstu

Na początek rozdzielamy wszystkie litery naszego tekstu spacjami. Będzie to wyglądać np. tak:

P o n i e d z i a ł e k

Na początek w HTML zapisujemy:

Domyślnie element span interpretowany jest przez przeglądarki internetowe jako element liniowy (czyli w jednej lini może znaleźć się kilka elementów tego typu). W celu uzyskania naszego efektu musimy teraz zmienić właściwości jego na blokowe (tego typu jest np. DIV) 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

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.

P o n i e d z i a ł e k
W t o r e k

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ą