CSS jQuery Wordpress

Zgrzeszyłem, że ten artykuł nie ukazał się jako pierwszy na tym blogu. W końcu domena do czegoś zobowiązuje, nieprawdaż? Tym artykułem zamierzam się poprawić, więc zaczynajmy czym prędzej!

Dla tych, którzy nie mają żadnego pojęcia o CSSie, polecam artykuł o tym jak go powiązać z plikiem HTML.

Jak to się zaczęło?

Pamiętam jak sam pierwszy raz dowiedziałem się o CSSie. Był to jakiś artykuł w Strefie WWW, która była kącikiem zamieszczanym na płytce CD-ACTION. To co mnie przyciągnęło do artykułu to kolorowe suwaczki w IE 5.5(ehh wtedy to tylko czekałem kiedy pojawi się IE 6 :D ), oraz linki, które podkreślały się dopiero gdy na pojawił się na nich kursor myszki! W tamtych czasach ledwo znałem HTML, więc JS był dla mnie tajemniczy i nieprzystępny (zwłaszcza gdy przeglądałem kilkudziesięcio kilo bajtowe kody JSowych zegarków) , dlatego możliwość dynamicznego podkreślania linków była dla mnie czymś cudownym.

Tak wyglądał kod CSS

a{
   text-decoration: none;
}
a:hover{
   text-decoration: underline;
}

Co w efekcie daje nam podkreślanie linków po najeździe:

Zamiast podkreślenia, można też przekreślić, ‘nadkreślić’, bądź zmienić kolor. Nabrudźmy trochę i zróbmy wszystko naraz:)

Kod CSS(zmieniamy tylko definicje a:hover)

a:hover{
   text-decoration: underline overline line-through;
   color: #ff0000;
}

Oczywiście magia pseudo-klasy hover nie ogranicza się do linków. Te same rzeczy można wykonywać ze zwykłym tekstem, czy to w span, p, div, czy zawartym w dowolnym innym znaczniku(body!). Jednak wykonywanie podkreślenia zwykłego tekstu przy najeździe było by mylące dla użytkowników(no k%$@, klikam ten link i NIC!!), dlatego też nie zalecam takich zabaw.

Zabawy z innymi znacznikami + :hover

Manipulacja stylami tekstu to dziecinne sztuczki. Prawdziwa zabawa z :hover zaczyna się dopiero przy manipulacji takimi właściwościami jak background-position, display, position czy z-index.

Np. Prosty przykład z rollover’em – kod CSS

div{
   height: 100px; /*Wysokość obrazka*/
   width: 150px; /* połowa szerokości obrazka*/
   background: transparent url(rollover.jpg) 0 0 no-repeat;
}
div:hover{
   background-position: -150px 0;
}

Jedyne co robimy w tym przykładzie to przesuwamy tło diva, ale nadal używamy jednego obrazka(jak widać poniżej). Ten efekt, rollover często stosowany jest na rozmaitych przyciskach dla uzyskania efektu wciśnięcia klawisza. Dobry przykład hoverowanych ikon do portali społecznościowych(wraz z kodem CSS) znajduje się pod adresem http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/ .

Hover’owane menu

Menu oparte o hovery to kolejna ciekawa rzecz. Inaczej zwie się je rozwijanym menu CSS. Co prawda menu poniżej nie wymaga działającego JS, ale IE 6 i niżej bez pomocy JS nie obsłuży takiego menu prawidłowo. Zacznijmy od kodu HTML:

<ul>
 <li>Pozycja 1
 <ul>
 <li>Pozycja 1.1</li>
 <li>Pozycja 1.2</li>
 <li>Pozycja 1.3</li>
 </ul>
 </li>
 <li>Pozycja 2
 <ul>
 <li>Pozycja 2.1</li>
 <li>Pozycja 2.2</li>
 <li>Pozycja 2.3</li>
 </ul>
 </li>
</ul>

Do tego kod CSS:

li > ul{
 display: none;
}
li:hover > ul{
 display: block;
}

Efekt:

