tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-5946530704742130970.post-85304044466838396972014-01-21T00:23:00.001+08:002014-01-21T00:23:41.999+08:00[Less] 簡單做到背景漸層對選顏色不擅長,又想在網頁做出 CSS 漸層效果,Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色),透過這兩個函數就可以輕鬆產生漸層所需要的色差,然後調整百比值就可以控制漸層的色階。<br />
<br />
<pre class="css" name="code">.toolbar {
@color: #914;
@lighten: lighten(@color, 3%);
@darken: darken(@color, 3%);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
</pre><br />
上面除了用 linear-gradient 來產生漸層,額外還加上了 background-color 這個保險,讓不支援 CSS3 的 browser 也能有基本的底色。<br />
<br />
<br />
這樣寫還是有點麻煩,如果包成 mixin 會更方便,如下:<br />
<pre class="css" name="code">.bg-vertical-gradient(@color, @amount:3%) {
@lighten: lighten(@color, @amount);
@darken: darken(@color, @amount);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
.toolbar {
.bg-vertical-gradient(#914);
}
.banner {
.bg-vertical-gradient(#702, 5%);
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0