CSS3 ismétlődő színátmenetek [CSS3 tippek]

Sok olyan CSS3 funkció van, amelyek megváltoztatják a webhely díszítésének módját, amelyek közül az egyik a CSS3 gradiens. A CSS3 előtt feltétlenül szükségünk van képekre a gradiens hatás létrehozásához; most ugyanazokat a (és jobb) hatásokat tudjuk elérni, ha csak CSS-t használunk

Korábbi üzeneteinkben kétféle gradiensről beszéltünk, amelyeket CSS3-val lehet elérni:

• Radiális és
• Lineáris gradiensek.

Ezúttal megnézzük a testvérüket: ismétlődő színátmenetek.

Alapvető ismétlés

Ismétlődő színátmenetek lényegében egy kiterjesztés. A szintaxis hasonlít ahhoz, ahogyan a Radial és Linear gradienseket definiáljuk, csak azt, amint azt a név is jelzi, akkor a színek egy meghatározott irányban is megismétlődnek. A lineáris színátmenetek ismétléséhez ezt a funkciót használhatjuk: ismétlődő-lineáris-gradiens, míg megismételjük a radiális vagy elliptikus gradienseket, ezt a funkciót használjuk: ismétlődő-sugaras-gradiens.

 / * Lineáris * / .gradient háttér: ismétlődő-lineáris gradiens (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient háttér: ismétlődő radiális gradiens (50% 50%, kör, # f9f9f9, #cccccc 20px);  

Nem sok különbség van a többi kódon, kivéve a színes ismétlés. Az alábbiakban egy egyszerű illusztráció látható a színes ismétlés működéséről.

Bár a fenti kép csak a lineáris gradiens ismétlődését mutatja, az alapötlet a radiális gradiensekre is vonatkozik, ahol a színek végtelenül, ebben az esetben bármilyen irányban ismétlődnek. A demó megtekintéséhez kövesse az alábbi linket.

• Demó megtekintése

A következő részben megmutatjuk, hogyan használhatjuk a CSS3 ismétlődő színátmeneteket valós példákban.

Példa: Minták létrehozása

A leggyakoribb megvalósítása Ismétlődő színátmenetek a háttérminták létrehozása. Ebben a példában egyszerű függőleges csíkos mintákat hozunk létre.

 .gradiens háttér: ismétlődő-lineáris gradiens (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Figyeljük meg, hogyan definiálunk két különböző színt - # f9f9f9 és #cccccc - ugyanazon a helyen, 20px. Ez a példa élesíti a két szín közötti különbséget és megszünteti a homályosságot.

A tájolás irányításához egyszerűen módosítjuk a szöget - 90deg vízszintesen irányítja azt 45 ° átlósan irányítja és így tovább.

• Demó megtekintése

Példa: Paperline létrehozása

Ebben a második példában olyan papírvonalat fogunk létrehozni, amelyet gyakran láthat egy notebookban. E hatás létrehozásához csak egy div, nincs kép, csak a CSS.

 .gradiens szélesség: auto; magasság: 500px; margin: 0 50px; háttér: -webkit-ismétlődő-lineáris gradiens (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); háttér: -moz-ismétlődő-lineáris gradiens (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); háttér: -o-ismétlődő-lineáris gradiens (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); háttér: ismétlődő-lineáris gradiens (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); háttérméret: 100% 21px;  

Figyeljük meg a CSS3-at is background-size tulajdonság a háttérképek méretének megadásához 100%, 20px. Bár a CSS3 színátmenetek „színeket” mutatnak, valójában képként osztályozzák, nem szín.

Ezután fogjuk használni :előtt pszeudoelem csíkot adjon a papír bal oldalán.

 .gradiens: tartalom: "" előtt; kijelző: inline-block; magasság: 500px; szélesség: 4px; bal oldali: 4px dupla # FCA1A1; pozíció: relatív; balra: 30px;  

És mi végeztünk, ez tényleg egyszerű? Most láthatjuk őket mind az alábbi linkekről.

• Demó megtekintése
• Letöltés forrása

További források

• Webkit CSS3 színátmenetek
• CSS3 színátmenetek a Microsoft Developer Network programban