Jak widać coś się dzieje, ale nie bardzo ma to ręce i nogi. Zasadniczo chciałem pokazać jak mała porcja CSS wystarczy do osiągnięcia efektu. Teraz szybciutko dołożymy kilka linijek stylu aby to wszystko jakoś wyglądało:

li{
 float: left;
 min-height: 20px;
 padding: 5px 0 0;
 text-align: center;
 background-image: none;
 background-color: #444;
 border: 1px solid #ff0000;
 margin-right: 10px;
 min-width: 120px;
}
li:hover{
 background-color: #111;
}
li > ul li{
 float: none;
 margin-right: 0;
 border: none;
}
li > ul li:hover{
 background-color: #1a1a1a;
}
li > ul{
 display: none;
 margin: 0;
}
li:hover > ul{
 display: block;
}

Ciekawa galeria zdjęć oparta o sam CSS

Ostatnią rzeczą dotyczącą :hover, jaką chciałem pokazać jest galeria. Najpierw zobaczmy jak to wygląda, potem kodzik i omówionko ;)

Na początek powiem, że w tym kodzie jest za dużo klas i osobiście unikam wszelkiej nadmiarowości, jednak aby kod był bardziej zrozumiały owe nadmiarowe klasy musiałem dodać. A teraz do meritum.

<div class="galeria">
 <div class="miniatury">
 <span class="male-foto"><img src="/custom-images/nuns-s.jpg" alt="" /><span class="duze-foto nuns"></span></span>
 <span class="male-foto"><img src="/custom-images/pm-s.jpg" alt="" /><span class="duze-foto pm"></span></span>
 <span class="male-foto"><img src="/custom-images/shut-s.jpg" alt="" /><span class="duze-foto shut"></span></span>
 </div>
</div>

Do tego kod CSS

.galeria{
 padding-top: 470px; /* tu ustawiamy miejsce na duże zdjęcie. Po najeździe tu pojawi się span */
 position: relative; /* nasz span będzie się pozycjonował względem tego elementu bo jako ostatni ma position inne od static
}
.miniatury{
 padding-left: 35px; /* Tylko wygląd */
}
.miniatury > span{
 float: left; /* Tylko wygląd */
 margin-right: 35px; /* Tylko wygląd */
}
.miniatury > span > span{
 position: absolute; /* pozycjonujemy */
 left: 0; /* w lewy */
 top: 0; /* górny róg diva .galeria */
 display: none; /* normlanie span jest ukryty */
 width: 505px; /* jakas szerokosc */
 height: 450px; /* jakas wyskosc */
 border: 1px solid #fff; /* Tylko wygląd */
}
.miniatury > span:hover img{
 background-color: #999; /* Tylko wygląd */
}
.miniatury > span:hover > span{
 display: block; /* kiedy nadrzędny span jest hoverowany, pokazujemy naszego spana z duzym zdjeciem */
}
span.pm{
 background: transparent url(../custom-images/pm.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
span.nuns{
 background: transparent url(../custom-images/nuns.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
span.shut{
 background: transparent url(../custom-images/shut.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}

Większość kodu omówiona jest w komentarzach. Cała sprawa opiera się na tym, że mamy znaczniki span, które zawierają w sobie img,czyli zdjęcie miniaturkę, oraz kolejny span, który jako tło ma ustawione duże zdjęcie. W tym przykładzie do pokazania jakie duże zdjęcie ma być tłem danego spana użył klas(pm, nuns, shut), ale zamiast tego można by użyć np. atrybutu id lub atrybutu style(inline-style).

Jedna uwaga na koniec. Obecnie przykłady 2,3 i 4 nie działają w IE 6. Możliwe jest jednak sprawienie aby działały. Krótko mówiąc wszystkie elementy, które mają zdefiniowaną pseudo-klasę :hover, trzeba zamienić na puste linki, czyli takie bez atrybutu href(np. w drugim przykładzie div zamieniamy na a – zmiana W HTML i CSS). W wypadku rozwijanego menu, wymaga to większej ilości zmian. Jeśli będzie potrzeba napiszę o tym osobny artykuł.

Na tym kończę te klika przykładów użycia pseudo-klasy :hover. Życzę Wam sukcesów w zabawach z hoverowaniem :)