デザイン&レイアウト 1-09 墨がにじんだような和風文字を表現 原稿用紙に墨で書いたようなイメージをPhotoshopでにじみを加えながら表現する。日本的、伝統的なイメージを強調したいコンテンツに効果的な手法だ。 制作・文/藤原 達(しなやかデザイン) Application Photoshop…CS4 01 文字の塗りの濃淡を表現するテクスチャ ーをつくっていこう。まず、「背景」レイヤー が白の状態で、横書き文字ツールでテキス トを入力する。フォントは明朝系、文字色 は黒にしておく。文字のレイヤーを2つ複製 し、レイヤー名をそれぞれ「キャッチコピー1」、 「キャッチコピー2」、「キャッチコピー3」に して、1と2 は非表示にしておく【1-1】。 【1-1】「キャッチコピー1」、「キャッチコピー2」のレイヤーは非表示とする。 02 「背景」レイヤーを複製し、複製した背景レイヤーと「キャッ
スーツは仕事をする上で、戦闘服と言われているように、本当にしっかりしたものを着たいと考えています。仕事柄、たくさんのお客様にお会いするので、常日頃から第一印象を大切にしたいと思っておりました。 今度スーツを作る時には第一印象で好感を持たれるような上質のスーツを、と思っていました。そこで、知人に紹介してもらったのが、SAKAEYAさんでした。 最初にお店に行った時、壁一面にディスプレイされたゼニアとダンヒルの生地の多さに圧倒されました。スタッフの方からは生地それぞれの特徴をしっかり説明していただきました。 その他、スーツを着たときのシルエットについて相談したいと思っていましたが、その点も問題なく私の理想通りに仕立ててくれました。「さすが」という感じです。 職場の同僚にすすめたところ、何人もリピーターになっているようで、私としても紹介して良かったと思っています。 自分のイメージどおりの、自分自
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
Latest Word » Tutorials » Popout Details on Hover w/ CSS Aug.2.2010 Popout Details on Hover w/ CSS Tags: Intermediate I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple. The columns are made up of unordered list items, within each list item is the thumbnai
The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality). As a reminder, here's how a defau
This is part of a series of guest posts covering tips and tricks for working with CSS. These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS. Today’s guest post was written by Andy Clarke, author of Hardboiled Web Design. In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya
第4回「CSS3を使ったより強く、より良い、より手軽なデザイン」 2010年01月05日 翻訳元サイト:Smashing Magazine http://www.smashingmagazine.com/ 原文:Stronger, Better, Faster Design with CSS3 http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/ 著者:ZURB 翻訳:中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSS3に関する前回の記事「Pushing Your Buttons With Practical CSS3」で、私たちはCSS gradients、角丸の囲み罫、ドロップシャドウなど、CSS3の新しいテクニックを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く