CSSで単純なスケッチを作成する方法

あなたはSkeuomorphismのファンなら、そのスタイルでボタンを作成する上でこのチュートリアルはあなたのためです.あなたが野生で見つけるスケッチ形のボタンは、あらゆる種類の形をとることができます、しかし、我々は私が使用したものに類似した基本的なものをつくりますthis Pen .

正常状態

最初のボタンの状態で始めるには、必要なHTMLを示します.

<button>
    <span tabindex="-1">Button</span>
</button>

理由<span> それにtabindex キーボードのみのフォーカスを後でオフにするためです.私たちは:focus-visible ここでは、深いブラウザサポートのためだけにRoman Komarov’s approach 既に使用.
より良い組織と生産性のために、我々はSASS(SCSS構文)ですべてのスタイリングをします.その後、我々はボタンの背景とテキストの色の2つの変数だけでなく、任意の状態のないフラットな色のボタンで起動します$btnColor , $btnTextColor ).

body {
    background: #c7cad1;
}
button {
    $btnColor: #0053d0;
    $btnTextColor: #fff;
    background: $btnColor;
    border: 0 {
        radius: 0.375em;
    };
    color: $btnTextColor;
    cursor: pointer;
    font: 24px/1.5 sans-serif;
    margin: 1.5em auto;
    padding: 0.5em 1em;
    -webkit-tap-highlight-color: transparent;
    &, span {
        display: block;
    }
}

ここに鍵のあるものがあります.

体のための少し暗く十分なページ背景(または親要素が何でなければならないか)を有することは、ボタン穴の全ての端を見ることができます.

我々はクリア-webkit-tap-highlight-color アップルデバイス上で簡単に暗いハイライトを避けるために.

ボタンとテキストスパンの両方がdisplay: block を指定する.

ここまでは、ここにあります.

現在、我々は観察を適用します.後にもっと変数が必要です$btnTextColor ボタンエッジ、ドロップシャドウ色、ダークエッジ、ライターエッジ、および暗い色のエッジのボタンの色の多くを採用のボタンエッジのために.

button {
    . . .
    $btnEdge: 0.2em;
    $btnHoleEdge: 0.1em;
    $dropShadowColor: rgba(0,0,0,0.47);
    $darkEdgeColor: rgba(0,0,0,0.27);
    $lightEdgeColor: rgba(255,255,255,0.27);
    $coloredDarkEdgeColor: darken($btnColor,10%);
    . . .
}

次はどこでも&, span { } , ボタンの大きさを描画するためのボックスの影の順番は次のようになります.

button {
    . . .
    box-shadow:
        // drop shadow
        $btnEdge $btnEdge 0.5em $dropShadowColor,
        // top, left, and right edges of hole
        0 (-$btnHoleEdge) 0 $btnHoleEdge $darkEdgeColor,
        // bottom edge of hole
        0 $btnHoleEdge 0 $btnHoleEdge $lightEdgeColor,
        // right edge of button
        (-$btnEdge) 0 $btnEdge $coloredDarkEdgeColor inset,
        // top edge of button
        0 $btnEdge $btnEdge $lightEdgeColor inset,
        // left edge of button
        $btnEdge 0 $btnEdge $lightEdgeColor inset,
        // bottom edge of button
        0 (-$btnEdge) $btnEdge $coloredDarkEdgeColor inset;
    . . .
}

どこで我々が描くか、影が色であるかは、光の方向がどこにあるかによって異なります.この場合、それは左上から来るでしょう.したがって、影は右から、上から0.2 emキャストされる.どのように陰影をつけるかを説明する

使用する$darkEdgeColor 若干の暗い透明度をほとんどどんな光も受けなければならない穴の端に加えること.

$lightEdgeColor 透明な白をより多くの光を受けている穴とボタン端に加えるためにあります(注:最初にそれをカバーしますので、我々はボタンが押されるとき、完全な効果を見ます).

最小の光を受けているボタン端でもう少し色のために、我々は申し込みます$coloredDarkEdgeColor むしろ$darkEdgeColor .

テクスチャーは今蹴りますが、より多くのものが行きます.

上から下まで少しのシェーディングを加えて、現在の背景まで頂上に小さな反射を加えてスパイスしましょう.

button {
    . . .
    background:
        // top-to-bottom shading
        linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.13)),
        // reflection at top
        radial-gradient(90% 7% at 50% 8%,rgba(255,255,255,0.47) 25%,rgba(255,255,255,0) 50%),
        $btnColor;
}

ある角度から物体を見ると、時々色合いの見える遷移を見ることができます.例えばプラスチックの写真を撮ってください.

MacOSのデジタルカラーメーター(またはあなたのお気に入りの画像編集ツールでは、スポイトと同様のイメージをクリックすることができます)でそれの側に沿って実行すると、赤から赤く赤に(約経度Eb 0011〜Count 5 D 5000 E)に徐々にシフトを見ることができます.それが最初のグラデーションの目的です.材料によっては、2番目のグラデーションが示すトップエッジでいくつかの反射を見ることができます.
ボタンの最初の状態に加える最後のものは、前にこのテキスト影です&, span { } :

