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