1. 定义圆角及调用
  2.  
  3. /*
  4. 定义圆角
  5. @radius 圆角大小
  6. */
  7. .round(@radius:5px){
  8. border-radius:@radius;
  9. -webkit-border-radius: @radius;
  10. -moz-border-radius: @radius;
  11. }
  12. .round7{
  13. .round(7px);
  14. }
  15.  
  16. 定义盒子阴影及调用
  17.  
  18. /*
  19. 盒子阴影
  20. @right_left 右边阴影为正数 左边负数
  21. @bottom_top 下边阴影为正数 上边负数
  22. @box 阴影大小
  23. @box_color 阴影颜色
  24. */
  25. .boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){
  26. box-shadow:@arguments;
  27. -moz-box-shadow:@arguments;
  28. -webkit-box-shadow:@arguments;
  29. }
  30. .boxshadow7{
  31. .boxshadow(7px,7px,7px,black);
  32. }
  33.  
  34. 定义文字阴影及调用
  35.  
  36. /*
  37. 文字阴影,可以指定多组阴影
  38. @right_left1 右边阴影为正数 左边负数
  39. @bottom_top1 下边阴影为正数 上边负数
  40. @text 阴影大小
  41. @text_color 阴影颜色
  42. */
  43. .textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){
  44. text-shadow:@arguments;
  45. }
  46. .r_b_textshadow{
  47. .textshadow();
  48. }
  49.  
  50. 定义透明度及调用
  51.  
  52. /*
  53. 透明度 或渐变 1为不透明 0透明
  54. css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值
  55. 用来兼容所有浏览器
  56. */
  57. .rgba(@rgba_a:.4,@rgb_b:40){
  58. filter: alpha(opacity=@rgb_b);
  59. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})";
  60. opacity:@rgb_a;
  61. }
  62. .rgba4{
  63. .rgba();
  64. }
  65.  
  66. 定义列布局及调用
  67.  
  68. /*
  69. 列布局
  70. @c1 列数
  71. @c2 列宽
  72. @c3 列间距
  73. @c4 边框样式
  74. */
  75. .column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){
  76. column-count:@c1;
  77. column-width:@c2;
  78. column-gap:@c3;
  79. column-rule:@c4;
  80. -webkit-column-count:@c1;
  81. -webkit-column-width:@c2;
  82. -webkit-column-gap:@c3;
  83. -webkit-column-rule:@c4;
  84. -moz-column-count:@c1;
  85. -moz-column-width:@c2;
  86. -moz-column-gap:@c3;
  87. -moz-column-rule:@c4;
  88. }
  89. .my_column{
  90. .column(3,50px,3px,1px solid #ccc);
  91. }
  92.  
  93. 定义背景渐变及调用
  94. 复制代码
  95. /*背景渐变
  96. @start 渐变开始颜色
  97. @end 结束颜色
  98. */
  99. .bg(@start :#00ffff,@end :#9fffff){
  100. background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));
  101. background:-moz-linear-gradient(top,@start ,@end);
  102. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,
  103. endColorstr=@end ,grandientType=0);
  104. }
  105. .my_bg{
  106. .bg(red,yellow);
  107. }
  108.  
  109. image
  110.  
  111. 定义轮廓内部框及调用
  112.  
  113. /*
  114. 画轮廓 就是内部框
  115. @outline 样式
  116. @outline1 间距 负数在内部
  117. */
  118. .outline(@outline:1px solid #699,@outline1:-10px){
  119. outline:@outline;
  120. outline-offset:@outline1;
  121. }
  122. .my_outline{
  123. .outline();
  124. }
  125.  
  126. image
  127.  
  128. 定义旋转,菱形旋转,缩放,移动及调用
  129.  
  130. /*
  131. 旋转角度
  132. @ro定义度数
  133. IE不支持 滤镜支持0,1,2,3
  134. */
  135. .rotate(@ro :30deg){
  136. transform: rotate(@ro);
  137. -webkit-transform: rotate(@ro);
  138. -moz-transform: rotate(@ro);
  139. -o-transform: rotate(@ro);
  140. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  141. }
  142. .rotate50{
  143. .rotate(50deg);
  144. }
  145.  
  146. /*
  147. 菱形旋转角度
  148. @x横向缩放比例
  149. @y纵向缩放比例
  150. */
  151. .skew(@roX :30deg,@roY :30deg){
  152. transform: skew(@roX,@roY);
  153. -webkit-transform: skew(@roX,@roY);
  154. -moz-transform: skew(@roX,@roY);
  155. -o-transform: skew(@roX,@roY);
  156. -ms-transform: skew(@roX,@roY) ;
  157. }
  158. .skew30{
  159. .skew(50deg);
  160. }
  161.  
  162. /*
  163. 放大缩小
  164. @x横向缩放比例
  165. @y纵向缩放比例
  166. */
  167. .scale(@x :1.2,@y :1.2){
  168. transform: scale(@x,@y);
  169. -webkit-transform: scale(@x,@y);
  170. -moz-transform: scale(@x,@y);
  171. -o-transform: scale(@x,@y);
  172. -ms-transform: scale(@x,@y);
  173. }
  174. .my_scale{
  175. .scale();
  176. }
  177.  
  178. /*
  179. 移动距离
  180. @x横向移动距离
  181. @y纵向移动距离
  182. */
  183. .translate(@x :80px,@y :80px){
  184. transform: translate(@x,@y);
  185. -webkit-transform: translate(@x,@y);
  186. -moz-transform: translate(@x,@y);
  187. -o-transform: translate(@x,@y);
  188. -ms-transform: translate(@x,@y);
  189. }
  190. .translate80{
  191. .translate();
  192. }
  193.  
  194. /*
  195. 综合上面4种变化,效果看下面的过度动画
  196. @rotate
  197. @scale
  198. @skew
  199. @translate
  200. */
  201. .transform(@rotate :360deg,@scaleX :1,@scaleY :1,@skewX :0deg,@skewY :0deg,@translateX :100px,@translateY :0px){
  202. transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
  203. -webkit-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
  204. -moz-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
  205. -o-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
  206. -ms-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
  207. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  208. }
  209. .my_transform{
  210. .transform();
  211. }
  212.  
  213. 定义过度动画及调用
  214.  
  215. /*
  216. 过度动画
  217. id是css属性
  218. 2s过度时间 0s是开始时间
  219. ease-in进入
  220. */
  221. .tran(@t :id 2s ease-in 0s){
  222. transition:@t ;
  223. -moz-transition:@t ;
  224. -o-transition:@t ;
  225. -webkit-transition:@t ;
  226. }
  227. .my_tran{
  228. &:hover{
  229. .transform();
  230. .tran(all 2s ease-in 0s);
  231. }
  232. }
  233.  
  234. 定义Animation动画及调用
  235.  
  236. /*
  237. less文件中定义的函数
  238. Animation 动画
  239. @animation-name规定需要绑定到选择器的 keyframe 名称
  240. @animation-duration规定完成动画所花费的时间,以秒或毫秒计,默认是 0。
  241. @animation-timing-function规定动画的速度曲线。默认是 "ease"。
  242. @animation-delay规定在动画开始之前的延迟。默认是 0。
  243. @animation-iteration-count规定动画应该播放的次数。默认是 1。
  244. @animation-direction规定是否应该轮流反向播放动画。默认是 "normal"。
  245. */
  246. .animation(@animation-name,@animation-duration,@animation-timing-function,
  247. @animation-delay,@animation-iteration-count,@animation-direction){
  248. animation: @arguments;
  249. /* Firefox: */
  250. -moz-animation: @arguments;
  251. /* Safari 和 Chrome: */
  252. -webkit-animation: @arguments;
  253. /* Opera: */
  254. -o-animation: @arguments;
  255. }
  256. .my_animation{
  257. .animation(mykeyframes,5s,linear,2s,infinite,normal);
  258. }
  259.  
  260. /***CSS定义的keyframes如下:****/
  261. @keyframes mykeyframes
  262. {
  263. 0% {background: red; left:0px; top:0px;}
  264. 25% {background: yellow; left:200px; top:0px;}
  265. 50% {background: blue; left:200px; top:200px;}
  266. 75% {background: green; left:0px; top:200px;}
  267. 100% {background: red; left:0px; top:0px;}
  268. }
  269.  
  270. @-moz-keyframes mykeyframes /* Firefox */
  271. {
  272. 0% {background: red; left:0px; top:0px;}
  273. 25% {background: yellow; left:200px; top:0px;}
  274. 50% {background: blue; left:200px; top:200px;}
  275. 75% {background: green; left:0px; top:200px;}
  276. 100% {background: red; left:0px; top:0px;}
  277. }
  278.  
  279. @-webkit-keyframes mykeyframes /* Safari 和 Chrome */
  280. {
  281. 0% {background: red; left:0px; top:0px;}
  282. 25% {background: yellow; left:200px; top:0px;}
  283. 50% {background: blue; left:200px; top:200px;}
  284. 75% {background: green; left:0px; top:200px;}
  285. 100% {background: red; left:0px; top:0px;}
  286. }
  287.  
  288. @-o-keyframes mykeyframes /* Opera */
  289. {
  290. 0% {background: red; left:0px; top:0px;}
  291. 25% {background: yellow; left:200px; top:0px;}
  292. 50% {background: blue; left:200px; top:200px;}
  293. 75% {background: green; left:0px; top:200px;}
  294. 100% {background: red; left:0px; top:0px;}
  295. }

