[B! css][navi] yuichiro0526のブックマーク

[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス

画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ実装デモデモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。デモページ：ホバー時実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>

yuichiro0526 2012/01/27

リンク

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップパンくずはリスト要素で実装します。シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

yuichiro0526 2010/11/04

リンク

【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。

こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">

yuichiro0526 2009/09/11

リンク

[JS]滑らかにスライドするナビゲーションを実装するチュートリアル

滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li

yuichiro0526 2009/08/01

リンク

CSSでボタンのロールオーバーをデザインする【1】：CSS 3分コーディング

CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。はじまりはじまり。今回のテーマ：CSSでボタンのロールオーバーをデザインする【1】マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。 :hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。ポイントは、背景画像をずらす！です。このようにします。 <ul> <li

yuichiro0526 2009/07/02

リンク

CSSメニュージェネレーター『My CSS Menu』 – creamu

CSSメニューを手軽に作りたい。そんなときにおすすめなのが、『My CSS Menu』。CSSメニュージェネレーターだ。このサイトでは、↑のようなメニューが生成できる。項目などは編集可能だ。 ↓編集画面。生成すると、javascriptとscriptタグが発行されるので、サイトに埋め込めばOKだ。HTMLとCSSも書いてあるので、独自にカスタマイズすることも可能だろう。 CSSメニュージェネレーター、チェックして一度使ってみていただきたい。 » My CSS Menu クリスマスも終わっちゃいましたねー。今日は最終日だ。がんばろうっと。