[B! css] otherworldのブックマーク

otherworld id:otherworld

cssに関するotherworldのブックマーク (6)

[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとはページ全体に奥行きを加えるエフェクト紙がめくれたようなエフェクト対応ブラウザ box-shadowプロパティとは「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
otherworld 2011/04/19
css

Webデザイン
リンク
[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要素に適用可能コンパチビリティ主要ブラウザに優雅なグラデーションを提供ユーザビリティノーマル時、ホバー時、アクティブ時を用
otherworld 2011/02/03
css

webデザイン
リンク
CSS3が非対応なブラウザでも利用できるようにするツールのまとめ
Modernizr [ad#ad-2] ツールの概要 JavaScript ドキュメント利用できるプロパティ @font-face border-image border-radius box-shadow text-shadow opacity Multiple backgrounds CSS Animations CSS Gradients など CSS3 PIE ツールの概要ビヘイビアスクリプト(htc) デモページ利用できるプロパティ border-radius box-shadow border-image multiple background images linear-gradient as background image
otherworld 2011/02/02
javascript

webデザイン

css
リンク
IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合 - 主に技術的なことを書くブログ
IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合は、 IE 5 ~ 7 では置換要素はdisplay が inline で、hasLayout が true にすると、横に並びます。 display: inline-block; /display: inline; /zoom: 1; （/はIE6とIE7のみハック）フロートさせるのか、どうか、迷うところですが。。
otherworld 2010/04/21
css
リンク
CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」
TOP > WebDesign , WebService > CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」 WEBデザインをよりリッチにそして作り込んでいる感を与えてくれるドロップシャドウ。ドロップシャドウをつける方法は沢山ありますが、様々なブラウザで同じような見せ方をするためには画像を作成したり、背景が複雑な場合は透過PNGをIEでもよみこませるようにして、背景にしたりと色々と面倒です。今日紹介するのはCSSのみでクロスブラウザに対応したドロップシャドウを作るテクニック「Cross-browser drop shadows using pure CSS」を紹介したいと思います。上記が、各ブラウザでのドロップシャドウの見せ方のサンプルとなります。色の濃さなど細かなところは違う
otherworld 2010/04/17
css

ドロップシャドウ
リンク
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。コンテンツメニュー元になるHTML 特に何も考えずfloatを使った場合外のボックスに幅を与えてみる一般的な解決方法その他の解決方法 overflowを使う最終回答番外編更新履歴このドキュメントについて元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。例3
otherworld 2010/04/17
そもそもfloatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまいます。

css
リンク
1