تابع ()linear-gradient در CSS

linear-gradient() Function

تابع ()linear-gradient در CSS طیفی را با شیب رنگی، از رنگی به رنگ دیگر ایجاد می کند. در ایجاد گرادینت (شیب رنگ) حداقل باید دو رنگ مشخص شود تا طیف خطی بین آنها تشکیل شود.

نحوه نوشتار

background: linear-gradient(red, yellow, blue);
background: linear-gradient(to top, red, yellow, blue);
background: linear-gradient(to left, red 20%, yellow 70%, blue 90%);
background: linear-gradient(37deg, red 20%, yellow 70%, blue 90%);

background: linear-gradient(جهت/زاویه, color-stop1, color-stop2, ...)

با تعیین رنگ ها در این تابع، شیبی از رنگ ها ایجاد می شود که از رنگی به رنگ دیگر به نرمی تبدیل می شود. همچنین می توان نقطه آغاز و جهت و زاویۀ حرکت این طیف را بین رنگ ها تعیین کرد.

تعیین جهت، زاویه و مکان رنگ ها

با تعیین جهت و مکان رنگ ها می توان شیب های رنگی را بطور دلخواه داشته باشیم، شخصی سازی کرده و بسازیم.

بصورت پیشفرض در حالتی که دو رنگ به تابع داده شده باشد، مکان یکی در ابتدا و مکان دومی در انتهای عنصر در محور افقی خواهد بود. اگر بیش از دو رنگ به تابع داده شود، بطور پیشفرض عرض عنصر به تعداد رنگ ها تقسیم شده و هریک در فاصله مساوی از یکدیگر قرار گرفته و شیب رنگ، از رنگی به رنگ دیگر تشکیل خواهد شد. اما می توان مکان رنگ ها را تغییر داد و گرادینت هایی با مقیاس های متفاوت از حرکت رنگ ها به یکدیگر را تشکیل داد:

با تغییر مکان های پیشفرض بر حسب درصدی از عرض عنصر، در چگونگی پراکندگی گرادینت، تغییر ایجاد می کنیم. توجه داشته باشید که جهت گرادینت از چپ به راست (to right) مشخص شده. بنابراین اولین رنگ در ابتدای سمت چپ و آخرین رنگ داده شده به تابع، در انتهای سمت راست خواهد بود:

اما بجای تعیین جهت با کلیدواژه می توان با تعیین درجه، شیب و جهت گرادینت را نیز مشخص کرد:

در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:

html

<div class="box">
    <p>(to right, red, blue, green, yellow)</p>
    <div class="rect1"></div>
</div>
<div class="box">
    <p>(to right, red 25%, blue 30%, green 45%, yellow 100%)</p>
    <div class="rect2"></div>
</div>
<div class="box">
    <p>(-30deg, red, blue, green, yellow)</p>
    <div class="rect3"></div>
</div>
<div class="box">
    <p>(-30deg, red 23%, blue 30%, green 44%, yellow 83%)</p>
    <div class="rect4"></div>
</div>

css

.box {
    width: 50%;
    min-width: 350px;
    float: left;
}
.box div {
    width: 350px;
    height: 150px;
    margin: 15px auto 25px;
}
p {
    color: purple;
    font: normal 13px consolas;
    margin: 0;
    text-align: center;
}
.rect1 { 
    background: linear-gradient(to right, red, blue, green, yellow); 
}
.rect2 {
    background: linear-gradient(to right, red 25%, blue 30%, green 45%, yellow 100%);
}
.rect3 { 
    background: linear-gradient(-30deg, red, blue, green, yellow); 
}
.rect4 { 
    background: linear-gradient(-30deg, red 23%, blue 30%, green 44%, yellow 83%); 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.