以下写的就是关于使用less对颜色搭配的技巧。

在本教程中,我们将使用LESS中的一些函数帮助你控制颜色,更好地配色并保持其组织性。

前言:用LESS CSS框架进行编码会简化代码结构,提高我们的工作效率,但是试验后你会发现,默认情况下,LESS在Firefox中能被正确编译,实现效果,但IE和Chrome是无法解析LESS代码的,必须对浏览器进行一些设置才行。如果希望对LESS有一个最基础的了解,IBM 对LESS CSS框架的简介会帮到你http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

使用LESS color函数创建配色方案

LESS提供了一些函数,使定义和操作颜色变得超级简单。在本教程中,我们将使用其中的一些函数帮助你控制颜色,更好地配色并保持其组织性。

色轮

首先是spin()函数,它可以让我们在色轮上指定一种颜色。这个函数是非常有用的,比如说,在进行配色的时候。你可能已经看过一些常见的颜色结构,以一种和谐的方式进行组合,比如说互补色,三元色,混合色。使用一些工具,像 Adobe ColorCC (原名Kuler),你可以遵循这些结构快速的生成配色方案。但是如何使用LESS制定我们自己的配色方案呢?

互补色

我们将以生成最简单地色彩结构——互补色开始。这种互补的颜色正好在色轮相反的位置。

