CSS の border-style 一覧

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

CSS の border-style って何があるのかって実は把握してなかったりします. ほぼ solid しか使わないし, たまーに dotted を使う程度.

どんなボーダースタイルがあるのか気になったのでまとめてみました.

サンプルは jsdo.it で作ってあるので, 実際に動かしたり fork して遊んでみて下さい.

border-style

Read More

jsdo.it が SCSS と LESS をサポート!! サンプルもあるよん♪

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

つい先日『jsdo.it が JSX と CoffeeScript をサポート!!』という記事を書きました.

「JSX や CoffeeScript がサポートできるんだったら Sass や LESS もサポートできんじゃね?」っと思っていたら 速攻でサポートしてくれてました!!

面白法人カヤックさんによる公式解説はこちら.

ということでちょっと期間が空いちゃいましたが, 紹介します.

jsdoit-sass-less

Read More

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

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

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

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

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

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

Read More