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