outset - Kurs HTML i CSS
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...
Aktualizacja / System newsów...border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu */ text-decoration: none; } /* Treść */ .news dd { background: white; /* tło */ color: black; /* kolor tekstu */ font-size: 12px...
- Komendy CSS3 / Tło i obramowanie CSS
...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 border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
...nawisu - możliwe są kombinacje: border-image-slice border-image-slice / border-image-width border-image-slice / border-image-width / border-image-outset powtarzania Jedna lub więcej z tych części musi się pojawić na liście wartości atrybutów. Na przykład: div { border-image: url(punkt.gif) 10 } /* border-image-source: url(punkt.gif); border-image-slice: 10 */ div { border-image: url(punkt.gif) 10 / 10px } /* border-image-source: url(punkt.gif); border-image-slice: 10...
- Komendy CSS3 / Maskowanie CSS
Źródło: CSS Masking Module Level 1 Spis treści clip clip-path clip-rule mask mask-border 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...
- Obramowanie CSS / Styl obramowania {border-...-style}
...Przykład border-top-style: groove ridge - "grzbiet" Przykład border-top-style: ridge inset - "ramka" Przykład border-top-style: inset outset - "przycisk" Przykład border-top-style: outset Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania
- Obramowanie CSS / Styl obrysu {outline-style}
...rowek". Przykład outline-style: groove ridge - "grzbiet". Przykład outline-style: ridge inset - "ramka" Przykład outline-style: inset outset - "przycisk" Przykład outline-style: outset Obrys jest zbliżony swoim wyglądem do obramowania. Istnieją jednak pewne różnice: Obrys nie zajmuje miejsca w modelu pudełkowym i dlatego nie wpływa na rozmiary ani pozycję żadnych elementów. Obrys nie musi być prostokątem. Jest tworzony zawsze na wierzchu elementu. Można ustawiać...
- Obramowanie CSS / Atrybuty mieszane stylu obramowania {border-style}
...Przykład {border-style} border-style: dashed border-style: double solid border-style: double solid dashed border-style: groove ridge inset outset
- Indeks, wyszukiwarka / Wygląd
...polecenia CSS. W tym celu w pliku indeks.css należy wkleić np.: #indeks { width: 300px; padding: 10px 0; background: #ccc; border: 2px outset #aaa; text-align: center; margin: 1em auto; } #indeks input.text { width: 290px; } #indeks select { width: 100%; margin: 2px 0 10px 0; } #indeks input.button { width: 100px; margin-left: 5px; margin-right: 5px; } W wyróżnionych miejscach wpisano identyfikator indeksu, zdefiniowany uprzednio w pliku...
- Menu w CSS / Poziome menu
...ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { position...