Wolne podświetlenie przycisków.

Question

Witam wszystkich forumowiczów,

Zainspirowany działalnością na youtube Pana Mirosława Zelenta postanowiłem napisać sobie strone. Nie wygląda to źle ale w pewnym momencie się zatrzymałem. Nie potrafie zrobić wolno podświetlanych przycisków takich jak na miroslawzelent.pl (na logo to bardzo fajnie widac). Z samym podświetlenie to nie miałem problemy bo logo podświetliłem tak:

#image
{
margin-left: auto;
margin-right: auto;
width: 700px;
opacity:0.5;
}

#image:hover
{
opacity:1.5;
}

A przyciski w menu tak:

.nav
{

background-color:#6fef67;

letter-spacing: 3px;
float: left;
min-width: 200px;
height: 30px;
padding: 10px;
text-align: center;
color: white;
}

.nav:hover
{
background-color: white;
color: #6fef67;
}

 

Po najechani na nie myszka podświetlają się tak skokowo (jest -> nie ma, nie ma -> jest), a chce zeby to sie podswietlalo bardzo powoli.

Answer 1

Dodaj do #image np:

transition: all .3s linear;

W dokumentacji znajdziesz co jest do czego.

Poza tym opacity przyjmuje wartości z przedziału od 0 do 1.

Comments

Dziekuje za odpowiedz. Odrazu wszystko mi sie rozjaśniło :)

---

No i oczywiście zapomniałem "ochrzanić" za brak poprawnej prezentacji kodu.

Bonusowo masz fiddla:

http://jsfiddle.net/5cdmo7p1/1/

---

Jedna linijka kodu + świetna stronka! Genialnie

---

A na sam koniec: ustawiaj "najlepszą odpowiedź" jeśli jakąś dostałeś. Ułatwi to kolejnym ludziom odnalezienie działającego rozwiązania.

I nie, nie musi to być moja odpowiedź ;)

---

Nie musi ale będzie

Answer 2

Należy skorzystać z właściwości transition dostępnej od CSS3.

• Więcej o przejściach w CSS3.

W twoim wypadku należy dodać do #image

transition: opacity 2s;

to spowoduje, że zmiana widoczności będzie trwała 2 sekundy.

Mała uwaga przy opacity stosuje się wartości od 0.00 do 1.00.

Comments

Dziekuje za odpowiedz. Odrazu wszystko mi sie rozjaśniło :)