efekt - Kurs HTML i CSS
Tekst CSS / Cień pod tekstem {text-shadow}...cienia w prawo (ujemne wartości przesuwają w lewo) pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę) rozmycie - promień efektu rozmycia (opcjonalnie) kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element) Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości. Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w...
- Tekst CSS / Orientacja tekstu {text-orientation}
...upright". Dzięki temu kolejne znaki tekstu zostaną ułożone w pionie jeden pod drugim i nie będą obrócone. Może to przynieść lepsze efekty zwłaszcza w przypadku krótkich tekstów, np. jeden lub dwa wyrazy raczej bez żadnych znaków interpunkcyjnych. Teoretycznie taki sam efekt moglibyśmy uzyskać, jeśli po każdym znaku tekstu po prostu wstawilibyśmy znacznik końca linii. Jednak takie rozwiązanie nie byłoby dobrym pomysłem, ponieważ tak ułożone znaki logicznie nie łączyłyby się w...
- 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.