CSS3でコンテンツをオーバーレイ表示させる方法！CSS実践チュートリアル２

本記事では、CSS3トランジションでコンテンツをオーバーレイ表示させる方法をご紹介します。ページの煩雑さを避けてわかりやすいUXの提供が可能になります。
Download Source Files
View the Demo
まずは、実際の使用場面から始めましょう。あなたの会社が様々な種類のサービスを提供しているとします。このサービスはすべて会社サイトにリストアップされており、それぞれに説明が用意されています。あまりページ上のスペースを取とらないように、あなたはリンクやボタンを作成し、CSS3を使ってオーバーレイで表示することにします。
 
オーバーレイはページの上に重なって出現し、閉じるのも簡単なので、ページをいくつも行ったり来たりする必要がない魅力的なUIです。では、早速見ていきましょう。
 
 
マークアップ
 
マークアップは標準的です。ナビゲーションと、コンテンツを含んだセクションがいくつかあります。ナビゲーションアイテムはそれぞれhrefとidで各セクションにつながっています。
以下マークアップです。
 
CSS
 
まずはじめに、CSS全体にbox-sizing: border-boxを使ってあります。また、以下のCSSはプレフィックスを置いていませんので、必要に応じてプレフィックスを置くようにしてください

リンク元