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...
- 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ść...
- 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...
- 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...
- 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>...
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...
- 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...
Wykaz generatorów...nawet w programach komercyjnych! Tester pliku robots.txt Jeśli nie masz pewności co do konstrukcji pliku robots.txt, dobrze jest sprawdzić efekt jeszcze przed wprowadzeniem zmian, ponieważ błąd może skutkować niezamierzonym usunięciem z indeksu wyszukiwarek poważnej części serwisu. Tutaj możesz się również przekonać, jak mogą się zachować starsze roboty, które nie w pełni obsługują standard. Generator ikony strony HTML Stwórz własną ikonę strony przy pomocy kilku kliknięć...
- Menu w CSS / Pionowe menu
...przeglądarkach nie jest konieczne wstawienie wszystkich powyższych deklaracji, jednak tylko taki zestaw właściwie gwarantuje uzyskanie zamierzonego efektu w każdych warunkach. Teraz mamy już przygotowany teren do właściwej stylizacji. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { width: 200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc...
- Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}
...ćwiartki elipsy zaokrąglenia, a druga - pionowy Źródło: CSS Backgrounds and Borders Module Level 3 Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży...