poniedziałek, 24 lutego 2014

Wysuwane gadżety/menu cz.2

W części pierwszej przedstawiony był jeden ze sposobów, aby gadżety wysuwały się w pionie. Znalazło się też tam sporo "teoretycznych" zagadnień związanych z tym problemem, które według mnie odgrywają kluczową rolę w całym procesie tworzenia tego gadżetu. Dlatego zanim zapoznacie się z poniższą instrukcją polecam tam zajrzeć.

Kłopotliwą częścią w przypadku gadżetów wysuwanych w poziomie jest tytuł danego gadżetu. Potrzebny jest kod, który "przekręci" go, aby całość wyglądała naturalnie i spójnie. To jest kluczowe w tym przypadku i radzę zwrócić na to szczególną uwagę.

Modyfikacje dokonywane w szablonie Olympics.

Zaczęłam od stworzenia odpowiedniego gadżetu z menu, wpisałam odpowiedni tytuł i wrzuciłam do środkowej kolumny, tuż nad post.

Pierwszą rzeczą, którą należy zrobić jest skromna modyfikacja całego gadżetu. U mnie to był HTML2.
Chodzi o jego pozycje. Możecie użyć albo position:fixed ( jeśli chcecie, aby gadżet przewijał się razem z blogiem ) lub position:absolute ( jeśli ma zostać w miejscu ). Pozycje dalej modyfikujemy za pomocą top, bottom, right, left - w obu przypadkach jest to kompletnie inna sytuacja.
Position:fixed to pozycjonowanie względem całego okna przeglądarki, co może powodować mniej lub więcej problemów w zależności od sytuacji, natomiast position:absolute to pozycjonowanie względem elementu zawierającego ( tak, pytajcie mnie o co chodzi - wyczytane i niestety niezrozumiane przeze mnie ). Wydaje mi się, że chodzi tu o pozycję względem elementu typu content, main-inner czy body. Interpretujcie na swój sposób. My zajmiemy się tylko uzyskaniem odpowiedniej pozycji.
#HTML2 { position:fixed; top:200px; left:200px; padding:10px; background:#eee;}
Left robi tu za wartość przejściową, chodziło mi, aby umiejscowić gadżet, zobaczyć gdzie się znajduje, a następnie ponownie ustalać pozycję.
Teraz chwila zabawy z wyglądem gadżetu, czyli padding, background czy inne pomysły na wygląd Waszego gadżetu i przechodzimy do głównej atrakcji, czyli tytułu.

Tytuł gadżetu, czyli najbardziej upierdliwa rzecz. Ileż się trzeba z tym namęczyć zanim w końcu dojdzie się do pozycji idealnej. Ale nieważne, bierzemy się do roboty.
Zacznijmy od:
#HTML2 h2 { position:absolute;background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;}
Chodzi o to, aby właśnie pozycjonować tytuł względem gadżetu ( tak to wygląda według mnie ).
Gdy już zobaczymy jak nasz tytuł wygląda teraz i zanim zaczniemy krzyczeć, dodajmy jeszcze transform dla tekstu, aby się "obrócił" i wpasował się do naszych późniejszych zamierzeń.
#HTML2 h2 { position:absolute; transform:rotate(90deg); -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;}
No to teraz dopiero powinniście się za głowę złapać! :D Ale spokojnie, wypijcie łyka wody i do pracy rodacy, bo gadżet się sam nie zrobi.
Jeśli każdy komputer działa jak mój i na każdym komputerze wygląda to tak jak u mnie to tytuł powinien być nieco niewyraźny, zamazany. Tak jakby nie w swoim rozmiarze. Jeśli tak jest ( a nawet jeśli tak nie jest ) to musimy ustalić wielkość ( długość ) tytułu, aby była ona równa wysokości gadżetu.
W moim przypadku wyszło:
#HTML2 h2  { position:absolute; transform:rotate(90deg); -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);width:165px;background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;}
Tę długość trzeba znaleźć metodą prób i błędów. Jednak, gdy Wasz tytuł przestanie być zamazany, zauważycie, że jest już w 100% wyraźny to znaczy, że znaleźliście wartość i teraz musicie tylko znaleźć pozycję.
A to znowu jest męczące i trzeba na oko wymierzać czy to 10px czy 15px. Ale nieważne...
#HTML2 h2  { position:absolute; transform:rotate(90deg); -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);width:165px;background:#222;text-align:center;font-size:8pt;font-weight:400;font-family:Arial;color:#ddd;letter-spacing:2px;text-transform:uppercase;top:65px;right:250px;}
Tak to wyglądało u mnie. Chciałam ustawić tytuł z lewej strony, bo gadżet będzie się wysuwać z prawej ( na screenie z prawej, ale jeszcze nie wiedziałam co chce zrobić :P ).

