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

Lineáris színátmenet ismétlése


A repeating-linear-gradient() függvény használatával az átmenetek periodikusan ismétlődnek.

Lineáris színátmenet ismétlése ismétlésének beállítása:

kijelölő
{
background-image
:
repeating-linear-gradient(irány, szín1 pozíció, szín2 pozíció, … színN pozíció);
}


Példa:

Forráskód


<style> 
  #div1 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: repeating-linear-gradient(70deg,#000066, #0000ff 15px); 
  } 
  #div2 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: repeating-linear-gradient(90deg,#000066, #0000ff 30%); 
  } 
  #div3 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: repeating-linear-gradient(0deg,#ffffff, #000000 1px, #ffffff 2px, #ffffff 25px); 
  } 
</style> 
... 
<body>   
  <div id="div1"><p>#000066, #0000ff 15px</p></div> 
  <div id="div2"><p>#000066, #0000ff 30%</p></div> 
  <div id="div3"><p>#ffffff, #000000 1px, #ffffff 2px, #ffffff 25px</p></div> 
</body>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: hatter_szinatmenet_linear_ismetel.html

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.