efekt - Kurs HTML i CSS
Drukowanie CSS / Druk dwustronny @page :left :right...spięty wydruk, kartka leżąca po lewej stronie powinna mieć prawy margines szerszy, a kartka po prawej stronie - lewy margines szerszy. Taki efekt można uzyskać stosując pseudoklasy :left i :right, które pozwalają ustawić różne marginesy wydruku dla stron lewych i prawych. W językach o kierunku tekstu od lewej do prawej (np. język polski lub angielski) pierwszą stroną dokumentu (okładką) jest strona prawa. Natomiast jeśli dokument zawiera w większości tekst w języku pisanym od prawej...
- 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...
- 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...
- CSS dla zielonych / Czcionka CSS {font-size, font-family}
...istnieje w każdym systemie operacyjnym - tzw. rodzinę ogólną. Pozwala ona określić krój czcionki, który wyglądem będzie przynajmniej przypominał efekt, który chcemy uzyskać - np.: sans-serif (podobna do: Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS'), serif (podobna do: 'Times New Roman', Georgia), monospace (podobna do: 'Courier New'). Na przykład: body { font-size: medium; font-family: Arial, Helvetica, sans-serif; } W systemie Windows standardowo dostępne powinny być czcionki...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
...jego kolor tekstu oraz tła przyjmą wartość "inherit". Zatem zostaną odziedziczone z akapitu (tekst będzie zielony). Dla zainteresowanych Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; } p i b { color: inherit; background-color: inherit; }
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...znajdowały się na tej samej wysokości co po prawej stronie. Analogicznie należy postąpić dla górnej i dolnej krawędzi. Przykładowo, aby stworzyć efekt zeszytu w kratkę, wystarczy przygotować kwadratową grafikę z przecinającymi się liniami w formie krzyżyka. Kafelek nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości odzwierciedlającej rozstaw linii, ale szerokości tylko jednego piksela. Proponuję poeksperymentować w dowolnym...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...zostaną odziedziczone z akapitu (tekst będzie zielony), natomiast sama treść zostanie standardowo wytłuszczona. Dla zainteresowanych Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; font-weight: normal; } p i b { color: revert; background-color: revert; font-weight: revert; }
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
...kolor + '",' + czas + ')', czas); } flash("flash1", "red", 500, "black", 500); flash("flash2", "white", 500, "black", 250); 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>...