Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Czasem nawet głupi but zostawia po sobie niezniszczalny ślad

Zajęcia specjalizacyjne: III klasa TI
CSS

Ćwiczenie 17 - Suwaki i filtry

Wprowadzenie:

W tym ćwiczeniu omówione zostaną kolejne własności CSS. Tym razem będą to: suwaki, i filtry. Za pomocą własności dotyczących suwaków można wpływać na wygląd pasków przewijania, a za pomocą filtrów można dokonywać efektownych zmian w tekście i grafikach.

Jednakże z tymi efektami wiąże się pewne ograniczenie, ponieważ można je oglądać tylko w przeglądarce Internet Explorer. Suwaki również w Operze po spełnieniu pewnych warunków:

Aby można było kontrolować kolor suwaków w przeglądarce Opera 7 lub nowszej, należy w menu ustawić następującą opcję:
Narzędzia/Preferencje.../Zaawansowane/Zawartość/Opcje stylów.../Wyświetlanie/Stosuj style do pasków przewijania
lub w starszej wersji:
Narzędzia/Preferencje.../Wygląd strony/Stosuj style do pasków przewijania
albo:
Plik/Preferencje.../Wygląd strony/Stosuj style do pasków przewijania

źródło: www.kurshtml.boo.pl


  1. zadania do wykonania
  1. spakowane pliki do zadań: pliki_17.zip (12,3KB)

Własności suwaków:


  1. kolor podstawowy
  2. kolor powierzchni
  3. kolor tła
  4. kolor cienia
  5. kolor drugiego cienia
  6. kolor głębi
  7. kolor strzałek
  8. kolor ścieżki

Własności filtrów:


  1. filtr przezroczystości
  2. filtr odbicia
  3. filtr skali szarości
  4. filtr negatywu


Suwaki

Kolor podstawowy

