CSSでこんなこともできるのですねぇ。すごい。 ↑ アニメーションでどうぞ（クリックすると実際のデモ画面へ）。 応用すると次のような効果も実現できますね。これもおもしろい。 ↑ シュレッダーちっくに（クリックで動作する画面へ）。 アイデア次第でいろいろ使えそうですね。 実際のマークアップの仕方は以下に詳しいですよ。 » Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy)
メモ書きも兼ねてエントリー。「E Logo Design」にて「Top 50 Logo Design Tutorials」が紹介されていました。 スタイリッシュなロゴからどこかで見たようなロゴまで。ロゴつくりの際には参考にしたいですね。 ↑ いわゆる一般的な企業ロゴ。 ↑ S○ype風。 ↑ ちょっと2.0風。 ↑ シンボリックなマークまで。 知っておくとなにかと便利ですね。チュートリアルへのリンクは下記からどうぞ。画像入りでわかりやすいですよ。 » Top 50 Logo Design Tutorials | E Logo Design はじめまして。 ロゴデザインのサイトを運営している ysk と申します。 （毎日、100shikiのメルマガを読まさせていただいています。） ロゴ自体の紹介やロゴ関係のツールやサイトの紹介をサイト上でやったりしているのですが、「ロゴ制作の過程が見られるサ
クールなアクア風ボタンのベクトルデータが無料で72個！ すぐに使えそうなアクア風ボタンのベクトルデータが無料で公開されています。イラストレーターなんかで編集すればぱっと使えそう。 » 72 Free Vector Glass Buttons and Bars ファイル形式はAI、PNG、EPS、SVG。環境にあわせて必要なものを使うとよいでしょう。ただ手元のIllustrator 10ではAIが開けなかった・・・最新版じゃないとだめなのかな。 どちらにしろこういうベクトルデータの公開はうれしいですね。 CS3 で開けたので試しに Illustrator 10 形式で保存し直したところ、警告メッセージは出ますが特に何かが劣化するようには見えませんでした。(見落としているかもですけど) CS3 を持ってる人を探してファイル形式を変換してもらうと良いかもしれません。
フォントの色と大きさと背景色の微妙な関係 December 26, 2006 10:00 AM written by 8maki 12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。 その24 waysから一つご紹介。 » 24 ways: Cheating Color フォントの色と大きさと背景色についてのTipsです。 わかりやすく例を出していきましょう。 架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。 ■ 薄い背景に明るいフォントの場合 さて、下に2つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
