ランク付け(CSS利用) - FAX
ランク付け(CSS利用) 技術 Creating a Star Rater using CSS > Blog > Komodo Media よしみかんさんに、コメント欄にてCSSのみで格付けを実現するリンクを教えて頂いた。 正直に言うと以前に見掛けたことがあったのだが、「CSSだらけで大変なくせに、IEではチカチカしていやぁね」と思い読み飛ばしていた。 しかし改めて見直してみて、詳細に調べると楽しかった。ありがとーございました。 リンク先は複雑でわかりづらく感じた。 まず星が縦に2つ並んだ画像と、5つのAタグを用意する。 そして各々のAタグのhoverイベントで、z-indexと、画像の表示範囲と、幅の3つを変更し、星の表示を行なっている。 細かなテクニックから学ぶ点は多い。 position:relative の要素の中で、position:absolute を使い、範囲内での絶対位置を
定期的に関数を実行する(イエローフェード) - FAX
練習#!shebang.jp:Yellow Fade Techniqueホームページ作成の第一歩【JavaScript タイピングっぽい動く文字】 上記2つのページを拝見した。練習のために自分なりに書いた。定期的に関数を実行する関数を設けた。 イエローフェードのコードは以下。タイピングのサンプルは省略する。 Yellow Fade Technique 追記 (2005/11/16)setIntervalを利用し、関数化せず以下のようにまとめることも可能。 Yellow Fade Technique イエローフェードや定期実行への興味は薄い。クロージャ、各関数の責務の範囲、クラスの必要性、prototype.jsの意義について考えたい。
Collection & Copy - 画像 CSSを使った角丸
画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="box"> <b class="btop"><b></b></b> content here... <b class="bbot"><b></b></b> </div> CSSの定義は以下。 b.btop, b.btop b, b.bbot, b.bbot b{ display: block;height: 10px;font-size: 1px; background-image:url(rc.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