Składnia reguły:


  1. selektor {scrollbar-base-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić główny kolor w suwakach.

Przykład:

scrollbar-base-color: #00ff00; (lime)

do góry



Kolor powierzchni

Składnia reguły:


  1. selektor {scrollbar-face-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor powierzchni w suwakach.

Przykład:

scrollbar-face-color: #00ff00; (lime)

do góry



Kolor tła

Składnia reguły:


  1. selektor {scrollbar-highlight-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor tła w suwakach.

Przykład:

scrollbar-highlight-color: #00ff00; (lime)

do góry



Kolor cienia

Składnia reguły:


  1. selektor {scrollbar-shadow-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor cienia w suwakach.

Przykład:

scrollbar-shadow-color: #00ff00; (lime)

do góry



Kolor drugiego cienia

Składnia reguły:


  1. selektor {scrollbar-darkshadow-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor drugiego cienia w suwakach.

Przykład:

scrollbar-darkshadow-color: #00ff00; (lime)

do góry



Kolor głębi

Składnia reguły:


  1. selektor {scrollbar-3dlight-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor głębi w suwakach.

Przykład:

scrollbar-3dlight-color: #00ff00; (lime)

do góry



Kolor strzałek

Składnia reguły:


  1. selektor {scrollbar-arrow-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor strzałek w suwakach.

Przykład:

scrollbar-arrow-color: #00ff00; (lime)

do góry



Kolor ścieżki

Składnia reguły:


  1. selektor {scrollbar-track-color: kolor;}

Wyraz selektor ma zastosowanie do elementów, w których mogą pojawić się suwaki: cały dokument <body>...</body>, pole tekstowe (<textarea>...</textarea>), ramki lokalne <iframes>...</iframes>.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor ścieżki w suwakach.

Przykład:

scrollbar-track-color: #00ff00; (lime)

do góry



Łączenie własności suwaków

Przykład:

scrollbar-base-color: #000000; (black)

scrollbar-face-color: #ff00ff; (fuchsia)

scrollbar-highlight-color: #800000; (maroon)

scrollbar-shadow-color: #ffff00; (yellow)

scrollbar-darkshadow-color: #800080; (purple)

scrollbar-3dlight-color: #ff0000; (red)

scrollbar-arrow-color: #0000ff; (blue)

scrollbar-track-color: #008000; (green)

Można, oczywiście, zastanawiać się nad celowością stosowania takich ozdobników...

do góry



Filtry

Według Microsoftu filtry graficzne mogą zostać bezpośrednio zastosowane tylko do znaczników:


  1. <body>...</body> - ciało dokumentu
  2. <button>...</button> - przycisk
  3. <img /> - obrazek
  4. <input>...</input> - pole formularza
  5. <marquee>...</marquee> - animowany tekst
  6. <table>...</table> - tabela
  7. <td>...</td> - komórka tabeli
  8. <textarea>...</textarea> - wieloliniowe pole tekstowe
  9. <tfoot>...</tfoot> - stopka tabeli
  10. <th>...</th> - komórka nagłówkowa tabeli
  11. <thead>...</thead> - nagłówek tabeli
  12. <tr>...</tr> - wiersz tabeli

źródło: www.kurshtml.boo.pl


Jako, że filtry są dość specyficznym sposobem dodawania efektów na stronę WWW i są interpretowane jedynie przez przeglądarkę Internet Explorer, poniższa część tego ćwiczenia ma przede wszystkim charakter informacyjny. Dla ilustracji możliwości filtrów zostanie wykorzystany tylko jeden znacznik: <img /> i na jego przykładzie zostaną omówione główne filtry.

Filtr przezroczystości

Składnia reguły:


  1. selektor {filter: alpha(opacity=poziom, style=kształt)}

  1. poziom:
  2. oznacza poziom nieprzezroczystości
  3. zakres liczb od 0 do 100
  4. "0" - całkiem przezroczysty
  5. "100" - całkiem nieprzezroczysty

  1. kształt:
  2. "0" - jednolita przezroczystość
  3. "1" - liniowa
  4. "2" - promieniowa
  5. "3" - prostokątna

Dzięki temu poleceniu można elementowi nadać kształt i stopień przezroczystości.

Przykład:

filter: opacity=50, style=0

filter: opacity=50, style=1

filter: opacity=50, style=2

filter: opacity=50, style=3

do góry



Filtr odbicia

Składnia reguły:


  1. selektor {filter: fliph}

  1. selektor {filter: flipv}

  1. fliph:
  2. poziome odbicie

  1. flipv:
  2. pionowe odbicie

Dzięki temu poleceniu można nadać elementowi efekt odbicia pionowego lub poziomego.

Przykład:

filter: fliph

filter: flipv


do góry



Filtr skali szarości

Składnia reguły:


  1. selektor {filter: gray}

dzięki temu poleceniu można nadać elementowi skalę szarości.

Przykład:

filter: gray

do góry



Filtr negatywu

Składnia reguły:


  1. selektor {filter: invert}

Dzięki temu poleceniu można nadać elementowi efekt negatywu.

Przykład:

filter: invert

do góry



Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS dotyczące suwaków i filtrów do sformatowania plików HTML. Zadanie polega na sformatowaniu jednego pliku HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą własności dotyczące suwaków i filtrów.

Efekty formatowania suwaków i grafiki za pomocą filtrów widoczne będą jedynie w przeglądarce Internet Explorer.

1. Należy zacząć od przygotowania struktury folderów i plików:


  1. foldery:
  2. cw_17 - główny
  3. pliki - zawarty w głównym
  4. style - zawarty w głównym
  5. grafiki - zawarty w głównym

  1. pliki:
  2. plik.html - w folderze pliki
  3. style.css - w folderze style
  4. zdjęcia - w folderze grafiki
  5. spakowane pliki do zadań: pliki_17.zip (12,3KB)

2. W pliku HTML należy umieścić taką treść:


  1. zawartość pliku HTML:
  2. szablon HTML 4.01 Transitional
  3. w sekcji <head>...</head>:
  4. łącze do arkusza stylów - patrz tutaj
  5. w znaczniku <title>...</title> nazwa pliku
  6. w sekcji <body>...</body>:
  7. w znaczniku <h2>...</h2> słowo: Suwaki
  8. w znaczniku <div>...</div> z klasą: div_1
  9. dwa pola tekstowe w znacznikach <textarea>...</textarea>
  10. o wymiarach: wierszy: 10, kolumn: 25
  11. pierwsze pole tekstowe z klasą: text_1
  12. drugie pole tekstowe z klasą: text_2
  13. tak wygląda plik.html przed formatowaniem: suwaki
  14. w znaczniku <h2>...</h2> słowa: Filtry przezroczystości
  15. cztery znaczniki <div>...</div> - każdy z klasą: div_2
  16. w każdym znaczniku <div>...</div>
  17. po dwa łącza do pliku graficznego: grafika_1.jpg
  18. w każdym znaczniku <div>...</div>
  19. w drugim pliku graficznym nadać klasy kolejno numerowane:
  20. foto_1, foto_2, foto_3, foto_4
  21. tak wygląda plik.html przed formatowaniem: filtry przezroczystości
  22. tak wygląda plik.html przed formatowaniem: filtry przezroczystości - cd
  23. w znaczniku <h2>...</h2> słowa: Filtry odbicia
  24. dwa znaczniki <div>...</div> - każdy z klasą: div_2
  25. w każdym znaczniku <div>...</div>
  26. po dwa łącza do pliku graficznego: grafika_1.jpg
  27. w każdym znaczniku <div>...</div>
  28. w drugim pliku graficznym nadać klasy kolejno numerowane:
  29. foto_5, foto_6
  30. w drugim znaczniku <div>...</div>
  31. po pierwszej grafice wstawić znacznik <br />
  32. tak wygląda plik.html przed formatowaniem: filtry odbicia
  33. w znaczniku <h2>...</h2> słowa: Filtr szarości
  34. znacznik <div>...</div> z klasą: div_2
  35. w znaczniku <div>...</div> po dwa łącza do pliku graficznego: grafika_1.jpg
  36. w znaczniku <div>...</div>, w drugim pliku graficznym nadać klasę: foto_7
  37. w znaczniku <h2>...</h2> słowa: Filtr negatywu
  38. znacznik <div>...</div> z klasą: div_2
  39. w znaczniku <div>...</div> po dwa łącza do pliku graficznego: grafika_1.jpg
  40. w znaczniku <div>...</div>, w drugim pliku graficznym nadać klasę: foto_8
  41. tak wygląda plik.html przed formatowaniem: filtry szarości i negatywu

Spakowane pliki do zadań: pliki_17.zip (12,3KB).

Po wpisaniu całej zawartości plik.html powinien wyglądać tak - bez żadnego formatowania:

plik.html: suwaki

plik.html: filtry przezroczystości

plik.html: filtry przezroczystości - cd

plik.html: filtry odbicia

plik.html: filtry szarości i negatywu

3. W pliku CSS należy przygotować dla wszystkich klas, różne reguł formatujące suwaki i grafikę za pomocą filtrów, uwzględniające ich właściwości.


  1. zawartość pliku CSS:
  2. klasa: div_1
  3. padding: 20px;
  5. klasa: text_1
  6. scrollbar-base-color: #0000ff;
  7. scrollbar-face-color: #bbbbbb;
  8. scrollbar-highlight-color: #ff0000;
  9. scrollbar-shadow-color: #999999;
  10. scrollbar-darkshadow-color: #00ff00;
  11. scrollbar-3dlight-color: #555555;
  12. scrollbar-arrow-color: #ff00ff;
  13. scrollbar-track-color: #111111;
  15. klasa: text_2
  16. scrollbar-base-color: #000000;
  17. scrollbar-face-color: #222222;
  18. scrollbar-highlight-color: #444444;
  19. scrollbar-shadow-color: #666666;
  20. scrollbar-darkshadow-color: #888888;
  21. scrollbar-3dlight-color: #aaaaaa;
  22. scrollbar-arrow-color: #ffffff;
  23. scrollbar-track-color: #dddddd;
  24. margin-left: 50px;
  25. tak wygląda plik.html po formatowaniu: suwaki
  27. klasa: div_2
  28. padding: 20px;
  30. klasa: foto_1
  31. filter: alpha(opacity=65, style=0);
  33. klasa: foto_2
  34. filter: alpha(opacity=65, style=1);
  36. klasa: foto_3
  37. filter: alpha(opacity=65, style=2);
  39. klasa: foto_4
  40. filter: alpha(opacity=65, style=3);
  41. tak wygląda plik.html po formatowaniu: filtry przezroczystości
  42. tak wygląda plik.html po formatowaniu: filtry przezroczystości - cd
  44. klasa: foto_5
  45. filter: fliph;
  47. klasa: foto_6
  48. filter: flipv;
  49. tak wygląda plik.html po formatowaniu: filtry odbicia
  51. klasa: foto_7
  52. filter: gray;
  54. klasa: foto_8
  55. filter: invert;
  56. tak wygląda plik.html po formatowaniu: filtry szarości i negatywu

Efekt powinien być taki, że plik.html będzie tak sformatowany:

plik.html: suwaki

plik.html: filtry przezroczystości

plik.html: filtry przezroczystości - cd

plik.html: filtry odbicia

plik.html: filtry szarości i negatywu


Oceniany będzie folder cw_17 z trzema podfolderami: pliki, style i grafiki, w których zawarte będą odpowiednio pliki: w folderze pliki: plik.html, w folderze style plik: style.css, a w folderze grafiki plik graficzny: grafika_1.jpg.

Plik HTML powinien być sformatowany zgodnie z poleceniami za pomocą zewnętrznego arkusza stylów z pliku style.css. Formatowanie obejmuje suwaki i filtry - użyte są własności formatowania tych dwóch elementów.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki