原研哉さんのツイート『コペンハーゲンののデザイナーから、なぜ日本のスクリーン上の文字はいまだに原始時代なの?と問われて返答に詰まった。ロスの友人からも、日本のデザインはきれいなのに、なぜネットの中はぐちゃぐちゃなの?と問われて答えられなかった。美に聡く、醜さに疎いといわれる所以か。なんとかしたい。』 これに、深夜起きてたデザイン関係者の皆様が熱い反応を示していて、こっちまで熱くなったので、勢いでまとめました。 誰でも編集できるので、追加訂正あれば教えてください。 続きを読む
![【WEBデザイン】原研哉さんを中心に巻き起こった深夜のフォント熱論まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/972906caa4603c2d207aa85d21c3b9fd55448c88/height=288;version=1;width=512/https%3A%2F%2Fs.tgstc.com%2Fogp3%2F8df234a73798f071d5025b435bc81e46-1200x630.jpeg)
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので3つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
CSS3でできることをいち早く知っておきたい。 そんなあなたにおすすめなのが、『Stronger, Better, Faster Design with CSS3』。CSS3を使った、強くて速いデザイン例です。 以下の例が紹介されています。 Inline Form Labels inputのフィールドに透かしテキストを入れる方法。MobileMeで使われていますね。フォーカスした時にopacityで透明度を変化。デモはこちら Fast, Easy Drop-in Modals 綺麗なグラデーションの背景と、ドロップシャドウのついたモーダルダイアログ。美しい。デモはこちら Newspaper Layouts with Columns and Image Masks 新聞紙のような綺麗なカラムレイアウトと、グラデーションによるイメージマスクの例。デモはこちら CSSのコーディングで表現力が増え
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く