※スマホ対応はしてません。

タグ: デザイン

Twitterのダイアログっぽいやつが素晴らしいので是非真似したら良いと思う。

カテゴリー: Web

何のこっちゃという感じですが、ちょっとサンプル置いておくんで動かしてみてください。

まずはこちら。画像をクリックしてください。

ダイアログを見ようとしてスクロールすると、下の画面までスクロールしてしまいます。地味なストレスが溜まります。

(パターンとしては、ダイアログ自体は画面内に収まっていて、その中のスクロールがあるようなものが多いと思います。)

続いてこちら。ダイアログ表示中は下の画面のスクロールは固定されます。

で、Twitterもそんな感じで、ダイアログを表示している間は下の画面のスクロールが固定されます。

facebookもこんな感じでした。WordPressもそうならないかなあ。

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。

カテゴリー: CSS, Web

元ネタはこちら:

細部にこだわったWebデザインって?

ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。

  • グラデーションを加える
  • 1pxのラインを加える
  • シャドウを加える
  • ノイズを加える
  • レタープレス効果

元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ(ような)事をCSS3でやってみました。

デモ

先に完成品です。WebkitとFirefoxのみ。(IEでは、新しいものでも背景がちゃんと出ません。)

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS

(さらに…)

FAQページで使えそうな、dtクリックでdd展開するスクリプトを書いてみた。

カテゴリー: JavaScript, Web

そういうのが欲しいという人がいたので。

@Stocker_jp @weboxes ありがとうございます。dtクリックでdd展開するアニメーション付きのjQueryのコード欲しいですwFri Aug 05 14:53:54 via YoruFukurou

さっくり書いてみました。

デモ

例によってjsdo.itです。

dtクリックでdd展開するアニメーション付きのjQueryのコード – jsdo.it – share JavaScript, HTML5 and CSS

解説

(さらに…)

CSSだけでMacのDockみたいなのを作ってみた。

カテゴリー: CSS, Web

OS X Lionが登場しましたが、いかがお過ごしでしょうか。僕はまだ入手していませんが、人に見せてもらってちょっと欲しくなりました。

まあそれは置いておいて、MacのDockって便利ですよね。そのDock風のユーザー体験を、JavaScriptなしで作ってみました。

  • Chrome, Safari … 一番綺麗に動きます。
  • Firefox … 鏡面反射がない以外は十分に動きます。
  • Opera … Firefoxと同程度なのですが、素早く動かしたときに何故か描画が崩れるようです。
  • IE … お察しください。

追記 : Firefox対応版を作って下さった方がいます! (20:34)

デモ

jsdo.itをご覧ください:

もっとそれっぽく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

コードと解説

jsdo.itの方をご覧ください。

装飾的な部分を除いた、動き自体はこちらのサンプルをどうぞ:

要点をまとめると、

  • マウスを乗せたら大きくする
  • 大きくするときはアニメーションする

これだけです。

ただし文字サイズが変わるとベースラインが変化してしまい、ガタガタしてしまうので、各項目はdisplay:table-cellとして独立させる事にしました。これは項目の内容としてちゃんと画像を用意しておけば防げたかもしれません。

よければ画像を用意して、上記コードをforkしてみてくださいな。

CSSでheight:100%を使う方法について。

カテゴリー: CSS, Web

width:100%はよく使いますが、height:100%はあまり使いませんね。というか使えない場面がほとんどなんですが、じゃあ使うにはどうするか、というお話です。

サンプル

まずは実際に指定してみたものをご覧ください。

(さらに…)