引数に色を指定するだけで作るcss3ボタンのmixin(要compass,scss環境)
例えば
<a class="btn">クリック!</a>
というHTMLに対し、
.btn { @include css3-button(red); }
というcssを書くと、
このような赤いボタン、
.btn { @include css3-button(blue); }
と書くと、
このように青いボタンが出る、
というmixinです。
引数にはどのような色も指定でき、その色をベースにしたcss3ボタンを瞬時に作ってくれます。
scssの@mixin、便利!
@mixin css3-button($base-color) { /* IE8以下対策でベースカラーを背景色に指定 */ background: $base-color; /* 角丸を3px指定(compassのincludeでブラウザ間の差異を吸収) */ @include border-radius(3px); /* box-shadowを指定(compassのincludeでブラウザ間の差異を吸収) */ @include box-shadow (0px 1px 3px rgba(000,000,000,0.3), inset 0px 0px 1px rgba(255,255,255,0.5)); /* text-shadowを指定(compassのincludeでブラウザ間の差異を吸収) */ @include text-shadow (0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3)); /* 背景色を指定(compassのincludeでブラウザ間の差異を吸収) */ @include background-image( linear-gradient( /* グラデーション開始色・・・ベースカラーに白(#fff)を50%混合 */ mix($base-color, #fff, 50%), /* 50%の位置まで徐々にベースカラーになる */ $base-color 50%, /* 50%の位置でベースカラーに黒(#000)を60%混合したカラーでグラデーション開始 */ mix($base-color, #000, 60%) 50%, /* ベースカラーと白(#fff)80%の割合で混合した色まで変化 */ mix($base-color, #fff, 80%) ) ); /* ベースカラーに黒を8:2の割合で混合した色でborder(枠線)をつける */ border: 1px solid mix($base-color, #000, 80%); color: white; display: block; padding: 6px 10px; text-decoration: none; &:hover { /* box-shadowのinsetを明るく大きくし、rolloverを表現 */ @include box-shadow (0px 1px 3px rgba(000,000,000,0.3), inset 0px 0px 15px rgba(255,255,255,0.6)); /* ベースカラーでborder(枠線)をつける */ border: 1px solid $base-color; } }
jsdo.itでのデモ
http://jsdo.it/dentaq/hKLv
Githubにも上げておきました。