1. <!-- HTMLは前述と同じ -->
  1. /* コンテンツ部分は「画面の端からニュッと出るメニュー」の項参照 */
  2. /* :::::: parallax :::::: */
  3. html, body, #wrapper {
  4. height: 100%;
  5. }
  6. #wrapper {
  7. overflow: auto;
  8. -webkit-perspective: 200px;
  9. perspective: 200px;
  10. }
  11. nav {
  12. -webkit-transform: translateY(-50px) translateZ(-50px) scale(1.25);
  13. transform: translateY(-50px) translateZ(-50px) scale(1.25);
  14. }
  15. h2 {
  16. -webkit-transform: translateZ(-20px) scale(1.1);
  17. transform: translateZ(-20px) scale(1.1);
  18. }
  19. figure img {
  20. position: relative;
  21. z-index: -1;
  22. -webkit-transform: translateZ(-60px) scale(1.3);
  23. transform: translateZ(-60px) scale(1.3);
  24. }
  25. figure figcaption a {
  26. z-index: -1;
  27. -webkit-transform: translateZ(-40px) scale(1.2);
  28. transform: translateZ(-40px) scale(1.2);
  29. }

Lopan.jp

Sample

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

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

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

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

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

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

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

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

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

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