CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ
PHPを使ってCSS3のプロパティを便利に使えるスニペット:phpspot開発日誌
Maintainable CSS3 Using PHP PHPを使ってCSS3のプロパティを便利に使えるスニペット。 CSS3のbox-shadowといったプロパティはブラウザごとに違いますが、これを全ブラウザ用に書くのは手書きとかだとメンド臭いですね。 そこで次のような関数を用意しておくと便利かもというスニペットです。 css3_props関数で次のように便利に使うことができます。 cssファイルにphpを使うということで若干負荷は上がるのを覚悟すればなかなか便利に使えそうですね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ
CSS3のジェネレーター１４種:phpspot開発日誌
14 CSS3 Smashing Generators | Marked Lines CSS3のジェネレーターが１４種まとまったエントリのご紹介。 既に紹介したものを多く含まれていますが、CSS3の作成をツールを使ってより効率化しちゃいましょう。 CSS3 Please! １個のプロパティを編集すれば全部変わるもの CSS3 Generator v1.5 ウィザード形式でCSS3プロパティを簡単作成 CSS3 Generator – Widgetpad クリックで簡単にCSS3生成 CSS3 Gradient Generator v2.0 グラデーションを使ったボタンを生成 Westciv Tools WYSIWYGなCSS3プロパティ調整ツール色々 CSS Border Radius Radiusに絞った超シンプルツール。よく使うRadiusプロパティを一発生成 全部見る 関連エントリ
IEでもCSS3を使うためのツールやリソース集:phpspot開発日誌
CSS3 Compatibility Tools, Resources and References for Internet Explorer :Speckyboy Design Magazine IEでもCSS3を使うためのツールやリソース集がまとまっているエントリのご紹介。 CSS3使いたいけどIEがネックという場合に使えるライブラリやリソースです。 「これ、CSS3でやったら数行なんだけど」という便利なCSS3なわけですが、各種ライブラリを導入することでIEでも使えます。 2010年9月時点でも色々な便利なものが出回っているようで覚えておいて損はなさそうです 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」
jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ:phpspot開発日誌
FormBox ? A jQuery & CSS3 Drop-Down Menu With Integrated Forms | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ メニューにカーソルを合わせるとドロップダウンメニューがアニメーションしながら現れてフォームが表示されるというUIの例と実装サンプルです。 スペースを取ることなく、コンパクトにログインフォーム等を埋めこむことが実現出来ています。 ログインしない人にとっては邪魔なブロックなので、使わない場合は最小化しておくというのはなかなか合理的なUIですね。 サイトの特性などに応じて実装すればサイトの利便性を大きく向上することができそうです。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何
CSS3で作るアナログ感たっぷりの立体ボタン「BonBon Buttons – Sweet CSS3 buttons」
WEB制作業界ではすっかりおなじみのキーワードとなってきたCSS3。ブラウザの対応も進んでいて、そろそろ手を付けていこうというかたも多いかと思います。今日紹介するのはCSS3を駆使して、立体的でアナログ感のあるボタンを作るプロジェクト「BonBon Buttons – Sweet CSS3 buttons」です。 シャドウと立体感と角丸などCSS3ならではの機能をふんだんに利用してボタンを作っています、見た目だけではなくて、クリックした時の動作感などもこだわっていて、表現だけではないリッチなボタンになっています。 詳しくは以下 ボタンの紹介だけではなくて、実際のソースファイルがダウンロードできるようになっていますので、コードをみながらどのように作られているのか、どんなパラメーターが見た目に寄与しているのかなどを確認しながら学ぶことができます。 開発者にとっては面白い教材なのではないでしょう
フリーで使えるCSS3のメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」
TOP > WebDesign > フリーで使えるCSS3のメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」 本来であればjavascriptやflashを使って画像を準備しないと作れなかった、リッチな表現のナビゲーションですが、CSS3の登場に伴い、かなりの部分が、CSS3のみで表現できるようになってきています。今日紹介するのはCSS3で創られた、表現豊かたCSSメニューが簡単に作れるメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」。 こちらは、上記のようなナビゲーションメニューがフリーでダウンロードすることができます。基本的にはjavascriptは一切使われておらず、テキストで構成されるため、SEOにも優しい作りとなっています。 詳しくは以下 ソフトウェアはwindows,Mac両OSに対応しており、
jQuery+css3で作るダイナミック且つクールなWebギャラリー・SIDEWAYS - かちびと.net
css3を使う限り実践的なテクニックとは 言えませんが、素敵なWebギャラリー でしたのでメモがてらエントリー。jQuery とcss3で画面全体を使ったダイナミックな Webギャラリーです。かなりFlashに近い 感じで素敵です。 画面全体を使用してダイナミックに動いてくれます。 左のサムネイルをクリックすると右がスライドインして全画面に画像が表示されます。マウスの動きでもスライド。 フルスクリーンモードのままでも次の画像に移動できます。 iPhoneではスクロールバー以外は動作しました。 css3なのでIE、特に6は残念な事になっていますが、jQueryそのものは動いてますね。 SIDEWAYS
CSS3で実現する今までに無いWEBデザイン集「25 Amazing CSS3 Experimentations and Demos」
TOP > WebDesign > CSS3で実現する今までに無いWEBデザイン集「25 Amazing CSS3 Experimentations and Demos」 対応ブラウザも徐々に増えてきて、ますます注目を集めるCSS3。様々な可能性を持っています。CSS3独自の機能も多く、その分様々な利用方法が日々考えられ、デモが作成されていますが、今回はCSS3で実現する今までに無いWEBデザイン集「25 Amazing CSS3 Experimentations and Demos」というエントリーを紹介したいと思います。 Look Ma, No Flash! 上記の他にも様々なCSS3を利用したクリエイティブなWEBサイトが構築されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Pure CSS3 Page Flip E
便利で使えるCSS3マーカー「CSS3.0 Maker」
多くのWEB開発者が利用し始めているCSSの次の規格CSS3.0。今までCSSではできなかったことが多数実現できるように改良が加えられています。以前Designdevelopで「選んで、見て、使える簡単CSS3ジェネレーター「CSS3 Generator」 | DesignDevelop」という記事でリアルタイムにプレビュー、コードプレビューができるCSSジェネレーターを紹介しましたが、今回もCSS3特有の様々な処理を簡単に実現することができるCSS3メーカー「CSS3.0 Maker」を紹介したいと思います。 画面は非常にシンプルな作りでグローバルナビにCSS3の効果がメニューになっていてプレビューも数値の操作も、CSSのコードビューも一画面で利用出来るようになっています。 詳しくは以下 CSSのスタイルは数値入力ではなく、各パラメーターにスライダーバーが付属しており、右側のプレビューで
その場で動かして体験できるCSS3の実験場「CSS3 Playground」:phpspot開発日誌
CSS3 Playground by Mike Plate その場で動かして体験できるCSS3の実験場「CSS3 Playground」。先日ブックマークで紹介しましたが、もう一度改めてご紹介です。 表示されているスライダーや色をクリックで調整するだけでその場でプレビューが表示されて、どういうCSS3コードをかけばどんな風になるかという部分を確認できます。 素人の方でも、こんなことが出来る、という部分をしっておく場合に使ってみるとよさそう。単純にコードジェネレーターとしても便利です。 どんどん便利なものが出てきますね。 関連エントリ 便利なCSS3ツール6つ＋α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」 近未来に頻繁に使われるであろうCSS3サンプル１０
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
プロフェッショナル用のHTML5+CSS3+jQueryのテンプレート -HTML5 Boilerplate
プロフェッショナル向きに開発された、HTML5+CSS3+jQueryなど直接実装に関わるファイルから、robots.txt, .htaccessなどサーバー関連のファイルも一式にまとまったテンプレートを紹介します。 HTML5 Boilerplate 昨日、当サイトで紹介した「HTML5 Reset」もHTML5+CSS3をベースに開発されたテンプレートセットですが、こちらはよりプロフェッショナル向けに開発されたものとなっています。 下記にその特徴を。 HTML5 Boilerplateの主な特長 クロスブラウザ対応（IE6も） HTML5対応 キャッシュの最適化と圧縮でGrade-Aのパフォーマンス モバイルブラウザへの最適化 クロスブラウザ対応のためにIEでは特定のclassを用意 プリント用のスタイルシート、パフォーマンスの最適化 HTML5でより早いページロードにする「.htac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは必見のスイーツのような可愛らしいCSS3ボタン「BonBon Buttons」:phpspot開発日誌
これはすごい！CSS3で描画されたiPhone:phpspot開発日誌
素敵なCSS3ボタンのショーケース:phpspot開発日誌
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集
CSS3で作ったラムネ菓子っぽい雰囲気のボタン「BonBon Buttons」
CSS3のいろいろをインタラクティブに試すことができる『CSS3 Maker』 | 100SHIKI
動作が快適で使いやすいCSS3のジェネレーター -CSS3 Playground