Wsparcie » Zaawansowane » Podswietlanie ikon

  • Czesc, od jakiegos czasu bawie sie WordPressem i mam pytanie: jak zrobic, zeby po najechaniu na ikone, np. Facebook’a podswietlila sie ona? chodzi mi o cos takiego jak tu: http://dustycartridge.com/ na dole strony po najechaniu na ikone FB, google itd. podswietlaja sie one na kolorowo. Z gory dziekuje za odpowiedzi, Pozdro.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter 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 🙂

    Thread Starter 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 ).

    Thread Starter 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?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Temat ‘Podswietlanie ikon’ jest zamknięty na nowe odpowiedzi.