Witam w kolejnej części poradnika, w której zajmiemy się czcionkami, linkami oraz animacjami po najechaniu na nie. Ogólnie chciałabym przeprosić za długie przerwy w publikacjach, ale – niestety – ten poradnik jest bardzo czasochłonny i wymaga ode mnie siedzenia przed komputerem nieustająco przez kilka godzin. Tak czy inaczej: do dzieła!
(by powiększyć obrazki klikamy na nie)
Instalacja nowych czcionek na blogu.
Teraz powieje grozą: by to zrobić, musimy wejść w HTML. Najpierw jednak wybierzemy czcionki do naszego bloga. Wchodzimy na google fonts i z szerokiej gamy wybieramy interesujący nas krój.
Przez zdecydowaniem się na konkretny model czcionki musimy ją sprawdzić. By tego dokonać, klikamy na nazwę wybranej czcionki. Tam otwiera nam się okienko, w którym będziemy mogli ustalić, czy posiada ona polskie znaki. Wybrałam Indie Flower. W polu „Type here to preview text” wpisujemy „Zażółć gęślą jaźń”.
Teraz rozwijamy dolny pasek i widzimy takie coś:
Kopiujemy <link href....> w całości, a następnie przechodzimy do bloggera.
W panelu przechodzimy do sekcji motyw, a następnie klikamy na „edytuj kod html”. Otworzy nam się zaawansowana edycja kodu, ale nie bójcie się! W czwartej linijce (są one ponumerowane z prawej strony) widzimy napis <head>.
Tuż przed nim wklejamy nasz skopiowany tekst i zapisujemy zmiany. Ignorujemy ostrzeżenia, wracamy do zakładki „motyw” klikając „wstecz”. Właśnie zainstalowaliśmy dwie nowe czcionki na naszym blogu!
Zmiana czcionki kodem
Na naszym blogu zainstalowaliśmy dwie nowe czcionki: Indie Flower i Tajawal, które posłużą nam do upiększenia tekstów na naszym blogu. Trzeba pamiętać ich nazwy lub zapisać sobie gdzieś, bo to właśnie dzięki tym nazwom będziemy je przywoływać do naszego szablonu.
Wejdźmy teraz w dostosuj > zaawansowane > CSS, jak wcześniej. Na samym dole kodu ustalaliśmy położenie naszego menu. Teraz dostosujemy jego wygląd.
Najpierw wyśrodkujemy tekst w gadżecie, opisując po średniku w ostatnim selektorze text-align: center.
Nasz kod wygląda w tej chwili tak:
#PageList1 {position: absolute; top: 70px; left: -828px; text-align: center}
a Menu jest ładnie wyśrodkowane.
Otwieramy kolejny selektor, tym razem dla tytułu gadżetu Strony. Ogólnie rzecz biorąc selektor każdego tytułu gadżetu tworzymy w sen sposób, że wpisujemy selektor ogólny i po nim, po spacji, dopisujemy h2, za nim zaś otwieramy wąsy i się bawimy.
Nasz selektor wyglądać będzie zatem tak: #PageList1 h2
Ustalamy krój czcionki. By go zmienić, zaraz za wąsami wpisujemy atrybut: font-family, który określamy jako Indie Flower. Oddzielamy go średnikiem, by wpisać kolor naszej czcionki. Wybrałam czarny, żeby było go dobrze widać. Mój kod i efekt osiągnięty wyglądają w ten sposób:
Uważam, że czcionka jest zbyt mała, nie sądzicie? Wracamy do maltretowania selektora! By zmienić rozmiar czcionki musimy dodać atrybut: font-size, który określamy w pt (większa zmiana, jak w wordzie) lub w px (tu mamy rozmiar w pixelach). Preferuję tę pierwszą opcję, by w kodzie nie było zbyt dużo pixeli. Powiększamy czcionkę do 18pt.
#PageList1 h2{font-family: Indie Flower; color: black; font-size: 18pt}
Oto nasz efekt:
Mamy tytuł! Przydałoby się zastosować ten sam efekt dla pozostałych gadżetów. Można postępować tak z każdym indywidualnym efektem, ale łatwiej jest zrobić to masowo. Pamiętacie z poprzednich części, jak ustalaliśmy tło dla wszystkich naraz? Postąpimy podobnie, z tym, że nasz selektor będzie różnić się jedynie dopisaniem h2 na końcu. Nie musimy również po raz kolejny wpisywać kodu, skopiujmy z Menu (same wąsy!)
Mamy zatem taki kod:
.column-right-inner .widget h2 {font-family: Indie Flower; color: black; font-size: 18pt}
By wyśrodkować tekst w kolumnie bocznej wróćmy do selektora .column-right-inner .widget i po średniku, na końcu wąsów dopiszmy text-align: center. Zadziałało?
Ogólnie rzecz biorąc wystarczyło wpisać kod jedynie dla kolumny prawej, ale chciałam pokazać, jak konstruuje się to na pojedynczym selektorze. Dodamy białe podświetlenie do tytułów. Operujemy już tylko na ostatnim wpisanym selektorze; dopisując po średniku: text-shadow: 0px 0px 5px white. Możecie pobawić się z wartościami pixelowymi oraz kolorem, oswójcie się z nimi. To przydatna, estetyczna rzecz.
Docelowo zostawmy jednak nasz kod w formie:
.column-right-inner .widget h2 {font-family: Indie Flower; color: black; font-size: 18pt; text-shadow: 0px 0px 5px white}
Edycja tła linków
Nasze linki w gadżetach wcale nie muszą mieć żółtego tła. Możemy je dowolne edytować, wstawiając np. ciemny kolor, jaki jak w tle kolumny i w obramowaniu. By zmienić te rzeczy, użyjemy ponownie selektora odnoszącego się do wszystkich gadżetów, tym razem jednak zamiast h2, dopiszemy li.
Ustalimy kolor tła (przypomnijmy: #051832) oraz margines dolny, by poszczególne pozycje oddzieliły się od siebie. Atrybut tła już znacie (background), marginesu również (tutaj, dla marginesu dolnego: (margin-bottom). Margines o szerokości 5px będzie wystarczający. Nasz kod wygląda tak:
.column-right-inner .widget li{background: #051832; margin-bottom: 5px; }
Teraz przygotujemy się do animowania przycisku po najechaniu. Na razie będzie to troszkę niezrozumiałe, ale opiszę dokładnie proces przy opisywaniu animacji, trochę później. A wiarę dopiszcie tam „box-shadow: inset 0px 0px 0px 0px #E6C43B; transition: 0.5s”.
(kod wygląda tak: .column-right-inner .widget li{background: #051832; margin-bottom: 5px; box-shadow: inset 0px 0px 0px 0px #E6C43B; transition: 0.5s})
Edycja tekstu linków
Znów wracamy do tego samego selektora. Kopiujemy go, a zamiast li wpisujemy a. Postępujemy analogicznie jak przy tytule, w tym, że ograniczmy się do koloru i kroju czcionki. Kolor niech będzie kolorem tła gadżetów (#E6C43B – ważne! Przy linkach i och kolorze wpisujemy za kolorem !important, bo inaczej nie chce działać.), a czcionką Arial. Na samym końcu, po średniku dopisujemy: display: block ← jest to blokowe wyświetlanie tekstu, dzięki któremu wystarczy najechać nawet obok i będzie dało się kliknąć, oraz (również po średniku) tansition: 0.5s.
Nasz kod wygląda tak:
.column-right-inner .widget a{font-family: arial; color: #E6C43B!important; display: block; transition: 0.5s}
Animacja po najechaniu.
Zaplanowałam pokazać w tym instruktażu prostą, ale efektowną animację dla linków. Teraz również wyjaśni się tajemnica box-shadow i transition. Box-shadow odpowiada za cień „pudełka”. Dopisując inset sprawiamy, ze cień będzie wewnątrz pudełka (działa na każdy z elementów, można nim się bawić do woli i zmieniać kolory ;)). Kolejne wartości to: przesunięcie cienia w prawo (gdy chcemy przesunąć w lewo używamy wartości ujemnej); przesunięcie cienia w dół (gdy chcemy w górę – wartość ujemna); rozmycie (jak przy podświetlaniu tekstu) oraz zasięg cienia (tworzy się tym ramka dookoła). Transition natomiast odpowiada za płynność przejścia animacji. Można w niej wpisywać dowolne wartości, wyrażane w sekundach. Optymalnym czasem przejścia jest pół sekundy (0.5s) lub jedna sekunda (1s).
Dość gadania o technicznych rzeczach, zróbmy tę animację!
Animujemy teraz wszystkie linki, jakie mamy w gadżetach. Znów wracamy do selektora, który męczymy. Kopiujemy główne określenie, a za nim, bez spacji, dopisujemy :hover. Ważne, by przed i po :hover nie było spacji, bo inaczej nie zadziała!
Wygląda to tak:
.column-right-inner .widget li:hover{}
Teraz uzupełnimy nasz wartości. Wpisujemy w wąsach: box-shadow: inset 300px 0px 1px 0px #E6C43B; transition: 0.5s, a następnie zapisujemy naszą pracę i wyświetlamy swojego bloga (w formie dla użytkowników) i najeżdżamy na dowolny link. Animuje się? Bosko!
Kod:
.column-right-inner .widget li:hover{box-shadow: inset 300px 0px 1px 0px #E6C43B; transition: 0.5s}
Link po najechaniu:
Przydałoby się również pozmieniać to głupie podkreślenie linku na coś ciekawszego, nie?
Znów wracamy do edytora, tym razem edytując tekst linków. Usuniemy z nich podkreślenie (text-decoration: none) oraz dodamy „rozdwojenie” po najechaniu (text-shadow: 3px 0px 0px black). Zmienimy też kolor na czarny (color: black!important). Nie zapominamy o dopisaniu płynności przejścia (transition: 0.5s)!
Poradzicie sobie już sami?
Kod:
.column-right-inner .widget a:hover{text-decoration: none ;text-shadow: 3px 0px 0px black; color: black!important; transition: 0.5s}
Efekt po najechaniu:
Odcinek instruktażu miał być w moim założeniu nieco krótszy, ale wyszło jak wyszło. W kolejnym zajmiemy się wyglądem pagera bloga oraz obszarem tekstu bloga (tym, w którym piszemy posty). Pozdrawiam i proszę o pytania, w przypadku, gdyby coś było niezrozumiałe!
Brak komentarzy:
Prześlij komentarz