スチーム速報 ＶＩＰAuthor: Mist twitter: Mist note: Mist diaries: 或るロリータ ロリータ速報 ＶＩＰ TOP絵簡易まとめ pass: steam つ最近人気あるスレ ↑イミフのパクリです！
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
ジャンル別にCSSのテクニックを収録したTips集「40 Outstanding CSS Techniques And Tutorials」
TOP > WebDesign > ジャンル別にCSSのテクニックを収録したTips集「40 Outstanding CSS Techniques And Tutorials」 WEBを制作するにあたって欠かせない技術の一つCSS。工夫や発想次第で様々な表現が可能ですが、今日紹介するのはCSSを使ったテクニックをジャンル別に紹介するエントリー「40 Outstanding CSS Techniques And Tutorials」です。 Cross Browser Multi-Page Photograph Gallery イメージギャラリー、ナビゲーション、ボタンなどシーンに併せたテクニックが全部で40個紹介されています。今日はその中からいくつか気になったものピックアップして紹介したいと思います。 詳しくは以下 ■How to Style an A to Z Index with
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
グラデーションをうまく使って立体感を出したサイトデザイン集:phpspot開発日誌
25 Great Examples of Using Gradient Effects in Web Designs グラデーションをうまく使って立体感を出したサイトデザイン集。 うまくグラデーションを使うことで、質感の表現や、ゴージャスな印象を生み出しています。 ECTOMACHINE クールな画像とともにグラデーションされた背景が印象を強くしています Reinvigorate うまくグラデーションと背景イメージを混ぜ合わせたデザイン 単色にするよりグラデーションの方が高級感が出ているのが分かります Central Snowsports 平面ですがうまく立体的にしてさらにそれが分かりやすいメニューになっている点が参考にできそう Tim Van Damme コントロールパネルっぽいデザインを立体的にデザインしている例 シンプルで分かりやすいページ構築の際の参考になるかも Rise Crea
Photoshopでひび割れたコンクリートにテキストを埋め込む方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ フォトショップの基本 ＞ Photoshopでひび割れたコンクリートにテキストを埋め込む方法 Photoshopでひび割れたコンクリートにテキストを埋め込む方法 投稿日：2009年05月12日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopでひび割れたコンクリートにテキストを埋め込みたいと思います。 Step1 ： はじめに Step2 ： 1つめのテキストにスタイルを設定する Step3 ： 2つめのテキストにスタイルを設定する Step4 ： テキストを一部切り取る Step5 ： 完成 このチュートリアルでは文字を背景のテクスチャを利用して表現する方法や、レイヤースタイルを追加してテキストを徐々に変形させたりテクスチャから浮き出させる方法を紹介します。 ここでは次のようなひび割れたコンクリートのテクスチャを使
ウェブデザインにおいてすべきこと、すべきでないことをまとめた『Web Do’s and Don’ts』 | 100SHIKI
ウェブデザインにおいてのベストプラクティスと、逆に一般的にやるべきでないことを簡潔にまとめたのがWeb Do’s and Don’tsだ。 わかりやすいようにDo’s and Don’tsが左右に並べられているので、ウェブ系の人はざっと眺めてみるといいだろう。 もちろんデザインに絶対はないので「そりゃ、逆じゃね？」という主張もあるが、多くの人の主張を眺めるのは勉強になるものだ。 なお、それぞれの項目には参考リンクがつけられているので「む、どういうこと？」というときは原文をあたるといいだろう。 ここらへんを仕事にしている人はたまに覗いてみるといいですね。
a要素が2行になった場合に背景下にテキストが来ないように。
目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので本題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad
ちょっと変わったCSSナビゲーションテクニック30 – creamu
Six Revisionsで、ちょっと変わったCSSナビゲーションテクニックが紹介されています。 ざっといくつかご紹介。 » The Menu menu メニューアイテムにマウスオーバーすると、サブメニューが現れる » Pure CSS hover menu マウスオーバーすると、縦にサブメニューが並んで表示される » Matte CSS Menu シンプルな角丸のメニュー » CSS Sliding Door using only 1 image スライドするメニューだが使っている画像は1つ » Woody CSS Menu ウッディーなメニュー。モダンブラウザでテスト済み その他のリストは以下からどうぞ。 » 30 Exceptional CSS Navigation Techniques 郵便局に行ったり銀行に行ったりとばたばただ。金曜日ですねーがんばりましょう。
ウェブデザインにおける効果的な背景の使い方
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
PhotoshopやGIMP用のブラシを試してからダウンロードできる -BlendFu
PhotoshopやGIMP用のブラシをダウンロードする前に、ブラウザ上でブラシの効果を試してからダウンロードできるサイト「BlendFu」を紹介します。 BlendFu キャプチャは、More Swirls BlendFuは、以前「マニアックなものまで揃っているPhotoshopのブラシ -BlendFu」で紹介しましたが、作者より「インターフェイスがパワーアップした」とメールを頂いたので、再紹介です。 ブラシの試用は、サイズやカラーの変更だけでなく、不透明度、角度を変更でき、ランダム効果、フィルタ効果を適用することもできます。 また、自サイトにiframeで埋め込むことも可能です。 ※サイトの幅が狭いため表示が切れてしまってますが。 iframe解除版
商用無料で使える写真素材サイトまとめ2009年度初版*ホームページを作る人のネタ帳
とりあえず自分がこんなまとめがあると後でつかうだろうなぁというものをかき集めてみました。 ページ自体を少しでも軽量化したかったので画像は、そのサイトをイメージできるだけのサイズにカットしています。テキストリンクだけだとあとでわからなくなる事が多いので、必要最低限のシンボルとして表示しています。 商用可能な写真素材サイト 5000 Free Stock Photos ノーアカウントで5000の写真と8000のクリップアートがダウンロードし放題。 Free Photo - Cepolina Photos 画像数8000超え。お勧め。 Free Photos, Free Stock Photos, Photography BurningWell Image * After 現在21000点以上の素材がダウンロードし放題。 FreeDigitalPhotos.net 600pxくらいまでの画像は無
[CSS]コンテンツ箇所をHTMLの上部に配置するスタイルシートのトリック
コンテンツ箇所をHTMLの上部（ヘッダ・ナビゲーションより上）に配置するスタイルシートのトリックをSoh Tanakaから紹介します。 Markup Hierarchy - Advantages in SEO demo 上記のようなレイアウトをHTMLで記述した際、上左の順番で配置するのが一般的ですが、「float」と「position: absolute;」を使用して、下記のようにコンテンツ箇所を先頭に配置しています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="main" class="container"> <div id="content">Content</div> <div id="header">Header</div> <div id="sidecol">Side</div> </div>
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
[CSS]セミリキッドレイアウトの両端に背景画像を配置するスタイルシート
セミリキッドレイアウトの両端にドロップシャドウの背景画像を配置するスタイルシートをSoh Tanakaから紹介します。 Tips for Developing Semi-Liquid Layouts demo デモでは、入れ子にしたdiv要素にそれぞれ背景画像を設置。 親は中央配置にし、min-width, max-widthを設定。 子はoverflow:hidden;を指定し、paddingなどを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="content_wrap"> <div class="content"> <!--Content--> </div> </div> </textarea>
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
すごく良い感じの英文フォントいろいろ:phpspot開発日誌
35 Free Fonts to Enhance Your Designs | Fonts | instantShift すごく良い感じの英文フォントいろいろが紹介されていたので一部ご紹介。 フォントに関しては、いくら紹介してもしきれないほどのフォントが存在し、日々生まれていますね。 Sketch Rockwell このスケッチ感、すばらしいですね。手書き風のかわいいデザインに使えそう Quicksand すっきりしていて綺麗なフォント。汎用に使えそうです。 Sansation こちらもスッキリして読みやすい綺麗なフォント。 Evolution True Type どこかで見たようなちょっと個性の強いフォント。 全部見る ますます、私のディスクを圧迫しそうです。 関連エントリ フリーフォント大量配布/紹介サイトいろいろ 萌え系フォントのまとめ 美しいフリーフォント45セット 女性の書いたよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
80種類以上の水滴や露などWaterdropの高解像度のPSD素材
ウェブデザインのクオリティをアップする7つのポイント | コリス
http://www.designwalker.com/2009/04/photoshop-layout.html
