Tabela została skopionawa ze strony https://www.w3schools.com/colors/colors_names.asp
Tabela została skopionawa ze strony https://www.w3schools.com/colors/colors_names.asp
CSS | Wynik działania |
Określenie koloru poprzez nazwę
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez wartości hex
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości rgb
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości rgba (nieprzezroczystość)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości rgba (brak przezroczystości)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości rgba (półprzezroczystość)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości rgba (pełna przezroczystość)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości hsl
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości hsla (brak przezroczystości)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości hsla (półprzezroczystość)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Określenie koloru poprzez określenie wartości hsla (pełna przezroczystości)
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
Poniższa tabelka z paletą bezpiecznych barw HTML została wykonana automatycznie przy użyciu JavaScript
<script>
var k = ['00','33','66','99','CC','FF'];
for(var r=0; r<k.length; r++)
for(var g=0; g<k.length; g++)
for(var b=0; b<k.length; b++){
document.write('<div style="height:100px;width:100px;float:left;background:#'
+k[r]+k[g]+k[b]+'">
<p style="background:rgba(0,0,0,.5);color:white;padding:5px;">#'
+k[r]+k[g]+k[b]+
'</p></div>');
if(b==5)
document.write('<div style="clear:both"></div>');
}
</script>
<script>
for(var h=0; h<=360; h++)
document.write('<div style="height:5px;width:100%;float:left;background:hsl('+h+',100%,50%)"></div>');
</script>
Wszystie odcienie koloru
<script>
for(var s=0; s<=100; s++)
document.write('<div style="height:10px;width:100%;float:left;background:hsl(0,'+s+'%,50%)"></div>');
</script>
<script>
for(var l=0; l<=100; l++)
document.write('<div style="height:10px;width:100%;float:left;background:hsl(0,100%,'+l+'%)"></div>');
</script>
CSS | Wynik działania |
Określenie koloru tła nazwą
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.
|
Określenie koloru tła heksadecymalnie
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.
|
Określenie koloru tła rgb
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.
|
Określenie koloru tła hsl
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.
|
Określenie koloru tła rgba. Tło wewnętrznego div'a nie jest przezroczyste
|
div wewnętrzny
|
Określenie koloru tła rgba. Tło wewnętrznego div'a jest półprzezroczyste
|
div wewnętrzny
|
Określenie koloru tła rgba. Tło wewnętrznego div'a jest w pełni przezroczyste
|
div wewnętrzny
|
CSS | Wynik działania |
Obraz wykorzystywany jako tło | ![]() |
Określenie obrazu tła
|
|
background-repeat:repeat domyślne działanie
|
|
background-repeat:repeat-x
|
|
background-repeat:repeat-y
|
|
background-repeat:no-repeat
|
|
background-repeat: space
|
|
background-repeat: round
|
|
background-attachment:scroll domyślne działanie
|
|
background-attachment:fixed
|
|
background-position:left top domyślna wartość. Na potrzeby przykładu nie będziemy powtarzać tła
|
|
background-position:top right domyślna wartość. Na potrzeby przykładu nie będziemy powtarzać tła
|
|
Wszystkie określenia położenia
|
|
background-position wartości liczbowe domyślna wartość. Na potrzeby przykładu nie będziemy powtarzać tła
|
|
background-position wartości liczbowe Na potrzeby przykładu nie będziemy powtarzać tła
|
|
Teraz pokażę, że pozycja początkowa ma wpływ na powtarzanie tła
|
Div ze zmienioną pozycją tła
|
background-size : wartości liczbowe - 2 wartości
|
|
background-size : wartości liczbowe - jedna wartość
|
|
background-size: wartości procentowe - dwie wartości
|
|
background-size: wartości procentowe - jedna wartość
|
|
background-size : cover (przykrycie całego obszaru obrazem. Obraz zostanie rozciągnięty i przycięty)
|
|
background-size : contain (przykrycie całego obszaru obrazem. Obraz zostanie rozciągnięty na wysokość w taki sposób, aby na pewno był widoczny w całości)
|
|
CSS | Wynik działania |
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy
|
|
Gradient liniowy powtarzany
|
|
Gradient liniowy powtarzany
|
|
Gradient kołowy
|
|
Gradient kołowy
|
|
Gradient kołowy
|
|
Gradient kołowy
|
|
Gradient kołowy
|
|
Gradient kołowy
|
|
Gradient kołowy powtarzany
|
|
Gradient kołowy powtarzany
|
|
CSS | Wynik działania |
1. Styl obramowania dotted
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
2. Styl obramowania dashed
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
3. Styl obramowania solid
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
4. Styl obramowania double
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
5. Styl obramowania groove. Styl obramowania 3D. Efekt lepiej widoczny przy szerszych obramowaniach
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
6. Styl obramowania ridge. Styl obramowania 3D.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
7. Styl obramowania ridge. Styl obramowania 3D. Efekt lepiej widoczny przy szerszych obramowaniach
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
8. Styl obramowania inset. Styl obramowania 3D. Efekt lepiej widoczny przy szerszych obramowaniach
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
9. Styl obramowania outset. Styl obramowania 3D. Efekt lepiej widoczny przy szerszych obramowaniach
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
10. Styl obramowania none - brak obramowania
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
11. Styl obramowania hidden - obramowanie ukryte
|
|
11. Styl obramowania - mieszany
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
12. Styl obramowania - mieszany
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
13. Styl obramowania - mieszany
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
14. Styl obramowania - mieszany
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
15. Styl obramowania - mieszany
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
16. Styl obramowania - mieszany
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
CSS | Wynik działania |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
border-width:medium;
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
border-width:thin;
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
border-width:thick;
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
CSS | Wynik działania |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
RGBA - rgb z przezroczystością
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
RGBA - rgb z przezroczystością
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
RGBA - rgb z przezroczystością
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
RGBA - rgb z przezroczystością
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim. |