niedziela, 8 lutego 2015

[3] Instrukcja - Patent na menu. + Grafika

No cześć :3
Każda z graficzek pewnie miała tak że zastanawiała się co zrobić z menu by wyglądało. O wow ale ma efekt takie ciekawe xD Haha. (Ja naprawdę się czasem zastanawiam nad tym czy ze mną jest wszystko 'Okay') Nevermind. Oprócz tego że chciałybyśmy mieć ciekawe menu to chciałybyśmy znaleźć kody które nie będą zbyt trudne.. Ja na przykład znam tyle fajnych pomysłów na menu, ale jak widzę że instrukcje na nie są robione w HTML gdzie kody wyglądają jak napad mrówek na białą kartkę.. No cóż przeraża to i zniechęca xD (bynajmniej mnie)
Tak więc dziś zrobimy sobie menu którego efekt jest napisany gdzieś przez kogoś w HTML, a ja to ładnie przełożyłam na CSS -Tak zero HTML (no chyba że wstawienie widgetu) tylko sam kod CSS który daje nam taki sam efekt. -Nie ma to jak Luna nerd xD haha.
A więc zabieramy się do roboty :3




1.Mamy sobie menu w widgecie HTML/JavaScript. Wchodzimy w projektanta szablonów, po czym szukamy naszej przegródki na CSS. I piszemy sobie kod który ma sprawić jak będzie wyglądać nasze menu. U mnie wygląda ten kod |tak| Polecam również inne wyglądy na menu |tu|
Pamiętajmy że menu musi być unieruchomione!

2.Okay gdy nasze menu jest już zrobione piszemy sobie taki kodzik który umożliwi nam taki efekt jak na podglądzie :3


#menu a:nth-child(1):after {
  content:"Zajrzyj tu"; /*tekst do wyświetlenia*\
  position:fixed;
  visibility:hidden; /*tekst niewidoczny*\ }

#menu a:nth-child(1):hover:after {
  content:"Zajrzyj tu";  /*tekst do wyświetlenia*\
  visibility:visible; /*tekst widoczny*\
  color:black;
  background:white;
  position:fixed;
  padding:0px 5px;
  right:390px; /*po której stronie ma się znaleźć*\
  top:164px; /*na jakiej wysokości ma się znaleźć*\
  border: 1px solid RGBa(0,0,0, 0.7);
  box-shadow: 5px 3px 4px RGBa(0,0,0, 0.4);
  transform:perspective(400px) rotate3d(8,-0,0,360deg);
  -moz-transition:all 2s;
  -webkit-transition:all 2s;
  -o-transition:all 2s; }

Cała filozofia w tym kodzie polega na zmienieniu własnego napisu i zmienienia cyfr w right i top. Gdy to zmienimy powtarzamy ten kod i zmieniamy z cyfry w selektorze, by zadziałał on na następnym i następnym linku.

U mnie cały kod wygląda | o tak |
I jak wam się podoba ta krótka instrukcja? Ciekawa? Przydatna? -Dajcie znać w komentarzach :3


A teraz czas na grafikę.W której ostatnio trochę kombinuję..

Kochana twój szablon pojawi się w następnej notce (za tydzień). Mam nadzieję że nie zabijesz mnie za to :3 


(GRAFIKĘ OTWÓRZ W NOWEJ KARCIE)

Nagłówek | Tło na Facebooka
-Z tym nagłówkiem będzie szablon w następnej notce-

Nagłówek

Bannery
(moje pierwsze w życiu *-*)



Aha moi drodzy zapraszam was na moje opowiadanie:

10 komentarzy:

  1. W końcu szablon jest wizytówko a menu wrotami do bloga. Bardzo mi się podoba ten czarny nagłówek - mrok, tajemniczość i oryginalność przyciąga ;))

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję i cieszę się że nagłówek ci się podoba. (miałam do niego wielkie wątpliwości, czy go w ogóle dodać xD)

      Usuń
  2. Hej!Informuję,iż skorzystałam z instrukcji na menu http://graphic-catchers-illusion.blogspot.com/2014/11/2-instrukcja-123-kolumnowe-menu-w-html.html kredyt dodany tutaj:http://bleeding-through.blogspot.com/2014/04/spis-tresci.html Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ooo, cieszę się że ci się przydała :D

      Usuń
  3. Instrukcja z pewnością się przyda :) Nienawidzę grzebać w HTML'u.
    Bannery bardzo mi się podobają ^^

    OdpowiedzUsuń
  4. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  5. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  6. Piękne dodatki, więc się nie gniewam.
    Chociaż przyznam, że jak zobaczyłam, że wstawiłaś nową notkę, to już miałam mały zawał i dziki płacz. Ale nie, nie mam zamiaru ostrzyć noża, bo im dłużej poczekam tym piękniejsze cudeńko dostanę od ciebie, czuję w kościach, że będzie wspaniałe ;;;
    Ogółem cud, miód i orzeszki... jak zawsze.
    xoxo, Faith.

    OdpowiedzUsuń
  7. Mały upominek dla Ciebie: http://oi58.tinypic.com/23hoc2o.jpg

    OdpowiedzUsuń
  8. Fajny post i fajny blog z grafika zapraszam na mój blog z grafika : Mój Blog - klik!

    OdpowiedzUsuń

Graphic Luna
Dawniej graphic-catchers-illusion
Blog wraca już za niedługo!