20 Design Tutorials For Creating The Perfect Button | Creative Nerds
February 21st, 2011 Tutorials A recent obsession of mine within web design is paying attention to the finer details within a site such as a buttons. Web designers rarely pay attention to buttons therefore it can sometimes be overlooked, and designers can be unaware on how to create well designed buttons therefore we have listed 20 of best design tutorials which will equip you with great skills to
Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio
アイコン、ボタン、リボンをはじめ、フォーム、スライダー、ツールチップ、メニューなどウェブデザインでよく使用されるようなエレメントをFireworks用のファイルで配布しているサイトを紹介します。 Webportio Graphical resource of Adobe Fireworks [ad#ad-2] 素材の利用にあたってはウェブサイト・ソフトウェアなど、個人でも商用でも無料で使用できます。また、利用の際にはバックリンクの必要もありません。 お願いとして、このサイトを何らかの形で広めてくれると嬉しい、とのことです。 素材はウェブデザインによく利用するエレメントも数多くあり、下記にいくつか紹介します。
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
Less Framework
An adaptive CSS grid system. What It Is Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Default Layout 10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。:phpspot開発日誌
Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。 2010年11月18日- Tech Laboratory Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。 Windowsインストーラーは「次へ」を押していくとどんどんインストールを進められて簡単ですが、それをブラウザ上で簡単に実現してしまえます。 各ページの中身は、単純に<div>で並べるだけというお手軽さ。ルールに従ってHTMLを記述し、$(element).smartWizard() で初期化するだけです。 デモページはこちら タブを左にレイアウトしてもなかなかいい感じ。 デフォルトのデザインはお世辞にもカッコイイとは言い難いのですが、CSSデザインが可能なので、自由にスタ
リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５:phpspot開発日誌
15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
雑誌のようにページをめくるエフェクトが楽しい -Flipping Book | コリス
Flipping Bookは、雑誌のようにページがめくれ、拡大表示・印刷・PDF保存などの機能を備えたFlashのビューアーです。 Flash page flip engine -FlippingBook デモ Flipping Bookは、画像をフォルダに入れるだけで設定できる「HTMLエディション版」や、インターフェイスの変更も可能なFlashの機能拡張の「Flashコンポーネント版」など複数の形態で配布されています。 インターフェイスを変更したFlipping Bookのデモ Flipping BookはHTMLエディション版・Flashコンポーネント版など有償ですが、HTMLエディション版（10ページ）はフリーで利用できます（商用利用は不可）。 FlippingBook HTML Edition (Free Version) HTMLエディション版は、表示する画像（拡大画像とサムネ
Photoshop: tutorials, examples, guides. | SloDive
Everyone will agree that Photoshop has changed the world of design for the better. Everywhere you look, you will see the products of Photoshop — Pictures, Texts, Infographics, Backgrounds, Wallpapers, Screensavers, Templates, Advertisements, etc. In this page, you will find educational resources, tutorials, tips, hacks, and tricks related to Photoshop.
Create Awesome Splashing Water Text Effect in Photoshop - PSD Vault
In this tutorial, I will show you the steps I took to Create Awesome Splashing Water Text Effect in Photoshop. Along the way, you will learn how you can incorporate water splash brushsets into your text and create great effect from that. Have a try! In this tutorial, I will show you the steps I took to Create Awesome Splashing Water Text Effect in Photoshop. Along the way, you will learn how you c
jQueryとCSS3で構築された超絶クールな画像ギャラリーサンプル:phpspot開発日誌
Beautiful Photo Stack Gallery with jQuery and CSS3 | Codrops jQueryとCSS3で構築された超絶クールな画像ギャラリーサンプルが公開されています。 プログラムのまるごとダウンロードも可能。 これを使って、ちょっとカッコいいギャラリーを作ってよ、みたいな案件にすぐ対応出来るかもしれません。 一覧画面は次のような感じでCSS3の機能をフルに使ってクールにデザインされています。 画像をクリックすると、写真がLightBox風にオーバーレイして開きます。 何枚にも重なってますが、クリックするとシャッフルできます。 アニメーションなんかもいい感じで動いてくれます。 関連エントリ 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集 超クール画像ギャラリーが作れるJavaScriptライブラリ 画
色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシのまとめ:phpspot開発日誌
24 Stylish and Natural Photoshop Brush Collections Media Militia 色々使えそうな自然に関する綺麗でリアルなPhotoshopブラシがまとまっていましたのでご紹介。 雲、木、植物、雷、滝などのブラシがまとまっています。リアルなのでバックグラウンドイメージなどに使うとよさそうです。 雲のPhotoshopブラシ。デフォルトの雲模様よりもリアルですね 木のブラシ。種類が色々 リアルな花のブラシセット 雷のブラシ 滝のブラシもあります こうしたリアルな素材は覚えておけばサイトの彩りに使うことができそうなのでストックしておくと良いかもしれませんね。 関連エントリ 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット 光が超カッコいいPhotoshopのブラシ色々まとめ 無茶苦茶クールな光のPhotoshopブラシ集
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」:phpspot開発日誌
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」。 次のような、製品の紹介なんかでどこかで見たようなUIパーツを簡単に実装できるみたいです。 実装方法 最初はちょっと難しいような気もするのですが、実はかなり簡単で次のように<div>以下に2つのulを置いておきます <div id="feature_list"> <ul id="tabs"> <li> <a href="javascript:;"> <img src="services.png" /> <h3>Services</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="programming.png" /> <h3>Programming<
いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル:phpspot開発日誌
いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル。 Photoshopのレイヤー効果などで描画した影は以下のように、これはこれでよいのですが、面が宙を浮いているようにみえます。 ということで、レイヤー効果をつけた後、レイヤーをラスタライズし、次のように円形選択ツールで４つの辺を削ってみると、すこし硬めの紙を平面に置いたようなよりリアルな感じを出すことができます。 これは微々たる違いではありますが、比較するとこっちのほうがリアルに感じますね。 実際に写真を当てはめてみた図が以下です。 以下のエントリを参照してください。 Better Drop Shadows in Photoshop | Design Reviver 関連エントリ プロレベルのPhotoshopチュートリアル集 ボタン作成のPhotoshopチュートリアル集 飛び出る立体グラフィックを
オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利:phpspot開発日誌
オンラインでワイヤーフレームが描画できてかなり便利な「HotGloo」。 ここでいうワイヤーフレームとはWEBサイトデザインの下地になるようなもので、サイトデザインの設計に使えます。 簡単なベースを作っておくことであとはPhotoshopなどで装飾させるというステップで、ユーザビリティを考えつつデザイン性の高いサイト構築に役立てられます。 HotGlooの画面はFlashを使ったリッチなインタフェースで、デスクトップアプリと遜色ないクオリティのＵＩによってワイヤーフレームが作成できます。 ページの右下には豊富なＵＩパーツがあり、白地のキャンバスにドラッグ＆ドロップするだけで配置が可能です。 色々とドラッグ＆ドロップしてエレメントを配置してみた例。実に様々な基本となるUIパーツが存在しており、高速にＵＩの設計をすることができそうです。タブやアコーディオン、GoogleMap、グラフまで存在し
超カッコいいApple風スライドショーギャラリー作成チュートリアル:phpspot開発日誌
超カッコいいApple風スライドショーギャラリー作成チュートリアルが公開されています。 次のようなカッコいいスライドショーが作れます。 デモページ コーポレートサイトのページのヘッダーなんかに入れ込むといい感じになるかもしれませんね。 以下のエントリを参照してください。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery ? Tutorialzine 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryでAjaxを使った滑らかアニメーション画像スライドショー スライドショーが可能なイメージギャラリー作成ライブラリまとめ 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Websiteicons
Web Design Clip [WEBデザインのクリップ・リンク集]![Web Design Clip [WEBデザインのクリップ・リンク集]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5f481647ac1eb2cd87c65cb220881cb5c1c55bf/height=288;version=1;width=512/http%3A%2F%2Fwebdesignclip.com%2Fimg%2Fogp.png)
