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