• RSS
[CSS]半円を表示する方法(半円上、半円下、半円左、半円右)

CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。
続きを読む

[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」

CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。

jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、

個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。
続きを読む

[CSS]img タグの画像を border-radius で角丸にして表示する方法

以前に [CSS]CSS3 のborder-radius で角丸を作る方法の記事でも border-radius の基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
続きを読む

[CSS]CSS3 の border-radius で要素や画像で円形に表示する方法

CSS3 の border-radius は要素を角丸にすることができる便利なプロパティで、
角丸の値を調整することで、画像や要素を正円(円形)で表示することもできます。

IE 7以下でも利用したい場合は(試していませんが)、PIE などを使えば実現可能かと思います。
続きを読む

[CSS]CSS3 のborder-radius で角丸を作る方法

CSS3 より border-radius のプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。

今回は border-radius を使って様々な角丸のサンプルを紹介したいと思います。
続きを読む

[CSS]CSS で円形、三角形、台形、星形 などを表現する方法のまとめ

CSS3 のborder-radiustransform などを利用して、CSS だけで円形、三角形、台形、星形などのオブジェクトを表現する方法のまとめです。
続きを読む