Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuabl

CSS drop-shadows without images ? Nicolas Gallagher CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。 一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。 パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。 画像編集ツールは一切不要です。 例えば、1個の要素を見てみましょう。 HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。 当然、要素を回転させることも出来ますが綺麗に描画できています。 なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体の

CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング

CSS2.1までのセレクタ一覧とCSS3セレクタ一覧です。 各詳細ページでは、より具体的な説明とサンプルがあります。 CSS2 セレクタ一覧 セレクタ名 パターン 簡単な説明

How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc

IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w

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

35 Specialty Galleries for Your Design Inspiration | Vandelay Design Blog HTML5やCSS3を使ったサイトをまとめてギャラリー形式にしているサイトを色々とご紹介です。 HTML5はこうしたサイトを教材として学ぶのもよさそうです。 HTML5 Beauty サムネイル付きでサイト紹介。 HTML5 Gallery サムネイルによるサイト紹介やレーティング機能もついたギャラリーサイト Ars HTML5 Gallery サムネイルでサイト紹介。タグクラウドによる分類 Ars CSS3 Gallery 今後こうしたサイトはもっと増えてきそうですね 関連エントリ PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベースの音楽サーバ「streeme」 CSS3で描画されたHTML5のロゴ HTML5のロゴで将棋をするチュ

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

CSS3で何ができるの？　という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。

Button Search Stars Home Play Share Love Quit Upload RSS There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. Markup I get a real kick out of trying to keep the markup minimal, so I'm really

CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ

Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE IE6-8でもCSS3に対応するライブラリまとめ。 IEでCSS3に対応するには behavior で htcを指定する方法が簡単で便利ということでライブラリが色々あるようだったのでまとめました。 そんなに多機能はいらないという場合に、機能を削ったものを使うという方法もありかもしれません。 CSS3 PIE 角丸、ドロップシャドウ、グラデーション背景等、多くのプロパティに対応していて今後も対応を強化 IE-CSS3 border-radius、box-shadow、text-shadow等のプロパティが使えるようになる。いかがスタイリング例 css3shadow.htc テキストに影をつけるためのhtc curved-corner - Project Hosting on

Account Suspended This Account has been suspended. Contact your hosting provider for more information.