For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
Web Designに関するedo_m18のブックマーク (29)
-
edo_m18 2012/07/21
-
-
canvas : 画像の合成方法いろいろ - WebOS Goodies
使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形（パス or ビットマップ画像）、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています（簡
-
CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
-
-
なぜデザイナーが HTML5 に関心を持つべきなのか - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「Why designers should care about HTML5」を日本語訳したものです。 原文タイトル Why designers should care about HTML5 原文ページ URL http://html5doctor.com/why-designers-should-care-about-html5/ 著者 Cennydd Bowles 氏 原文投稿日 2009-10-14 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる
-
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
-
-
-
ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル
なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか？ Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、各ポイントを意訳したものです。 ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションの使用の注意点 使用は、より繊細に よくある間違いと解決方法 おわりに ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。 Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっ
-
2009年、ウェブデザインに役立つまとめのまとめ
Web Design Trends For 2009 邦訳：2009年、押さえておきたいウェブデザインの10のトレンド 2009年に流行るであろうとされた10のトレンドです。確かに、これらのものが使用されたサイトは多く見かけました。
-
Web Design Trends for 2010: Call To Action Buttons « FrancescoMugnai.com
Author: Francesco Mugnai (199 Articles) I'm and Adobe Certified Expert in Photoshop CS4, i work as Teacher, Graphic Designer and Web Designer. My other websites: Itevenhasawatermark - CSSMachine advertisment I’m going to publish every week some posts about the “web design trends” for the next year. This time we’ll see something about the “call-to-action” buttons.Enjoy and let me know your thoughts
-
ユーザーはちゃんとスクロールする？ | Accessible & Usable
公開日 : 2009年12月21日 (2011年1月11日 更新) カテゴリー : ユーザビリティ 456 Berea Streetという、主にWeb標準やアクセシビリティ、ユーザビリティに関する話題を簡潔にまとめて発信しているスウェーデン発のサイトがあります。その中に、「Don't fear the fold -- people do scroll」という興味深い記事がありました。Webユーザーはちゃんとスクロールしてくれるもだから、「fold」を恐れるな、というものです。 ここでいう「fold」とは、折り返しという意味ですが、もう少しわかりやすく言うと、Webページの情報のうち、ブラウザに表示される部分と表示されない部分の「境目」のことを「fold」と言います。スクロールせずに閲覧できる範囲のことをWebの業界では、「above the fold」または「first view」と呼んだ
-
Webデザインにおける”Wow”ファクター – creamu
見る人に驚きを与えるようなデザインがしたい。 そんなあなたにおすすめなのが、『The “Wow” Factor in Web Design 』。Webデザインにおける”Wow”ファクターです。 デザインで覚えてもらうためには、いくつか方法があって、まずコンセプト、次にデザイン、最後に”Wow”ファクターということで、いくつか具体例が挙げられていますね。 Analog alt + Gを押すと、縦のガイドラインと横の罫線が現れて、ポートレートにマウスオーバーすると、ぐ〜っと動きます Face タイポグラフィーにマウスオーバーすると、派手な感じでいろいろ変化します Flourish 赤い背景のナビゲーションをクリックすると、真ん中の木がいろいろと変化しますね。かわいい。とても楽しい感じです HutchHouse 右上のナビゲーションでデザインが変えられます。どれもかわいくて見入ってしまいますね
-
Best of CSS Design 2009 - Web Designer Wall
Since 2007, every year I do a round up of best of CSS from Best Web Gallery (check out 07 and 08 collection). Well, it is the time of the year again — Best of CSS Design 2009. This year I’ve selected another 50 nicely designed web sites. Among the list, I notice a lot of them are minimalistic design with beautiful serif fonts. The grungy and sketchy styles are still strong. However, the large back
-
Fluid 960 Grid System
Fluid 960 Grid System If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. Initially released as open source on GitHub Jan 29, 2009. Markup LibraryDesign ProcessDesign is based on the inspiration
-
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (15) 04-01 CSSハック一覧 | クリエイティブ | マイコミジャーナル
以下の一覧は、IE7でも使用可能なCSSハックである。CSSハックでは、特定のブラウザだけをスタイルシートの適用先とするため、ブラウザのバグや未対応機能を利用してセレクタなどを記述する。IE6の時代には、IE特有のバグを回避し、モダンブラウザと表示を揃える手段として多くのサイトで利用されてきた。 しかし、バグが修正されたIE7では、主要なCSSハックがこれまでと同じ目的では使用できなくなっており、対応が求められている。 CSSハックを使用せずに対応することができれば理想的だが、どうしてもハックを使用する場合、その仕組みやリスクを理解し、機能しなくなった場合はすぐに対応できるようにしておくことが重要だ。 なお、IEではコンディショナルコメントを使って適用先のブラウザを指定することもできる。 記述形式の表記 〜: 適用先を指定 ...: スタイルシートの設定を記述 property: プロパテ
-
PhotoShopでウェブデザインにクールな3D効果を取り入れるチュートリアル:phpspot開発日誌
PSDTuts - Photoshop Tutorials and Links - Creating A Cool 3D Web Design Effect PhotoShopでウェブデザインにクールな3D効果を取り入れるチュートリアル。 作成するイメージは次のようなもの。 ３Ｄ効果を入れると、重厚さ、高級さを演出できていいですね。 高級感のあるイメージのサイトにしたい場合にはぴったりです。 植物っぽい模様をつけたり、グラデーションで立体効果をつけるなど、なかなか為になるチュートリアルとなっています。 関連エントリ 写真家のためのPhotoShopレタッチテクニック集55 サングラスに好きな写真を映りこませるPhotoShopチュートリアル PhotoShopで髪の毛の描き方テクニック 凄くクールな名刺を作成するPhotoShopチュートリアル
-
[Bookmarklet]ウェブデザインの確認に最適なブックマークレット -Design | コリス
Allan Jardine | Reflections ブックマークレット「Design」には４つのツールがあり、それぞれ同時に使用することもできます。 Grid リアルタイムに変更できるグリッドを表示します。
-
2007年の人気エントリーＴＯＰ１０:phpspot開発日誌
2007年の人気エントリーＴＯＰ１０。 2007年にはてなブックマークで人気になったエントリのＴＯＰ１０をまとめてみました。 Webデザイナー/開発者が覚えておくとよい２５のテクニック 忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」 映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル WEBデザインに便利なオンラインジェネレーター＆ツール集 押さえておきたい15のJavaScriptスニペット JavaScriptでIEかどうかをたったの1行で判別する方法 Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 シンプルで使いやすい７つのフリーフォント 超クールなフリーフォント５種 CSSで作成されたサイトのメニューサンプル集 振り返ってみると
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました