CSSで作る素晴らしいナビゲーションテクニック「30 Exceptional CSS Navigation Techniques」
TOP > WebDesign > CSSで作る素晴らしいナビゲーションテクニック「30 Exceptional CSS Navigation Techniques」 サイト構築には書かせないナビゲーションメニュー。頻繁に使う部分だけにデザインや使い勝手でサイトのクオリティーにも影響を与える重要な要素の一つです。今日紹介するのはCSSで作るナビゲーションのテクニックとサンプルをまとめたエントリー「30 Exceptional CSS Navigation Techniques」です。 The Menu menu 様々な種類のCSSを使ったナビゲーションが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■CSS Blur Menu 選択されていない部分はピントがボケたように見えるCSSメニュー。 ■CSS Naviga
WEBデザイナー必見！あらゆるリソースが参照できる「Web design tools and resources」
TOP > WebDesign > WEBデザイナー必見！あらゆるリソースが参照できる「Web design tools and resources」 Deisngdevelopではデザイン、WEBに役立つ様々なコンテンツを日替わりで紹介していますが、今回紹介する「Web design tools and resources」はあらゆるWEBデザインに役立つリソースがまとめられているエントリーです。 リソースはリソースはJavascript、Miscellaneous Tools、Hosting、Grid Design、Typographyなどとジャンル分けされ、一覧になっていて非常に分かりやすくまとめらられています。 詳しくは以下 タイトル横に属性が付けられています。 さらに嬉しい事にサイトへのリンクだけではなく、簡単な説明とそのリンク先でDownloadができるのか、サンプルが
デザイナーが知っておくべき背景画像のリソースサイト集:phpspot開発日誌
36 Must Have Backgrounds and Patterns Resources for all Designers : Speckyboy - Web Design, Web Development and Graphic Design Resources デザイナーが知っておくべき背景画像のリソースサイト集。 背景画像のダウンロードやWEB上で動作するジェネレーターがまとまっていました。 背景画像リソース集 Huge Magazine - Desktop Patterns and Tiles 綺麗orおしゃれな背景画像パターン多数 Barracuda Backgrounds 地味だけど汎用に使えそうな背景画像 HYBRID GENESIS カラフルだけどこちらも汎用性がありそうな背景集 DinPattern ちょっと個性的なパターン集 ジェネレーター Tiled Back
2008年のCSSベストデザインサイト集:phpspot開発日誌
Best of CSS Design 2008 2008年のCSSベストデザインサイト集という特集。 これは、と思う物をピックアップしてみました。最新のデザインを見ることで勉強になりますね。 Let It Bleed Vermont Coffee Works Digital Mash Good DrupalCon, DC Future of Web Apps - Miami 2009 Future of Web Design - NYC 2008 Tennessee - Fall Tennessee - Spring Tennessee - Summer Tennessee - Winter LightCMS The First Twenty Luke Larsen Design Disease Adaptd Jason Santa Maria Electricurrent Mochi A
実用的なCSSテーブルデザイン集「Top 10 CSS Table Designs」
TOP > vector , WebService > 実用的なCSSテーブルデザイン集「Top 10 CSS Table Designs」 テーブルと言えば、今やあまり使われなくなった感じがしますが、それでも何かを比較したり、情報を整理したりといった用途には非常に便利に使えます。今日紹介する「Top 10 CSS Table Designs」はCSSでデザインされた、使いやすいシンプルなテーブルサンプルが多数収録されているエントリーです。 いくつか公開されていますが、その中から気になったテーブルデザインをピックアップして紹介したいと思います。 詳しくは以下 ■Horizontal Minimalist シンプルながら実用的なテーブルを使った表組み。項目がしっかりと見えて分かりやすいですね。 ■Box デーブルのボックス単位でハイライトします。行単位で比較したいデータなんかには便利
デザイン性に優れたCSSメニュー集:phpspot開発日誌
Hidden Pixels - Ultimate CSS Menus デザイン性に優れたCSSメニュー集。 これは、と思うようなかっこいいＣＳＳメニューが特集されていました。 Professional drop-down Professional dropline Space Drop Down Menu Flyout hybrid menu Professional drop-down - shadow menu Brooke Case Drop Down Tech Radar mouseover tabs つい押したくなるようなメニューですね。 参考にクールなメニューを作ってみましょう。 関連エントリ クールなナビゲーションメニューを作成するCSS＆HTMLサンプル アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 J
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
1個の画像でシンプルに角丸を実装するCSSサンプル:phpspot開発日誌
Simple Round Corners in CSS (revisited) We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. 1個の画像でシンプルに角丸を実装するCSSサンプル。 使うのは次の1枚の300バイトの画像。 なるほど、これでポジションをずらしてあげれば、画像は1枚でシンプルに実装できるわけですね。 HTMLマークアップとCSSの紹介と解説がされてます。 関連エントリ CSSで角丸テ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]洗練されたデザインのフリーのテンプレート集
[CSS]スタイルシートでパララックス(視差)効果を狙ったサイト集
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
visibility プロパティを使って、ロールオーバー効果を表現のサンプル