Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Czas przejścia efektów

||
Wzięłam pod uwagę jedną w propozycji, które cały czas możecie podrzucać. Mianowicie, co zrobić, aby każdy efekt nazywany najprościej "po najechaniu" trwał dłużej. 

Instrukcja nie jest skomplikowana, będziemy potrzebować tylko tego:
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s; 
Linijki poza pierwszą odpowiadają kolejno za przeglądarki: Firefox, Safari i Chrome, Operę. Naszym zadaniem jest wkleić tę część kodu do części :link oraz :hover. Przykład? Proszę bardzo:


#PageList1 a:link, #PageList1 a:visited {color: white;
background: black;
text-align: center;
display: block;
padding: 2px;
margin: -5px;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s; }

#PageList1 li a:hover {color: black;
background: white;
text-decoration: none;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}
W pierwszym wypadku (:link) ustalamy czas dla powrotu efektu do jego pierwotnej postaci, czyli "po zjechaniu". Zaś przy :hover ustalamy właśnie czas efektu "po najechaniu".

Możemy dowolnie zmieniać wartość 1s. Może ona wynosić 0.5s (pół sekundy), 1s, 2.5s itd. Przy czym pamiętamy, że zamiast przecinka dajemy kropkę.

Nie zawsze musimy dodać ten efekt zarówno do :link i :hover. Można ustalić efekt tylko "po najechaniu", czyli do :link, ale wtedy w momencie zjechania efekt od razu wróci do swej postaci, czyli bez żadnej płynności.

To chyba wszystko. Jeśli będą jakieś pytania, oczywiście odpowiem. ;)

3 komentarze

  1. Ten blog jest świetny, naprawdę. Pierwsze, to cudowny wygląd. Marzy mi się podobny, jest niestandardowy i bardzo oryginalny.
    Dziękuję za porady i Wasz blog będzie moją inspiracją. Może kiedyś odważę się wykonać podobne dzieło z Waszą pomocą.
    Pozdrawiam. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękujemy. Jak dla mnie to wstyd się przyznawać, że obecny szablon jednak nie jest naszym dziełem. Uczymy się razem z Czytelnikami. :)
      Pozdrawiam!

      Usuń
    2. Wielka szkoda, bo chciałam dopytać o podobne wykonanie. Ale czekam na kolejne instrukcje, na pewno się przydadzą. ;)

      Usuń