Oficjalne forum pomocy serwisu PUN.pl

xn

Użytkownik

Dołączył: 2010-08-09

Liczba postów: 455

[CSS] Liczba osób, które odwiedziły dziś forum

/* Osoby które dziś odwiedziły forum */
    dl {
    counter-reset: online;
    }
    #onlinetodaylist dd:after {
    counter-increment: online;
    content: counter(online);
    font-size: 0px;
    color: transparent;
    }
    
    #onlinetodaylist dd:last-child:after {
    content: "\A Liczba osób, które odwiedziły dziś forum: " counter(online);
    font-size: 11px;
    white-space:pre;
    color: inherit;
    }

Wyświetla liczbę osób, które odwiedziły dziś forum.

Jak to działa:
Liczy ilość dd (czyli kolejnych osób) w #onlinetodaylist.
Nowa linijka jest uzyskana dzięki \A  oraz"white-space:pre;".
Jako, że chcę, by tylko ostatnia liczba była wyświetlana - z pomocą czcionki 0px ukrywam wszystkie dodane przez ten kod liczby.  Z kolei "color: transparent;" to fix dla Safari, które nie pozwala na zerowy rozmiar czcionki.
Potem ustawiam normalną czcionkę dla :after ostatniego elementu, a by kolor czcionki był taki sam jak w stylu pobieram kolor rodzica (color: inherit).

Wybaczcie ten chaotyczny opis. xD

Edit:
Proszę o zmianę tytułu na "[CSS] Liczba osób, które odwiedziły dziś forum"

Ostatnio edytowany przez xn (2013-02-13 20:04:44)

ukaszf9

Użytkownik

Dołączył: 2011-08-01

Liczba postów: 1,335

Odp: [CSS] Liczba osób, które odwiedziły dziś forum

Nazwa tematu zmieniona. Bardzo ciekawa metoda counter - nie miałem o czymś takim do dzisiaj pojęcia