首先,我们定义一种基准色,然后参照基准色定义第二种颜色。挑选一种你最喜欢的,或者是任意一种突然浮现在你脑海里的颜色。这里我们挑选了一种青蓝色,#3bafdA,作为实例:

由于想要在色轮上得到基准色的补色,我们将度数值设为180。

  1. @color-base       : #3bafdA;
    @color-complement : spin(@color-base, 180);

这让我们得到两个精确、可爱的颜色,它们是互补的。

以下是将这些颜色应用到网页原型设计中的一个例子:

三元色

我们可以进一步探讨颜色模型并且创建一个三元色结构。“三元”,顾名思义,是由三种颜色组成。因此,我们将色轮分成三部分,并且用函数spin()来设置旋转的度数:

  1. // Triadic structure
    @color-base        : #3bafdA;
    @triadic-secondary : spin(@color-base, -(360 / 3));
    @triadic-tertiary  : spin(@color-base, (360 / 3));

结果证明同样是不错的:

混合色

创建配色方案的另一种方式是对两种颜色进行混合,也许就像你上小学美术课时学到的那样。例如,如果我们把红色与黄色混合,我们会得到橙色。在LESS中,我们可以使用mix()函数实现同样的效果:

  1. div {
        color: mix(red, yellow);
    }

这个例子的输出的是“#ff8000”——“橙色”的准确的十六进制颜色编码:

  1. div {
      color: #ff8000;
    }

