アートあいくる

  • Introduction

    オンラインゲーム、Webデザイン、坂本真綾、その他色々。

    スキルアップを目標にがんばって更新しております。
    アートあいくるのやる気は、皆様の応援コメントから少しずつ蓄積されていく仕様になっております。

  • About this

    誰かの役に立つ記事を書く。大好きなwebデザインを通して、考えをシェアする。
    そんな素敵ブログになりたいけど、実際難しい。

    アートも大好き。でもデザインとアートは全く違う。
    デザインはもっと好き。思いやりでできている。

    じゃあ何でアートあいくる ?
    それは語呂が良いからでした。

ブログを移転しました。新しいブログはこちらです。

スポンサーサイト

  • スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

最新記事

Comment

むかしHTMLでHP作ったことあるからなんとなく分かる。
という程度の理解しかできないんですが、これを参考に似たものを作ることくらいはできます。
最近ギルメンがブログ始めたので見せてみようかと思います。
  • きりえ

コメントしてあげよう !

ブログを移転しました。新しいブログはこちらです。

画像を使わずCSSだけでアニメーションするチェックボックスを作ってみるTips

  • Web design

サムネイル

ふと思いついたのでメモ。既出な気がするけど気にしない。

DEMO

こんな感じにアニメーションしてくれるチェックボックスを作ってみます。
IE9以上で動作。スマホ用として使っていけるはず…。

実装手順

  1. input要素を非表示に
  2. 擬似要素とCSS3を使ってチェックボックスのデザインを作る
  3. 擬似要素と擬似セレクタとCSS3を使ってアニメーションさせる

HTML

<label>
  <input type="checkbox">
  <span><i></i>利用規約に同意する</span>
</label>

必要に応じてクラス名をつけて下さい。今回はそのまま要素名でスタイルを指定していきます。
順番に見ていきましょう。


1. input要素を非表示に

label {
    cursor: pointer;
    display: inline-block;
    height: 44px;
    position: relative;
}

input {
    display: none;
}

チェックボックス非表示

input要素を非表示にします。クリッカブルエリアが分からなくなるのでlabel要素もいじります。
display: none はSEO的に良くないという都市伝説を考えるなら別の方法で消した方がいいかも ?

2. 擬似要素とCSS3を使ってチェックボックスのデザインを作る

label span {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    position: relative;
}

label span:before, label span:after {
    border-bottom: 1px solid #2C918D;
    content: "";
    left: 8px;
    position: absolute;
    top: 25px;
    width: 13px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

label span:after {
    left: 15px;
    top: 21px;
    width: 24px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

label i {
    background: #fff;
    display: inline-block;
    height: 44px;
    margin-right: 16px;
    position: relative;
    vertical-align: top;
    width: 44px;
}

チェックボックスをデザインする

transform プロパティはIE9でも対応しているようなので、IE9以上なら問題なく動作します。ボーダーを回転させて斜めの線を2つ作り、それらを組み合わせてチェックマークに見立てています。

画像にしてもらって何ら問題ありませんが、CSSで作ればアニメーションさせられる利点があります。
色を変えるとか、線を太くするとか、色々工夫できそう。

擬似要素と擬似セレクタとCSS3を使ってアニメーションさせる

label span i:after {
    background: #fff;
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
    z-index: 2;
}

input:checked + span i:after {
    transition: width 0.2s ease-in 0s;
    width: 0;
}

チェックマークをアニメーションで描いたように見せる

ここが重要なポイント。チェックマークがアニメーションで描画されたかのように見えるわけです。

本当はニコニコ動画用のユーザースタイルシートで使いたかったんだけど、HTMLがいじれなかったので断念…。
フラットデザイン向きかつスマホ向きなのでそのうち使ってみよう。

スポンサーサイト

最新記事

Comment

むかしHTMLでHP作ったことあるからなんとなく分かる。
という程度の理解しかできないんですが、これを参考に似たものを作ることくらいはできます。
最近ギルメンがブログ始めたので見せてみようかと思います。
  • きりえ

コメントしてあげよう !

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。