Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
神は細部に宿り給う メラのダメージはなぜ１０なのか？
商品の値段がしばしば９９や９８０などで終わることはよく知っておられると思う。これは言うまでもなく我々が数字の表記法として位取り記法を用いているために起きる現象である。上の桁は下の桁より１０倍も重要なのでまず上の桁に注目する習慣が完全に定着しているのだ。そのため【９９円】は【１００円】よりも１円以上、【１９８０円】は【２０００円】よりも２０円以上に安い印象を与えることができるのだ。 位取り記法については単独でもっと書きたいことがあるのだが本筋から外れるのでここで置いておく。今回の本題は同じ原理がゲームに応用可能であるということである。例とするにふさわしい題材として選んだのがメラだ。 『ドラゴンクエスト３』で初登場したおなじみのメラの呪文のダメージは約１０である。それにはちゃんとした理由がある。結論から言うとプレイヤーが初めて見る２ケタのダメージにするためであり、その目的は 呪文の通常攻
これは画期的！新感覚のアイディア歯ブラシ『BRUSH & RINSE』 | POP*POP
この発想はなかった・・・BRUSH & RINSEの歯ブラシが素敵です。 歯ブラシの背がくぼんでいるだけなのですが・・・。 ↑ このように水をはじきます。 ↑ もちろんこのように使います。 歯磨きのあとのすすぎがぐっと簡単になりますね！コップいらずです。 現在プロトタイプが公式サイトで販売されていますが、$1,750ととんでもなく高いですね。これは商品化されてよいのでは・・・。 » BRUSH_AND_RINSE
Melting building
This building mural, a trompe-l’oeil, is located in Georges V Ave. in Paris, France. Trompe-l’oeil is an art technique involving extremely realistic imagery in order to create the optical illusion that the depicted objects really exist, instead of being just two-dimensional paintings. The name is derived from French for “trick the eye”, from tromper - to deceive and l’oeil - the eye. More illusion
知っておくと便利な「無彩色」の使い方
白、黒、グレーのように色みを持たない色のことを「無彩色」と言います。 （むさい色じゃないよ！） 「無彩色」はどんな色ともマッチする反面、使い方によっては地味で無機質な印象になりがちですが、上手に使うとシックでスタイリッシュな雰囲気になります。今回は、色使いの基本として「無彩色」の使い方を紹介したいと思います。 色には大きく分けて「有彩色」と「無彩色」の2種類あります。有彩色は「色相、明度、彩度」の3つの性質があるのに対し、無彩色は「明度」*だけの性質を持っています。 *明度（めいど：value） 色の明るさの度合いのこと。 最も明度の高い色が白、最も明度の低い色が黒です。 Webデザインに「無彩色」はかかせない存在 背景など部分的に使う グラデーションをつける 明度差をつけて強調する 光と影をつけて立体感を出す どんな色ともケンカをしない「無彩色」は、使う場所を選ばない万能な色。 Webデ
パリに作られる新しいコンサートホールは異次元空間のような雰囲気
2012年にパリに新しいコンサートホールが造られるらしいのですが、完成予想図の模型を見ても全くコンサートホールには見えないものになっています。変わっているのは外見だけではなく、中もちょっと普通ではなく、まるで異空間に迷い込んだかのようなホールになるようです。 詳細は以下の通り。 dezeen >> Blog Archive >> La Philharmonie de Paris by Jean Nouvel dezeen >> Blog Archive >> La Philharmonie de Paris 2 外観がまずかなり変わっている。フロアが互い違いに重なり合っていて、端っこは水平ではない。 2400席でオープン予定。 メインのホール。 メインホール横のバルコニー。 休憩所。 音の反響などを考えてこんな形に作られたのかもしれません。実際にどんな感じになるのか、見に行ってみたい。
15,000個以上！最強のアイコン集サイト『FreeIconsWeb』 | P O P * P O P
素敵なアイコンがたくさんダウンロードできるのがFreeIconsWebです。全部で15,000個以上あるそうですよ。 ↑ なかなか素敵ではないかと・・・。 こうした素材集サイトは知っておくと便利ですね。ブックマークに加えておいてはいかがでしょうか。 なお、ご利用の際は配布元のライセンスをご確認ください。 » Free Icons Web – Free Icons,Free Icons Download,Free window icons,Free xp icons,Free computer icon
フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum
通常、フッターには基本的なナビゲーションを繰り返して用い、著作権情報やプライバシーポリシーなど「細字部分」にあたるものが書き込まれる。また、標準に基づいたデザインの人気が高まり、フッターにXHTMLやCSSへの準拠を示すバッジが置かれるようになった。 新しいクライアントのために、フッターが完全に不足しているサイトを再デザインしながら、僕がデザインをまとめるとフッターがやる気のない付け足しになってしまうのはどういう具合なんだろうと思った。僕のフッターはたいてい内容が乏しく、デザインも大好評とはいかない。これまでに作った最も内容豊かなフッターはおそらく、ミニサイズのサイトマップとコンタクト情報がちょっとばかり入った、Avatar Financialのものだろう。 こうして僕は興味をもった。ほかのウェブデザイナーはフッターを何に使っているんだろうか？ウェブを回って集めた、フッターが目を引く19サ
バルタン星人のハサミっぽい、黄金比が計れるデバイダー
バルタン星人のハサミでも、ロブスターのハサミでもありません。 芸術作品やデザインで用いられる｢黄金比｣を計ることができるのが、こちらの｢コンパッソ・レオナルド・ジェニオ｣。 写真のA：BとB：Cが常に｢1：φ｣の黄金比になっているので、このハサミっぽいフォルムの先っぽを対象物に当てれば、簡単に黄金比の割合で対象物が配置されているかどうか確認できるという優れもの。 画面上でも使えるのは便利ですね。優れたデザインに隠された黄金比を探すのにも使えそう。なにより、理屈っぽいクライアントへの説得材料にはもってこいですね。あ、でも、凶器にするのは誤った使い方ですよ。 気になるお値段は2万8350円。（常山剛） コンパッソ・レオナルド・ジェニオ[信頼文具舗] コンパッソ・レオナルド・ジェニオ[楽天]
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
画像の使用を極力控えてかっこいいCSSデザインをやってみよう
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
黄金比グラデーション・白銀比グラデーション - DesignWalker
web制作者の為の2007年7月に見逃がせないベストエントリ66個ほど*ホームページを作る人のネタ帳
デザイン初心者の方が気をつけると良いポイントあれこれ - DesignWalker
Creating a Mac-Type Background in Photoshop
アルファベットを使ってロゴを作るときの10のTips - DesignWalker
http://www.designwalker.com/2007/04/shopping-bag.html
写真がめくれた感じを表現する | DesignWalker
http://www.designwalker.com/2007/03/nature-design.html