1. <!-- HTMLは前述のと同じ -->
  1. /* 略 */
  2. /* :::::: slide :::::: */
  3. .tabBtn {
  4. position: relative;
  5. z-index: 1;
  6. }
  7. .tabContents {
  8. -webkit-transition: -webkit-transform 0.6s;
  9. transition: transform 0.6s;
  10. }
  11. .tabContents section {
  12. opacity: 0.1;
  13. transition: opacity 0.3s;
  14. }
  15. /* :::::: mechanism :::::: */
  16. #tab-1:checked ~ .tabBtn li [for="tab-1"],
  17. #tab-2:checked ~ .tabBtn li [for="tab-2"],
  18. #tab-3:checked ~ .tabBtn li [for="tab-3"],
  19. #tab-4:checked ~ .tabBtn li [for="tab-4"],
  20. #tab-5:checked ~ .tabBtn li [for="tab-5"] {
  21. background-color: #cd5c5c;
  22. }
  23. #tab-1:checked ~ .tabContents section:nth-child(1),
  24. #tab-2:checked ~ .tabContents section:nth-child(2),
  25. #tab-3:checked ~ .tabContents section:nth-child(3),
  26. #tab-4:checked ~ .tabContents section:nth-child(4),
  27. #tab-5:checked ~ .tabContents section:nth-child(5) {
  28. opacity: 1;
  29. background-color: #fff;
  30. }
  31. #tab-1:checked ~ .tabContents {
  32. -webkit-transform: translateY(0);
  33. transform: translateY(0);
  34. }
  35. #tab-2:checked ~ .tabContents {
  36. -webkit-transform: translateY(-20%);
  37. transform: translateY(-20%);
  38. }
  39. #tab-3:checked ~ .tabContents {
  40. -webkit-transform: translateY(-40%);
  41. transform: translateY(-40%);
  42. }
  43. #tab-4:checked ~ .tabContents {
  44. -webkit-transform: translateY(-60%);
  45. transform: translateY(-60%);
  46. }
  47. #tab-5:checked ~ .tabContents {
  48. -webkit-transform: translateY(-80%);
  49. transform: translateY(-80%);
  50. }
フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。
トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。
拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。
CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。