1. <div id="wrapper">
  2. <div class="contents">
  3. <header>
  4. <h1 class="logo">Lopan.jp</h1>
  5. <nav>
  6. <ul>
  7. <li><a href="#article1">LOVE FONT</a></li>
  8. <li><a href="#article2">透明ノイズ</a></li>
  9. <li><a href="#article3">ブラウザチェック</a></li>
  10. <li><a href="#article4">シェイプ</a></li>
  11. <li><a href="#article5">スライドショー</a></li>
  12. </ul>
  13. </nav>
  14. </header>
  15. <article>
  16. <h1>Sample</h1>
  17. <section id="article1">
  18. <h2>なつかしくってあったかい、きりぎりす。</h2>
  19. <figure>
  20. <img src="http://lopan.jp/wp/wp-content/uploads/2014/01/title.png">
  21. <figcaption>フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。<a href="#">この記事を読む</a></figcaption>
  22. </figure>
  23. </section>
  24. <section id="article2">
  25. <h2>透明ノイズと紙テクスチャ。</h2>
  26. <figure>
  27. <img src="http://lopan.jp/wp/wp-content/uploads/2013/09/title.jpg">
  28. <figcaption>ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。<a href="#">この記事を読む</a></figcaption>
  29. </figure>
  30. </section>
  31. <section id="article3">
  32. <h2>Webサイトの作り方のまとめ!ブラウザチェック。</h2>
  33. <figure>
  34. <img src="http://lopan.jp/wp/wp-content/uploads/2013/06/title.jpg">
  35. <figcaption>トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。<a href="#">この記事を読む</a></figcaption>
  36. </figure>
  37. </section>
  38. <section id="article4">
  39. <h2>Photoshopのシェイプでできること。</h2>
  40. <figure>
  41. <img src="http://lopan.jp/wp/wp-content/uploads/2013/03/title.jpg">
  42. <figcaption>拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。<a href="#">この記事を読む</a></figcaption>
  43. </figure>
  44. </section>
  45. <section id="article5">
  46. <h2>CSSだけでスライドショーはつくれるよ。</h2>
  47. <figure>
  48. <img src="http://lopan.jp/wp/wp-content/uploads/2012/12/title.jpg">
  49. <figcaption>CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。<a href="#">この記事を読む</a></figcaption>
  50. </figure>
  51. </section>
  52. </article>
  53. <footer>
  54. <p class="copyright"><small>© Lopan.jp</small></p>
  55. </footer>
  56. </div>
  57. </div>
  1. /* コンテンツ部分は「画面の端からニュッと出るメニュー」の項参照 */
  2. /* :::::: parallax :::::: */
  3. #wrapper {
  4. -webkit-perspective: 200px;
  5. perspective: 200px;
  6. }
  7. nav {
  8. -webkit-transform: translateZ(50px);
  9. transform: translateZ(50px);
  10. }
  11. h2 {
  12. -webkit-transform: translateZ(20px;
  13. transform: translateZ(20px);
  14. }
  15. figure img {
  16. -webkit-transform: translateZ(60px);
  17. transform: translateZ(60px);
  18. }
  19. figure figcaption a {
  20. -webkit-transform: translateZ(40px);
  21. transform: translateZ(40px);
  22. }

Lopan.jp

Sample

なつかしくってあったかい、きりぎりす。

フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。この記事を読む

透明ノイズと紙テクスチャ。

ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。この記事を読む

Webサイトの作り方のまとめ!ブラウザチェック。

トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。この記事を読む

Photoshopのシェイプでできること。

拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。この記事を読む

CSSだけでスライドショーはつくれるよ。

CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。この記事を読む