CSS3で描く 基本図形

2012.7.27、以下の修正・変更を行いました。
  • transformのskewの記述をskewXとskewYに変更
  • border-radius,box-shadowのベンダープレフィックスを削除
  • ellipseのborder-radiusの記述を修正

css及びcss3の描画で、様々な物を描く事が可能だ。IE8以下のブラウザをどうサポートするかは、考慮する必要があるが、web表現にpureなcssによる描画を使わない理由にはならない。

むしろ積極的にcssによる表現を楽しむ姿勢こそが必要であり、css3で採用が検討されつつある、便利で(同時にとても複雑に感じられる)指定方法を理解する為の、最良の練習方法であると信じている。

とは言え、何かのとっかかりは必要だから、Adobe Illustratorを学んだ時と同じ様に、基本的な図形を作成する方法を理解するのが良いはず。Mozillaにも良い解説が有るが、基本図形の描き方という趣旨で、以下にまとめた。

四角 square

class:square

十字 cross

class:square cross

×(バッテン)

class:square cross batu

アスタリスク asterisk

class:square cross asterisk

角丸四角 rounded square

class:square rounded

角を丸めるにはborder-radiusを指定する。Firefox3.6では-moz-というベンダープレフィックスが必要。

正円 circle

class:square circle

border-radiusの値を、高さ・幅の50%にすると正円になる。

webkitでは%での指定ができないので数値で指定。ぜひ%指定もサポートして欲しい。サポート済み。

radiusという単語は聞き慣れないが、英語での半径のこと。2πrとか、πr2の公式に出てくるrや、「この道はrがキツくて事故が多い」などと言う時のrradiusの頭文字だ。

楕円 ellipse

class:square ellipse

border-radiusには左上、右上、右下、左下の順番で4つの値を指定できる。さらに、それぞれの角のradiusの値としてx方向のrとy方向のrを/で区切って指定できる。

楕円には長径と短径がある。横長の楕円なら、幅の半分の値が長径になり、高さの半分の値が短径になる。

縦横比が1:2の楕円なら、4つの角のrのx方向を50%、y方向を25%にする。

webkitは、やはり%が使えないので数値で指定。

border-radius:50%;だけで楕円になります。

円筒 tube

class:square tube

4つのborder-radiusのx方向を50%、y方向を50%未満26%以上にすると、縦方向に潰れて筒の様なアウトラインになる。

この要素の::after疑似要素でcontentを生成し、楕円と同じ指定をして、絶対配置で上に揃えると筒になる。

カテゴリー: css, css3 タグ: , パーマリンク

シェア

CSS3で描く 基本図形 への1件のフィードバック

  1. ピンバック: 平行四辺形 – Parallelogram -

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA