要らないものを削った結果、記事が縦に長くなってしまうもんで、ページナビゲーション（前の記事、次の記事リンク）をどうしようかなぁとか思ってた。 ちょうど、シロさん(@___shiro_)がのを見て、なーるほどと思い実装してみた。 こういったレイアウトのアーカイブのナビゲーションで、元のHTMLを一切触らずCSSだけで飛躍的に（？）ユーザビリティを高められるいい例になったかなぁ。どうやろ。その辺は要検証ということで。少なくとも自分で使う分には超使いやすいからこれはこれでオッケーなんですけども。 配置を決める 真ん中にでーんとコンテンツがあるので、横の余った位置に戻るとか進むとかつけます。 構成とかは以下みたいにすればたぶんいけそうという感じで配置してます。 ナビゲーションを50%:50%でprev:nextをposition: fixedで配置しておき、その上にコンテンツをかぶせる。青い部分が
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
Cross-fading disjointed image rollover Cross-fading disjointed image rollover written in semantic, accessible mark-up, with unobtrusive javascript using css-sprites. Mike Foskett - 28th December 2007 Cross-fading disjointed image rollover Last update: 16th October 2008 This advanced technique uses CSS-sprites and JavaScript to change an image which is not directly associated to the link. It uses a
I believe you all know what breadcrumbs are. If I would have to make a simplest, rough definition I could say it is a navigation pattern that shows a path from the home page to the current one. If you are still unsure what breadcrumbs are (or my “definition” is too rough) be sure to read Breadcrumbs pattern explanation on Welie.com In its simplest form it usually looks like this: You are here: Hom
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It's JavaScript Time demo 5 demo 6 CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。 CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。 使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。 CSS Sprite2のベースとなっているのは、下記ページとのことです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
