CSSでクリックされた時(クリック中)に変化する要素を作る方法

CSSでクリックされた時(クリック中)に変化する要素を作る方法
このエントリーをはてなブックマークに追加
PR

CSSでは、マウスオンされたときに文字の色を変えたり、色々な変化をhoverで制御するのが常套手段として使われていますが、activeプロパティを使うことで、クリック中の変化を与えることが出来ます

 

activeを使ってクリック感を出す

DEMOで幾つかアクションを加えた時の動作を作ってみましたので試してください

DEMO 表示

 

使い方は至って簡単です
hoverを使っていたようにactiveを使うだけなのです

CSS コード

.click:active {変化を与える}

使い方はたったのこれだけです

 

DEMOページの4目の例のコードではこの様になっています

CSS コード

.click {
    background: green;
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #fff;
    margin: 30px auto;
    border-radius: 50%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.click:active {
    -webkit-box-shadow:
    0 0 0 15px #fff,
    0 0 0 18px green;
    -moz-box-shadow:
        0 0 0 15px #fff,
    0 0 0 18px green;
    box-shadow:
        0 0 0 15px #fff,
    0 0 0 18px green;
}

HTMLコード

<p class="click">Click</p>

クリック中にはbox-shadowの動作をアニメーションさせています

 

他にどんな使い方が出来るか?

例えばクリックすると、画像が反転して解説が出るとか
キャンペーンサイト等で、色々なところをクリックして秘密の情報を探そう!っていう遊びにも使えそうです

キャンペーンコードを隠したり

javascriptと組み合わせて、クリック回数によって内容を変化させるとかも出来そうですね

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)