A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!Read less
イライラ棒 紹介記事:Experimental CSS Hover Layout 真ん中のタイポグラフィにマウスを合わせ、次々に表示されるボックスからはみ出さないようにマウスを移動します。
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
Stu Nicholls | CSSplay | A circular menu with circular sub menus CSSでゲームのような円形メニューを作るサンプル。 次のような、可愛い円形メニューが作れます。 アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。 鉛筆にカーソルを合わせると、追加で2つのアイコンが表示され、次のアクションにいけます。 人型のアイコンにカーソルを合わせると、4つのアイコンが表示。 メールアイコンにあわせると次のアクションとなる4アイコンが表示。 という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。 実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。 こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でUIと
The 1Kb CSS Grid by Tyler Tate :: A simple, lightweight approach 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 列数、列の幅、グリッド間の感覚を指定して「DOWNLOAD」ボタンを押すと、HTMLとCSSがセットになったアーカイブがダウンロードできます。 開いてみると、次のようなレイアウトの基本になるようなHTMLが手に入ります。 CSSフレームワークを使っているものですが、ウェブ上でパラメータ調節できて簡単にジェネレートできるのはいいですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 フリーで使えるCSSレイアウトのテンプレート配布サイト 42個のフリーCSSレイア
異なるバージョンのFirefoxでCSSを有効・無効にするハック集が紹介されていました。 Firefox のバージョンによって有効なCSSを出し分けるような場合に使えそうです。 すべてのバージョンのFirefoxをターゲットとする /* 方法1 */ #selector[id=selector] { color: red; } /* 方法2 */ @-moz-document url-prefix() { .selector { color: red; } } /* Firefoxを含むすべてのGeckoエンジンで有効にする */ *>.selector { color: red; } Firefox 1.5 と それ以降のバージョンで有効にする .selector, x:-moz-any-link, x:only-child { color: red; } Firefox 2 以降のバー
Using PHP and CSS to make a simple graph | Papermashup.com PHPとCSSで動的に綺麗なパーセンテージグラフを描画サンプル。 次のような、なんとも美しいパーセンテージを表すグラフを描画することが出来るソースが公開されています。 JavaScript では何も行わず、サーバサイドで固定HTMLを出しちゃってる感じですが、JavaScript でアニメーションさせてみてもよさそうですね。 関連エントリ CSSオンリーでクールなグラフを書くサンプル集 ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」 CSSだけで円グラフを表示するサンプル
text shadow box, June 2009 Move your cursor over the box to cast a shadow with the spotlight. This demo uses the CSS property text-shadow, supported in Safari, Firefox 3.5, Opera, and Chrome. Also check out my more sophisticated example that replaces the PNG spotlight with one generated by a CSS radial gradient and also casts a proper shadow for the ledge. Created by Zachary Johnson. Please check
Smashing Magazineで、商用無料でタイポグラフィーなXHTML/CSSテンプレートが配布されています。 ざっといくつかご紹介。 ↑はT-20。 Megan David Kruger MiniCon Luvbold In May we announced the Typographic Layout Design Contest that aimed to collect beautiful typographic (X)HTML+CSS-based layouts created by the design community and release them for free as a gift for the web design community. However, we did receive a number of brilliant typographic te
Does your style sheet ever feel bloated and overweight? If you notice some love handles growing on your style sheets, it may be time to stop and give it a good make over. Learn the following steps and your style sheet will be in shape in no time. Step #1 - Learn How to Group Selectors What is a Selector? For those who are not familiar with the term “selector” you can refer to this quick overview
WEB HOSTINGというサイトで、サイトをかっこよくするCSSテクニックが紹介されています。 ざっといくつかご紹介。 » Image gallery with hover box preview 画像マウスオーバー時に拡大表示してくれる » Alert Box シンプルでクールなアラートメッセージデザイン » CSS Sliding Sprite Window CSSスプライトで背景画像をクールに切り替える » Gradient text effect using CSS purely CSSを使ってテキストにグラデーションをつける » Creating a sliding image gallery 水平・垂直方向のスライドするイメージギャラリー » CSS rollover buttons JSを使わずにCSSスプライトでロールオーバーボタンを実装 結構いい感じのがそろっていますね
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
In this post, we’ll showcase 50 Free high-quality & New (X)HTML/CSS template (some of them include the PSD-source files). You will also find among these elegant templates a very well written step-by-step tutorials showing you how to create your own. Hopefully some of these will meet your expectations and come in handy in your projects. You will have to check the license first for any restrictions
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント ユーザービリティ(見易さ)を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとcssでテキストに影を付けるテクニック
「CSS Reloaded」CSS3の実践的な使い方をご紹介!の感想 先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介!」に行ってきました。 資料が公開されました。 ■出典元:CSS Reloaded ■著者;John Allsopp ■リンク:Web Directions East 以下、内容を復習もかねてまとめてみました。(サンプルやブラウザ対応などは私が補足したものです。) CSSの歴史 1996年ぐらいからありました。 2000年にCSSのサポートが良いMac IEが登場 2000-2005年はCSS3の開発がストップ 2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded) 各ブラウザはCSS3を試験的に実装 プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。 Firef
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く