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(.75);
  13. transform: translateY(50px) translateZ(50px) scale(.75);
  14. }
  15. h2 {
  16. -webkit-transform: translateZ(20px) scale(.9);
  17. transform: translateZ(20px) scale(.9);
  18. }
  19. figure img {
  20. -webkit-transform: translateZ(60px) scale(.7);
  21. transform: translateZ(60px) scale(.7);
  22. }
  23. figure figcaption a {
  24. -webkit-transform: translateZ(40px) scale(.8);
  25. transform: translateZ(40px) scale(.8);
  26. }

Lopan.jp

Sample

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

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

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

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

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

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

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

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

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

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