タグ

2010年7月13日のブックマーク (9件)

  • cheers-system.jp

    This domain may be for sale!

    dreamily
    dreamily 2010/07/13
    焼酎「しろ」の広告。Twitterと連動。OAuth認証すると動画の中でアイコンが使われます。
  • OnA

    2010 • Colección Yo Soy • I Am Collection • OnA®Carrera 37 # 8A-12 • Tel./Phone (574) 312 0019 • Medellín, Colombia • diseno[arroba]ona[punto]com.co

    dreamily
    dreamily 2010/07/13
    ファッションブランド「OnA(オナ)」のサイト。
  • オリジナルTシャツのsilkmaster

    High Quality Printing for professionalsアイデアを最高品質でかたちにする。すべてのプロフェッショナルのために。 株式会社シルクマスターはグラフィックデザインとアパレルプロダクトのちょうど間に立ってデザインをかたちあるモノにしてゆくプロセスを担っています。詳しくは、シルクスクリーンをはじめとした印刷技術を使ってグラフィックTシャツを中心にアパレルプロダクトの印刷・加工を行っています。現在まで、様々なブランドやクリエーターとパートナーシップを結びアイデアの実現をお手伝いしてきました。その中で培われてきたファッション性と高度な印刷技術という視点の異なる二つをバランス良く相乗させ完成度の高い製品づくりを行っています。アパレルブランドはもとよりグラフィックデザイナーやイラストレーターの皆様により広く当社の印刷技術を知っていただきたく、プロフェッショナルな現場で働

    オリジナルTシャツのsilkmaster
  • ベビーカー・チャイルドシートのアップリカ | Aprica

    生まれたばかりの赤ちゃんでも 安心してお出かけできるよう、 快適な乗り心地を追求した機能が充実。 軽量・両対面タイプ

    ベビーカー・チャイルドシートのアップリカ | Aprica
    dreamily
    dreamily 2010/07/13
    赤ちゃん・ベビー用品「Aprica(アップリカ)」のサイト。
  • [JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト

    フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク(*)ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor

    dreamily
    dreamily 2010/07/13
    クロスブラウザ対応/ラベルをアニメーションで表示/多数のオプション/フォームのマークアップを変更しないシンプルさ/フォームのラベルはinput要素と同じスタイルが可能/パスワードのラベルはテキストで表示
  • [CSS]非対応ブラウザにも配慮したCSS3で実装するボタンのチュートリアル

    ビギナーにも分かりやすくステップごとに解説された、CSS3でスタイリングしたボタンを実装するチュートリアルを紹介します。 Create a CSS3 Call to Action Button 下記は、各ポイントを意訳したものです。 Basic HTML まずはHTMLから始めましょう。 標準的なリンク要素に「.btn」というclass名をつけます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="linear"> <a href="http://www.sixrevisions.com" class="btn">CLICK THIS BUTTON</a> </div> </textarea>

    dreamily
    dreamily 2010/07/13
    CSS3で実装する立体的なボタンのチュートリアル。丁寧な解説つき。
  • [JS]ダイナミックで軽快なアニメーションを伴ったナビゲーション

    画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div

    dreamily
    dreamily 2010/07/13
    画像を一切使わないCOOLなナビゲーション。デザイナーのポートフォリオサイトのような雰囲気が簡単に。
  • [CSS]スタイルシートのすご技、ページをめくるリアルなアニメーション

    FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションを実装した「Pure CSS3 Page Flip Effect」を紹介します。 Pure CSS3 Page Flip Effect デモページ 対応ブラウザはChrome, Safariと限定されたものですが、CSS3グラデーションやクリッピングを使用してリアルなアニメーションが実現されています。 Román Cortésでは他にもスタイルシートのすご技が掲載されているので、まだの方はぜひご覧ください。 CSSで実装した、ものすごいパララックス(視差)効果 スタイルシートのすご技、スムーズに回転するコーラの空き缶

    dreamily
    dreamily 2010/07/13
    FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションの実装。「Pure CSS3 Page Flip Effect」
  • 配置をマスターして「機能するレイアウト」を作る大切なポイント

    ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、

    dreamily
    dreamily 2010/07/13
    情報の整理、グリッドの活用、ルールなど、目的に応じた配置が必要。