提示

避免混合频谱相同的颜色。对于基准色#3bafdA——位于可见光谱蓝色光的范围之内,通过与一种对立的颜色进行混合我们将得到一种比较满意的结果,比如说中紫罗兰红或者浅海绿色:

  1. @color-base      : #3bafdA;
    @color-primary   : mix(@color-base, mediumvioletred);
    @color-secondary : mix(@color-base, lightseagreen);
    @color-tertiary  : mix(@color-base, mintcream);

这给了我们一个可爱的配色方案,所有生成的颜色由于继承相同的色调#3bafdA而显得非常和谐。

假如你对色彩一无所知,你可以挑选一种你最喜欢的颜色,通过mix()函数与其他任何一种颜色进行混合,结果可能令你大吃一惊。

以下有一个采用混合色得到的结果进行手机原型设计的例子:

颜色的色调和饱和度

让我们研究一些其他的配色方法。

明暗度

明暗度定义了一种颜色明与暗的程度。在网页设计中,明暗度一般用来区分元素的状态。举个例子,一个按钮,可能在:hover时是较浅的颜色,在:focus时是较深的颜色。在LESS里,我们就可以分别使用函数darken()和lighten()使一种颜色深一点或者浅一点。

  1. @color-base  : #3bafdA;
    @color-hover : lighten(@color-primary, 10%); //#9c84c1
    @color-focus : darken(@color-primary, 10%); //#684b94

结果是:

饱和度

或者,我们可以调整颜色饱和度来代替明暗度。饱和度定义了一种颜色的深度。饱和度越大,颜色越亮丽,最低饱和度则会使颜色趋于灰色。

拿上面的例子来说,我们可以用saturate() 和 desaturate()函数来替换明暗度的函数,此外,还可以定义未激活状态的颜色。

  1. @color-base    : #3bafdA;
    @color-hover   : saturate(@color-primary, 10%);
    @color-focus   : desaturate(@color-primary, 10%);
    @color-disable : lightness(desaturate(@color-primary, 100%), 30%);

进一步调整颜色的不饱和度,直到认为它在你的设计背景中合适为止。

现在当我们自定义按钮样式的时候,我们的变量色都是与基准色紧密联系的;当基准色改变的时候,它们都会进行相应的变化。

智能色彩输出

LESS让我们的样式变得更智能。举例来说,我们能让我们的样式自己“思考”并决定什么颜色在什么条件下适用。假设我们正在创建一个网站模板,这是按钮的基本样式,你打算用不同的颜色和风格来扩展它。但是我们怎样控制颜色的输出呢?我们当然不希望深色的文字在深色的背景上,反之亦然。我们需要确保文本保留对比,以便于阅读,这样,contrast()函数就派上用场了。

  1. @body-bg: #000;
     
    body {
        
        color: contrast(@body-bg);
    }

在上面的例子中,我们通过contrast()函数来设置颜色。这样确保文本颜色与背景颜色有足够的反差。在这种情况下,由于背景颜色是#000,文本颜色应该返回#fff。如果你设置背景色为浅色,比如说白色,烟白,或者天蓝色,文本颜色应该返回#000。

  1. body {
      
      color: #fff;
    }

你也可以自定义颜色的明暗。在下面的例子中,颜色值将返回#999或#777,而不是#fff,或者#000。

  1. @body-bg     : #f0f0f0;
    @color-light : #999;
    @color-dark  : #777;
     
    body {
        
        color: contrast(@body-bg, @color-dark, @color-light);
    }

