Dymki w CSS

Data publikacji: 20/06/2011 Autor:
8 komentarzy

Dymki w CSS W tym artykule napiszę jak zrobiłem dymki w CSS na swoim blogu, a dokładniej podczas najechania na przycisk z kciukiem w górę „Fajny” (dymek z tekstem: Podoba mi się!) oraz z kciukiem w dół (dymek z tekstem: Nie podoba mi się!). Jest to banalnie proste i nie trzeba wykorzystywać do tego JavaScriptu. Testowałem dymki na takich przeglądarkach jak: IE6, IE7, IE8, Opera, Chrome, Firefox i wszędzie dymki wyświetlały się poprawnie.

Kod CSS wygląda następująco:

a.balloon_no span {
    display: none;
    padding: 3px 0 0;
    width: 105px;
}
a.balloon_no:hover span{
    background: url(images/balloon.png) no-repeat;
    color: #FFFFFF;
    display: block;
    font-size: 11px;
    height: 27px;
    line-height: 27px;
    margin: 28px 0 0 -37px;
    position: absolute;
    text-align: center;
}

Kod HTML wygląda następująco:

<a class="balloon_no"><span>Podoba mi się!</span></a>

Demko dymków w CSS

Link do Dema: http://seo-z.pl/dema_css/dymki/index.html

Brak powiązanych wpisów.

VN:F [1.9.7_1111]
Głosy: +9 (Głosy na Tak: 10, Głosy na Nie: 1, Wszystkich głosów: 11)
Kategoria: CSS, Webmaster

Na czym zarabiam ?

8 odpowiedzi na „Dymki w CSS”

  1. Jeżeli faktycznie zrobiłeś to na tym blogu, to na której wersji Opery testowałeś? Na najnowszej nie działa…

    VA:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
    Wilk :

    21/06/2011 o 06:48

  2. A mógłbyś zrobić z tego małe demo (prosty plik HTML) pokazujący efekt działania tych dymków. Bo teraz jakoś nie mogę się połapać.

    VA:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
    Pablo :

    21/06/2011 o 08:35

  3. Na najnowszej testowałem i działa bez zarzutów, więc nie wiem dlaczego u Ciebie dymki nie działają. Może to wina cache.

    Oczywiście dymki działają tylko w tych artykułach, w których wcześniej nie głosowałeś.

    Demo jest już dostępne.

    VN:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
    arve_lek :

    21/06/2011 o 09:08

  4. Dobra, działa – sprawdzałem na tym obrazku na górze ;]

    VA:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
    Wilk :

    21/06/2011 o 17:06

  5. Ok, dzięki za demo. Już wiem co robiłem źle :)

    VA:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
    Pablo :

    21/06/2011 o 19:00

  6. @Wilk

    :)

    @Pablo

    Drobiazg.

    VN:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
    arve_lek :

    21/06/2011 o 19:42

  7. Coś podobnego zrobiłem w Java scripcie, ale zrobiłem to dlatego, że nie wiedziałem, że można dymki zrobić w CSS. Przydatna informacja i widzę, że kolejna kategoria dodana na tym blogu :)

    VA:F [1.9.7_1111]
    Głosy: 0 (Tak: 0, Nie: 0)
    Darek Zawadzki :

    22/06/2011 o 09:16

  8. Ogólnie to kategorii jeszcze trochę dojdzie: php, prawo itp.

    VN:F [1.9.7_1111]
    Głosy: 0 (Tak: 0, Nie: 0)
    arve_lek :

    22/06/2011 o 10:15