- 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
/*square. This shape is origin of other shapes.*/ .square { width:100px; height:100px; margin:20px; position:relative; background:rgb(100,100,255); } .square:hover {/*サンプル用。マウスhoverで影を付ける*/ box-shadow:3px 3px 3px rgba(0,0,0,0.7); }
十字 cross
class:square cross
.square.cross { width:25px;/*その要素自身の幅を、高さの1/4に指定。*/ left:37.5px; } .cross::before { content:""; /*before疑似要素のcontent*/ display:block; /*ブロック化*/ width:100%; /*幅と高さを100%に*/ height:100%; /*90度回転。回転の基準点はデフォルトで中心なので指定しない*/ -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); /*色を変えたのはサンプルとしての分かり易さのため*/ background:rgb(80,80,200); }
×(バッテン)
class:square cross batu
.shapesDemo .sample .square.cross.batu { -moz-transform:rotate(45deg); /*45度回転。*/ -webkit-transform:rotate(45deg); transform:rotate(45deg); }
アスタリスク asterisk
class:square cross asterisk
/*アスタリスクasterisk*/ .square.cross.asterisk::before { -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); transform:rotate(60deg); } .square.cross.asterisk::after { /*線を一本増やす*/ content:""; display:block; width:100%; height:100%; -moz-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); transform:rotate(-60deg); /*色を変えたのはサンプルとしての分かり易さのため*/ background:rgb(50,50,200); /*before疑似要素が既に生成されているので、 重ねる為には以下の指定が必要。*/ position:absolute; top:0; left:0; }
角丸四角 rounded square
class:square rounded
.rounded { border-radius:10px; }
角を丸めるにはborder-radiusを指定する。Firefox3.6では-moz-というベンダープレフィックスが必要。
正円 circle
class:square circle
.circle { border-radius:50%; }
border-radiusの値を、高さ・幅の50%にすると正円になる。
webkitでは%での指定ができないので数値で指定。ぜひ%指定もサポートして欲しい。サポート済み。
radiusという単語は聞き慣れないが、英語での半径のこと。2πrとか、πr2の公式に出てくるrや、「この道はrがキツくて事故が多い」などと言う時のrはradiusの頭文字だ。
楕円 ellipse
class:square ellipse
.ellipse { height:50px;-moz-border-radius:50%/25%; border-radius:50px/25px;border-radius:50%; }
border-radiusには左上、右上、右下、左下の順番で4つの値を指定できる。さらに、それぞれの角のradiusの値としてx方向のrとy方向のrを/で区切って指定できる。
楕円には長径と短径がある。横長の楕円なら、幅の半分の値が長径になり、高さの半分の値が短径になる。
縦横比が1:2の楕円なら、4つの角のrのx方向を50%、y方向を25%にする。
webkitは、やはり%が使えないので数値で指定。
border-radius:50%;だけで楕円になります。
円筒 tube
class:square tube
.tube { border-radius:50%/25%; } .tube:after{/*フタ部分*/ content:""; display:block; position:absolute; top:2px; left:2px; width:96px; height:48px; border-radius:50%; background:rgb(150,150,255); }
4つのborder-radiusのx方向を50%、y方向を50%未満26%以上にすると、縦方向に潰れて筒の様なアウトラインになる。
この要素の::after疑似要素でcontentを生成し、楕円と同じ指定をして、絶対配置で上に揃えると筒になる。
ピンバック: 平行四辺形 – Parallelogram -