Tym wpisem chciałbym kontynuować serię nieco mniej popularnych dyrektyw w CSS3 czy tagów w HTML5. Z reguły ich możliwości są naprawdę interesujące, jednak nie przebiły się one zbyt skutecznie do świadomości osób, które siedzą w branży. Ostatnio pisałem o ciekawym atrybucie linków download=””, który pozwalał na wymuszenie pobrania pliku, zamiast tego otwierania w karcie przeglądarki (np. plik w formacie .PDF).

W tym wpisie chciałem zaprezentować Wam równie interesujący parametr (dyrektywę), w tym wypadku w CSS3. Pozwala ona na zapisanie tekstu… pionowo. Gdy pierwszy raz zetknąłem się z tą możliwością, to przyznam pojawił mi się uśmiech na twarzy, gdyż niegdyś by osiągnąć taki efekt, to bez programu graficznego nie było najmniejszej możliwości. Oto ona:

[css]transform: rotate(90deg);[/css]

Polecenie to obróci element o zadane 90 stopni, czyli np. div z zadanym tekstem zostanie wyświetlony pionowo. Oczywiście jeżeli chcecie zmienić kąt, wystarczy zadać wybraną wartość zlokalizowaną w nawiasie. Co ważne, musicie pamiętać by dodać przy poleceniu odpowiednie prefiksy dla każdej przeglądarki, bo może być problem z działaniem tej dyrektywy. Najbezpieczniej będzie dodać taką listę kwerend (przy założeniu, że tekst obrócony ma zostać o np. 70 stopni):

[css]

-ms-transform: rotate(70deg); //Internet Explorer
-moz-transform: rotate(70deg); // Firefox
-webkit-transform: rotate(70deg); // Chrome
transform: rotate(70deg);

[/css]

Proste, wygodne i efektowne. Mam nadzieję, że zrobicie z tej dyrektywy użytek :-)

TEMATY:
Najświeższe artykuły