[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定します。リピートにも対応。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 合わせて読みたい：DD_be
CSSのみで角丸＆半透明 : Weblog : SimpleIsm
CSS このタイトルぐっと来るべ？(何 まぁこの手のものには大体何か落とし穴があって、まぁ私の場合それはValidatorに通らないってことなんだけど。しかも結構ネックになってくるのはIEに適用させるってこと。半透明は何とかなったんだけど、角丸はJS使ったりとか、ファイルが2つ以上になってしまうので、今回は割愛。以下そのコード。 body { background: transparent url(back.gif) repeat fixed; /* 半透明を確認するため */ } h1 { margin: 0; } /* Opera及び全てのブラウザに適用 */ .section { margin: 5%; padding: 5%; height: 500px; color: #ffffff; background-image: url(data:image/svg+xml,%3C%3F
角丸テーブルをスタイルシートで作る その１ ～背景画像を四隅に指定するには？～
ＨＴＭＬソースコードサンプル 上半分用の<DIV>、テキスト領域用の<DIV>、下半分用の<DIV>、そしてこれらをすべて格納するコンテナ<DIV>の４つの<DIV>から構成されています。 そして、左右に一つずつ背景画像を指定するために、上半分用と下半分用の<DIV>の中には<SPAN>を格納します（レイヤーを重ねるような感覚で）。 <div class="rtable01"> <div class="rtop01"> <span></span> </div> <div class="rtcontent01"> 完成例はこちら </div> <div class="rbottom01"> <span></span> </div> </div> .rtable01 { width:200px; height:60px; background-color:#669900
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jmblog.jp - 角丸にチャレンジ - 透過PNG画像＋CSS編