FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションを実装した「Pure CSS3 Page Flip Effect」を紹介します。 Pure CSS3 Page Flip Effect デモページ 対応ブラウザはChrome, Safariと限定されたものですが、CSS3グラデーションやクリッピングを使用してリアルなアニメーションが実現されています。 Román Cortésでは他にもスタイルシートのすご技が掲載されているので、まだの方はぜひご覧ください。 CSSで実装した、ものすごいパララックス（視差）効果 スタイルシートのすご技、スムーズに回転するコーラの空き缶

bluefaqsからクリエイティブなアイデアを生むのに役立ちそうなフレッシュなイメージをいくつか紹介します。 50 Really Cool Random Images For Your Inspiration

CSS3対応ブラウザではより美しく、非対応ブラウザでもそれなりに美しいアイコン付きのツールチップを紹介します。

img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。

多数の言語に対応し162の文字セットをもった、WindowsでもMacでも利用できるOpenTypeのフリーフォントを紹介します。 ※日本語は無いです。 Dekar Free Font フォントはウェブ、印刷、モーショングラフィックなど、どんなタイプのグラフィックデザインにも利用可能で、Tシャツやポスターやロゴなどにも利用できます。

10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め

<textarea name="code" class="css" cols="60" rows="5"> .shadow { padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </textarea>

アニメーション、RGBa、角丸などCSS3の機能をふんだんに使用しつつ、非対応ブラウザでも最低限の情報を提供しているナビゲーションを実装するチュートリアルを紹介します。 Creating a pure CSS dropdown menu ナビゲーションはJavaScriptを使用せずCSSで実装されており、CSS3をサポートするChrome, Safariですべてのエフェクトを楽しむことができます。

商用での利用も無料のグランジ風エフェクトを描く高精細なPhotoshopのブラシ素材を紹介します。 Exclusive Freebie Pack – 25 Grunge Brushes ダウンロードで

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して

トップの全体 「A Simple Magazine」の主な特徴 5色のカラースキームの切り替え。 ウィジェットに対応（フッタとサイドバー）。 TwitterとFlickrのウィジェットは実装済み。 セットアップが簡単。 AJAXベースのコンタクトフォーム。 サイドバーにソーシャルメディア。 wp--page naviを実装済み。 カスタムフィールドでサムネイルの自動化。 下記に、特徴のいくつかをご紹介。

Photoshopでつくるタイポグラフィのチュートリアルの紹介です。 3D Water Text Effect Simple Underwater Scene Create 3D type art C

Design interface application Framework _ 290 free vectors icons アイコンはウェブサイト、ワイヤーフレーム、オンラインアプリケーション、ソフトウェアなどを想定しているため、多種多様なデザインが290種類揃ったものとなっています。 サイズは16x16に基づいて設計されており、小さくても鮮明な外見を備えています。

調べたいフォントがある画像をアップロードします。ファイルはローカルでもオンライン上でも対応しています。 上記は、手元にあるローカルファイルを「Browse」ボタンで参照し、「Continue」ボタンをクリックします。 Step 2

CSS2.1とCSS3のプロパティがまとめられたチートシートをSmashing Magazineから紹介します。

<textarea name="code" class="css" cols="60" rows="5"> element { -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; padding: 20px; background: -moz-linear-gradient(center top, #999999 23%,#ffffff 93%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.23, #999999),color-stop(0.93, #ffffff)); } </textarea>

入力するのも楽しくなりそうな、しっかりとデザインされた海外のフォームのデザインをDzine Blogからいくつか紹介します。 Interface Design Inspiration - 36 Beautiful Contact Page/Form Designs

ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon（有償のアイコンページ）

<textarea name="code" class="css" cols="60" rows="5"> img { -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white)); -webkit-border-radius: 3px; border-radius: 3px; border: 3px solid #666; } </textarea>

ミニマルデザインでよく使用される特徴的なエレメントとそれを効果的に使用したウェブサイトを1stwebdesignerから紹介します。 Modern Element Trends In Minimal Webdesign of 2010 ミニマルデザインの特徴的な12のエレメント 参考として当サイトで紹介した関連記事を記しています。 多くの効果的なネガティブスペース 参考：ウェブデザインにおけるネガティブスペースの活用ガイド グリッドベースのウェブデザイン 参考：グリッドシステム -サイトへの有効活用方法 クリアで大きなタイポグラフィ 繊細なテクスチャとパターン 小さいアイコン 軽いシャドウ、グラデーション、レタープレスのエフェクト 参考：ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル レタープレスエフェクトのチュートリアル リボン、スケッチ、点線、ルーラー、半透明な