Tym razem na mój warsztat trafił dość ciekawy efekt przydatny do wyróżnienia tekstu na stronie.
O co chodzi?
Chodzi oczywiści o tekst 3D, a właściwie o uzyskanie efektu dającego złudzenie trzy wymiarowości. Na początek potrzeby nam będzie tekst, który za pomocą odpowiedniej formuły CSS zostanie zmieniony przykładowo:
<h5>Tekst w 3D</h5>
Następnie trzeba dla niego napisać odpowiednią formułę CSS. Jak widzicie cień jest raczej bardziej skomplikowany:
h5 {
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);
}Efekt będzie następujący:
See the Pen 3d text by Aura (@Julka85) on CodePen.
Skrypt powinien działać w Safari, Chrome, Firefox, i Operze.
Powyższy skrypt to tylko przykład opierający się na lekkim złudzeniu za pomocą cieni.
http://markdotto.com/playground/3d-text/
tagi po których można znaleźć stronę:
- text 3d
- efekty CSS
- tutorial CSS3
- kurs CSS
- tworzenie stron internetowych
- ciekawe motywy na stronę
- upiększanie witryny
- urozmaicenie tekstu
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.