wstawianie - Kurs HTML i CSS
Układ wielokolumnowy CSS / Liczba kolumn {column-count}(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-count: liczba } Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów]. Liczba jest wartością naturalną, większą od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto. Polecenie jest przydatne, jeżeli ważniejsze jest dla nas, aby tekst zawsze znajdował się w ściśle określonej liczbie kolumn...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
Spis treści {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ź...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-slice: obcięcie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "obcięcie" należy podać podziałkę (domyślnie: 100%), według której obrazek zostanie pocięty na siatkę, składającą się z dziewięciu części: czterech narożników, czterech krawędzi i środka. Możliwe jest przy tym podanie: jednej wartości - określa jednakowe odległości cięć linii siatki od...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-width: szerokość } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "szerokość" należy podać konkretną wartość wyrażoną w jednostkach długości, procentach (względem całkowitego obszaru obramowania obrazkowego) lub jako liczba naturalna (podająca wielokrotność szerokości obramowania). Wpisanie auto ustali wartość automatyczną. Możliwe jest przy tym...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-outset: nawis } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "nawis" należy podać wartość szerokości wystającej poza krawędź tradycyjnego obramowania, wyrażoną w jednostkach długości lub jako liczba naturalna (podająca wielokrotność szerokości obramowania). Możliwe jest przy tym podanie: jednej wartości - określa jednakową szerokość nawisu poza...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-repeat: powtarzanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie) repeat - obrazek zostanie powielony na całej powierzchni round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
(CSS 3 - interpretuje Internet Explorer 11, Firefox 15, Opera 15, Chrome) selektor { border-image: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości obramowani obrazkowego: źródło, obcięcie, szerokość, nawis i powtarzanie. Polecenie pozwala w sposób skrócony wypełnić wszystkie atrybuty obramowania obrazkowego. Ważne jest przy tym zachowanie...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
Spis treści {background: linear-gradient repeating-linear-gradient} Gradient liniowy {background: linear-gradient} Powtarzany gradient liniowy {background: repeating-linear-gradient} Gradient liniowy {background: linear-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
Spis treści {background: radial-gradient repeating-radial-gradient} Gradient promienisty {background: radial-gradient} Powtarzany gradient promienisty {background: repeating-radial-gradient} Gradient promienisty {background: radial-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Układ elastyczny w bloku: selektor { display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci...