[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート
JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> More dogs! <span class="box"><img src="ht
CSS3でツールチップの吹き出しを表現する
twitter facebook hatena google pocket ちょっと気が向いたので、CSSでツールチップの吹き出しっぽいあれを表現してみました。 上記のスクリーンショットを見ていただくとわかるかと思いますが、IE8まではいまいちでした。 IE9はどうなんでしょうかね。 参照：Pure css tooltip box with arrow (T,R,B,L) - Some code from cahnory - Forrst sponsors HTML 下記のようなテキストがあるとします。 普通のHTMLです。 <span class="ui-tooltip">tooltip box</span> CSS CSSをがっつり書いていきます。 .ui-tooltip { color:#ffffff; font-size:12px; font-family:arial; paddi
[CSS]IE6でもそれなりに、CSS3で実装するツールチップのチュートリアル
吹き出し風デザインの実装イメージ .tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
