cssのみでアイコンを作ってみました。

– battery empty – cssのみでバッテリーアイコン(空)を描いてみた
cssのみで 「バッテリー」 アイコンを作成してみました。
前回は3分の1で今回は空です。
ず~~~~~と忙しくて全然更新してなかったので約3年ぶり… ひどいですね。
また少しずつでも進められれば!
ソース
html
<div ...

– battery one third – cssのみでバッテリーアイコン(3分の1)を描いてみた
cssのみで 「バッテリー」 アイコンを作成してみました。前回は4分の1なので、今回は3分の1を作ってみました。3分の1って「one third」って言うんですね。「ハーフ」や「クオーター」はよく聞くけど知らなかったです…
ソース...

– battery quarter – cssのみでバッテリーアイコン(4分の1)を描いてみた
cssのみで 「バッテリー」 アイコンを作成してみました。前回は半分なので、今回は4分の1を作ってみました。最近なかなか更新できないです…
ソース
html
<div class="battery_quarter">&...

– battery half – cssのみでバッテリーアイコン(半分)を描いてみた
cssのみで 「バッテリー」 アイコンを作成してみました。前回はフル充電時なので、今回は半分を作ってみました。
ソース
html
<div class="battery_half"></div>
css
/*...

– battery full – cssのみでバッテリーアイコン(フル)を描いてみた
cssのみで 「バッテリー」 アイコンを作成してみました。最近なかなか更新出来ていなかったので、久しぶりに作ったら結構忘れてました・・・
ソース
html
<div class="battery_full"></di...

– 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...

ファイル - css file –
cssのみで 「ファイル」 アイコンを作成してみました。どうしても右上の折り返しがうまく表現できませんでした。仕方ないので丸くなっています・・・
ソース
html
<div class="file"></div>...

共有 - css share –
cssのみで 「共有」 アイコンを作成してみました。
ソース
html
<div class="share"></div>
css
/* ○ */
.share {
font-size: 100px;
po...

ベッド - css bed –
cssのみで 「ベッド」 アイコンを作成してみました。寝てるように見えないですね。
ソース
html
<div class="bed"></div>
css
/* 本体 */
.bed {
font-size...

フォーク・ナイフ – css cutlery –
cssのみで 「フォーク・ナイフ」 アイコンを作成してみました。
ソース
html
<div class="cutlery"></div>
css
/* フォーク */
.cutlery {
font-...

女性 - css female –
cssのみで 「女性」 アイコンを作成してみました。
ソース
html
<div class="female"></div>
css
/* 体・脚 */
.female {
font-size: 100px;...

男性 - css male –
cssのみで 「男性」 アイコンを作成してみました。
ソース
html
<div class="male"></div>
css
/* 体・脚 */
.male {
font-size: 100px;
po...

消しゴム - css eraser –
cssのみで 「消しゴム」 アイコンを作成してみました。
ソース
html
<div class="eraser"></div>
css
/* ケース */
.eraser {
font-size: 100p...

トグルスイッチ OFF - css toggle off –
cssのみで 「トグルスイッチ OFF」 アイコンを作成してみました。
ソース
html
<div class="toggle_off"></div>
css
/* 背景 */
.toggle_off {
f...

トグルスイッチ ON – css toggle on –
cssのみで 「トグルスイッチ ON」 アイコンを作成してみました。
ソース
html
<div class="toggle_on"></div>
css
/* 背景 */
.toggle_on {
font...

戻る – css undo –
cssのみで 「戻る」 アイコンを作成してみました。更新の向きが逆なだけです。手抜きじゃないです・・・
ソース
html
<div class="undo"></div>
css
/* ○ */
.undo ...