032. Popołudnia bezkarnie cytrynowe

Cześć wszystkim. Dziwnie jest coś tutaj pisać, po tak długiej przerwie. Zapewne się zastanawiacie, czym była ona spowodowana, otóż nie będę w tym względzie zbytnio oryginalna. Po prostu w klasie maturalnej nie ma czasu na nic. Trzy razy w tygodniu mam korepetycje, poza tym do szkoły muszę się uczyć już nie tylko z bieżącego materiału, ale także z powtórek. Nawet na weekendzie muszę siedzieć i przerabiać zadania. I tak w kółko od dwóch miesięcy.. szkoda nawet się rozpisywać.

Od czasu do czasu może i znalazłam chwilkę, żeby otworzyć photoshopa i spróbować coś zrobić, także mam lekki zapas materiałów. Powiedzmy, że wystarczy na jeszcze jedną notkę. Co potem? Nie mam pojęcia. Jeśli dalej to wszystko będzie tak wyglądało, to odrobinę czasu wolnego będę mieć dopiero na święta. 

Co u mnie oprócz nauki? Tak naprawdę niewiele, tak jak zresztą pisałam wam wyżej. Jakiś czas temu wróciła mi miłość do comy. Gdyby udało mi się pójść na koncert, to już w ogóle byłabym w niebie. Przeszkodą jest przede wszystkim ten brak czasu. Również w tym miesiącu będę obchodzić ze swoim chłopakiem pół roku trwania naszego związku. Z tego akurat cieszę się najbardziej i nie mogę doczekać.

W ostatnim poście zapowiedziałam już, co pojawi się w dzisiejszym, więc już nie będę niepotrzebnie przedłużać i zapraszam do oglądania :)

Uwaga: tak jak na podglądzie, w menu jest miejsce na dokładnie 6 linków, powinny one być na tyle krótkie, aby mieściły się w kwadracikach.

pobierz szablon

Menu w kwadratach! (na 6 linków) 

Zastanawiałam się nad jakimś ciekawym efektem na menu poziome, ale bez bawienia się w żadne przekładanie stron pod nagłówek, ani przerzucanie do gadżeta html/javascript. Po ponad godzinie prób i nerwów, w końcu udało się napisać odpowiedni kod. Efekt jaki możecie zobaczyć w szablonie powyżej to sama zabawa CSS. Mam nadzieję, że instrukcja się wam spodoba i przyda!

#PageList1 h2{
display: none;
}
#PageList1 a{
font-weight: normal;
font-family: 'tahoma';
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #d9e1ed;
}
#PageList1{
width: 500px;
}
#PageList1 li:nth-child(1){
width: 60px;
padding: 25px 5px 25px 5px;
text-align: center;
}
#PageList1 li:nth-child(2){
width: 60px;
padding: 25px 5px 25px 5px;
text-align: center;
position: relative;
top: -65px;
left: 87px;
}
#PageList1 li:nth-child(3){
width: 60px;
padding: 25px 5px 25px 5px;
text-align: center;
position: relative;
top: -130px;
left: 173px;
}
#PageList1 li:nth-child(4){
width: 60px;
padding: 25px 5px 25px 5px;
text-align: center;
position: relative;
top: -195px;
left: 259px;
}
#PageList1 li:nth-child(5){
width: 60px;
padding: 25px 5px 25px 5px;
text-align: center;
position: relative;
top: -260px;
left: 345px;
}
#PageList1 li:nth-child(6){
width: 60px;
padding: 25px 5px 25px 5px;
text-align: center;
position: relative;
top: -325px;
left: 430px;
}
#PageList1 li:nth-child(odd){
background: #4f0213 !important;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
#PageList1 li:nth-child(odd):hover{
background: #d9e1ed !important;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
#PageList1 li:nth-child(even){
background: #041008 !important;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
#PageList1 li:nth-child(even):hover{
background: #d9e1ed !important;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}

Kod jest dosyć długi i może wyglądać strasznie, ale to tylko pozory. Większość poleceń to po prostu odpowiednie pozycjonowanie wszystkich linków. Dla ułatwienia pogrubiłam na was wartości, które spokojnie możecie zmieniać bez żadnych konsekwencji - czyli po prostu kolory. Jak widzicie jest ich tylko pięć, więc dostosowanie kodu do waszych potrzeb, nie powinno wam zająć dużo czasu :> 

Pamiętajcie, że przy użyciu tego kodu proszę o informację o tym w komentarzu, a także dopisek (np. instrukcja na menu z maudlaisy) w widocznym miejscu na blogu, na którym wykorzystany jest kod. Naprawdę długo się męczyłam, aby wszystko działało poprawnie, więc proszę o uszanowanie mojej pracy. 

Przed pobraniem czegokolwiek, proszę o zapoznanie się z regulaminem. Jak zawsze czekam na wasze propozycje dotyczące kolejnej oraz następnych notek, a także całego bloga. Czego według was publikuję za mało, czego jest za dużo? Wasze opinie naprawdę mogą mi bardzo pomóc.

Na dzisiaj to wszystko. Tak jak mówiłam, mam lekki zapas prac na kolejny post, ale nie wiem, kiedy znajdę czas, żeby go dla was napisać. Postaram się jeszcze w tym miesiącu, ale może być ciężko.

Na koniec jeszcze mała niespodzianka. Ostatnio stwierdziłam, że ożywię nieco swojego deviantarta i dodałam tam tę pracę. Pytanie dla czytających notkę uważnie: co według was byłoby najlepsze - zrobić z tą pracą szablon, tutorial, czy dodać normalnie lub z plikiem .PSD do ściągnięcia? Mam nadzieję, że pomożecie mi podjąć decyzję. Do napisania!