アニメーションアイコン css アニメーションを使ってハンバーガーメニューを作ってみた（パート2）
cssのアニメーションで 「ハンバーガーメニュー（パート2）」 アイコンを作成してみました。クリックするとメニューが動きます。ソースhtml<div id="svg_box_02" class="svg_box"> <input type=...
2015-07
アニメーションアイコン アニメーションアイコン css アニメーションを使ってハンバーガーメニューを作ってみた
cssのアニメーションで 「ハンバーガーメニュー」 アイコンを作成してみました。クリックするとメニューが動きます。mouseoverの記述ですが、iPhoneでこれがあるとフォーカスが外れないようで動きが止まってしまいましたので、コメントア...
アイコン – line chart - cssのみで折れ線グラフアイコンを描いてみた
cssのみで 「折れ線グラフ」 アイコンを作成してみました。ソースhtml<div class="line_chart"></div>css/* 枠 */.line_chart { font-size: 100px; position: r...
アイコン – bar chart - cssのみで棒グラフアイコンを描いてみた
cssのみで 「棒グラフ」 アイコンを作成してみました。ソースhtml<div class="bar_chart"></div>css/* 枠 */.bar_chart { font-size: 100px; position: relat...
アイコン – area chart - cssのみで面グラフアイコンを描いてみた
cssのみで 「面グラフ」 アイコンを作成してみました。ソースhtml<div class="area_chart"></div>css/* 枠 */.area_chart { font-size: 100px; position: rel...
アイコン – t-shirts - cssのみでTシャツアイコンを描いてみた
cssのみで 「Tシャツ」 アイコンを作成してみました。Tシャツと書かないとわかってもらえないようなクオリティになってしまいました。斜め線がむずかしいので、直線のみです。ソースhtml<div class="t-shirts"></div>...
アイコン – basketball - cssのみで「バスケットボール」アイコンを描いてみた
cssのみで 「バスケットボール」 アイコンを作成してみました。簡単に出来るとおもったら、結構時間かかってしまいました。ソースhtml<div class="basketball"></div>css/* 本体 */.basketball ...
アイコン – cart - cssのみで「カート」アイコンを描いてみた
cssのみで 「ショッピングカート」 アイコンを作成してみました。斜めの線を使いたかったのですが、うまくいかずに全て直線になってます。ソースhtml<div class="cart"></div>css/* 本体 */.cart { fon...
その他 – R2-D2 - cssのみで「R2-D2」アイコンを描いてみた
cssのみで「R2-D2」アイコンを作成してみました。自分の絵心の無さにビックリしています。ご了承ください。ず～～～っと、「アストロドロイド」だと思っていたら、「アストロメク・ドロイド」だそうです。「メク」って付くのしりませんでした。「R2...
アイコン ファイル - css file –
cssのみで 「ファイル」 アイコンを作成してみました。どうしても右上の折り返しがうまく表現できませんでした。仕方ないので丸くなっています･･･ソースhtml<div class="file"></div>css/* 本体 */.file ...