ShopDD

Now Loading

Now Loading

RSS Article

Now Loading

Article

画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた!

gununu_index_css3_001.png

今回は画像を一切使わずにHTML+CSSでいろいろなものを作ってみようという企画の第4弾です!さらに今回のものは、CSSドラえもんとある科学の風力発電に続いてCSSで絵を描いてみようシリーズ3部作の最後を飾る作品ということもあり、今まで以上に気合が入っています。

今までのCSSシリーズは、CSSドラえもん、とある科学の風力発電などどちらかというと簡単な素材を用いて作ってきた訳ですが、今回はかなり複雑なものに挑戦してみました。その結果、ソースは肥大化してものすごい量になってしまいましたが・・・。

画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!

css_Wind_Electricity_000.png

先日の「CSS3 ドラえもん ver2」に引き続き、本日もCSS3の記事です。今回は画像を一切使わずにHTML+CSSでいろいろなものを作ってみようという企画の第3弾です!

だいぶ前のことになりますが、CSS3ドラえもん公開後の1ヵ月後にTwitter 'Fail Whale'という、CSSだけでTwitterのくじらを描いた猛者がいるという記事を目にしました。このくじらに触発されて今度はアニメーションに重点を置いたものを作ってみようと思い、実際に作ってみました。

ついにIEでも丸いドラえもんが!?CSS3 ドラえもんをIE9に対応させました!

doraemon_css3_v2_000.png

以前に書いた記事で好評だったCSS3 ドラえもんですが、ついにInternet Explorer 9に対応させました!これでIE9からは四角いドラえもんとか馬鹿にされません!前々からやろうやろうと思っていたんですが、なかなか手をつけられず、今月にIE9 RCが公開されたことで、CSS3 ドラえもん ver2へとバージョンアップしました。

今回のコード追加対応で、IE9はさすがにChromeやfirefoxには及びませんが、Operaと同等の表示が可能になっています。今回のはIE9のバージョンアップによるCSS3の対応であって、IE8以下では今まで通りの四角いドラえもんです。

画像を一切使わずにCSS3だけでドラえもんを描いてみた!

doraemon_css3_001.png

昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました!

今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。

画像を一切使わないCSS3で製作した新サイト「NetaGear」!

netagear_beta_001.png

今回作ってみたのは画像を一切使わずhtmlとCSSだけでサイトをデザインしたサイト「NetaGear」(Beta版)です。NetaGearは管理人の見つけたあらゆるジャンルのおススメのネタやニュースを羅列していくサイトです。常に最新のニュースを提供するために一日3回以上の更新を行っています。ただし、まだBeta版ですので不具合とかあるかもしれません。

コンセプトは「デザインはかっこよく」かつ「画像を一切使わない最速表示」を目標として製作しました。サイト表示の中で最も読み込み量が多く時間がかかるのは画像なので、画像を使わないでサイトを作れば最速表示が可能となるわけです。ただし、画像を使わなければ読み込みが速くなるかわりに見た目がしょぼくなるというデメリットも存在していたわけですが、ここ最近は各ブラウザ(IEを除く)のCSS3対応が進み、CSS3が普及してきたことにより画像を使わないデザインでもそれなりのものが作れるようになりました。

Related article

Most Popular

Now loading...

MENU



Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...