WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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