27 Példák stílusos CSS háttér színátmenetekre

27 Példák stílusos CSS háttér színátmenetekre

A tervező vagy a fejlesztő számára nagyon fontos, hogy naprakész maradjon a webdesign legfőbb trendjein és szabványain. Jelenleg a háttér -színátmeneteket széles körben használják a modern webhelyeken.





Ebben a cikkben a CSS használatával különböző háttér -színátmeneti példákat mutatunk be.



Háttér színátmenetek CSS használatával

A CSS gradiens zökkenőmentes átmenetet mutat két vagy több meghatározott szín használatával. A CSS gradiens jobb irányítást és teljesítményt biztosít a tényleges (gradiens) fájl használatával. Az háttérkép A CSS tulajdonság a színátmenetek háttérként való deklarálására szolgál.





hol használják az e -mail címemet

Háromféle színátmenet létezik: lineáris (létrehozva a lineáris gradiens () funkció), sugárirányú (létrehozva sugárirányú gradiens () funkció), és kúpos (létrehozva a kúpos gradiens () funkció). Emellett ismétlődő színátmeneteket hozhat létre a ismétlődő-lineáris gradiens () , ismétlődő-sugárirányú gradiens () , és ismétlődő-kúpos-gradiens () funkciókat.

Az MDN Docs ezeket a funkciókat határozza meg:



lineáris gradiens () : A lineáris gradiens () CSS függvény két vagy több szín közötti progresszív átmenetből álló képet hoz létre egy egyenes mentén. Ennek eredménye az objektum adattípus, amely egy speciális típus .

sugárirányú gradiens () : Az sugárirányú gradiens () A CSS funkció olyan képet hoz létre, amely progresszív átmenetből áll két vagy több eredet között sugárzó szín között. Alakja lehet kör vagy ellipszis. A függvény eredménye a objektum adattípus, amely egy speciális típus .



kúpos gradiens () : Az kúpos gradiens () A CSS funkció olyan képet hoz létre, amely színátmenetekből áll, és a középpont körül forog (nem pedig a középpontból sugároz). A kúpos gradiensek például kördiagramok és színes kerekek. Az eredmény a kúpos gradiens () függvény az objektum adattípus, amely egy speciális típus .

ismétlődő-lineáris gradiens () : Az ismétlődő-lineáris gradiens () A CSS függvény ismétlődő lineáris gradiensekből álló képet hoz létre. Hasonló a gradiens/lineáris gradiens () -hez, és ugyanazokat az érveket veszi fel, de végtelenül megismétli a színmegállókat minden irányban, hogy lefedje az egész tartályt. A függvény eredménye a objektum adattípus, amely egy speciális típus .



ismétlődő-sugárirányú gradiens () : Az ismétlődő-sugárirányú gradiens () A CSS függvény olyan képet hoz létre, amely ismétlődő színátmenetekből áll, amelyek eredetből sugároznak. Hasonló a gradiens/sugárirányú gradiens () -hez, és ugyanazokat az érveket veszi fel, de végtelenül megismétli a színmegállókat minden irányban, hogy lefedje az egész tartályt, hasonlóan a színátmenet/ismétlődő-lineáris gradienshez (). A függvény eredménye a objektum adattípus, amely egy speciális típus .

ismétlődő-kúpos-gradiens () : Az ismétlődő-kúpos-gradiens () A CSS funkció olyan képet hoz létre, amely ismétlődő színátmenetből (nem egyetlen színátmenetből) áll, és a színátmenetek egy középpont körül forognak (nem pedig a középpontból sugároznak).

Íme az egyes színátmenetek hivatalos szintaxisa.

A lineáris színátmenetek hivatalos szintaxisa

linear-gradient(
[ | to ]? ,

)
= [to left | to right] || [to top | to bottom]

A sugárirányú színátmenetek hivatalos szintaxisa

radial-gradient(
[ || ]? [ at ]? ,

);

A kúpos színátmenetek hivatalos szintaxisa

conic-gradient(
[ from ]? [ at ]?,

)

Íme néhány fantasztikus háttér -színátmeneti példa, amelyek a következő szintre emelhetik webhelye felhasználói felületét.

1. Poros fű

Használja a következő CSS -t a fenti színátmenet létrehozásához:

hogyan szerezhet több tárhelyet az Apple karórán
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. Homoktól kékig

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #DECBA4, #3E5151);

3. Kye Meh

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #8360c3, #2ebf91);

4. Ámen

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #8e2de2, #4a00e0);

5. Pihentető vörös

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #fffbd5, #b20a2c);

6. Fenséges fény

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #fc5c7d, #6a82fb);

7. Megatron

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

8. Kék málna

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #00b4db, #0083b0);

9. Prémium sötét

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #434343 0%, black 100%);

10. Kristályos

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

11. Lawrencium

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);

Összefüggő: Hogyan lehet megváltoztatni a háttérszínt CSS használatával

12. Ó boldogság

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #00b09b, #96c93d);

13. A törzs

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, #870000, #190a05);

14. Sárga mangó

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);

Összefüggő: Mik a lépcsőzetes stíluslapok és mire használható a CSS?

15. Lédús fű

Használja a következő CSS -t a fenti színátmenet létrehozásához:

hogyan távolítsuk el a drm -et kaliberrel
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

16. Rózsaszín hal

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));

Kapcsolódó: The Essential CSS3 Properties Cheat Sheet

17. Tengeri Úr

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

18. Cseresznyevirág

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

19. Friss levegő

Használja a következő CSS -t a fenti színátmenet létrehozásához:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% ); Részvény Részvény Csipog Email A CSS box-shadow használata: 13 trükk és példa

A nyálas dobozok unalmasnak tűnnek. Ragaszd fel őket a CSS doboz-árnyék hatásával!

Olvassa tovább Kapcsolódó témák A szerzőről Yuvraj Chandra(60 cikk megjelent)

Yuvraj egy számítástechnikai egyetemi hallgató a Delhi Egyetemen, Indiában. Szenvedélyesen foglalkozik a Full Stack webfejlesztéssel. Amikor nem ír, a különböző technológiák mélységét kutatja.

Bővebben: Yuvraj Chandra

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide