タグCSS3

“MS Pゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック

“MS Pゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック

CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。この記事で紹介するテクニックは、ハックに近いものですので、使用は自己責任でお願いします。 記事を読む

CSS3でボックスの角にベベル(丸くないborder-radius)をかける方法

CSS3でボックスの角にベベル(丸くないborder-radius)をかける方法

CSS3 の border-radius を使えば、ボックスの角を丸めることができますよね? でも、ベベル(丸くない border-radius)を付けるにはどうしたらいいか、ずーと気になっていたので、調べてみたら見つけました!... ということで、今日の記事では「LEA VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。 記事を読む

CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル

CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル

CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風(ガラス風)ボタンにどこまで近づけるか? というのを実際にやってみました。チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います! 記事を読む

CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法

CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法

またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。この記事では、CSS3を使って、でボタンにロールオーバー時リングが波紋のように広がるエフェクトを作る方法を紹介します。デモ一式をダウンロードできますので、時間があれば、自分のパソコンにダウンロードして、いろいろ実験してみてください。おもしろいです。 記事を読む

CSS3 の border-radius を使って円形のサムネイルを作る方法2つ

CSS3 の border-radius を使って円形のサムネイルを作る方法2つ

CSS3のborder-radiusっていろいろできて面白いですね。で、今回の記事は、CSS3の border-radius を使った円形いサムネイルの作る方法を2種類紹介します。2つめの方法では、長方形の画像でも丸いサムネイルを作ることができるので、結構実用的に使えるんじゃないかと思います。 記事を読む