CSS3なキーフレームアニメーションのデモ:phpspot開発日誌
CSS3 Keyframe Animation Demo CSS3なキーフレームアニメーションのデモ。 CSS3で動くアニメーションとそのサンプルコードが確認できます。 こんなことが出来るとは知りませんでした。ちょっとやり過ぎのような気もするけれど数年後には当たり前の技術になっていたりして。 日がくれていくというシンプルなアニメーション。 コードも公開されています。 WebkitかFirefox5が必要とのこと。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3のよく使いそうな１０個のテクニックのまとめ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」
[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css
ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。 デモページ レッドのハイライト エラー イエローのハイライト 警告 グレーのハイライト 好ましくない holmes.cssの使い方 holmes.cssの使い方は、2通りあります。 スタイルシートファイルをページに適用 ブックマークレットを使用（要JavaScript） スタイルシートファイルをページに適用 「holmes.min.css」を外部スタイルシートとして適用し、bodyにclass「holmes-debug」を加えます。 HTML <link rel="stylesheet" href="../" media="screen,projection,print,handheld" type="text/css" /> <body class="hol
[CSS]バーはブラウザ幅いっぱいに、テキストは読みやすい幅にするスタイルシート
バーはブラウザの幅いっぱい（左右・左のみ・右のみ）に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 ブラウザの幅を狭くしたキャプチャ 以下は各ポイントを意訳したものです。 まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。 しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。
フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５:phpspot開発日誌
45 High Quality CSS/XHTML New Web Templates(Free Download ) | Nerd Treasure フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ほとんどが初めてみるデザインの新しいテンプレートがフリーでダウンロード可能です。 是非活用させていただきましょう 関連エントリ ハイクオリティでフリーなXHTMLテンプレート61 プロレベルでハイクオリティなXHTML/CSSテンプレート集 34のフリーで綺麗なXHTML/CSSテンプレート シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０
[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル
画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 Simple buttons with light stripes (pure CSS) デモページ [ad#ad-2] かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 <a class="bt-blue fx-stripes" href="#"><span>Blue button</span></a> <a class="bt-grey fx-stripes" href="#"><span>Grey button</span></a> CSS：ストライプ ストライプのベースとなるスタイルシートです。 .fx-stripes:before { content:
20 Amazing Examples of Using Media Queries for Responsive Web Design
Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs. To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to prese
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
ウェブデザインで効果的に半透明とオーバーレイのテクニックを使う方法とその実例
半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。 Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。 Opacity and Overlay Techniques in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 Dark Overlay Light Overlay Color Mixes Dark Overlay ブラック、あるいは暗いグレーを使ったオーバーレイ。最近のウェブデザインでよく見かけるタイプです。見た目はスタイリッシュになり、画像やスライドショー、ナビゲーションなどによく利用されています。 このテクニックを利用する際は、CSSでの透過をサポートしていないブラウザがまだあるため、PNGで
[CSS]シンプルなHTMLで実装するダイナミックなサイトマップコンテンツ
<ul> <li><span>Fruit</span> <ul> <li><span>Apples</span></li> <li><span>Oranges</span></li> <li><span>Watermelons</span></li> </ul> </li><!-- Fruit --> <li><span>Vegetables</span> <ul> <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span> <ul> <li><span>Arugula</span></li> <li><span>Cabbage</span></li> <li><span>Lettuce</span></li> <li><span>Spinach</span></li> </ul> </li><!-- Leaf Veget
アドビ、「CSS Regions」プロトタイプを公開
サンフランシスコ発--雑誌風のレイアウトツールをウェブパブリッシングにもたらそうとしているAdobe Systemsは米国時間5月9日夜、同社の提案するフォーマッティングテクノロジをウェブ開発者がテストできるよう、特別に設計されたブラウザのプロトタイプをリリースした。 「CSS Regions」と呼ばれるこのテクノロジを利用すると、プログラマーはマルチカラムレイアウトを作成したり、テキストを多角形型に配置したり、テキスト表示エリアの中心にオブジェクトを配置したりすることができる。そうしたテクノロジは印刷出版の世界では何年も前から存在しているが、一般的にウェブからは欠落していた。雑誌や新聞がデジタルパブリッシング、とりわけAppleの「iPad」のようなタブレット上でのデジタルパブリッシングへ移行する中で、そうしたテクノロジの不在はますます顕著になってきている。 このフォーマッティング機能が
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ - かちびと.net
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
IDEA * IDEA
IDEA * IDEA
