Pozadí/obrázky

Datum: 16. 7. 2020
Štítky: HTML/CSS
Kategorie: Grafika, Web

Přehled vlastností a zápisů pro obrázky a pozadí na webu.

Obsah:

  1. Pozadí/obrázky
  2. Přechody barev
  3. Filtry
    1. Černobílý
    2. Barevný
    3. Zesvětlení
    4. Drop-shadow
    5. Odstíny
    6. Kontrast
    7. Otočení barev

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í.

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.

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%);
LOGO