WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

CSS3 stíluslapok készítése

CSS3 hátér


    A háttérszínek beállításával és háttérképek használatával esztétikussá tehetjük HTML oldalainkat.                         

Programozott tananyag:


Háttérszín
Valamennyi HTML elemnek külön-külön beállíthatjuk a háttérszínét. Alapesetben a háttér teljesen átlátszó.

Háttérkép
Egy HTML elem háttereként képet is lehet használni. Arra mindenképpen ügyelni kell, hogy a háttérkép előtt megjelenő szöveg olvasható maradjon.

Háttérkép ismétlése
Ha a háttérkép mérete kisebb mint a rendelkezésre álló terület, akkor a böngészők alapértelmezetten vízszintesen és függőlegesen egyaránt addig ismétlik a kép megjelenítését, amíg a rendelkezésre álló terület egészét le nem fe

A háttér pozíciója
A background-position tulajdonság segítségével megadhatjuk a háttérkép helyzetét. A pozíció megadása történhet kulcsszavakkal, százalékban vagy hosszmértékegységgel megadva az eltolás mértékét.

Háttérpozíció referenciapont
A background-origin tulajdonság segítségével megadhatjuk, hogy mihez viszonyítva határozza meg a böngésző a háttérkép helyzetét.

A háttér görgetése
A background-attachment tulajdonság segítségével megadhatjuk, hogy a háttérkép az oldal görgetése esetén az oldallal együtt mozogjon, vagy mindig ugyanott jelenjen meg.

A háttér területe
A background-clip tulajdonság segítségével megadhatjuk, hogy a háttérkép vagy háttérkép egy doboz mely területén helyezkedjen el.

A háttér mérete
A background-size tulajdonság segítségével megadhatjuk, hogy a háttérkép milyen méretben jelenjen meg az oldalon.

A háttér beállítása gyorsírással
A háttér beállításait gyorsírással is megadhatjuk, a következő sorrendben: background: background-image background-position / background-size background-repeat background-attachment background-clip background-origin background-color,

A színátmenet ( gradient )
A színátmenetek segítségével a HTML elemek hátterénél 3D hatásokat hozhatunk létre. Kettő szín használata esetén a kezdő és végérték között a böngésző egyenletes átmenetet biztosít.

Lineáris átmenet iránya
A gradiens-vonal iránya megadható a függőleges tengellyel bezárt szögével.

Több lineáris színátmenet
Kettőnél több színt is megadhatunk. Ha a közbenső értékekhez nem nem rendelünk pozíciót, akkor arányosan lesznek elhelyezve. (Pl. A harmadik középre kerül.)

Lineáris színátmenet és átlátszóság
Ha a színátmenet definiálásakor a színek megadására az rgba( ) alakot használjuk, akkor a háttér egyes részei áttetszővé tehetők.

Lineáris színátmenet ismétlése
A repeating-linear-gradient() függvény használatával az átmenetek periodikusan ismétlődnek.

Sugárirányú színátmenetek
Sugárirányú színátmenetnél egy pontból kiindulva ellipszis vagy kör alakban jön létre az átmenet.

Sugárirányú színátmenetek pozíciója
A sugárirányú színátmenet középpontjának pozíciója megadható kulcsszóval, hosszméretben vagy százalékban.

Sugárirányú színátmenetek mérete
A befoglaló kör vagy ellipszis méretét kulcsszavakkal adhatjuk meg.