button {
    . . .
    text-shadow: 0 0 $btnEdge fade-out($btnTextColor,0.53);
    . . .
}

私たちが同じ値を持つわずかなぼかしを提供するならば、テキストはとてもシャープに見えません$btnEdge と同じ色が約半分不透明度.
我々が今持っているものを見て、我々はボタン州とともに前進する準備ができています!

:アクティブ状態

ダウン状態から始めるには、追加変数が必要です$coloredDarkerEdgeColor 少し濃い青で.

button {
    . . .
    $coloredDarkerEdgeColor: darken($btnColor,20%);
    . . .
}

ボタンの暗い青い端は、ボタンと穴端の間で光の不足を示すために押される間、暗くなるはずです.
次に、いくつかのパラメータを変更して同じスタックの影を適用します:active ボタンのテキスト範囲の縮小縮小だけでなく、

button {
    . . .
    &:active {
        box-shadow:
            // pull shadow inward
            0 0 0 $dropShadowColor,
            // edges of hole stay the same
            0 (-$btnHoleEdge) 0 $btnHoleEdge $darkEdgeColor,
            0 $btnHoleEdge 0 $btnHoleEdge $lightEdgeColor,
            // darker right shadow with a bit of blue to result from button being deep into hole
            (-$btnEdge) 0 $btnEdge $coloredDarkerEdgeColor inset,
            // similar shadow at top and left
            0 $btnEdge $btnEdge $darkEdgeColor inset,
            $btnEdge 0 $btnEdge $darkEdgeColor inset,
            // same as 4th shadow but coming from bottom
            0 (-$btnEdge) $btnEdge $coloredDarkerEdgeColor inset;
        span {
            transform: scale(0.95);
        }
    }
}

この時点で何が起こるかを要約する

xとyの位置を0に変更し、そのドロップシャドウを内側に引く.

何も起こらないので、私たちは、穴の端のために次の2つの箱影を残します.

番目と最後の影は、我々は暗い青色を適用する場所です$coloredDarkerEdgeColor .

最後の前の明るい影は、直接反対色を使用します$darkEdgeColor .

同時に、ボタンのテキストtransform トップダウン3 Dの視点を与える.

私たちがここで何をしたのかというと、それは単にカップルボックスの影とテキストのスケーリングの変更だからです.
今のボタンが必要なものはいくつかのアニメーションです.0.1秒を加えましょうbox-shadow and transform ボタンとスパンと同様にwill-change: transform ボタンは、上下にジャミングから停止しますスパンに.

button {
    . . .
    transition-property: box-shadow;
    &, span {
        display: block;
        transition: {
            duration: 0.1s;
            timing-function: linear; 
        }
    }
    span {
        transition-property: transform;
        will-change: transform;
    }
    . . .
}

結局のところ、我々は我々が探している効果がありますしかし、それはあなたがそれにタブまたはクリックするかどうか、ネイティブのフォーカスリングは、ボタンやテキストを囲むことを確認する奇妙に見えます.それに取り組むことは、最終的なステップです.

:フォーカス状態

ボタンもテキストもそのネイティブなアウトラインを持っていないので:focus , それを取りましょうoutline: none .

button {
    . . .
    &, span {
        . . .
        &:focus {
            outline: none;
        }
    }
    . . .
}

新しいフォーカススタイルのために、我々は最高にボタンに合うものを考慮しなければなりません.ボタンがLEDであるならば、背景色の変化は確かにボタン色で余分の箱影と同様に多分合うでしょう.このようなプラスチックボタンの場合は、テキストの色の変更だけでなく、その影の作品最高.そのため、もう一つの変数を呼び出す$btnTextFocusColor ), そして、我々はボタン色のより軽い陰を使います.直後に:active セレクタは、我々が適用するところです:focus .

button {
    . . .
    $btnTextFocusColor: lighten($btnColor,40%);
    . . .
    &:focus {
        color: $btnTextFocusColor;
        text-shadow: 0 0 $btnEdge fade-out($btnTextFocusColor,0.53);
    }
}

そして今、我々は完全なボタンを持っている!今それをクリックすると、それらの迷惑フォーカスリングはありません.さらに、新しい焦点は持続してはいけません.ボタンのテキストを含むスパンがそれをカバーするからです.そのように、それはクリックするか、そのボタンをタップより自然に見えるでしょう.したがって、それはキーボードを介してだけでは、テキストの変更の色は、ユーザーがタブを示すために色を変更する必要があります.

結論

すべてのすべてで、これらのまたは他のフォームコントロールのような現実的な探しボタンは、複雑なHTML構造を必要としません.我々はここでそれらを使用しなかったが、あなたも:before and :after あなたがより多くの要素を感じるならばthis LED switch , 回転部分はどちらです.効果的にグラデーションやボックスの影をスタックを学習することにより、可能な限りの少ないDOM要素の詳細の多くを引き出すことができます.