Twórca wątku
Patryk
(@devill3z)
Dzieki, troche poczytalem ale jakos nie moge wyczaic jak to dziala. Bylbym wdzieczny jakbys krok po kroku opisal jak zrobic zeby ten obrazek (przykladowo): http://i182.photobucket.com/albums/x300/socialbitz/Europeskate%20July%202009/facebook-grey.png
po najechaniu myszka zmienil odcienie na niebieski, tak jak na normalmym logo facebooka.
Z gory dzieki za odpowiedzi, dopiero sie ucze 🙂
Twórca wątku
Patryk
(@devill3z)
Czesc, po kilkugodzinnych probach nadal nie udalo mi sie osiagnac tego, co chcialem, ale stworzylem cos podobnego. Jesli ktos potrzebowalby tego to wyjasniam jak to zrobic:
Najpierw komponujemy taki kod:
.nazwa klasy (class)
{
width:25px;
height:25px;
transition:opacity 1s;
-moz-transition:opacity 1s, -moz-transform 1s; /* Firefox 4 */
-webkit-transition:opacity 1s, -webkit-transform 1s; /* Safari and Chrome */
-o-transition:opacity 1s, -o-transform 1s; /* Opera */
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
.nazwa klasy (class):hover
{
width:25px;
height:25px;
transform:fade;
-moz-transform:fade; /* Firefox 4 */
-webkit-transform:fade; /* Safari and Chrome */
-o-transform:fade; /* Opera */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
ta klasa ujmujemy obrazek ktory jest w autentycznym kolorze, np. logo facebooka niebieski… i gotowe. Mam nadzieje, ze komus pomoge tym postem 🙂 Pozdrawiam.
Czesc, po kilkugodzinnych probach nadal nie udalo mi sie osiagnac tego, co chcialem, ale stworzylem cos podobnego.
Brawo! Gdybym napisał ten kod od razu, to nauczyć się byłoby trudniej 😀
Generalnie transition działa między zwykłą deklaracją klasy, a tą samo deklaracją z pseudoklasą :hover. Można dać inne tło, inną ramkę, czy też obrócić element za pomoć transform: rotate( 10deg ).
Twórca wątku
Patryk
(@devill3z)
ok więc w miare obczaiłem już wszystko, ale jednej rzeczy nie mogę rozgryźć, a mianowicie, gdy mam taki kod:
.fb
{
height:32px;
width:32px;
background-image:url(http://www.androidpipe.com/wp-content/themes/androidpipe/images/facebook_grey.png);
float: left;
transition:background-image 1s;
-moz-transition:background-image 1s, -moz-transform 1s; /* Firefox 4 */
-webkit-transition:background-image 1s, -webkit-transform 1s; /* Safari and Chrome */
-o-transition:background-image 1s, -o-transform 1s; /* Opera */
}
.fb:hover
{
height:32px;
width:32px;
background-image:url(http://www.superszkola.pl/wp-content/plugins/social-sharing-toolkit/images/icons_large/facebook.png);
float: left;
transform:fade;
-moz-transform:fade; /* Firefox 4 */
-webkit-transform:fade; /* Safari and Chrome */
-o-transform:fade; /* Opera */
}
a na stronie wpiszę <div class=”fb”></div> to obrazek pojawia się i zmienia kolor po najechaniu myszą, ale nie trwa to 1s i nie ma tego fade’a tylko po prostu zmienia się to od razu. Jakieś sugestie?
