css3とWEBデザインに関するkofvictoryのブックマーク (2)

  • [JS]パネルが次々にスライドして重なるエフェクトを実装するチュートリアル

    パネルをクリックすると、次々にパネルがスライドして重なり順が変わるエフェクトを実装するjQueryのチュートリアルを紹介します。 Opera mobile window chooser, recreated with jQuery デモページ [ad#ad-2] このエフェクトはOpera Mobileの「window chooser」を模したものらしいです(持ってないから分からないです)。 HTMLはリスト要素で実装されており、非常にシンプルです。 HTML 最小限の要素にした例です。 最初に一番上にするパネルに「current」を与えます。 <ul id="container"> <li class="current">最初に表示するパネル</li> <li>パネル2</li> <li>パネル3</li> <li>パネル4</li> </ul> HTML デモでは、パネル内のコンテンツ

    kofvictory
    kofvictory 2010/11/22
    これは使いたい‼
  • 画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

    昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました! 今回作成したのは日人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品! CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対

    画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD
    kofvictory
    kofvictory 2010/10/27
    これはすごい てかおもろっ‼
  • 1