<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gradient size and how to repeat a gradent like a pro</title>
<style>
section{
font:arial;
}
div{
width:500px;
height:200px;
display:table;
margin:auto;
}
p{
font:arial;
text-align:justify;
}
.linear-usecase div{
text-align:center;
color:white;
position:relative;
}
.info-box-1{
width:30px;
border-left:10px solid gray;
position:absolute;
left:10%;
font-weight:bolder;
}
.gdt{
background:repeating-linear-gradient(to right,red 0px,red 5px,navy 5px,navy 10px);
}
.info-box-2{
width:30px;
border-left:10px solid gray;
position:absolute;
right:10%;
font-weight:bolder;
}
.gdt-slices{
background:linear-gradient(to right,red 0px,red 5px,navy 5px,navy 10px,transparent 10px);
}
.info-box-3{
width:30px;
border-left:10px solid gray;
position:absolute;
left:10%;
font-weight:bolder;
}
.gdt-slices-size{
background:linear-gradient(to right,red,red 5px,navy 5px,navy 10px);
background-size:10px 150px;
background-repeat:repeat;
}
.rgdt{
background:radial-gradient(200px 100px ellipse at 20% 40%,red,navy);
}
.info-box-4{
width:30px;
border-left:10px solid gray;
position:absolute;
left:5%;
font-weight:bolder;
}
.rgdt-2{
background-image:radial-gradient(80px 50px ellipse at 20% 50%,red,navy);
background-size:150px 150px;
background-repeat:no-repeat;
background-position:40% 70%;
}
.info-box-5{
width:30px;
border-left:10px solid gray;
position:absolute;
right:10%;
font-weight:bolder;
}
.rgdt-3{
background:repeating-radial-gradient(100px circle at 10% 50% ,white,white 5px,red 5px,red 10px);
}
</style>
</head>
<body>
<section class="linear">
<p><h1>linear-gradient size:</h1>we can imagine a linear gradient as a simple backgound image and the gradient is covering the entire gradient box(element background) then we can size the gradient(background image) using background-size property and repeat it using background-repeat set it's positions using background-positions and so on just like simple image background.also we can size a linear gradient to be as big as <b><i>one slice only</i></b> (so we are giving it a size) using color-stop position values(remember we can achieve the same using background-size property)</p>
<p><h1>repeating a linear gradient:</h1>again imagine the linear gradient as aa background image and we can repeat it using background-repeat.so if we draw a linear gradient to be as big as one slice only and repeat it using backgoround-repeat so we are achieving the same goal repeating-linear-gradient(); function was created for.or we can use repeating-linear-gradient() function which is basicly better.
<p>examples explain better:</p></p>
<section class="linear-usecases">
<div class="gdt">
<div class="info-box-1">repeating the gradient using repeating-linear-gradtien() function</div>
</div>
<div class="gdt-slices">
<div class="info-box-2">the gradient is faked to have only one slice using transparent color-stop</div>
</div>
<div class="gdt-slices-size">
<div class="info-box-3">repeating-linear-gradient() faked using background-size and background-repeat properties.</div>
</div>
</section>
<p>the size of a linear gradient can be descided in two ways: one if we decide the gradient that i want then use background-size peoperty and then use background-repeat: if i want to repeat it just like when i use repeating-linear-gradient() function or simply i size it to any size desired.two if i descide it using color-stops.that is color-stop positions will descide how big the gradient size will be then i should either end the gradient with <i style="color:red;">transparent</i> color-stop so that i can stop the spreading over the gradient line that keeps going until the end of the gradient line and have only one slice of gradient or use <i style="color:red;">repeating-linear-gradient();</i> if i want the gradient to be repeated over the background).</p>
</section>
<section class="radial">
<div class="rgdt">
<div class="info-box-4">
sizing the ending shape(circle&elipse) using radial-gradien() function
</div>
</div>
<p>the size of the radial gradient when descided in the gradient function <i style="color:red;">radial-gradient();</i>will only calculate the size of the ending shape which in turn calculating the gradient ray length.</p>
<div class="rgdt-2">
<div class="info-box-5">sizing the entire radial gradient (as background-image)using background-size property </div>
</div>
<p>now the radial gradient can be sized just like any normal background-image using background-size,this is quite different than calculating the size of the ending shape inside the radial-function,here, we are only calculating the size of the background that the gradient as a (background image) will take from the element's total background size..</p>
<div class="rgdt-3">
<div class="info-box-4">radial gradient repeated using repeating-radial-gradient.repeating using background-repeat is a different idea.this is the only way to get this result</div>
</div>
</section>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.