menu

6 lut 2014

11. 1004(Angel)
ikon ikon ikon ikon
Hejka :) Szczerze ostatnie dni niestety spędziłam na leniuchowaniu. Troszkę posprzątałam w domciu ale tak to poza tym nic pożytecznego nie zrobiłam, co zresztą mnie dobija. Także na dzisiejsza notkę nie przygotowałam nic specjalnego bo tylko cztery nagłówki w tym drugi zrobiony za pomocą tutoriala od Brill natomiast trzeci od Carllton. Mam dziś także teksturki wyjątkowo w paczce ponieważ nie chciało mi się ich linkować. No i na koniec malutka instrukcja na trzęsące menu. mam nadzieję, że komuś się przyda. :)
Jak zauważyliście zmieniłam szablon główny. Co o nim sądzicie? Mam wyrzuty sumienia, ze tak szybko je zmieniam. Postaram się wytrzymać z tym dłużej.
Dodałam także do menu zakładkę 'obserwuj', także jeśli lubisz mój blog i chcesz być na bieżąco to kliknij i obserwuj. :)
Oglądaliście ostatni odcinek teen wolf? Strasznie mi się podobał. Nie mogę się doczekać kolejnego odcinka. Ciekawa jestem co będzie teraz ze Stilesem. Mam tylko nadzieję, że nie zepsują jego postaci i wciąż będzie śmieszny jak dotychczas. Nie mogę się także doczekać 2 sezonu my mad fat diary. Ogłada ktoś może?
Już żeby się nie rozpisywać zachęcam do pobierania. Pamiętajcie o głosowaniu na mój blog w sądach (linki do niech znajdziecie w gadżecie obok). Z góry dziękuję za wszystkie głosy ;**
Do usłyszenia w kolejnej notce. Pozdrawiam cieplutko :)

header header
header header
texture
Jak zrobić trzęsące się menu takie jak poniżej? gif
Wchodzimy w układ i wybieramy dodaj gadźet "HTML/JavaScript" w nim wklejamy poniższy kod.
<a href="http://"><div class="shake">link1</div></a>
<a href="http://"><div class="shake">link2</div></a>
<a href="http://"><div class="shake">link3</div></a>
<a href="http://"><div class="shake">link4</div></a>
<a href="http://"><div class="shake">link5</div></a>
W obszar zakreślony na kolor czerwony wklejamy nasz link, w niebieski nazwę naszej zakładki natomiast to co zaznaczyłam kolorem fioletowym to nasz selektor, który także możemy nazwać jak chcemy pod warunkiem, w kolejnym kodzie tez pozmieniamy nazwy. Kolejnym krokiem jest dodanie naszego kodu CSS, więc wchodzimy w zakładkę szablon, dostosuj, zaawansowane, dodaj arkusz CSS i wklejamy poniższy kod.
.shake  {
margin-top: 200px;
text-decoration: none;
padding: 2px;
width: 75px;
background: #ff0054;
text-align: center;
color:#000;
display: inline-block;
 }
.shake:hover,
    .shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
    }
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
 }
Cześci zaznaczone fioletowym kolorem muszą posiadać tą samą nazwę co nas selektor w kodzie html! Możemy zmienić dokładnie wszystko w pierwszej klamerce albo całkowicie się jej pozbyć natomiast dwóch ostatnich nie edytujemy ani nie usuwamy. No i gotowe :)

