image repeat - Kurs HTML i CSS
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...
- Komendy CSS3 / Tło i obramowanie CSS
Źródło: CSS Backgrounds and Borders Module Level 3 Spis treści background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source...
- Komendy CSS3 / Maskowanie CSS
...mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type clip Obcinanie Wartość rect() | auto Inicjalizacja auto Zastosowanie elementy pozycjonowane absolutnie Dziedziczenie nie Procenty nie Media visual clip-path Kształt obcinania Wartość <clip-source> | [ <basic-shape> || <geometry-box> ] | none...
Menu drzewiaste / Skrypt menu drzewiastego...0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.closed { background-image: url("closed.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.opened { background-image: url("opened.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree...
- 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ź...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów: body { background-color: kolor tła; background-image: url(ścieżka dostępu do obrazka); color: kolor tekstu; } W wyróżnionych miejscach należy wpisać odpowiednio: kolor tła Definicja koloru który wyświetli się w tle strony w następujących przypadkach: w miejscach gdzie grafika tapety będzie miała elementy przezroczyste (jest to możliwe np. w formacie GIF) lub półprzezroczyste (format PNG)...
- Tło CSS / Atrybuty mieszane tła {background}
...atrybuty tła. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: url(obrazek) (background-image), no-repeat (background-repeat) czy left (background-position). Wszystkie wartości muszą być oddzielone od siebie spacjami. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red)...
- Menu w CSS / Poziome menu
...color: #fff; padding: 10px 20px; border-right: 1px solid #fff; border-right: 1px solid #fff; } ul a:hover { background-color: #800; background-image: url("tlo2.gif"); } Chociaż w tym przykładzie rozmiary odnośników nie zostały ustalone, wyświetliliśmy je blokowo z uwagi na możliwy błąd w bardzo starych przeglądarkach. Ponadto konieczne było przypisanie oblewania (float: left) również znacznikowi obejmującemu pozycje listy (<ul>...</ul>), ponieważ bez tego menu wyglądałoby następująco...
- Menu w CSS / Pionowe menu
...background: #bfb url("tlo.gif") repeat-x top; color: #365; border-left: 1px solid #797; } ul a:hover { background-color: #797; background-image: url("tlo2.gif"); color: #eff; } Do przygotowania powyższego menu potrzebne są trzy grafiki: punkt.gif - punkt listy tlo.gif - tło odnośnika tlo2.gif - tło odnośnika podświetlonego Widok w powiększeniu: Za pomocą CSS nie można dodawać żadnych znaczników do kodu źródłowego dokumentu, nie można zatem wygenerować znacznika <img>, który...