W końcu, po dłuższej przerwie mam przyjemność zaprosić wszystkich do kolejnej części kursu poświęconego CSS 
))
Od początku prezentowałem same podstawy i suche wiadomości. Stopniowo wprowadzałem Was w tajniki stylów: jak pisać formuły, jakich używać elementów i wartości... Nadszedł w końcu czas, żeby wszystko to wykorzystać w praktyce.
W kolejnych częściach kursu przedstawię różne sposoby wykorzystywania CSS. Liczę także na Wasza współpracę. Przesyłajcie mi różne pytania i ciekawe pomysły a ja postaram się je wykorzystać.
Na zakończenie (obecnej wersji kursu) pokaże Wam jakie cuda można wyprawiać z kursorami na stronie 
Zasada działania stylu jest prosta. Na początku wybieramy dowolny obszar strony. Możemy do tego wykorzystać znaczniki <DIV></DIV>. Pomiędzy takimi znacznikami możemy umieścić wszystko: tekst i obrazki np.
<DIV>
<P>tekst, tekst....</P> <IMG SRC="">
</DIV> |
Następnie, naszemu wybranemu obszarowi przypisujemy style. Element który odpowiada za rodzaj kursora to CURSOR. Całość może wyglądac następująco:
<DIV STYLE="cursor: crosshair;">
<DIV STYLE="cursor: crosshair;"><P>tekst, tekst....</P> <IMG SRC=""> itd</DIV>
</DIV> |
W wyniku tego po najechaniu na obszar kursor się zmienia. Prawda, że fajne ?
Oczywiście na samym krzyżyku sprawa się nie kończy. Możemy przypisać o wiele więcej wartości. Oto one: (najedź na nazwę)
crosshair
hand
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
w-resize
text
wait
help
default
Zapraszam do kolejnej części kursu css gdzie zajmiemy się bardzo fajnymi możliwościami zmiany paska przewijania.
Pasek przewijania w CSS
Scrolling czyli pasek przewijania jest z całą pewnością nieodłącznym elementem na stronach www. Jest tak powszechny, że większość osób nawet nie zwraca na niego uwagi - jest bo musi być, i tyle Ja jednak pokażę Ci jak dzięki stylom wpłynąć na jego wygląd.
Najlepiej pasek dopasować do kolorystyki strony. My stworzymy go w kolorystyce niebieskiej.
Zaczynamy
Elementy odpowiadające za wygląd paska są bardziej złożone niż te które poznałeś do tej pory. Ich nazwa składa się z trzech części:
scrolling-rodzaj-color
Wszystkie elementy umieszczamy w obszarze BODY np.
body { element: właściwość; ...}
To właśnie w body określamy cały wygląd paska przewijania. Poniżej przedstawiam elementy które można do tego wykorzystać. Dla ułatwienia podzieliłem pasek na dwie części:
pierwsza część to przycisk który umożliwia nam przesuwanie strony w oknie przeglądarki. Jego kolor określamy przy użyciu:
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
Teraz wystarczy, że wybierzemy sobie dowolne kolory. Jak już wspomniałem najlepiej dobrać je według wyglądu strony. Tak jak w htmlu możemy napisać pełną nazwę koloru np. blue lub w RGB: #115E8D. Jako kolor można wykorzystać także plik graficzny - url("obrazek.gif") .Następnie wszystko to zapisujemy w stylach. Całość może wyglądać następująco:
body {
scrollbar-face-color:#115E8D;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#115E8D;
scrollbar-darkshadow-color:navy;
}
Zobacz przykład: http://www.webinside.pl/materialy/rozne/p9.htm
Zatrzymaj się na chwilę. Zacznij zamieniać nazwy kolorów a dokładnie poznasz, który element odpowiada której części przycisku.
druga część paska przewijania to "tor" po którym porusza się przycisk. Zasada używania jest taka sama jak wyżej:
scrollbar-arrow-color
scrollbar-track-color |
Teraz wszystko możemy połączyć w jedną całość:
body {
scrollbar-face-color:#115E8D;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#115E8D;
scrollbar-arrow-color:white;
scrollbar-track-color:url("tlo.gif")
}
|
Zobacz przykład: http://www.webinside.pl/materialy/rozne/p9_b.htm
To już wszystko. Mam nadzieję, że nauczyłeś się kolejnej sztuczki w css i potrafisz to wykorzystać na swojej stronie.
|
))