Downloaded 23 times
CSS3 Design Recipe
- 1. 現場で使える！ CSS3デザインレシピ Frontrend in Sapporo7/12/2013 株式会社 サイバーエージェント 原 一成
- 2. イントロ 原 一成 Hara Kazunari WebDeveloper CyberAgent, Inc.
- 3. イントロ 原 一成 Hara Kazunari WebDeveloper CyberAgent, Inc.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. 「一貫性」コメント・改行・インデント コメント 改行・インデント /* left menu */ #menu {} #main { __background: #f8f8f8; ↵ __width: 90%; } /* right contents */ #contents {} /* button module */ .button {} .quote::before,↵ .quote::after { __content: “”; }
- 15. 「一貫性」プロパティ順 アルファベット順 animation -‐webkit-‐appearance プリフィックスは無視 appearance background border color display float … Google HTML/CSS StyleGuide http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
- 16.
- 17. 「適切な分離」プロパティは最小限で /* button common */ .button { appearance: none; background: #34b5d3; border: solid 1px #999; border-‐radius: 2px; color: #fff; cursor: pointer; padding: 8px 16px; } /* primary button */ .button-‐primary { background: #34b5d3; border: solid 1px #178ca8; color: #eee; } /* warning button */ .button-‐warning { background: #ff5d3c; border: solid 1px #cf3c20; color: #ccc; }
- 18. 「適切な分離」プロパティは最小限で /* button common */ .button { appearance: none; background: #34b5d3; border: solid 1px #999; border-‐radius: 2px; color: #fff; cursor: pointer; padding: 8px 16px; } /* primary button */ .button-‐primary { background: #34b5d3; border: solid 1px #178ca8; color: #eee; } /* warning button */ .button-‐warning { background: #ff5d3c; border: solid 1px #cf3c20; color: #ccc; }
- 19. 「適切な分離」プロパティは最小限で /* button common */ .button { appearance: none; border-‐radius: 2px; cursor: pointer; padding: 8px 16px; } /* normal button */ .button-‐normal { background: #34b5d3; border: solid 1px #999; color: #fff; } /* primary button */ .button-‐primary { background: #34b5d3; border: solid 1px #178ca8; color: #eee; }
- 20. 「適切な分離」セレクタは短く <ul class=”list”> <li class=”item”> <p class=”title”></p> <img class=”thumb”> </li> </ul> .list .item .thumb {} /* 深い */ .thumb {} /* スコープ広い */
- 21. 「適切な分離」セレクタは短く <ul class=”list”> <li class=”item”> <p class=”title”></p> <img class=”thumb”> </li> </ul> .list .item .thumb {} /* 深い */ .thumb {} /* スコープ広い */ <ul class=”list”> <li class=”list-‐item”> <p class=”list-‐title”></p> <img class=”list-‐thumb”> </li> </ul> .list-‐thumb {}
- 22.
- 23.
- 24.
- 25. よく使うプロパティ「border-radius」 80 50 40 50 25 50 50 20 border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px;
- 26. よく使うプロパティ「border-radius」 border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px; border-‐radius: 4px; border-‐radius: 50%; border-‐radius: 50px 50px 0 0; border-‐radius: 100% 0 0 0;
- 27. よく使うプロパティ「border-radius」 border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px; border-‐radius: 4px; border-‐radius: 50%; border-‐radius: 50px 50px 0 0; border-‐radius: 100% 0 0 0;
- 28. よく使うプロパティ「border-radius」 border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px; border-‐radius: 4px; border-‐radius: 50%; border-‐radius: 50px 50px 0 0; border-‐radius: 100% 0 0 0;
- 29. よく使うプロパティ「border-radius」 border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px; border-‐radius: 4px; border-‐radius: 50%; border-‐radius: 50px 50px 0 0; border-‐radius: 100% 0 0 0;
- 30. よく使うプロパティ「border-radius」 border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px; border-‐radius: 4px; border-‐radius: 50%; border-‐radius: 50px 50px 0 0; border-‐radius: 100% 0 0 0;
- 31. よく使うプロパティ「shadow」 box-‐shadow: 0 1px 10px rgba(0,0,0,0.2); x y blur color: #f3c; text-‐shadow: 3px 3px 0 #ff3, 6px 6px 0 #3f3, 9px 9px 0 #39f;
- 32. よく使うプロパティ「shadow」 box-‐shadow: 0 1px 10px rgba(0,0,0,0.2); x y blur color: #f3c; text-‐shadow: 3px 3px 0 #ff3, 6px 6px 0 #3f3, 9px 9px 0 #39f;
- 33. よく使うプロパティ「gradient」 background-‐image: linear-‐gradient( #6cf, rgba(51,102,255,0.8) end ); start background-‐image: -‐webkit-‐radial-‐gradient( rgba(102,204,255,.6), rgba(51,102,255,0.8) );
- 34. よく使うプロパティ「gradient」 Repeat 1em background-‐color: #6cf; background-‐image: linear-‐gradient( to right, #ff9 50%, transparent 50% ); background-‐size: 1em;
- 35. よく使うプロパティ「gradient」 background-‐color: #6cf; background-‐image: linear-‐gradient( rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4) ), linear-‐gradient(to left, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4) ), linear-‐gradient(to right, rgba(255,255,51,0.4), rgba(255,51,204,0.4), rgba(255,153,255,0.4), rgba(102,204,255,0.4) );
- 36. よく使うプロパティ「opacity」 .photo-‐item { opacity: 0.6; transition: opacity 0.2s; } .photo:hover { opacity: 1; }
- 37. よく使う擬似要素「before/after」 .quote::before, .quote::after { background: #ccc; border-‐radius: 50%; color: #666; position: absolute; … } .quote::before { content: “201C”; left: 0; top: 0; } .quote::after { bottom: 0; content: “201D”; right: 0; }
- 38.
- 39. よく使う値「rgba」 .header::before { border-‐radius: 50%; box-‐shadow: 10px -‐105px 0 rgba(204,0,204,0.2), 30px -‐200px 0 rgba(204,102,204,0.1), -‐30px -‐290px 0 rgba(204,102,204,0.1), 190px -‐250px 0 rgba(204,102,204,0.1), 270px -‐320px 0 rgba(204,0,204,0.2), 450px -‐100px 0 rgba(204,0,204,0.2); content: ‘’; height: 100px; width: 100px; … }
- 40.
- 41.
- 42. ボタンを量産する .button { -‐webkit-‐appearance: none; border-‐radius: 2px; cursor: pointer; padding: 8px 16px; } /* info */ .button-‐info { background-‐image: linear-‐gradient(#34b5d3,#14a2c0); border: solid 1px rgba(51,51,51,0.1); color: #fff; }
- 43. ボタンを量産する /* primary */ .button-‐primary { background-‐image: linear-‐gradient(#55c40d,#4dac26); border: solid 1px rgba(51,51,51,0.1); color: #fff; } /* warning */ .button-‐warning { background-‐image: linear-‐gradient(#ff5d3c,#ff3400); border: solid 1px rgba(51,51,51,0.1); color: #fff; } /* still */ .button-‐still { background-‐image: linear-‐gradient(#fff,#f8f8f8); border: solid 1px rgba(51,51,51,0.1); color: #666; }
- 44. ボタンを量産する /* info */ .button-‐info { background-‐image: linear-‐gradient(#34b5d3,#14a2c0); border: solid 1px rgba(51,51,51,0.1); color: #fff; } .button-‐info:hover { background: #14a2c0; color: rgba(255,255,255,0.7); } .button-‐info:disabled { background: #a2dbe7; color: rgba(255,255,255,0.4); }
- 45. ボタンを量産する /* info */ .button-‐info { background-‐image: linear-‐gradient(#34b5d3,#14a2c0); border: solid 1px rgba(51,51,51,0.1); color: #fff; } .button-‐info:hover { background: #14a2c0; color: rgba(255,255,255,0.7); } .button-‐info:disabled { background: #a2dbe7; color: rgba(255,255,255,0.4); }
- 46.
- 47. 魅力的な背景をつくる .box { background-‐color: #006; backgroun-‐image: -‐webkit-‐radial-‐gradient( 50% 40%, rgba(255,255,255,0.3) 0, rgba(0,0,0,0.5) 100% ); }
- 48. 魅力的な背景をつくる .box { background-‐color: #c90099; backgroun-‐image: -‐webkit-‐radial-‐gradient( 50% 40%, transparent 20%, #c09 100% ), -‐webkit-‐linear-‐gradient( left, #f9f 50%, #fff 50% ); background-‐size: 30px,100%; }
- 49. 魅力的な背景をつくる .box { background-‐color: #c90099; backgroun-‐image: -‐webkit-‐radial-‐gradient( 50% 40%, transparent 20%, #c09 100% ), -‐webkit-‐linear-‐gradient( #f9f 50%, #fff 50% ); background-‐size: 100%,30px; }
- 50. いろんなテイストの文字をつくる .text { color: #242424; font-‐family: "league-‐gothic", sans-‐serif; text-‐shadow: 0 1px 1px #4a4a4a; }
- 51. いろんなテイストの文字をつくる .text { color: #444; font-‐family: maven-‐pro, sans-‐serif; text-‐shadow: 1px 1px 1px rgba(0,0,0,0.6), -‐1px -‐1px 1px rgba(255,255,255,0.4); }
- 52. いろんなテイストの文字をつくる .text { color: #fff; font-‐family: 'Freckle Face', cursive; text-‐shadow: 0 -‐1px 5px #fff, 0 -‐5px 10px #ff0, 0 -‐10px 25px #f80, 0 -‐20px 50px #f00; }
- 53. いろんなテイストの文字をつくる .text { color: #fff; font-‐family: pt-‐sans-‐narrow, sans-‐serif; text-‐shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff3ba1, 0 0 40px #ff3ba1, 0 0 50px #ff3ba1, 0 0 80px #ff3ba1; }
- 54. いろんなテイストの文字をつくる .icon-‐star { -‐webkit-‐background-‐clip: text; background-‐color: #ff0; background-‐image: linear-‐gradient(transparent, rgba(255,255,255,0.2)), linear-‐gradient(transparent 50%, #adff4f 50%); background-‐size: 100%, 0.1em; font-‐family: "FontAwesome"; -‐webkit-‐text-‐fill-‐color: transparent; }
- 55.
- 56. CSSでノートをつくる .note { background-‐color: #ffc; background-‐image: linear-‐gradient( #efefef 1px, transparent 1px ), linear-‐gradient( #ffffe6 0, #ffc 100% ); background-‐position: 0 -‐1px, 0; background-‐size: 2em 2em, 100%; font-‐size: 1em; padding: 0 2em; … }
- 57.
- 58. 文字にマーカーをつけて目立たせる .mark01 { background-‐image: linear-‐gradient( transparent 31%, #ff3 31%, #ff3 61%, transparent 61% ); } .mark02 { border-‐bottom: 2px solid #f90; border-‐top: 2px solid #f90; }
- 59. 文字にマーカーをつけて目立たせる .mark03 { background-‐color: #f9c; position: relative; } .mark03::before { left: -‐0.2em; top: 0; } .mark03::after { bottom: 0; box-‐shadow: -‐2px 0 0 #f9c; } .mark03::before, .mark03::after { background-‐color: #f9c; content: ''; height: 1.1em; position: absolute; -‐webkit-‐transform: skew(10deg); width: 1em; z-‐index: -‐1; }
- 60. 吹き出しをつくる .balloon::after { border-‐left: solid 7px transparent; border-‐right: solid 7px transparent; border-‐top: solid 10px #efefef; bottom: -‐10px; content: ""; height: 0; 10 left: 50%; margin-‐left: -‐7px; 7 position: absolute; width: 0; } 7
- 61. ディスクロージャをつける .list::after { content: ""; border-‐right: 2px solid #ccc; border-‐top: 2px solid #ccc; height: 8px; margin: -‐4px 0 0; position: absolute; right: 10px; top: 50%; -‐webkit-‐transform: rotate(45deg); width: 8px; }
- 62. ランキングの順位をつける body { counter-‐reset: num; } .item { counter-‐increment: num; … } .item::after { background: #fc3; content: counter(num); … }
- 63. ランキングの順位をつける body { counter-‐reset: num; } .item { counter-‐increment: num; … } .item::after { background: #fc3; content: counter(num); … }
- 64. ランキングの順位をつける body { counter-‐reset: num; } .item { counter-‐increment: num; … } .item::after { background: #fc3; content: counter(num); … }
- 65. ランキングの順位をつける body { counter-‐reset: num; } .item { counter-‐increment: num; … } .item::after { background: #fc3; content: counter(num); … }
- 66. ランキングの順位をつける body { counter-‐reset: num; } .item { counter-‐increment: num; … } .item::after { background: #fc3; content: counter(num); … }
- 67. ランキングの順位をつける body { counter-‐reset: num; } .item { counter-‐increment: num; … } .item::after { background: #fc3; content: counter(num); … }
- 68.
- 69. ローディングインジケータをつくる .loading-‐bar::before { -‐webkit-‐animation: width-‐0to100 1s infinite ease-‐out; background-‐color: #6cf; … } @-‐webkit-‐keyframes width-‐0to100 { 0% { width: 0; } 100% { width: 100%; } }
- 70. ローディングインジケータをつくる .loading-‐circle { -‐webkit-‐animation: rotate-‐r 0.9s infinite linear; border: 3px solid #6cf; border-‐radius: 50%; border-‐right-‐color: transparent; border-‐right-‐width: 1px; … } @-‐webkit-‐keyframes rotate-‐r { 0% { -‐webkit-‐transform: rotate(0); } 100% { -‐webkit-‐transform: rotate(360deg); } }
- 71.
- 72. カウントダウンする <li class="count-‐item">1</li> <li class="count-‐item">2</li> <li class="count-‐item">3</li> <li class="count-‐item">4</li> <li class="count-‐item">5</li> <li class="count-‐item">6</li> <li class="count-‐item">7</li> <li class="count-‐item">8</li> <li class="count-‐item">9</li> <li class="count-‐item">10</li> .count-‐item { opacity: 0; }
- 73. カウントダウンする /* set animation */ .count-‐item { -‐webkit-‐animation-‐duration: 1s; -‐webkit-‐animation-‐name: disappear; -‐webkit-‐animation-‐timing-‐function: linear; } .count-‐item:nth-‐child(9) { -‐webkit-‐animation-‐delay: 1s; } .count-‐item:nth-‐child(8) { -‐webkit-‐animation-‐delay: 2s; } /* key frames */ @-‐webkit-‐keyframes disappear { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
- 74. CSS3 逆引きデザインレシピ 好評発売中！ セレクタ flexbox リスト タグ・パンくず 図形 フォーム・表・グラフ 設計 パフォーマンス プリプロセッサ スタイルガイド など 全81項目のサンプル集