[CSS]IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート
<textarea name="code" class="css" cols="60" rows="5"> <!--[if IE]> <style type="text/css"> .container {padding-left:14px;} .frame {left:4px; top:4px;} .shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');} </style> <![endif]--> </textarea>
第2回コーディングコンテスト 開催決定。
第一回から随分時が流れましたが、第2回コーディングコンテストが開催決定しました。 今回も前回同様、予め用意されたpsdデータを使って参加者が自分のスキルとかを駆使してコーディングをしていくわけですが、第2回目は HTML5+CSS3を利用してコーディングするので現状だと個々でかなり大きな違いが出そうです。 対象ブラウザもかなり絞って、Firefox 3.6、Safari 4 のみになっているので、ホントにバリバリCSS3を使っていく感じですね。 デザインもその辺りをかなり考慮されているっぽく、CSS3を知っているか知らないかで明らかな差が出そうなデザインになっているので、1ページとは言え、前回なんかより難易度はずっと高いと思います。 今回主催はピクセルグリッドさんがやっております。 代表の中村 亨介さんをはじめ、高津戸さん、小山田さんと何だかすげーメンツが揃ってる会社です。 前回一応主催っ
IE5～8をCCS3の疑似セレクタ対応にするスクリプト - ie-css3.js
CSS3に対応していないIE5/6/7/8をCSS3の擬似セレクタに対応させるスクリプトを紹介します。 ie-css3.js 対応するセレクタは、下記の11種類です。 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty スクリプトの動作は、セレクタを見つけたらシミュレーションしたものに変更されて適用されている、とのことです。 スクリプトの使用方法は、DOMAssistantと併用し、外部スクリプトとして記述します。 <textarea name="code" class="html" cols="60" rows="5"> <head> <script t
[CSS]CSS3で実装するセクシーなモーダルボックス -Drop-In Modals
繊細なデザインと気持ちいいアニメーションを伴ったモーダルボックスを実装するスタイルシートをZURB.comから紹介します。
[CSS]CSS3を使って、より美しいスタイルを適用するチュートリアル
CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。 Playing with CSS3 demo キャプチャはChrome3 CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用され、美しいレイアウトが再現されます。 完全に対応していないブラウザでは下記のようになります。 キャプチャはFirefox3.5 チュートリアルでは「box-shadow」のエフェクトから一つずつCSS3のテクニックが紹介されており、全部を使用するだけでなく、部分的に使用したい場合にも参考になると思います。
kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]CSS3対応ブラウザだとより美しいドロップダウン型のナビゲーション
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集
[CSS]画像の一部にフレームをオーバーレイさせて目立たせる方法
CSS3で立体的な3Dリボンを作成するチュートリアル:phpspot開発日誌