商用利用も無料、細部まで美しく作り込まれたUIエレメントが揃ったPSD素材 -Vue UI Kitタイトルバー、ツールバーをはじめ、ボタン、フォームの各エレメント、ツールチップ、ダイアログなど、ウェブページでよく使用するUIエレメントが揃ったPSD素材を紹介します。 Exclusive PSD Freebie: Vue UI Kit [ad#ad-2] ダウンロードできるPSDファイルはレイヤーが保持されているので、テキストやカラーを変更して使用したり、デザインの勉強にも適したものとなっています。
[CSS]ホバー時に素敵なエフェクトでパネルを変更するスタイルシート | コリス
animated icon on hover デモページ [ad#ad-2] デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 <!doctype html> <html lang="en"> <head> </head> <body> <a href="#" class="hover-panel"> <h3>Panel Title</h3> <p>Additional information about the panel goes in a paragraph here</p> </a> </body> </html> [ad#ad-2] CSS：ノーマル時のスタイリング まずは
Photoshopのビギナーでもできるディテールにこだわったボタンを作成するチュートリアル
Photoshopの標準機能だけで、グラデーションやレイヤースタイルをつかった美しいボタンを作成するチュートリアルを紹介します。 Photoshop For Beginners: Creating buttons for web part 1 Photoshop For Beginners: Creating buttons for web part 2 [ad#ad-2] 上記、四つのボタンのチュートリアルはPart 1, 2に分かれており、それぞれ二つずつのチュートリアルが掲載されています。 各チュートリアルはPhotoshopのキャプチャ付きなので、英語が苦手な方でもどのようなフローですすめるか理解できると思います。 ボタンはグラデーションやレイヤースタイルといった王道のテクニックだけでなく、ノイズをのせたりライトをくわえたりと細部までしっかり手がはいった作りになっています。
[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装：HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
[CSS]縫い目風のかわいいデザインをスタイルシートで実装したナビゲーション
ぱっと見、画像を使用しているかのような縫い目風のデザインをスタイルシートで実装するナビゲーションを紹介します。 もちろん、画像は使っていません。 また、IE6などのCSS3非対応ブラウザも配慮した実装となっています。 Sexy CSS3 menu デモページ [ad#ad-2] 実装のポイント スケーラビリティ アンカーのフォントサイズを変更することで、サイズを簡単に調整できます。 画像は無し 画像を使用していないため、メンテナンスが簡単です。またHTTPリクエストを減らします。 カスタマイズ 簡単にドロップダウン型などに変更できます。 このスタイルシートのアイデアの元となったのは、LESSで使用されているダウンロードボタンです。 LESS 実装方法 HTML HTMLはspan要素を使っている以外は、クリーンです。 このspanはスタイルをつけるのに必要で、疑似要素非対応ブラウザへの配慮
スマートフォンのボタンサイズ UI
スマートフォンのデザインをする際の UI のサイズには誰もが最初は悩んでしまいます。そんな時に役に立つのが、Android や iOSのUI のガイドラインです。その中から、ボタンのサイズに関する部分だけを抜き出して集めました。 ボタンのタッチ部分のサイズは最小で高さと幅は44ptが推奨されているみたいです。ただし、2010年に開催された Apple Tech Talk にてApple のUIデザイナーの Eric Hope 氏は、垂直方向へボタンがかさならないのであれば、例外として高さは 最小で22ptをOKとしていると話しています。事実、iPhone のランドスケープモードでは44px x 44px ではなく、48px x 38pxの高さのボタンも見受けられます。
Dribbble - Show and tell for designers
Get inspired by the work of millions of top-rated designers & agencies around the world.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
