Tym razem mój blog będzie przydatny wszystkim, od początkujących, po zajmujących się specjałami skryptowo-stylowymi administratorów. Otóż na tym i na następnych blogach będę wklejał snippety, głównie CSS i JavaScript, które okażą się być bardzo pomocne w rozwijaniu wiki. Innych serii nie będę kontynuował. Snippety to bardzo dobry pomysł, szczególnie pomoże w łatwy sposób innym znaleźć coś dobrego dla wiki bez potrzeby tworzenia wątku na ten temat (czyli mniej śmiecenia na Forum).
Odlotowe, animowane i konfigurowalne strzałki w Ostatnich zmianach[]
Nudzą Ci się niebieskie i niemodne strzałki? Nie pasują Ci one do tła twojej wiki? Otóż jest na to fajny sposób.
Od dość niedawna coraz więcej portali internetowych używa stylu CSS na dowolnym obiekcie, który tworzy trójkątną strzałkę (Wikia też ich używa, spójrz na strzałkę na górnym panelu obok twojej nazwy użytkownika, o ile przeglądasz tą stronę w skórce Oasis). Poniższy przykład bazuje na pierwowzorze takich strzałek.
Do strzałek dodatkowo będzie dołączona animacja. Całość będzie się ładniej i płynniej prezentowała.
Oto kod:
.mw-collapsible-toggle {
transition: transform 0.5s;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
}
.mw-collapsible-toggle a img {
width: 0;
height: 0;
border: 6px solid transparent;
border-left: 12px solid black;
border-right: none;
}
.mw-collapsible-toggle-expanded {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Druga definicja, która wskazuje na obraz domyślnej niebieskiej strzałki, zostaje zmieniona na strzałkę w CSS. Wygląda to mniej więcej tak:
Kolor można zmienić według własnej fantazji, wystarczy zamienić black na inny kolor obsługiwany w CSS-ie (#FFF, rgba(255,255,255,0.5), itp...). Szczególnie zalecane dla wiki z ciemnym kolorem tła.
Strzałki normalnie wskazują tylko w prawo. Czemu? Bez tego nie będziemy mogli wykonać animacji, ponieważ strzałki rozwinięcia i zwinięcia istnieją osobno i są zamiennie widoczne, gdy na nie klikniemy myszą. Teraz obie wyglądają tak samo, więc animacja będzie działała tak, jakby była jedna strzałka zmieniająca kierunek w dół.
A po co transition i transform? Te dwa elementy będą ważne dla animacji. Transition odpowiada za animowanie zmian stylu CSS, w tym przypadku obserwuje transform, który służy do transformacji elementów strony i w tym przypadku używa rotacji o 90 stopni (wskazówkami zegara). Domyślnie po kliknięciu na strzałkę zmienia się klasa elementu, w którym znajduje się obraz niebieskiej strzałki, zależnie od klasy, zmienia się widoczność obu strzałek, dla zwiniętej i dla rozwiniętej listy. Teraz po kliknięciu dalej zmienia się widoczność obu strzałek, które są identyczne, a element posiadający te strzałki obraca się o 90 stopni w przeciągu pół sekundy, kierując strzałkę na dół. Po ponownym kliknięciu element wraca na swój stan pierwotny, animując przez pół sekundy.
Można również regulować rozmiar strzałki. Jednak zalecana jest wielkość 12x12px, chyba że ktoś chce, może pobawić się wielkością, lecz to wpływa na niektóre elementy strony.
Teraz Ostatnie zmiany wyglądają o wiele lepiej. Ten styl działa we wszystkich skórkach.