CSS3に関するponajiroのブックマーク (5)

  • CSS3で作るナビゲーションメニュー集「15 CSS3 Navigation and Menu Tutorials and Techniques」

    TOP  >  WebDesign  >  CSS3で作るナビゲーションメニュー集「15 CSS3 Navigation and Menu Tutorials and Techniques」 次世代のコードとして、すでに利用している所も徐々に増えてきたCSS3。従来のCSSと比べて格段に表現できる幅が広がっており、今までどうしても画像を利用したり、FLASHで表現していた部分がCSSのみで実現できるようになっています。今日紹介するのはそんなCSS3を使ったナビゲーション集「15 CSS3 Navigation and Menu Tutorials and Techniques」を紹介したいと思います。 jQuery Style Vertical Menu with CSS3 – No Javascript 様々な表現のCSS3ナビゲーションがまとめられています。今日はその中からいくつか気に

    CSS3で作るナビゲーションメニュー集「15 CSS3 Navigation and Menu Tutorials and Techniques」
  • [CSS]CSS3の効果的な使い方と陥りやすいワナ

    CSS3で何ができるのかという「CSS3で何ができるの? という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか? ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を

  • CSS3グラデーションを簡単に作成できる -CSS3 Gradient Generator

    CSS3グラデーションを結果を確認しながら、簡単にブラウザ上で作成できる「CSS3 Gradient Generator」を紹介します。 CSS3 Gradient Generator v2.0 ※キャプチャ画像は加工してます。 CSS3グラデーションに対応しているブラウザは現在、SafariやChrome、Firefox3.6と一部のものだけで、グラデーションを画像を使用せずに作成することができます。 CSSでの指定が面倒な人などには特に便利で、グラデーションとスタイルシートの結果を確認しながら生成することができます。

  • 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で何ができるの? という時にみておきたいサイト集

    角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

  • 1