11 lis 2014

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.

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!

19 komentarzy:

  1. Witam witam :) powodzenia z nauką :) a co do prac to są śliczne. Chyba najbardziej podoba mi się drugi nagłówek :) Pozdrawiam <3

    OdpowiedzUsuń
  2. chandelier
    Ojejjj! W końcu notka na maudlaisy! Nawet nie wiesz jak za tym tęskniłam :Cc
    Co do tego co napisałaś na końcu, chętnie zobaczyłabym tą pracę w szablonie *.*
    Notka świetna! Przepiękne nagłówki, świetny szablon [pokochałam tą kolorystykę] i tekstury (które biorę ze sobą na Dare to Create) i świetna instrukcja na to menu w kwadratach. Jak uda mi się to opanować i wprowadzić je w mój szablon to z pewnością poinformuję o tym, że to z twojej instrukcji. Dziękuję! x
    Pozdrawiam! :)

    OdpowiedzUsuń
  3. Witam po długiej przerwie. Prace są cudowne a przede wszystkim ta pierwsza sygnaturka jest boska. Podkradam kod css i powodzenia w dalszej nauce. ;D

    OdpowiedzUsuń
  4. chandelier
    pobieram tekstury :)

    OdpowiedzUsuń
  5. Jak wczoraj dodałaś prace na da to tak czułam, że nie długo mogę się spodziewać jakiegoś posta. ;D I się nie zawiodłam!
    Ojej, to normalnie mnie przeraziłaś i chyba specjalnie nie będę zdawać..
    Nie no żartuję. W takim razie będę celebrowała każdą wolną chwilę. ;D
    O to ja wam gratuluję! :)
    Prześliczne nagłówki, aż normalnie się zakochałam. A ten szablon? Cudowny!
    No już nie mogłam się doczekać tych tekstur! W bazie którą mi przysłałaś prezentowały się wyśmienicie i tutaj też tak jest! ;D
    chandelier
    Pobieram tekstury. Z CSS pewnie też kiedyś skorzystam. :)
    Pozdrawiam!! ;*

    OdpowiedzUsuń
  6. Hej! Zdązyłam już zobaczyć nagłowek na DA-jest przepiękny! Co do tych nagłówków ciężko wybrać faworyt :) Z instrukcji CSS skorzystam,pewnie dopiero jak będe robiła nowy szablon.Chandelier.Pobieram tekstury. Pozdrawiam i czekam na kolejny post ;* :)

    OdpowiedzUsuń
  7. Patrzę na pierwszy nagłówek i zachwycam się nim jako całością, choć tej pary akurat nie lubię. Wyobrażając sobie tam inne osoby po stokroć bardziej mi się podoba.
    Poza tym, przyjemna kolorystyka szablonu.

    OdpowiedzUsuń
  8. Kod css na pewno mi się przyda :) Dziękuję <3

    OdpowiedzUsuń
  9. Szablon z Holland I Brianem jest cudowny!! Za paringiem Allison x Isaac nie przepadam, ale muszę przyznać, że nagłówek wygląda świetnie. Przede wszystkim jednak miło było zobaczyć nowy post po takiej długiej Twojej nieobecności :)

    OdpowiedzUsuń
  10. Świetne prace :) Gratki z powodu pół-rocznicy :D
    Pobieram tekstury

    OdpowiedzUsuń
  11. chandelier
    Klasa maturalna to zło, ale dasz radę!! Szablon ze Stydią jest przepiękny! Reszta grafik też jest bardzo ładna :)
    Pobieram tekstury.
    Pozdrawiam :)

    OdpowiedzUsuń
  12. Hej! :* Nagłówek na DA jest cudny! Może zrób z nim szablon główny? Nagłówki z nowej notki piękne. Pierwszy mi się najbardziej podoba ;D Teksturki też są świetne!
    Powodzenia w szkole ;)
    Pozdrawiam! :*
    chandelier
    Pobieram nagłówek z True Blood ;)

    OdpowiedzUsuń
  13. Cześć!
    Prace są jak zawsze idealne. Wszystkie nic dodać nic ująć, a css w szablonie to już w ogóle mistrzostwo!

    chandelier
    kradnę tekstury :)

    Pozdrawiam xx

    OdpowiedzUsuń
  14. chandelier

    Zgarnęłam trochę koloryzacji, tekstur i patterny. :)
    Dziękuję! Gromadzisz tutaj cudne pomoce. ;3

    Co do notki - najbardziej chyba podoba mi się pierwszy nagłówek. Taki, taki... W Twoim stylu. ^^

    OdpowiedzUsuń
  15. Dokładnie Cię rozumiem, mam dokładnie to samo z klasa maturalną w dodatku nauczyciele naciskają u mnie z tych zawodowych przedmiotów.
    Nagłówki oba prześliczne jednak bardziej przypadł mi do gustu ten drugi,
    Szablon równie dobrze się prezentuje, jest prześliczny :D A sygnaturka na poczatku posta to istne cudo<3
    Pozdrawiam ;*

    OdpowiedzUsuń
  16. O! Notka na maudlaisy! I prace jak zwykle śliczne. Bardzo podobają mi się oba nagłówki, ale pierwszy jest zdecydowanie moim faworytem. Twoje teksturki tak mi się spodobały, że je sobie pobieram {chandelier}. Powodzenia z nauką <3
    Pozdrawiam serdecznie!

    OdpowiedzUsuń
  17. chandelier
    pobieram teksturyki :D na unfaithful-heaven
    no i użyję kodu na menu i dodam credit w notce z nim!
    Pozdrawiam!

    OdpowiedzUsuń
  18. chandelier
    skradnę teksturki :D

    OdpowiedzUsuń

Archiwum bloga

Obserwatorzy