通常情况下,如果颜色是透明的,尤其是背景颜色,我也不想输出颜色声明。对此,我们可以在LESS 混合闭包内封装background声明。

  1. @bg: transparent;
    .element {
        & when not (@bg = transaprent) {
            background: @bg;
        }
    }

你也可以为border属性和color属性作同样的声明,并通过删除不必要的规则在你的样式表里只保留几行代码。你同样可以在声明border与color属性时做同样的事,并只保留一些必要的代码。

结束语

我希望我介绍的某些函数能帮助你在设计中提升配色能力。你可以在LESS官网上上找到完整的函数清单,并试验它。我非常同意Kezz Bracey的说法。配色的唯一方法就是反复的试验。

“直到我通过反复试验来开始创建可靠的配色方案,我所看过的所有色彩理论才开始变得有意义

用Less定义常用的CSS3效果函数及常用颜色搭配(让CSS写起来更有趣)的更多相关文章

  1. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  2. CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果

    CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果 CREATE CSS3 彩蛋爆料直击现场 CREATE CSS3是一款在线集成众多CSS3功能的生成器,可 ...

  3. 用IE滤镜实现多种常用的CSS3效果

    CSS3是当下非常火的一个话题之一,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫 ...

  4. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

  5. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  6. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  7. jquery 动画总结(主要指效果函数)

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

  8. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  9. Kotlin的高阶函数和常用高阶函数

    Kotlin的高阶函数和常用高阶函数 文章来源:企鹅号 - Android先生 高阶函数的定义 将函数当做参数或者是返回值的函数 什么是高阶函数 可以看看我们常用的 函数: 首先我们可以知道, 是 的 ...

随机推荐

  1. dubbo框架揭秘之服务引用

    ApplicationConfig config = new ApplicationConfig("hello-worldp"); RegistryConfig reg = new ...

  2. centos5.5關閉ssh保留運行的程序

    SSH会话关闭时,ssh所关联的pty关闭,系统会给这个pty所关联的session中的所有进程发送SIGHUP信号, SIGHUP的默认信号处理程序是终止进程,除非进程自己处理了SIGHUP. 解决 ...

  3. 2.8. 创建 NSManagedObject 的子类 (Core Data 应用程序实践指南)

    现在根据模型来创建NSManagedObject的子类.如果模型改变了,那就就重新生成这些文件.所以,不要在生成的文件里自定义方法,因为重新生成之后,这些修改就丢失了.假如确实需要重新生成自定义的方法 ...

  4. 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景(一)

    同样从CSDN搬过来 博客开这么久了,就发过一篇很水的文章,一直想写点正式的东西.这次准备开工一个仿其他游戏的简单小游戏,于是开博客把开发过程记录下来.这一系列文章主要讲,我是如何从零开始使用Coco ...

  5. Java中多线程原理详解

    Java是少数的集中支持多线程的语言之一,大多数的语言智能运行单独的一个程序块,无法同时运行不同的多个程序块,Java的多线程机制弥补了这个缺憾,它可以让不同的程序块一起运行,这样可以让程序运行更加顺 ...

  6. javascript与java编码互转

    java:java.net.URLEncoder.encode(s, "UTF-8");java.net.URLDecoder.decode(chezhanInEn,"U ...

  7. 如何让微信小程序快速接入七牛云

    如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看 ...

  8. 《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象

    如果要在web中使用JAVASCRIPT,那么BOM(浏览器对象模型)毫无疑问是最重要的部分.BOM提供了很多对象,例如,window.location.navigator.screen.histor ...

  9. (2)java程序走一遍工作流activiti

    工作流从流程定义到创建一个流程实例完成执行步骤 使用activi-designer创建一个流程定义(.bpmn结尾的文件) 将定义好的流程定义和生成的png图片通过RepositoryService( ...

  10. iOS实现白板、画板功能,有趣的涂鸦工具,已封装,简单快捷使用

    一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式].  三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...