CSS3を使ったUIアイデア集 / circular links menu / CSS SWITCH他...全12件
チヤホヤされたり、肩書きを持ったりするとつい偉ぶってしまいがちですが、気を付けたいところですね。 2. 会話では相手に話をさせる 私はラクをしたいので、なるべく自分はしゃべらず、相手に話していただいて、同じギャラなら出番が少ないほうが効率がいいわけで、これを芸能効率説といいます(笑)。 もちろんこれはタモリさん流のジョークでしょうが、タモリさんといえば「いいとも」での「テレフォンショッキング」ですよね。 聞き役に徹することの大切さを誰よりも理解、実践しているでしょう。 実は、「気が合う」と思ってもらえる一番かんたんな方法は、話を聞くこと なのです。 以前紹介したこちらが参考になるかもしれません。 これであなたも好かれる!「聞き上手」になるための5つのポイント しかし「聞く」といってもただ黙っていればよいわけではありませんね。 あいづちをうったり、適切な質問をして、相手に気持ちよく話してもら
ユーザーのマウスホバーに合わせて、価格表のセルをアニメーションで拡大するCSS3のテクニックを紹介します。 デモページ ホバーしたセルが拡大表示され、ボックスシャドウを使って浮き上がる感じです。 カラーを変更してもよさそうです。 実装 HTML 価格表は実はtable要素を使っておらず、リスト要素で実装されています。 <div class="pricing_table"> <ul> <li>Standard</li> <li>£20</li> <li>Perfect for those getting started with our app.</li> <li>15 Projects</li> <li>5GB Storage</li> <li>Unlimited Users</li> <li>No Time Tracking</li> <li>Enchaned Securit
写真:Swing to Heaven シルエットはあらゆるものから作り出されます、しかしその中でも良質なものがあります。二次元の写真にすることを想像しながら、力強いはっきりとした形状もったものを選択してください。 シルエットは主題のカラー、テクスチャ、トーンをみせることはできません、主題の形だけです。 フラッシュは使わない シルエットを撮る時は基本的には、主題の前にわずかなライトがあれば十分です。 とはいえ、フラッシュは絶対使用してはいけないものではなく、フラッシュを使った素晴らしいシルエット写真もあります。 シルエット写真のベストなライト 写真:Bikers 主題の前にライトを置く代わりに、背景から多くのライトを必要とするシルエット写真は写真撮影について学んできたものを捨てて、後ろ向きに考える必要があります。 シルエット写真のための完璧なライトは、日没または日の出の光です。これは明るいラ
愛知県名古屋市の大学向けシステムパッケージ販売、開発、導入をしている、IT企業で働く社員たちのお話です。 車(新車)を購入したことがありますか? あまり知られていませんが、車の販売は、芸術的ともいえる戦略が駆使されています。 洗練されたCMや新聞、雑誌広告で人々を魅了し、緻密なまでに計算されつくされた細かな心理テクニックで車屋(ディーラー)がお客に「買わせる」。 車は18歳の若者から、仕事バリバリのサラリーマン、60歳越えの老人まで、多種多様な人たちを販売戦略のターゲットとしていますが、高額商品の中で、ここまで幅広いターゲットに買わせ続けているって、すごいです。 この一連の販売プロセスは、日本を代表する大企業が何十年にもわたって取得してきた「買わせる」データをエリート中のエリート達が、戦略として練り上げた最高の「買わせるシステム」だと思います。 ※ちなみに当記事で「売る」ではなく「買わせる
The top 10 CSS3 techniques | Feature | .net magazine CSS3のよく使いそうな10個のテクニックのまとめエントリのご紹介。 font-face によってマシンに入ってないフォントを使うCSS例 opacity による要素の透明度指定 rgbaでRGBと透明度を併せて指定 border-radiusによる角丸 box-shadowによるブロックに影を付ける効果 text-shadowによる影付きテキスト効果 ボックスのグラデーション 複数バックグラウンド指定 transformによる変形 transitionによるアニメーション テクニックのリストだけではなくて、対応していないIE等もカバーするための具体CSSも記載されていて親切です。 関連エントリ CSS3等を使ったサンプルや各種CSSリソース集 CSS3で立体的な3Dリボンを作成するチ
CSS3で何ができるの? という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
ウェブサービスの価格一覧表をサンプルにし、ユーザーの購買意欲をコントロールする価格一覧表を作成するテクニックを紹介します。 価格の一覧表を見るユーザーの一番の目的は、価格を知ることです。しかしながら、価格を強調しすぎて、お金を使うということを意識させすぎないでください。苦労して手に入れたお金を使っているように感じると、ユーザーはより使わないように思ってしまいます。 価格のデザインはソフトにし、それ自体の特徴やベネフィットにフォーカスをあてるようにします。 ユーザーがどの商品を選択するか決めている時に、あなたはその決め手として価格にフォーカスを合わせることを望んでいますか? それとも特徴やベネフィットにフォーカスを合わせてほしいですか? もし、ユーザーが価格にフォーカスを合わせるのであれば、それは最も安いものに決めるでしょう。しかし、特徴やベネフィットにフォーカスを合わせるのであれば、ユーザ
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く