最近のトレンドのぼやけたブラーの背景に載せたり、美しい写真の背景にも映える半透明のパネルやテキストを簡単に作成できるPhotoshopのスタイルを紹介します。 素材はレイヤースタイル・aslファイルでダウンロードできます。
美しい半透明のパネルを簡単に作成できるPhotoshopのスタイルのまとめ
最近のトレンドのぼやけたブラーの背景に載せたり、美しい写真の背景にも映える半透明のパネルやテキストを簡単に作成できるPhotoshopのスタイルを紹介します。 素材はレイヤースタイル・aslファイルでダウンロードできます。
ヘッダは上部固定で、フッタは最下部にするスタイルシート、レスポンシブにも対応！ | コリス
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
2013年試してみたい、フレッシュなウェブデザインのテクニック
ウェブデザインの基本はおさえつつ、フレッシュでクリエイティブものを取り入れたい！ そんなデザイナーに役立つテクニックを紹介します。 Fresh and Creative Web Design Techniques 下記は各ポイントを意訳したものです。 はじめに ホワイト/ネガティブスペースをもっと ピーチとサーモン より大きいのがベター イメージを動かす ストックフォトは使わない はじめに デザイナーとして、このことは新年を迎え最も興味深いものの一つです。そうです、2013年のデザイントレンドは何が大きくなるのかです。これは非常に大切なことです。 そのトレンドの後に次が何であるか、ウェブデザイナーは新しいトレンドが何であるか適切に把握しておかなければなりません。 トレンドは本当にデザインを面白くします。 もちろんレスポンシブは今年のトレンドでしょう、昨年もトレンドでした。そして、私たちはグ
ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
デザインの引き出しを増やそう！細部にまでこだわった美しいウェブUIエレメントのPSD素材のまとめ
細部まで作り込まれた美しいデザインのウェブ用のUIエレメントのPSD素材を紹介します。 そのまま制作に使ってもよし、インスピレーションをもらってもよし、PSDなのでエフェクトの勉強をしてもよし、などいろいろ活用できると思います。 ※一部のファイルはPNGフォーマットです。
[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[CSS]正方形・ダイアモンド・台形・三角形・円・ハートなどを作り出すスタイルシートのまとめ
HTML <div id="square"></div> CSS #square { width: 100px; height: 100px; background: blue; } Diamond: ダイアモンド HTML <div id="diamond"></div> CSS #diamond { width: 80px; height: 80px; background: blue; margin: 3px 0 0 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin:
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
最近のウェブサイトで見かける背景のスタイルとトレンドのまとめ
Hannah & Jeremiah 洋服や髪型にもトレンドがあるように、ウェブデザインにもトレンドがあります。そして背景は特にトレンドがあります。上にあげた例のいくつかの写真やイラストの背景はシャープで分かりやすいですが、いくつかは解釈することが難しいものもあります。ソリッドな背景は人気が高く、ぼんやりとしたブラーな背景もあちこちで目にするでしょう。また、ブラックやホワイト（時代遅れな使い方ではなく）だけでなく、単一のカラーの背景で奥行きをコントロールしエレメントを目立たせるように使っているサイトもあります。そして、パターンやテクスチャもよく機能する背景で、これは最近形の大きさが変化したように思われます。パターンは大きいけれど、繊細なテクスチャのように低いコントラストのアイテムを使っています。 1. シャープなイメージ 背景にシャープで強いイメージを使うことは定番と言っていいでしょう、ポイ
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
2010年、押さえておきたいウェブデザインのトレンド
CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな
[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
写真画像に「すりガラスのバー」を描くPhotoshopのチュートリアル
2013年のロゴデザインのトレンド -2013 Logo Trend Report
この秋、デザインやファッションに使いたい10色 -2013年秋のトレンドカラー
2012年のロゴデザインのトレンド -2012 Logo Trend Report
シンプルでミニマルだけど、インパクトのあるデザインのサイト集
ナビゲーションのトレンドと傾向 -2008年2月 | コリス