5.07 Szövegformázás - egyéb

Fedettség (átlátszóság)

opacity: érték;

Az érték 0 és 1 között lehet.

  • 1 - teljesen eltakarja (fedett) az alatta lévő területet a tartalom
  • 0.5 - a háttérben lévő tartalom 50%-ban átlátszik
  • 0 - a háttérben lévő tag tartalma 100%-ig átlátszik.

Háttér beállítása

Valamennyi HTML tagnek állíthatjuk a háttérszínét és a háttér egyéb tulajdonságait.Alapesetben a háttér teljesen átlátszó, vaghyis a fedettség értéke: 0;

Background-color: szín;

Korábban volt szó róla. Segítségével beállítható a háttér színe többféle módon...

Background-image: url(érvényes elérési útvonal);

Segítségével a megadott TAG-nek egy kép lehet a háttérszíne. Az útvonal gyakran relatív elérési útvonal. ebben az esetben a CSS fájlhoz viszonyított útvonalat szokás megadni.A kép méretétől és egyéb tulajdonságaitól függően ekár többször is megjelenhet, ahogyan majd később kitérek rá.

Background-repeat: ismétlődés iránya;

A paranccsal előírhatjuk, hogy a háttérnek beállított kép milyen irányban ismétlődjön vagy ne ismétlődjön.

  • background-repeat:repeat; - függőlegesen és vízszintesen is ismétlődik a kép
  • background-repeat:repeat-x; - vízszintesen ismétlődik a kép
  • background-repeat:repeat-y; - függőlegesen ismétlődik a kép
  • background-repeat:no-repeat; - nem ismétlődik a kép
  • background-repeat:inherit; - örökölt érték

Background position: irány;

Használható kulcsszavak:

  • left top: bal oldalon fent
  • left center: bal oldalon középen
  • left bottom: bal oldalon lent
  • right top: jobb oldalon fent
  • right center: jobb oldalon középen
  • right bottom: jobb oldalon lent
  • center top: vízszintesen középen fent
  • center center: vízszintesen és függőlegesen is középen
  • center bottom: vízszintesen középen lent

Background-attachement: kulcsszó;

Segítségével beállíthatjuk, hogy a háttérkép az oldal görgetése esetén az oldallal együtt mozogjon vagy ugyanott maradjon.

  • scroll: a háttérkép görgetésnél az oldal tartalmával együtt mozog
  • fixed: a háttérkép mindig egy helyben marad

Background-origin: kulcsszó;

  • border-box: a szegély külső széléhez történik a viszonyítás.
  • padding-box: a belső margó külső széléhez történik a viszonyítás.
  • content-box: a tartalomterület külső széléhez történik a viszonyítás.

Background-clip: kulcsszó;

Segítségével megadhatjuk, hogy a háttérkép vagy háttérkép egy doboz melyik területén helyezkedjen el.

  • border-box: a háttér területe a szegély területét és magában foglalja. Alapértelmezett érték.
  • padding-box: a háttér területe a tartalom-doboz és a belső margó területét foglalja magában.
  • content-box: a háttér területe csak a tartalom-doboz területét foglalja magában.

Background-size: méret | kulcsszó;

Megadhatjuk, hogy a háttérkép milyen méretben jelenjen meg az oldalon

  • Méret megadásával, a szokásos mértékegységek felhasználásával
  • contain: a háttérkép mérete, a képarány megtartása mellet úgy változik, hogy lefedje a rendelkezésre álló területet. Egyik irányban túlnyúlhat.
  • cover a háttérkép mérete, a képarány megtartása mellet úgy változik, hogy egyik irányban kitöltse a rendelkezésre álló területet. A másik irányban üres terület maradhat.

linear-gradient(irány, forrás színe, cél színe)

Segítségével átmenetes háttereket lehet kialakítani a forrás és a cél színe között

az irány lehet:

  • left: balról jobbra
  • right: jobbról balra
  • top: fentről lefelé
  • bottom: lentről felfelé
  • top left: bal felső sarokból, a jobb alsó felé
  • top right: jobb felső sarokból, a bal alsó felé
  • bottom left: bal alsó sarokból, a jobb felső felé
  • bottom right: jobb alsó sarokból, a bal felső felé

repeating-linear-gradient(pozíció és irány, szín1 pozíció, szín2 pozíció, .... színN pozicíció);

Több szín is használható lineáris átmenetként Ha a közbenső értékekhez nem rendelünk pozíciót, akkor arányosan lesznek elhelyezve az átmenetek. (Pl. A harmadik középre kerül.)
Megadhatjuk az egyes színek gradiens-vonalon elfoglalt helyzetét hosszértékkel, vagy százalékban. Így az egyes részátmenetek tetszőlegesen pozicionálhatók.

radial-gradient(pozíció, határvonal, méret);

Egy kör vagy ellipszis alakú színátmenetet lehet meghatározni. Az átmenet kezdőpontja az első szín, a határvonala a második szín,

  • pozíció: ugyanaz, mint a background-position értékek. Ha nincsen megadva, akkor közép.
  • Határvonal: értéke lehet: circle - kör, vagy ellipse - ellipszis alakú. alapértelmezés: ellipse;
  • méret: A kör és az ellipszis esetén is megadható az alábbi módon:
    • closest-side - A határvonal érinti a legközelebbi doboz oldalat (kör esetén), vagy mind a két oldalt (ellipszis esetén).
    • closest-corner - A határvonal érinti a legközelebbi sarkot.
    • farthest-side - A határvonal érinti a legtávolabbi doboz oldalat (kör esetén), vagy mind a két oldalt (ellipszis esetén).
    • farthest-corner - Alapértelmezett. A legtávolabbi sarkot érinti az átmenet határvonala.
  • Ha a határvonal alak kör, akkor a a méretnél sugarat is meg lehet adni szokásos mértékegységekkel;
  • Ha a határvonal alak ellipszis, akkor két értéket lehet megadni az ellipszis két sugarának a szoksásios mértékegységekkel (vízszintes sugár, függőleges sugár sorrendben)

A színek és a hozzájuk tartozó számértékek a közbeeső átmenetek színei és a távolságuk %-ban vagy pixelben

Megjegyzés:

Mivel ez a beállítás színeket határoz meg, ezért a background-color vagy a color: CSS beállításokná lehet hazsnálni a színátmenetek definiálására.

Példák az átmenetekre!

  • background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
  • background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
  • background: radial-gradient(ellipse at top, #e66465, transparent), radial-gradient(ellipse at bottom, #4d9f0c, transparent);

Részletesebb leírást itt lehet találni: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()