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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| /* CSS3 */
@backgroundClip(@box:border-box) {
-o-background-clip: @box;
-moz-background-clip: @box;
-khtml-background-size: @box;
-webkit-background-clip: @box;
background-clip: @box;
}
@backgroundOrigin(@box:padding-box) {
-o-background-origin: @box;
-moz-background-origin: @box;
-khtml-background-origin: @box;
-webkit-background-origin: @box;
background-origin: @box;
}
@backgroundSize(@size:auto) {
-o-background-size: @size;
-moz-background-size: @size;
-khtml-background-size: @size;
-webkit-background-size: @size;
background-size: @size;
}
/* borderRadius
*
* Works on: Chrome, FireFox 3.5+, Internet Explorer 9.0, Opera 10.5, Safari 3.0+
* Needs test: Konqueror
*
*/
@borderRadius(@tl: .5em; @tr: @tl; @br: @tl; @bl: @tr; @p_tl; @p_tr: @p_tl; @p_br: @p_tl; @p_bl: @p_tr; ) {
-webkit-border-top-left-radius: @tl @p_tl;
-webkit-border-top-right-radius: @tr @p_tr;
-webkit-border-bottom-right-radius: @br @p_br;
-webkit-border-bottom-left-radius: @bl @p_bl;
-khtml-border-top-left-radius: @tl @p_tl;
-khtml-border-top-right-radius: @tr @p_tr;
-khtml-border-bottom-right-radius: @br @p_br;
-khtml-border-bottom-left-radius: @bl @p_bl;
-moz-border-radius-topleft: @tl @p_tl;
-moz-border-radius-topright: @tr @p_tr;
-moz-border-radius-bottomright: @br @p_br;
-moz-border-radius-bottomleft: @bl @p_bl;
border-top-left-radius: @tl @p_tl;
border-top-right-radius: @tr @p_tr;
border-bottom-right-radius: @br @p_br;
border-bottom-left-radius: @bl @p_bl;
}
/* boxShadow
*
* Works on: Chrome, FireFox 3.5+, Internet Explorer 9.0, Opera 10.5, Safari 3.0+
* Needs test: Konqueror
*
*/
@boxShadow(@shadow) {
-o-box-shadow: @shadow;
-moz-box-shadow: @shadow;
-khtml-box-shadow: @shadow;
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
@dropShadow(@x:0; @y:1px; @blur:2px; @spread:0; @color:#000) {
@boxShadow(@x @y @blur @spread @color);
}
@insetShadow(@x:0; @y:1px; @blur:2px; @spread:0; @color:#000) {
@boxShadow(inset @x @y @blur @spread @color);
}
@rotate(@deg: -22deg) {
-o-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-khtml-transform: rotate(@deg);
-webkit-transform: rotate(@deg);
}
/* transition
*
* Works on: Chrome, FireFox 3.7+, Opera 10.5, Safari 3.2+
* Needs test: Konqueror
*
* @property none | all | [property]*
* @duration [time]*
* @function [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
* @delay [time]*
*
*/
@transition(@property: all; @duration: .4s; @function; @delay: 0;) {
-webkit-transition-property: @property;
-webkit-transition-duration: @duration;
-webkit-transition-timing-function: @function;
-webkit-transition-delay: @delay;
-khtml-transition-property: @property;
-khtml-transition-duration: @duration;
-khtml-transition-timing-function: @function;
-khtml-transition-delay: @delay;
-moz-transition-property: @property;
-moz-transition-duration: @duration;
-moz-transition-timing-function: @function;
-moz-transition-delay: @delay;
-o-transition-property: @property;
-o-transition-duration: @duration;
-o-transition-timing-function: @function;
-o-transition-delay: @delay;
transition-property: @property;
transition-duration: @duration;
transition-timing-function: @function;
transition-delay: @delay;
}
@verticalGradient(@top: #FFF; @bottom: #000) {
@gap: ((@bottom - @top) + (@top - @bottom));
@base: @bottom - (@bottom - @top);
background-color: @gap / 2 + @base;
background-image: -moz-linear-gradient(top, @top, @bottom);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, @top),color-stop(1, @bottom));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=@top, EndColorStr=@bottom);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=@top, EndColorStr=@bottom);
}
@horizontalGradient(@left: #FFF; @right: #000) {
@gap: ((@right - @left) + (@left - @right));
@base: @right - (@right - @left);
background-color: @gap / 2 + @base;
background-image: -moz-linear-gradient(left, @left, @right);
background-image: -webkit-gradient(linear,left top,right top,color-stop(0, @left),color-stop(1, @right));
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=@left, EndColorStr=@right, GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=@left, EndColorStr=@right, GradientType=1);
} |
Utilisez-vous les frameworks et les compilateurs CSS ? N'essayent-ils pas de changer sa nature ?
Utilisez-vous des frameworks, compilateurs ou langages CSS ?
Répondre avec citation
Partager