efekt - Kurs HTML i CSS
Menu w CSS / Poziome menu...zakładki. Dla stanu podświetlenia musimy tylko zmienić kolor tła oraz ustawić taki sam kolor dolnego obramowania odnośnika, dzięki czemu uzyskamy efekt wysunięcia wskazanej zakładki do przodu - przed inne. Podobny efekt z zastosowaniem drugiego sposobu: Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { border-bottom: 1px solid #888; float: left; width: 100%; padding-left: 20px; } ul li { float: left...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...przed i po właściwym symbolu wyróżnika wykazu - ale tylko w przypadku wartości ujemnej. Punkty wykazu mogą przyjmować również wartości ujemne. Taki efekt można wywołać przy pomocy atrybutu start="..." albo value="..." [zobacz podpunkty: "Wykaz numerowany z podaniem początkowego numeru" oraz "Zmiana numerowania w trakcie" w rozdziale pt. HTML / Wykaz]. W takich przypadkach mamy możliwość zdefiniowania specjalnego wyglądu tego typu wartości. Przykład @counter-style {negative} Wyświetlenie...
- Szablon strony na DIV-ach / Stały szablon
...względem siebie. Inaczej mówiąc: jeśli np. w wybranym miejscu wstawimy zdjęcie oblane tekstem, to mamy pewność, że w każdej rozdzielczości ekranu efekt będzie taki sam, dzięki czemu unikniemy nieestetycznego ułożenia, gdy pod zdjęciem znalazłaby się tylko jedna linijka akapitu lub obok zdjęcia tylko jeden wyraz, co nie wszystkim się podoba. Mamy również pewność, że tytuły artykułów rozłożą się tak, jak to zaplanowaliśmy, tzn. np. w pojedynczej linijce, a nie w kilku wierszach. Szerokość...
- Obramowanie CSS / Cień {box-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) rozprzestrzenienie - określa odległość na jaką cień wychodzi spod krawędzi elementu, a dla wartości ujemnych chowają cień pod elementem (opcjonalnie) kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element) Wartości "poziom", "pion", "rozmycie" oraz "rozprzestrzenienie...
Tekst HTML / Kod poprawny semantycznie...<br> zamiast <p>...</p>? Czy to aby nie jest pomyłka organizacji W3C, że wprowadzono znacznik <h1>...</h1> (tytuł rozdziału), skoro ten sam efekt można uzyskać dobierając odpowiedni rozmiar czcionki? Otóż na pewno nie jest to pomyłka. Z punktu widzenia użytkownika w języku HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu: Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...taką samą wartość ostateczną: (600 - 400) / 2 = 100 pikseli UWAGA! W trybie Quirks interpretacja będzie zupełnie inna. Dla uzyskania analogicznego efektu również w trybie Quirks należy wpisać: <div style="width: 600px; text-align: center"> <div style="text-align: left; margin-left: auto; width: 400px; margin-right: auto">...</div> </div> Sposób ten jest przydatny np. do centrowania tabeli (względem elementu BODY stanowiącego blok obejmujący) zgodnie z zaleceniami CSS. <html>...
- HTML5 / Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>
...nie będzie obsługiwać nowych typów kontrolek, na ekranie zostanie wyświetlone zwykłe pole tekstowe (<input type="text">). Co prawda wtedy efekt końcowy nie będzie zgody z oczekiwaniami, ale przynajmniej nie ma obawy, że użytkownik w ogóle nie będzie w stanie prawidłowo wypełnić takiego formularza. Zrobi to, wpisując odpowiednią wartość ręcznie. Przykład <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week"> Zobacz przykład: INPUT...
- Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}
...sobą wyrównane. Można to uzyskać za pomocą czcionki monotypicznej, ale jej wygląd nie zawsze musi pasować do reszty tekstu. Dlatego czasami lepsze efekty daje przekształcenie znaków cyfr w bieżącej czcionce w taki sposób, aby wszystkie zajmowały taką samą szerokość. Pozwala na to wariant czcionki: tabular-nums. Niestety nie każda czcionka udostępnia wszystkie warianty formatowania liczb. Niedostępne mogą być zwłaszcza warianty: ordinal, slashed-zero i stacked-fractions. Ponadto jeżeli...
- Tekst CSS / Odstęp między literami tekstu {letter-spacing}
...tekst? Rozstrzelony tekst to właściwość CSS, która określa odstępy między poszczególnymi literami w tekście. Może być używana do tworzenia efektu, gdzie litery są od siebie nieco rozsunięte. Przykład: <p style="letter-spacing: 1px;">Lorem ipsum...</p>. Jak rozstrzelić tekst? Aby rozstrzelić tekst w CSS, użyj właściwości letter-spacing i ustaw wartość dodatnią, np. "letter-spacing: 1px" dla odstępów między literami. Im większa wartość, tym większy efekt rozstrzelenia tekstu. To...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...Dzięki nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w...