Jednym z podstawowych gadżetów jakich używamy są strony. Jednak co nam po nich, skoro wyglądają jak szkielet, bez mięśni i skóry. Oczywiście kto jak lubi, ale je osobiście wolę, kiedy ładnie i estetycznie się prezentują. W dzisiejszej instrukcji (pierwszej z serii "Gadżety", a pod serii "Strony") pokażę wam jak wykorzystać minimalizm oraz gifa we współpracy z CSSem.
Przejdźmy zatem do sedna sprawy.
Live podgląd >> kilk.
1. Pierwsze co musimy zrobić to niewątpliwie dobrać sobie kolory, których będziemy używać oraz gifa. Ja wybrałam szarości [#ddd, #2a2a2a] i tego oto gifa - kilk.
2. Następnie wchodzimy w Motyw>Dostosuj>Dodaj arkusz CSS. Kiedy mamy już wolny arkusz, przechodzimy do prawdziwej pisaniny.
3. Kody i tłumaczenia(szczegółowe na samym dole)
#PageList1 li a:link, #PageList1 li a:visited {
display: block; /* element wyświetlony zostanie w bloku(odstęp z góry i z dołu)*/
background: #ddd; /*tło karty*/
color: #2a2a2a; /*kolor tekstu*/
margin: 2px 10px; /*margines*/
padding: 3px 0; /*podobne do marginesu jednak działa wewnątrz komórki*/
font-size: 14px; /*rozmiar czcionki*/
font-family: 'Asar', serif; /*czcionka*/
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
#PageList1 li a:hover {
background-image: url(https://68.media.tumblr.com/19cc0c3ddfbd5ea5e9dd36e303b81622/tumblr_o61pfmzSc91rrvtcbo1_500.gif) !important;
background-position: center top; /*pozycja tła*/
text-shadow: .5px .5px 1px #fff; /*cień tekstu*/
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
4. Następnie należy zmiany w arkuszu zastosować do bloga, klikając > Zastosuj do bloga. Jeśli coś nam się nie podoba możemy wprowadzić poprawki.
#PageList1 - jest to identyfikator naszego gadżetu; identyfikator to atrybut elementów html, który pomaga je odróżniać
display - pozycjonowanie, wyświetlanie
block - jest to sposób pozycjonowania/wyświetlania, oznacza to, że element zostanie wyświetlony w bloku(odstęp z góry do dołu)
margin - jest to margines; {możecie dowolnie zmieniać wartości
padding - jest to w pewnym sesnie margines, działa on jednak wewnątrz komórki { możecie zmieniać
font-size - rozmiar czcionki; można zapisywać w: px, pt i procentach; {możecie dowolnie zmieniać
font-family - jest to font, czyli czcionka, jakiej używamy, polecam najbardziej Arial, jeżeli chodzi o strony
transition - efekt animacji, przejścia; możemy go zobaczyć gdy najedziemy na element myszką {możecie zmieniać wartość, czyli 1s
:hover - to właśnie za pomocą tego selektora następuje efekt transition
:visited - oznacza już odwiedzony link; kiedy zapisujemy go z tym samym kodem co :link oznacza to, że odwiedzony link i jeszcze nieodwiedzony link, będą wyświetlane w taki sam sposób
background-position - jest to pozycja obrazka w tle; możemy to określać słowami tak jak w podanym przeze mnie przykładzie, czyli "center top" co oznacza, że pokaże nam środkowo-górną część obrazka, można też posługiwać się wartościami w pikselach, ale jest to bardziej czasochłonne i męczące {możecie zmieniać
text-shadow - jest to cień tekstu; pierwsza i druga wartość oznaczając, w którą stronę będzie padać cień, w przykładzie pada w dół na prawo; trzecia wartość oznacza rozproszenie cienia, co oznacza, że im większa wartość tym bardziej rozproszony będzie cień {możecie zmieniać
Mam nadzieję, że instrukcja przypadła wam do gustu i co najważniejsze pomogła. Jeśli macie jakiekolwiek pytania zadawajcie je pod tym postem, bądź w zakładce "Pytania".
Do następnej notki!
Brak komentarzy:
Prześlij komentarz