タグ

2005年6月18日のブックマーク (2件)

  • Lucky bag::blog: CSS で画像ポップアップ

    JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな

    torum
    torum 2005/06/18
  • nlog(n): アップロードした画像に影をつけるには

    アップロードした画像に影をつけるにはいくつかの方法があるが,それぞれ一長一短がある。一番手間がかからなさそうな CSS を使った方法を導入する。 Movable Type に画像をアップロードすると,自動的にサムネイルが作られる。これはとても便利な機能なのだが,サムネイルは画像を単に縮小しただけなので,単に「画像が貼りついている」というだけで平面的。もしサムネイルに影がつけられれば,立体的になって見栄えが違う。手軽に影がつけられると嬉しい。 以下の方法は,Movable Type でなくてもよく,また,画像はサムネイルでなくてもよい。画像の影はドロップシャドウと呼ばれる。 ざっと調べてみたところ,画像そのものに手を加える方法と,画像には手を加えず CSS で影を後づけする方法の2種類がある。さらに,CSS の方法にも2種類ある。 画像そのものに影をつける方法 アップロードする画像にあらかじ

    nlog(n): アップロードした画像に影をつけるには
    torum
    torum 2005/06/18