efekt - Kurs HTML i CSS
Drukowanie CSS / Wydruk @media print...arkusz domyślny (deklaracje w istniejącym arkuszu lub dołączenie zewnętrznego), a dopiero na końcu ustalamy własności dla wydruku. Aby zobaczyć efekt, nie musisz za każdym razem drukować całej strony. Wystarczy włączyć w przeglądarce internetowej podgląd wydruku. Zwykle znajduje się on w menu Drukuj. Powinien być również dostępny przy pomocy skrótu klawiaturowego Ctrl+P. Przykład @media print Ta strona powinna wyglądać inaczej na wydruku. Aby to sprawdzić włącz podgląd wydruku (menu...
Aktywne przyciski / Pamięć podręcznaStosując bezpośrednio powyższe skrypty, można zauważyć pewien nieprzyjemny efekt: po pierwszym wskazaniu bądź kliknięciu aktywnego przycisku, trzeba nieco zaczekać, aż załaduje się obrazek, który ma zostać wyświetlony. Dzieje się tak dlatego, ponieważ dopóki nie zostanie wywołana akcja, przeglądarka nie wie jaki obrazek, dajmy na to po podświetleniu, ma zostać wyświetlony. Jednak po pierwszym użyciu przycisku, dodatkowa grafika zostanie wczytana i zapisana w pamięci podręcznej przeglądarki...
- Galeria zdjęć HTML / Klasyczna galeria zdjęć
...z miniaturkami. Wczytanie oryginalnego dużego obrazka następuje najczęściej po kliknięciu bezpośrednio jego miniaturki. Aby zastosować taki efekt, należy użyć odsyłacza obrazkowego (podstawowego). Prawie zawsze stosuje się również atrybut target="_blank", który powoduje otwarcie nowego okna przeglądarki: <a target="_blank" href="ścieżka do dużego obrazka"><img src="ścieżka do pliku miniaturki obrazka" alt="Tekst alternatywny" border="0"></a> Większość nowych przeglądarek potrafi...
- Migotanie
Przykład Migotanie tekstu... ...inne migotanie Aby uzyskać taki efekt, wklej w nagłówku dokumentu: <script> function flash(id, kolor, czas, kolor2, czas2) { document.getElementById(id).style.color = kolor; setTimeout('flash("' + id + '","' + kolor2 + '",' + czas2 + ',"' + kolor + '",' + czas + ')', czas); } </script> a następnie w wybranym miejscu strony: <div id="identyfikator">Migotanie</div> <script> flash("identyfikator", "kolor1", czas1, "kolor2", czas2); </script> przy...
- Menu rozwijane, otwierane, wysuwane / Łączenie opcji
Wszystkie z przedstawionych powyżej opcji można ze sobą łączyć, uzyskując w ten sposób dodatkowy efekt, np. następujące wywołanie skryptu: <script> new Menu('menu0', 'position: absolute', true, true, 0, 100, 0, 250); </script> spowoduje osadzenie wypozycjonowanego absolutnie menu otwieranego w wersji wysuwanej ze zmodyfikowanymi czasami rozwijania/zwijania oraz opóźnieniem przy otwieraniu i zamykaniu. Aby pominąć określenie pozycji, należy po prostu wpisać '' (dwa apostrofy). Aby pominąć...
- Menu w CSS / Menu z nagłówkami
Choć wykonanie menu w oparciu o listę daje naprawdę duże możliwości, to powstaje mały problem, jeśli przed blokiem ma się wyświetlić nagłówek w formie tytułu działu. Istnieje inny element, który zapewnia taki podział pozycji - lista definicyjna (słownik). Specyfikacja HTML 4.01 podaje alternatywne zastosowania tego znacznika - np. do przedstawiania dialogu. Można zatem przyjąć, że lista definicyjna reprezentuje pozycje połączone ze sobą w taki sposób, że zawartość <dd>...</dd> stanowi...
- Selektory pseudoklas CSS / Korzeń :root
...dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu: html { cecha: wartość } Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia. Przykład :root Po wpisaniu w arkuszu stylów: :root p { color: red } a w dowolnym miejscu strony: <p>To jest akapit</p>...
- Tło CSS / Rozmiary tła obrazkowego {background-size}
...aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle zdjęć o przesadnie dużych wymiarach, ponieważ będą wydłużały czas wczytywania strony. Możliwe jest...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
...w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym nie będzie obramowania. Taki efekt może nie wyglądać estetycznie. Można mu jednak zapobiec za pomocą deklaracji "box-decoration-break: clone". Przykład {box-decoration-break} To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...kolumny. W takim przypadku estetyczniej będzie wyglądało, jeśli kolumna przełamie się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu: h1 { break-after: avoid-column } Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii: hr { break-after: column } Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany...