To dzisiaj opiszę krok po kroku większość tricków związanych z tekstem, jak przyozdobić, jak zrobić fajny cień, lub jak na przykład go przerotować. Wytłumaczę też za co odpowiada konkretna formuła i co ona zmienia. No to zapraszam do czytania.
Zaczniemy od podstaw czyli zmiana rozmiaru za co odpowiada formuła font-size. Możemy dzięki niej albo powiększyć, albo pomniejszyć.
Możemy także zmienić kolor za pomocą color:
Możemy zmieniać położenie tekstu za pomocą text-align: i tak możemy mieć tekst po środku, po prawo i po lewo.
Da się także tekst podkreślić, przekreślić lub nadkreślić(?) za pomocą text-decoration:
I kolejne text-transform dzięki, któremu możemy pisać tylko małymi literami lub tylko wielkimi.
Word-spacing jest formułą odpowiadającą za odległości między wyrazami.
Odległości między literami zmieniamy za pomocą letter-spacing
Line-height określa wysokość linijki tekstu i możemy albo tę wysokość zwiększać albo zmniejszać.
line-height:70%
line-height:120%
A teraz to już będą różne szalone efekty!
Zaczniemy od podstaw czyli zmiana rozmiaru za co odpowiada formuła font-size. Możemy dzięki niej albo powiększyć, albo pomniejszyć.
30 px | lub | 12 px |
Możemy także zmienić kolor za pomocą color:
color:#00AC99
Możemy zmieniać położenie tekstu za pomocą text-align: i tak możemy mieć tekst po środku, po prawo i po lewo.
text-align:right
text-align:center
text-align:left
Da się także tekst podkreślić, przekreślić lub nadkreślić(?) za pomocą text-decoration:
text-decoration:overline;
text-decoration:line-through
text-decoration:underline;
I kolejne text-transform dzięki, któremu możemy pisać tylko małymi literami lub tylko wielkimi.
text-transform:uppercase;
text-transform:lowercase;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus luctus dapibus. Duis euismod gravida aliquam. Nam quis tellus eget metus congue tincidunt sit amet rutrum metus. Pellentesque at dolor neque. Etiam at nibh lacinia, porta odio ac, tempus neque. Ut varius dictum nunc nec hendrerit. Morbi at lobortis tortor. Ut et mauris ut libero lacinia sollicitudin.
Word-spacing jest formułą odpowiadającą za odległości między wyrazami.
tutaj mamy word-spacing:10px
Odległości między literami zmieniamy za pomocą letter-spacing
letter-spacing:10px;
Line-height określa wysokość linijki tekstu i możemy albo tę wysokość zwiększać albo zmniejszać.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus luctus dapibus. Duis euismod gravida aliquam. Nam quis tellus eget metus congue tincidunt sit amet rutrum metus. Pellentesque at dolor neque. Etiam at nibh lacinia, porta odio ac, tempus neque. Ut varius dictum nunc nec hendrerit. Morbi at lobortis tortor. Ut et mauris ut libero
line-height:70%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus luctus dapibus. Duis euismod gravida aliquam. Nam quis tellus eget metus congue tincidunt sit amet rutrum metus. Pellentesque at dolor neque. Etiam at nibh lacinia, porta odio ac, tempus neque. Ut varius dictum nunc nec hendrerit. Morbi at lobortis tortor. Ut et mauris ut libero
line-height:120%
tekst 1
font-family: 'Lobster', cursive;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15); font-size:50px;
tekst 2
text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff, 0 0 12px #ff2d95, 0 0 15px #ff2d95, 0 0 18px #ff2d95, 0 0 21px #ff2d95, 0 0 24px #ff2d95;font-family: 'Lobster', cursive; font-size:50px
tekst 3
color: #d7ceb2; text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; font-family: 'Lobster', cursive; font-size:50px"
tekst 4
color: transparent; text-shadow: 1px 0px 1px #fe6f5e;font-family: 'Lobster', cursive; font-size:50px
Dziękuję! <3
OdpowiedzUsuńA proszę bardzo! <3
UsuńSuper wytłumaczone :)
OdpowiedzUsuń