24 komentarze:

  1. Szablon bardzo ładny :) Teen Wolf nie oglądam,ale z niecierpliwością czekam na kolejny sezon Once Upon a Time :)Nagłówki cudne szczególnie 2 i 3.Informuję,że skorzystałam z tutoriala z poprzedniej notki,efekt u mnie na blogu,pozdrawiam :)

    OdpowiedzUsuń
  2. Pierwszy nagłówek to coś najcudowniejszego na świecie! Serio, jest nieziemski *o*
    Trzeci też należy do moich faworytów <3
    Oczywiście pobieram twoje cudowne texturki <3
    Instrukcja genialna tak samo jak ten efekt! Ja nie wiem skąd ty bierzesz tyle pomysłów!
    Pozdrawiam gorąco ;**

    OdpowiedzUsuń
  3. Szablon główny jak zwykle śliczny <3.
    Nie wiem jak ty tworzysz takie cudne nagłówki *.*
    Pierwszy najlepszy. Zakochałam się w nim <3.
    Pobieram teksturki.
    Z instrukcji może skorzystam, jak czegoś znów nie sknoce...

    OdpowiedzUsuń
  4. Super szablon główny *-*
    Nagłówki są genialne! Strasznie mi się podoba ten ostatni, ma takie ładne kolorki. A instrukcja na menu jest świetna. Chciałam powiadomić, że pobieram stocki z tej notki: http://prettysmilex.blogspot.com/2014/01/9-say-something.html#comment-form i wszystkie z tej samej notki koloryzacje. Pozdrawiam cieplutko!

    OdpowiedzUsuń
  5. Szablon główny jest przepiękny! Uwielbiam te kolorki!
    Wszystkie nagłówki są świetne, ale 1 i 2 to moje faworyty :) Pobieram teksturki :)
    Pozdrawiam :)

    OdpowiedzUsuń
  6. Jak to miło widzieć swoje ikonki na czyimś blogu, zwłaszcza gdy jest to blog jeden z ulubionych *.* Dziękuję, że je wstawiłaś! <3 Nowy szablon piękny. Strasznie podobają mi się kolory i jak dla mnie to największa zaleta, ale grafika też jest niczego sobie. Ogólnie jest pięknie :) Pierwszy nagłówek powalił mnie na łopatki. Totalnie. CUDO! Po tekstury wrócę i dam Ci znać. Pozdrawiam! <3

    OdpowiedzUsuń
  7. Jeej!!!! Świetny nowy szablon!!! <33 Te kolorki, nagłówek i CSS!! *.*
    Nagłówki też przepiękne, a ten z mojej instrukcji wyszedł ci nawet lepiej niż mi samej xD
    Po texturki wrócę później :*
    Trzymaj się kochana <3

    OdpowiedzUsuń
  8. Szablon główny jest śliczny, ma świetne kolory i css. :)
    Ja jeszcze nie miałam okazji oglądać nowego odcinka teen wolf ale w tym tygodniu na pewno to zrobię bo muszę się dowiedzieć, co ze Stilesem.
    Nagłówki wyszły Ci pięknie ale moim faworytem jest zdecydowanie pierwszy, połączenie czerwieni z czernią zawsze zdaje egzamin. <3
    Pozdrawiam serdecznie. :*

    OdpowiedzUsuń
  9. Nowy główny jest śliczny, cudowne kolory i css :)
    Teen Wolf niestety nie oglądam, ale zastanawiam się nad tym. Polecasz?
    Nagłówki zrobiłaś świetne, ale moim faworytem jest ostatni <3
    Pozdrawiam ciepło :*

    OdpowiedzUsuń
    Odpowiedzi
    1. Wiedziałam, że zapomnę dopisać :/ Pobieram teksturki :)

      Usuń
  10. Hejo! :))
    Mam malutkie pytanie dotyczące jednego z szablonów. Chciałam pobrać ten: http://imageshack.us/a/img827/8664/uka.gif No i właśnie tutaj mam pytanie - czy mogłabym zmienić to zdjątko? Wolę się spytać ^^ Oczywiście credit dodam standardowo :3

    OdpowiedzUsuń
    Odpowiedzi
    1. Pewnie nie ma problemu, możesz zmienić :)

      Usuń
    2. Dziękuję bardzo! ^_^
      Pobrałam na: http://black-one-shots.blogspot.com/
      Pozdrawiam! :3

      Usuń
  11. Pobrałam:
    instrukcje z materiałami z poprzedniego postu :)
    z tego pobrałam teksturki:)
    oraz z postu numer 6 tekstury do ikonek
    Bardzo podoba mi się ostatni nagłówek.
    Pobrane rzeczy wykorzystam tutaj: http://graphic-rhythm.blogspot.com/ (mój prywatny blog graficzny, na który serdecznie zapraszam ;)) oraz tutaj: http://graphicpoison.blogspot.com/
    Pozdrawiam, Lady Spark

    OdpowiedzUsuń
  12. Ja także dodałam Twojego bloga do obserwowanych :) Pozdrawiam;* Ps.nowy post u mnie :):)

    OdpowiedzUsuń
  13. Jejuuuu te nagłówki są śliczne. Mi najbardziej podoba się pierwszy i ostatni. Tekstury również świetnie się prezentują , pobieram je. Twój blog został dodany do zakładki Kredyty. Zapraszam do mnie ^.^
    Pozdrawiam

    OdpowiedzUsuń
  14. Pobieram sobie texturki. Są nieziemskie. Pobrałam także textury z notki 3, 5, 6 i 7 ;)

    OdpowiedzUsuń

©2019 - prettysmilex