Pozadí/obrázky
Datum: 16. 7. 2020
Přehled vlastností a zápisů pro obrázky a pozadí na webu.
Obsah:
Pozadí/obrázky
- background-color: barva pozadí
- blue
- #dedede
- rgb(100, 120, 60, 0.5)
- background-image: obrázek na pozadí
- url(‚/obrazky/pozadi.jpg‘)
Toto pozadí se bude opakovat, pokud tomu nenastavíme jinak. Pomocí prvku <br> zde tvořím nové řádky.
Obrázky by měly být přizpůsobené potřebné předpokládané velikosti anebo alespoň mít univerzální charakter použití.
- url(‚/obrazky/pozadi.jpg‘)
Přechody barev
Přechody mohou mít na slabších konfiguracích PC neblahý vliv na výkon a plynulost webu, obvzlášť při velikosti celého okna.
Lineární
background: linear-gradient(to left, green, white);
Další příklady:
background: linear-gradient(to top right, orange 40%, cyan); background: linear-gradient(to top right, rgb(255, 255, 255, 0), rgb(50, 150, 100, 0.8));
Radiální
background: radial-gradient(green, white);
Filtry
CSS atribut filter, má mnoho možností, které lze kombinovat spolu, viz. příklady níže.
- blur(10px)
- brightness(1.5)
- contrast(150%)
- drop-shadow(10px 10px 10px black)
- grayscale(80%)
- hue-rotate(45deg)
- invert(75%)
- opacity(75%)
- saturate(25%)
- sepia(100%)
Kombinace atributů vypadá následovně: filter: hue-rotate(90deg) brightness(1.5) blur(10px);.
Blur
filter:blur(5px);
Zesvětlení
filter:brightness(2);
Kontrast
filter: contrast(300%);
Drop-shadow
filter: drop-shadow(16px 16px 20px blue);
Černobílý
filter: grayscale(100%);
Barevný
filter: saturate(1.8);
Odstíny
filter: hue-rotate(90deg);
Otočení barev
filter: invert(100%);