efekt - Kurs HTML i CSS
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...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
...jest "border-radius"? border-radius w CSS to właściwość, która pozwala zaokrąglić rogi elementu. Określa wartość promienia zaokrąglenia, tworząc efekt zaokrąglonych rogów. Może być stosowana dla różnych elementów, takich jak DIV, IMG czy BUTTON. Jak zaokrąglić "border"? Aby zaokrąglić border w CSS, można użyć właściwości border-radius i określić wartość promienia zaokrąglenia. Na przykład: "border-radius: 10px" zaokrągli wszystkie cztery rogi obramowania o promieniu 10 pikseli...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...Ramka obrazkowa w tle Obrazek obramowania {border-image-source} Ramka obrazkowa w tle Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź ramki, dolna krawędź oraz...
- 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...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
...przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny. Aby jakiekolwiek własności, opisane dalej w tym rozdziale, dały widoczny efekt, konieczne jest dodanie powyższego stylu do elementu, który ma wyznaczać układ elastyczny. Pytania i odpowiedzi {display: flex} Do czego służy "display: flex"? Deklaracja CSS "display: flex" służy do tworzenia elastycznego kontenera, który umożliwia układanie elementów w jednym wierszu lub kolumnie. Dzięki niej można łatwo zarządzać...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
...kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny - każdy element podrzędny byłby ujęty w oddzielną ramkę. Z tego właśnie powodu obramowanie jest jedną z cech CSS niepodlegających dziedziczeniu. W rozdziałach: Komendy CSS 2 oraz Komendy CSS3 możesz sprawdzić, które cechy CSS podlegają, a które nie podlegają dziedziczeniu. Specjalna wartość unset, którą możemy przypisać do...
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ęć...
HTML dla zielonych / Edytory HTML...edytor tekstu przeznaczony przede wszystkim dla webmasterów. Dzięki podglądowi na żywo bezpośrednio w przeglądarce można na bieżąco weryfikować efekty zmian wprowadzanych w tworzonym kodzie HTML i CSS. Dodatkowo obsługuje instalowanie wielu darmowych rozszerzeń, które pozwalają znacznie zwiększyć możliwości programu i jeszcze lepiej dopasować go do własnych potrzeb. PSPad (darmowy) ★★★☆☆ Szybki i lekki edytor produkcji czeskiej, jednak radzący sobie z kodowaniem polskich znaków lepiej...
- HTML dla zielonych / Akapit HTML <p "text-align">
<p>Tu wpisz treść akapitu</p> Akapit (w pewnych warunkach nazywany paragrafem) to pewien ustęp w tekście. Następujące po sobie akapity, są rozdzielone linijką przerwy. Treść akapitu należy wpisać pomiędzy znacznikami <p> oraz </p>. Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: <br><br>, można po prostu objąć...
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...że baza danych wyszukiwarek może nie być cały czas aktualna. Dlatego jeśli wprowadzisz na swojej stronie jakieś zmiany albo dodasz nową podstronę, efekt będzie widoczny w wynikach dopiero, kiedy robot wyszukiwarki ponownie odwiedzi i przetworzy Twoją stronę. Co to jest meta robots? To znacznik, który można wstawić w nagłówku dokumentu HTML - czyli wewnątrz elementu <head>...</head>. Pozwala on sterować widocznością strony w wynikach wyszukiwania np. Google. Na przykład <meta...