ネタ元は、Webitectからですが、リストを用いたCSS3のみでチェックマークのアイコン作成方法の紹介です。
E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介でタグ「css」が付けられているもの
CSS3って、スゴイですねー。驚きました。
backgroundプロパティって、CSS2にも出てくるので、「これは分るわー」という感じで、ついついCSS3のは飛ばし読みしてしまいますが、CSS3のbackgroundにurl()関数を複数指定できる真実[謎]を知り、驚きながらこの記事を書いています。
表題通り、CSS3のコードを自動生成してくれるオンラインサービスCSS3.0 Maker | CSS3.0 Generatorの紹介です。
ol要素のli要素以外の要素、例えばdl要素にも通し番号は付けれないのかなーと、思い調べてみましたが、どうやらその方法があるようですね。
CSS-Tricksの3D Text Towerというエントリーで記載されているソースコードを参考に試しました。
CSS3のtext-shadowプロパティを使えばテキストに3Dっぽいデザインもできます！
普段、全くもって気にもしなかったのですが、ある時に、FirefoxとSafari、またまたOperaで表示が異なることに気づきました。
davidwalsh.nameより、CSS3のみで実現できるアニメーション効果のあるホバーエフェクトの紹介です。
大分、浸透して、多くのWebサイトでも仕様されているReset CSSですが、ちょっと前に、 Carrer web logのCSS Mini Resetという記事を読みました。
世の中、CSS3の広がりもありつつ徐々にCSS3の使用も多くなってきているのではないでしょうか？
その僕もCSS3がよく利用するようになりました。そこで、CSS3を用いた便利なジェネレーター 「CSS Corners」の紹介です。
5月19日に、Googleが Google Font APIを公開しました。
すでに、試している人も多く、ちょっと出遅れた感はありますが、Google Font APIを試してみました。
Google Font APIについて書かれているブログ
CSS3 Gradient Generatorについては、有名なブログでも紹介されていたので、ここで紹介するまでもないと思いますが、敢えて改めて紹介させていただきます。
svay.comより、JavaScriptとCSS3で実現するスポットライトのような効果を演出する方法の紹介です。
発想力が凄いということで、 Janko At Warp Speedより、CSS3だけで作ったWindows 7のスタートメニューの紹介です。
Firefox3.6、Google Chrome 4や5、Safari4、Opera10.50、そして、今年中（？）にリリース予定のIE9など、徐々にブラウザのCSS3のサポートがよくなってきています。
中には、実務でCSS3を導入している人も多いかと思いますが、CSS3のセレクタを自動生成してくれるCSS3 Generatorの紹介です。
これはすごいですねー。CSSだけで作ったOperaのロゴをOpera Logo with CSS · David DeSandroより紹介します。
オリジナルのOperaのロゴとの各ブラウザでどのように表示されるかも載ってあります。
前回（といっても結構前なのですが・・・）、「IEの各バージョンだけに対応させるCSSの条件指定[CSS]」を、書かせていただきましたが、どうやら好評のようでそれなりのブックマック数を獲得させていただきました。ありがとうございます。
そこで、今回は、それに対しての補足を付け加え、さらに見やすく書こうと思います。
line25.comより、素晴らしいアイデア満載でアクセシビリティ的にも良いCSSのみで作る3Dの効果をだした立体的なテキストエフェクトの紹介です。
角丸コーナーを生成するCSS3のプロパティのひとつである「border-radius」ですが、ブラウザによって挙動が違うようです。
そこでMuddled Ramblingsより、CSS3で角丸コーナーを生成するのに非常に役立つ一覧表の紹介です。
webhostingsecretrevealed.comより、シンプルなCSSで作るhover時の画像エフェクトの紹介です。
ZURBより、CSS3で作るポラロイド風の画像ギャラリーの作成方法の紹介です。
onderhond.comより、paddingとmarginを使って角丸っぽく見せるCSSの紹介です。
CSS3のプロパティが自動で生成できる「CSS3 Generator」の紹介です。
StylizedWeb.comより、CSS3で作るシンプルなボタンの紹介です。
aceinfowayindia.comより、スケーラブルなCSSベースのパンくずリストの作成方法の紹介です。
texaswebdevelopers.comより、JavaScriptとCSSハックなしで作るCSSのみのドロップダウンメニューの紹介です。
Chris Page's Weblog of Doomより、デバックに使える(X)HTMLの構造をアウトライン化することができるCSSの紹介です。
The CSS Ninjaより、CSS3を使ったアコーディオンの作成方法の紹介です
Font Squirrelより、@font-faceのCSSルールで使えるフォント100の紹介です。
Safari4やFirefox3.5のリリースにあたり、徐々に、その全貌が明らかになりつつある「@font-face」ですが、「@font-face」とは、自分の好きなフォントをWebページで表示することができるプロパティです。
devirtuoso.comより、スクリプト設置なしでCSSだけで作る画像ギャラリーの紹介です。
HTML5 Doctorより、Eric MeyersのReset CSSをベースに作られたHTML5用のReset CSSの紹介です。
davidwalsh.nameより、PHPとCSSで作るカレンダーの紹介です。
特にプログラミングの初級レベルの人にとったら、良い課題になると思いますので、トライしてみるのも良いと思います。
Smashing Magazineに非常に素晴らしいチートシートが載っています。
次世代の言語であるHTML5とCSS3の一覧表であるチートシートです。ぜひ、この機会に押せておきたいですね。
以前、「jQueryを使ったカラムの高さを揃えるスクリプト[js]」と2カラム用の高さを揃えるスクリプト「Equal Height Javascript」[js]のエントリーでも紹介させていただきましたブロックレベルのカラムの高さを揃える方法ですが、Build Internet!より、非常に参考になる方法があったので、ブロックレベルのカラムの高さを揃える4つの方法として紹介します。
zachstronautより、CSSのtext-shadowプロパティとJavaScriptでスポットライトのような効果を演出するソースの紹介です。
デモページはこちらからマウスを動かすとスポットライトが動きます。
Perishable Pressより、なかなか興味深いエントリーがあったので、Firefoxをターゲットとした各バージョン毎のCSS Hackを紹介します。
Firefoxのみのターゲットですが、FirefoxのバージョンごとによるHackがまとまっているので有用です。
カラムの数と幅とガターの幅の3つだけを指定するだけでCSSを生成してくれるグリッドシステム「The 1KB CSS Grid」の紹介です。
Ben Ogle's blogより、CSSとjQueryで作るシンプルなプログレスバーの紹介です。
CSSをインラインCSSにして、HTMLに埋め込んでくれるサービス「HTML email inline styler」の紹介です。
theWPresserより、HelveticaでデザインされたCSS Cheat Sheetの壁紙の紹介です。
Ten CSS tricks you may not knowより、簡単な和訳をしたので、紹介します。特に、CSSを勉強しはじめた方には有効な情報ですので、参考にしていただければ幸いです。
FofR Onlineより、CSSのみで作る3Dキューブの紹介です。
デモページはコチラからただし、CSS3のためwebkit系のブラウザ、Google Chrome、Safari 4でしか動作しません。
角丸のボタン画像とHTMLとCSSを生成してくれるジェネレーター「iWeb Tools Online」の紹介です。
onlinetechtips.netより、jQueryとCSSベースのアコーディオン集の紹介です。
ちょっと前に、「自分がこうやってHTMLとCSSを覚えた」的なエントリーを読みました。そのエントリーのタイトルもURLも忘れましたが、それに便乗して、僕がどうやってHTMLとCSSを勉強して、身に付けたかを書きます。
CSS Hackについてあるエントリーを読んでいて、ふと感じたことなのですが、CSS Hackは、使わなくなったということです。
不幸かどうかはわかりませんが、クライアントからたまに無茶な要望がでることはよくありますが、そのときはどうしてもCSS Hackを使わなければならないことがありますので、下記にまとめてみました。
impressivewebsより、2カラム用の高さを揃えるスクリプト「Equal Height Javascript」の紹介です。
SiteCrafting > Blogより、CSSのみでボックスをページの真ん中に設置するポジショニング方法の紹介です。
jankoatwarpspeed.comのエントリーより、jQueryで作るSkypeのようなアニメーションボタンの紹介です。
デモページはこちらから
css-tricksより、オートムービングの視差背景の作成方法の紹介です。
Komodo Mediaより、CSSで作る素晴らしいアルバムのリスト集の作成方法の紹介です。
evotech.netより、IE8とSafari 4 Betaを含んだCSS2.1セレクターの対応一覧表です。
Designm.agより、CSSとjQueryで実装するディスプレイスウィッチのスクリプトの紹介です。
以前に「色々なスタイルのテキストボックス[CSS]」というエントリーで紹介させていただきましたが、これに類似したものとして、CssFinestのエントリーより、CSSのみで作る検索ボックスのデザイン例の紹介です。
css-tricksより、CSSのみでイメージとテキストブロックの両方をロールオーバー方法の紹介です。
Stefano VernaよりMac OS X専用のカレンダー「iCal」のようなjQueryを使ったカレンダーデザインの紹介です。
CHROMATICより、CSSだけで実装するイメージロールオーバーの紹介です。
CSSのタイプセットのマトリックスとコードジェネレーターの紹介です。
以前、６つのポピュラーなReset CSSテクニックというエントリーを書かせてもらいましたが、改めてReset CSSについて深く書きたいと思います。
CSS Globeより、<table>も<dl>も使わないでコーディングされた様々なデザインのフォームの紹介です。
有名なReset CSSの外部スタイルシートのリンクを用意してくれているオンラインサービス「CSS-Reset.com」の紹介です。
以前のエントリーで、「テキストボックスにフォーカスされるフォーム」を作成しましたが、これよりもアクセシブルなフォームを作成しました。
css-tricksより、jQueryによるアクセシビリティも考慮したダイナミックなFAQページの作成方法を紹介します。
css-tricksより、背景画像に2枚の画像を重ねて曇らせたような効果をだすCSSの紹介です。
jcargoo.orgより、CSSでフォームのフィールドの中を背景イメージとして設置する方法の紹介です。
sohtanaka.comより、CSSだけで作るLightviewスタイルのポップアップウィンドウの紹介です。
デモページはコチラから
cssmenumaker.comより、様々なCSSナビゲーションを作成してくれるジェネレーター「CSS Menu Generator」の紹介です。
2008年も今日までですが、今年もお世話になりました。
sohtanaka.comより、CSSで作るアコーディオン効果のあるナビゲーションの紹介です。
cssnewbie.comより、CSSだけで実装するアコーディオン効果の紹介です。
Webサイト製作の時に、非常に重宝するCSSテクニックを紹介します。
というよりも、完全に自分用のメモのために書いときます。
The Wojo Groupより、CSSとリスト要素(ul,li,dl,dt,dd)で作る棒グラフの紹介です。
webdesignerwall.comより、Best of CSS Design 2008の紹介です。
既存のCSSファイルからカラーコードを抽出して、簡単にCSSのカラーコードを変えてくれるオンラインジェネレーター「Replace CSS Colors」の紹介です。
tech.wowkhmer.comより、CSSで作る垂直と水平の棒グラフの紹介です。
The Web Squeezeのエントリーより、様々なデザインのボックスCSSボーダーのスタイルの紹介です。