Jak już to mamy to dalej jedziemy już z górki, przy okazji robiąc parę ewolucji w powietrzu. ( Nawiązanie do panów na roboczych zdjęciach ).

Pozycjonujemy gadżet, czyli to o czym poczytaliście już w części pierwszej. Ja to pozostawię z krótkim komentarzem, a mianowicie pokażę co ja wpisałam. Tak wiem, jestem leniuszek.
Najpierw umiejscowiłam gadżet na odpowiedniej wysokości i wyrównałam do prawej, tak, aby zobaczyć jak gadżet będzie wyglądać na hoverze:
#HTML2 { position:fixed; top:200px; right:0px; padding:10px; background:#eee;}
Dalej:
#HTML2 { position:fixed; top:200px; right:-315px; padding:10px; background:#eee;} 
Znowu musimy na czuja znaleźć wartość dla "schowania" się całego gadżetu. Jak już znajdziemy i będzie nam tak ładnie wystawać tytuł to zrobimy hover:

A hover jest już dziecinnie prosty:
#HTML2:hover { right:0px;}
 I o ile wszystko poszło dobrze, nigdzie nie brakuje średnika, kropki czy przecinka to możecie cieszyć się Waszym gadżetem:


28 komentarzy:

  1. Ferie ma, to pisze posty :> <3

    OdpowiedzUsuń
  2. Trochę nowych szablonów wpadło, nad instrukcją poznęcam się nastepnym razem, gdyż znowu mam ochotę zmienić szablon. Moje poszukiwania "tego" stylu jeszcze się nie zakończyły. Wręcz moge powiedzieć, że obecny cudak mnie irytuje! Noż kurczaki :D Ale wpierw muszę ogarnąć rzeczy z priorytetem, później zajmę się takim szablonem, który na szczęście nie ucieknie ;)

    OdpowiedzUsuń
  3. Bardzo przydatna instrukcja i mam przeczucie, że całkiem za niedługo z niej skorzystam ;p

    Enjoy!
    theyre.blogspot.com

    OdpowiedzUsuń
  4. Witam, mam pytanie co do szablonów na zamówienie. Przeszukałam FAQ, ale nie ma tam wzmianki o zamówieniach. Czy są one odpłatne? A może autroka sama pisze czy i kiedy je przyjmuje?Mogłabym prosić o więcej informacji na ten temat?

    OdpowiedzUsuń
  5. www.annaproszkin.pl - zapraszam do mnie, co prawda dopiero strona sie rozkreca, ale to kwestia czasu ;)

    OdpowiedzUsuń
  6. Wybacz, że o to zapytam... ale jesteś dziewczyną czy chłopakiem? Nie mogę wejść w zakładkę "O autorce a chętnie bym poczytała co tam jest napisane :D

    OdpowiedzUsuń
    Odpowiedzi
    1. to dziewczyna jest, tylko nazywa się i często zachowuje jak chłop :D i właśnie Kajak zakładka nie działa! :P

      Usuń
  7. Ahaha, nieźle to skomentowałaś :D Już Cię lubię :D

    OdpowiedzUsuń
    Odpowiedzi
    1. no weź, bo się zarumienię *.* i już kończę spam robaczki <3

      Usuń
  8. Tyler, czy można u Ciebie zamawiać szablony/nagłówki? Byłabym zainteresowana złożeniem zamówienia :)

    OdpowiedzUsuń
  9. Tyler, dlaczego w ogóle się nie odzywasz? Zarówno ja, jak i anionim powyżej i ktoś jeszcze pytamy o szablony i ich zamawianie, mogłabyś nam udzielić jakiś informacji?

    OdpowiedzUsuń
    Odpowiedzi
    1. Tyler jest chwilowo zajęta swoimi problemami i w najbliższej przyszłości raczej nie będzie możliwości złożenia zamówienia. Nie siedzi 24/7 na komputerze i potrzebuje trochę czasu dla siebie. :)

      Usuń
  10. Mogłabyś mi podać swój adres maila, bardzo mi zależy na kontakcie!

    OdpowiedzUsuń
    Odpowiedzi
    1. na samym końcu strony jest podany adres e-mail: bizarre1309@gmail.com ;)

      Usuń
  11. Szkoda :( Od dłuższego czasu poszukuję kogoś, kto zrobiłby mi szablon ale wszystkie te szabloniarnie robią takie dziwne te szablony, zbyt ozdobne. Tyler, robi na prawdę piękne szablony.

    OdpowiedzUsuń
    Odpowiedzi
    1. No niestety, pomogłabym, ale jestem beztalenciem w tej dziedzinie. ;D

      Usuń
    2. Hm... a może jednak nie? Masz może jakiś szablony/nagłówki swojego autorstwa? Chętnie zobaczę :)

      Usuń
    3. Oj nie, w grafikę bawiłam się kilka lat temu. Teraz to raczej nic nie tworzę ;D

      Usuń
    4. Sry to ja Loczek, tylko konta mi się pomyliły XD

      Usuń
  12. Tyler, pozostawiłam Ci w skrzynce mailowej długą wiadomość :) Bardzo proszę o odczytanie jej i w miarę możliwości szybki kontakt ze mną :)

    poczta: aleksandraguzik@op.pl
    gg: 19142742
    blog: przesolone-inspiracje.blogspot.com

    OdpowiedzUsuń
  13. Kiedy coś nowego?!

    OdpowiedzUsuń
  14. Pobrałam szablon Serenade na bloga: barwny-swiatek.blogspot.com :)

    OdpowiedzUsuń
  15. Cześć :) czy jest możliwość zamówienia u Ciebie szablonu na bloga?

    OdpowiedzUsuń
  16. nie działa mi to coś źle robię ale nie wiem co http://testowy2-blog-halucynowej.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Racyjka! Brakuje gładkiego przejścia.
      Do #HTML1 proponuję dodać -webkit-transition-duration: .50s; -moz-transition-duration: .50s; -o-transition-duration: .50s;
      Powinno wówczas ładnie i elegancko przechodzić z pozycji na pozycję. :)

      Usuń
  17. Mam pytanie(a raczej dwa): na tym: http://gimpgrafika.blogspot.com blogu mam z prawej strony wysuwaną zakładkę(obok menu). Chciałabym, żeby to, co jest normalnie niewidoczne, było normalnie niewidoczne (jeśli wiesz, o co mi chodzi ;p). Próbowałam "z-index:-1", ale wtedy w ogóle się nie wysuwa.
    I jeszcze jedno: chciałabym, żeby ta zakładka nie przesuwała się razem ze stroną. Zmiana "fixed" się nie sprawdza, bo zakładka ląduje w zupełnie innym miejscu na blogu. Byłoby mi niezmiernie miło, gdybyś coś konkretnego doradziła, bo już tracę cierpliwość. :)

    Mam nadzieję, że zbyt wiele nie wymagam. c:

    OdpowiedzUsuń
  18. Bardzo ciekawy i wyczerpujący wpis. Ja mierze się z blogiem i ze stroną jednocześnie. Sama nie dał bym rady ale korzystam z nazwa.pl tj. zamówiłam tam sobie projekt strony. W sumie przy mojej dizałalnosci to nie odrywam się od laptopa :P prowadze sklep internetowy

    OdpowiedzUsuń
  19. Witam. Chciałam zapytać, czy wiesz, jak zrobić menu "drzewkowe", tzn by po najechaniu na jeden z elementów menu, wysuwały się kolejne jego gałęzie? Pozdrawiam.

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler