1. <!-- HTMLは前述の参照 -->
  1. /* 略 */
  2. /* :::::: responsive :::::: */
  3. .open {
  4. -webkit-transform: translateY(-100%);
  5. transform: translateY(-100%);
  6. }
  7. #navTgl:checked + .open {
  8. -webkit-transform: translateX(250px);
  9. transform: translateX(250px);
  10. }
  11. header nav {
  12. overflow: hidden;
  13. height: 2em;
  14. transition: height .6s, opacity .6s .4s;
  15. }
  16. /* smart phone */
  17. @media screen and (max-width: 480px) {
  18. .open {
  19. -webkit-transform: none;
  20. transform: none;
  21. }
  22. header nav {
  23. height: 0;
  24. opacity: 0;
  25. transition-delay: .4s, 0s;
  26. }
  27. }

Lopan.jp

Sample

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

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

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

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

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

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

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

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

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

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