画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ！ | kazumich.log
今、作っているサイトで透過の角丸JavaScriptが必要になって、いいものは無いかと探していると「CurvyCorners」というJavaScriptが見つかりました。 Googleで CurvyCorners - Google 検索 を検索してみると、以下のようなエントリーがヒットします。（上位5件を表示） CurvyCorners - Beautiful rounded corners for your HTML boxes 角丸javascriptライブラリ『curvyCorners』を使ってみる[to-R]（2006年6月18日） jQueryを使って簡単に角丸を作れるjQuery curvyCorners | バシャログ。（2007年12月3日） 角丸作成javascript「curvyCorners」｜skuare.net（2007年10月21日） 画像を使わず、角にアンチエ
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この
Javascriptで動的にアンチエイリアスな角丸を設定する:phpspot開発日誌
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。 使い方はちょっと変わって、 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); のようになっています。 第二引数と第五引数が追加される形になっています。
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
