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

/*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がキツくて事故が多い」などと言う時のrradiusの頭文字だ。

楕円 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を生成し、楕円と同じ指定をして、絶対配置で上に揃えると筒になる。

ディスカッションに参加

1件のコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください