写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方

デザイナーやデベロッパーがインスピレーションを見いだす際に、助けとなるコミュニティサイト「Dribbble」を紹介します。 Dribbble 記事：Color Identity Trends from Dribbble 有名なサイトなので知っている人も多いと思いますが、COLOURloversの記事をみて改めてよいな、と思ったので紹介します。 Dribbbleは世界中のクリエイターが登録した作品を見ることができ、フィードバックを行うことができるサイトです。 目的無しでみるのもよいですが、右側のタグから気になるものをクリックして見るのもよいでしょう。 「logo」をクリックして、登録されたロゴの作品を見ます。 Dribbble - Tag / logo ページ内のサムネイルをクリックすると詳細ページへ遷移し、その作品の大きな画像とともに作者情報やコメント、タグが表示されます。 デザインの出発

ボタンなどのホバー時にカラーを少し明るくしたい、エレメントのコントラストのために境界を暗くしたい、といった時に役立つオンラインサービスを紹介します。

Sorry! There seems to be a problem connecting to our database. Please give us a few minutes to remedy the problem. Thank you.

FireBugのCSSパネルにカラーパレットを追加できる「FirePalette」 次のように、CSSペインにカラーパレットを追加し、選択で色を選ぶこともできるようです。 ちょっと色を変えたいときなどに便利かもしれませんね。 FirePalette :: Add-ons for Firefox 関連エントリ ページの読込み時間をチェックできるFirebugアドオン「Hammerhead」 Firebug内でHTML/CSSについて調べられるアドオン「FireScope」 FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」 FireBugで使える役立つ関数テクニック色々 FireBugのJavaScriptをハイライト表示する拡張「Rainbow」

ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象

この一覧について HTMLで色指定する際は、[16進数]で色を指定します。[10進数]は使用しませんが、他の用途で使用する場合があるので、表記しておきました。（左からR,G,B） [色見本]部分のリンク先で背景色を確認できます。 又は、16進数内のラジオボタンで背景色（左側）と文字色（右側）の変更が可能です。（ブラウザが対応していなければ作動しません） 一覧は彩度及び明度が同じ値の色をまとめ、明度の高い（明るい）順に並べています。 色選択には、便利な「背景色文字色・ページ全体の色選択」もあります。

Choose the best HTML color combinations with this free tool. Easy to use color finder that generates HTML codes.Coversion Warning? The warning symbol shows when there is a difference between the chosen colour and the base output colour. It is important to note that RGB has a far greater range of colours than the pigment based RYB colour wheel. The tool will will choose the closest match. If you w

色のサンプルです。 このようなRGBの16進数で色指定を行います。 「red」や「blue」のような英語でのコード指定も可能です。 このボックスにカラーコードを入れてボタンをクリックすると、 背景色が変化します。 いろいろと試してみてください。 なお、JavaScriptが使える環境でないと動きません。 背景色：

Share Your Color Ideas & Inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

Radioactive Buttons demo 上記デモはSafariでご覧ください。ボタンのグラデーションがまぶしいくらいにアニメーションします。 Firefoxなどのアニメーションに対応していないブラウザでは下記のように表示されます。 個人的にはデザインはこれで充分のような気もします。 <textarea name="code" class="css" cols="60" rows="5"> @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color:

Ben Hulse is a brand + design leader who helps magnify the impact of purpose-driven organizations. Over two decades experience inspiring change, uniting creative, and growing value. Now exploring collaborations with teams elevating people + planet. From startups to global brands, Ben has led transformations across creative disciplines and mediums.

ボックスやテキストのカラーをアニメーションで少しずつ変更するスクリプトをDr.Web Magazineから紹介します。 jQuery-Plugin Color Animations - Menüs mit wechselnden Farben animieren デモページ デモページでは、テキストやボックスを水平・垂直に配置したナビゲーションがマウスホバーに合わせてカラーが変更します。 使用しているスクリプトはjQueryで、プラグインにColor Animationsを使用しています。 Color Animations デモページ スクリプトのダウンロードはリンクが切れているので、デモページからのリンクを掲載しておきます。 color.js Dr.Web Magazineのデモではナビゲーションのカラーを変更する際、マウスオーバー時には「fast」ですぐカラーを変更し、マウスアウト時に

apycom ナビゲーションの主な特長 クロスブラウザ対応 アクセシブル スクリプトのオフ時にもCSSで動作可能 検索エンジン最適化 リスト要素で実装したクリーンなHTML セットアップもアップデートも簡単 アニメーションとトランジションのエフェクト 複数のカラースキームを用意 使用スクリプトはjQuery 3KBと超軽量 ナビゲーションのスタイル 現在は、7タイプが揃っています。

Sorry! We're down for scheduled maintenance. We'll be back up shortly