[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル
モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>Hello I'm zoom in modal window</h3> I'm coming using scale transform, using transform: scale() <br> From <strong>scale(1.2)</strong> to scale(1) with transition property make me looks like <strong>come
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
Prototype.js - JavaScriptでメニュータブ切り替え
body部分、JavaScript、CSSを別々にソースを載せています。JavaScript以外は簡単にいじれると思うのでご自由に変更してご利用ください。 <div id="tabContent"> <ul id="tabIndex"> <li class="tab">タグ１</li> <li class="tab">タグ２</li> <li class="tab">タグ３</li> <li class="tab">タグ４</li> </ul> <div id="tabBoxIndex"> <div class="tabBox">内容１</div> <div class="tabBox">内容２</div> <div class="tabBox">内容３</div> <div class="tabBox">内容４</div> </div> </div> JavaScriptはprototy
PEAR::Pager で Digg っぽいページャを作る
PEAR::Pager で Digg っぽいページャを作る 2007-12-02-1: [PHP] UI Patterns で紹介されているように Digg のページャは見た目にも綺麗だし、わかりやすいと思います。 以下の画像が Digg のページャです。 そこで、PEAR::Pager を使って Digg っぽいページャを作ってみました。 - スクリーンショット - デモページ http://pocari.org/demo/digg-pager/ 完全に一緒というわけではありませんが、これくらいならば結構簡単に作ることができました。 ソースは以下のようになります。 <?php require_once 'Pager/Pager.php'; $params = array( 'mode' => 'sliding', 'perPage'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]コンテンツの見せ方にも工夫が必要、CSS3を使ったかっこいいフィルタリングのチュートリアル