efekt - Kurs HTML i CSS
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...
- 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ć...
- 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...
- 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...
- 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...
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...
- 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...