[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
[CSS]非常に少ないコードで実装されたCSS3のアコーディオン型スライダー
JavaScript無しで、HTMLとCSSを使って非常にシンプルな実装をしたアコーディオン型スライダーを紹介します。 Make an Accordian Style Slider in CSS3 アコーディオンはCSS3アニメーションで滑らかに開閉し、スライドの数を減らしても増やしても動作します。 見た目だけではなく、非常に機能的なつくりです。 HTML HTMLはリスト要素を使い、非常にシンプルです。 <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">キャプション</a> </div> <a href="#"><img src="image.jpg"/></a> </li> <li> <div class="image_title"> <a href="#">キャプション</a> </div>
画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」:phpspot開発日誌
RefineSlide 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」。 スライドのアニメーション自体が美しいのもさることながら、個人的に言及したいのはキャプション部分で、次のように、元画像に半透明に重なって実に美しいではありませんか。 もともとそういう画像を作っていたんじゃないの？と一昔前の人なら思ってしまうはずです 右上に出したキャプション。文字の選択もできます。 右下にキャプションを出してみた例。う〜んやっぱりこのデザインはいいですね CSS3を使ってこれだけ出来るっていうのはいいですね。将来的には、画像は必要最小限で、CSS3でエフェクトをかけて主に使うっていう使い方が結構増えてそうです しかもIE7以降サポートです 関連エントリ 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 レ
[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider
JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 Responsive CSS3 Slider Without Javascript [ad#ad-2] デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox フルサポート Chrome, Firefox, Opera, Safari ※各ブラウザの最新版 一部非対応 IE9 ※スライダーの機能は対応しますが、アニメーションに未対応。 デモでは左右のアローと下のボタンで各パネルがアニメーションでスライドします。 ※ウインドウサイズを変更するのが面倒な人用に、上部にサイズ切り替えボタンがあります。 デモ：幅800pxで表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
