Sample

以下のサンプルは、本文の背景色ではあまりわからないものがあるため記載したものです。

更新などによりミックスインの内容が本文とは異なっているものがありますがご了承ください。

Line Sample / 背景に彫り込まれたように見える線

@mixin line-bottom($black: .2, $white: .3){
    border-bottom: 1px solid rgba(0, 0, 0, $black);
    @include box-shadow(rgba(255, 255, 255, $white) 0 1px 0);
}

Border Sample / box-shadow を枠線代わりに利用

@mixin box-shadow-border($shadow: 0.15, $blur:2px){
    @include box-shadow(rgba(0, 0, 0, $shadow) 0 0 $blur);
}

.bs_border {
    @include box-shadow-border($shadow: 0.2, $blur:1px);
    @include border-radius(4px);
}

内側に向かってぼかしの長い box-shadow を入れることで質感を出す。

@mixin box-shadow-border-inset($shadow: .2, $blur: 10px){
    @include box-shadow(0 0 $blur rgba(0, 0, 0, $shadow) inset);
}

.inset_border {
    @include box-shadow-border-inset($shadow: .3, $blur: 20px);
    @include border-radius(4px);
}

凹ボックス（deboss-box）

@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) {
    border: 1px solid rgba(0,0,0,$border);
    @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 2px inset, rgba(255,255,255,$highlight) -1px 1px 0);
}

.deboss {
    @include deboss-box($border: .1, $shadow: .05, $highlight: .8);
}

凸ボックス（emboss-box）

@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) {
    border: 1px solid rgba(0, 0, 0, $border);
    @include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 0, rgba(255, 255, 255, $highlight) -1px 1px 0 inset);
}

.emboss {
    @include emboss-box($border: .1, $shadow: .05, $highlight: .5);
}

クリックすると凹むボタン

Button

Text Shadow / 浅く彫り込んであるように見えるテキストシャドウ

@mixin ts-dark-char($op : .7){
    text-shadow: -1px 1px rgba(0, 0, 0, $op);
}

Text Shadow Sample 1

線形グラデーション

@mixin gradient-vertical-bottom($color:#666, $adjust:10%){
    background-color: $color;
    @include filter-gradient(adjust-lightness($color, $adjust), $color, vertical);
    @include background-image(linear-gradient(adjust-lightness($color, $adjust) 0%, $color 100%));
}

@mixin gradient-vertical-top($color:#666, $adjust:10%){
    background-color: $color;
    @include filter-gradient($color, adjust-lightness($color, $adjust), vertical);
    @include background-image(linear-gradient($color 0%, adjust-lightness($color, $adjust) 100%));
}

@mixin gradient-vertical-middle($color:#666, $top:10%, $bottom:10%, $reverse:false){
    background-color: $color;
    @if $reverse == true {
        @include filter-gradient(scale-lightness($color, -$top), scale-lightness($color, $bottom), vertical);
        @include background-image(linear-gradient(scale-lightness($color, -$top) 0%, scale-lightness($color, $bottom) 100%));
    }@else{
        @include filter-gradient(scale-lightness($color, $top), scale-lightness($color, -$bottom), vertical);
        @include background-image(linear-gradient(scale-lightness($color, $top) 0%, scale-lightness($color, -$bottom) 100%));
    }
}

ボタン

button