Pure CSS – CSS だけを使ってイメージギャラリーを作ろう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このブログでは, これまでに CSS/CSS3 を使って色々なものを作ってきました.

ん~懐かしい. 上記のサンプルを見て分かる通り CSS はもはや CSS ではなくなってきています. 良くも悪くも立派なプログラミング言語?と言ってもいいでしょう.

本来, CSS というのは文章の構造見た目を分離するために創られました. ですが, CSS3 の登場で自由度が格段に上がりました.

画像で表現していた角丸は border-radius で, JavaScript で表現していたアニメーションは transition や animation で行うことができるようになりました.

今回はそんな CSS/CSS3 を使ってイメージギャラリーを作ってみました. JavaScript は一切使用していません. CSS/CSS3 の可能性の片鱗を感じていただければ幸いです.

image gallery

Read More

あけおめ企画 – 画像を一切使用せず CSS で鏡餅年賀状を描いてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.』の個別解説です.

今回解説するのは CSS Version についてです.

nengazyou

Read More

アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

みなさんアケオメー!!

プログラマはアナログなことはやらないのだー!! ってことでもうハガキは書かなくなっちゃったので, 代わりにみなさんへ HTML5 Canvas, CSS, SVG それぞれでハガキを作りました.

Read More

CSS3 でスターウォーズを再現

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

チャーンチャーーンチャンチャチャチャーンチャーンチャンチャチャチャーンチャンチャンチャチャーン♪♪

ってことで CSS3 でスターウォーズのあのシーンを再現してみました. Safari の専売特許だった perspective が, つい最近 Chrome でも使えるようになったので早速使ってみた次第です.

webkit のみ, つまり chrome と safari で動きます. あと音楽が流れるのでご注意ください.

Read More

CSS3 とほんのちょっとの JavaScript で雪を降らす

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

最近暑いですねぇ. ってことで雪を降らしてみました. 去年は, JavaScript と Canvas エレメントでこんなのを作りました.

今回は CSS3 とほんのちょっとの JavaScript コードで簡単にできます.

Read More