środa, 3 grudnia 2014

Pierwszy post + jak zrobić menu na blogspot?

Witajcie, z tej strony Ilia - i pierwszy post na tym blogu. Właściwie nie wiem co mam tu napisać, jedyne co mi przychodzi do głowy, to że instrukcję które tu będę umieszczać - trochę pomogą. 
Pewnie wiele osób interesuje to jak zrobić menu z boku, jakieś tam proste beleczki itp. 

Zacznijmy od tego, że to nie jest nawet trudne żeby to zrozumieć - ale trzeba znać podstawy, selektory itd. 

Na początku podstawy naszej beleczki/menu.
{Najlepiej działać na szablonie Rewelacja, gdyż wtedy nie wyświetlają nam się kropeczki obok belek}


a:hover {text-decoration: none;} - ten krótki kod odpowiada za takie rzeczy jak podkreślenie linków, stron w menu.
background-color: #287b2d; - kolor tła podstawy/belki w menu
opacity: 3.9; - przezroczystość belek
color: #fff; - kolor czcionki napisu na naszej belce
text-align: center; - wyśrodkowanie napisu, oczywiście nie jest to konieczne - ale warto, bo estetyczniej to wygląda.
text-transform: uppercase; - uppercase to inaczej że nasz tekst jest pisany z DUŻEJ litery.
font-size: 13px; - wielkość czcionki
display: block; "Element będzie traktowany jako prostokąt i domyślnie będzie sam w linii"margin-right: -9px; - marginy, odpowiadają za "lokację" naszej belki, czyli np - możemy dać: -2px wtedy belki nam się trochę skurczą. 

I w sumie, może to już być koniec, możemy też dodawać inne "opcje" takie jak rodzaj czcionki itp. Ja osobiście wole zostawiać takie podstawowe czcionki blogera. 

Cały kod:
 #PageList1 a{
background-color: #287b2d;
opacity: 3.9;
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 13px;
display: block;
margin-right: -9px;

Wyszło to tak:


Możliwe jest także dodanie efektów po najechaniu, ja dam jeden przykładowy, i w następnej notce mogę wytłumaczyć. 


#PageList1 a:hover{
background-color: #93be8d;
color: #;
transform: duration(450deg); - może być zupełnie inny "transform" niż duration
-webkit-transform: duration(450deg); - o ile dobrze myślę to liczba w nawiasie odpowiada za szybkość "przenikania" "zmiany koloru" belki.
transition: all 2s;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
}
Po najechaniu: