Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
![画像アイコンはもう古い!CSSでスタイル自由自在のアイコンWebフォント](https://cdn-ak-scissors.b.st-hatena.com/image/square/51c6725928b1e730e03462c6e55cc55f45195e63/height=288;version=1;width=512/http%3A%2F%2Fw3q.jp%2Fupload%2F2012%2F6%2F27%2Fl_2012-6-27_83dc315674c17426d1da4e11cf4ccd1a.jpg)
画像を一切使用せず、CSS3や擬似要素を使ったリボン風デザインのナビゲーションを実装するチュートリアルを紹介します。 CSS Ribbon Menu [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーションに対応したブラウザ、Chrome, Safari, Firefoxでご覧ください。 CSS3アニメーション非対応のIE8/9ではアニメーション無し、擬似要素非対応のIE7ではリボン無しになります。 デモページ [ad#ad-2] 実装 HTML HTMLはシンプルで、各アイテムをspan要素で実装し、全体をdiv要素で内包します。 <div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>About</span></a> <a href='#'><span>Services</span></
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く