efekt - Kurs HTML i CSS
Tło CSS / Usunięcie tła {background: none, background-color: transparent}...które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej dodatkowej modyfikacji, co sprawi, że strona taka będzie różniła się wyglądem od innych. W wewnętrznym...
- 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 / Atrybuty mieszane obramowania {border}
...np. zamiast wpisywać: border-width: medium; border-style: solid; border-color: blue wystarczy podać: border: medium solid blue a otrzymamy ten sam efekt. Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border} border-top: thick double green border: medium solid blue Podkreślenie tekstu Ciekawym zastosowaniem dolnego obramowania może być uzyskanie efektu podkreślenia o różnym stylu...
- 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...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...wchodzi w skład CSS 2.0, ale nie CSS 2.1. Nie jest interpretowane! Poniżej znajdziesz opis alternatywnej metody, która pozwala uzyskać podobny efekt. Przykład {marker-offset} li:before { display: marker; marker-offset: 3em; } Wyróżnik obrazkowy w tle Istnieje jednak dość prosty, lecz być może nie tak oczywisty, sposób zastąpienia nieobsługiwanej własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block...
- Tabele CSS / Rozmiary tabeli {width, height}
...odpowiednią wartość, na przykład: "width: 500px" lub "width: 50%" w zależności od preferencji. Jak dopasować tabelę do marginesów? Aby uzyskać efekt autodopasowania rozmiaru tabeli do okna, który jest znany z programu Microsoft Word, można ustawić szerokość tabeli na 100% za pomocą właściwości width, co spowoduje, że tabela zajmie całą dostępna przestrzeń w poziomie, a kolumny dopasują się proporcjonalnie do zawartości. Przykład: <table style="width: 100%">...</table>.
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło. Przykład {position: fixed} Przykład
- Drukowanie CSS / Przełamanie strony {page-break-before, page-break-after}
...rozdziałów. Kto to widział, żeby tytuł znajdował się na końcu poprzedniej strony, a sama treść rozdziału na początku następnej? 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.
- 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...
- Drukowanie CSS / Okładka wydruku @page :first
...wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np. wyzerować je. Trzeba jednak zdawać sobie sprawę, że większość typowych drukarek nie pozwala zadrukować całej powierzchni papieru, więc jakieś minimalne marginesy zawsze pozostaną - jak duże zależy od...