Skip to content

Instantly share code, notes, and snippets.

@JossWhittle
Created July 28, 2012 01:43
Show Gist options
  • Save JossWhittle/3191396 to your computer and use it in GitHub Desktop.
Save JossWhittle/3191396 to your computer and use it in GitHub Desktop.
Some cross browser LESS css mixns
.twoStopGrad(@one, @two) {
background: @one; /* Old browsers */
background: -moz-linear-gradient(top, @one 0%, @two 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@one), color-stop(100%,@two)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, @one 0%,@two 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, @one 0%,@two 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, @one 0%,@two 100%); /* IE10+ */
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{one}', endColorstr='@{two}',GradientType=0 )"; /* IE6-9 */
background: linear-gradient(top, @one 0%,@two 100%); /* W3C */
}
.rotate(@val, @ox, @oy) {
-moz-transform-origin: @ox @oy;
-webkit-transform-origin: @ox @oy;
-o-transform-origin: @ox @oy;
-ms-transform-origin: @ox @oy;
behavior:url(-ms-transform.htc);
-moz-transform:rotate(@val);
-webkit-transform:rotate(@val);
-o-transform:rotate(@val);
-ms-transform:rotate(@val);
}
.boxShadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.boxShadow (@key: "", @x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.textShadow(@x, @y, @blur, @col) {
-moz-text-shadow: @x @y @blur @col; /* Firefox */
-webkit-text-shadow: @x @y @blur @col; /* Safari, Chrome */
text-shadow: @x @y @blur @col; /* CSS3 */
}
.roundedCorners(@rad) {
-moz-border-radius: @rad; /* Firefox */
-webkit-border-radius: @rad; /* Safari, Chrome */
border-radius: @rad; /* CSS3 */
}
.roundedCorners(@tl, @tr, @br, @bl) {
-moz-border-radius: @tl @tr @br @bl; /* Firefox */
-webkit-border-radius: @tl @tr @br @bl; /* Safari, Chrome */
border-radius: @tl @tr @br @bl; /* CSS3 */
}
.ellipse() {
cursor: pointer;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
}
.opacity(@val) {
@ie: floor(@val * 100);
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ie})";
filter: alpha(opacity=@ie);
-moz-opacity: @val;
-khtml-opacity: @val;
opacity: @val;
}
.noSelect() {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
cursor:pointer;
}
.transition(@val) {
-moz-transition:@val;
-webkit-transition:@val;
-o-transition:@val;
transition:@val;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment