sikaku

１要素のHTMLとCSSだけでチョコレートを作ってみた

バレンタインデーまで残り300日程ですね。そろそろチョコレートの素材が欲しくなるころではないでしょうか。

という雑な理由付けはさておきHTML１要素とCSSのみで表示できるチョコレートを作ってみたのでおいておきます。

source code

基本

demo
text
HTML
  1. <span class="choco">text</span>
CSS
  1. @import url(https://fonts.googleapis.com/css?family=Lobster);
  3. .choco {/* 要素自体の設定 */
  4. box-sizing: border-box;
  5. position: relative;
  6. z-index: 0;
  7. display: inline-flex;
  8. justify-content: center;
  9. align-items: center;
  10. min-width: 100px;
  11. min-height: 56px;
  12. border-radius: 4px;
  13. border: solid 8px;
  14. border-color: #804535 #3c1a11 #2c100a #6a3b2b;
  15. background-color: #6f3c2f;
  16. color: #6a3a2d;
  17. text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(0,0,0,0.4);
  18. box-shadow: -1px 4px 8px rgba(0,0,0,0.3);
  19. font-family: 'Lobster', serif;
  20. font-size: 20px;
  21. line-height: 1;
  22. }
  24. .choco::before ,
  25. .choco::after {/* 擬似要素共通設定 */
  26. content: '';
  27. position: absolute;
  28. top: 0; right: 0; bottom: 0; left: 0;
  29. display: block;
  30. border-style: solid;
  31. pointer-events: none;
  32. }
  34. .choco::before {/* before(擬似要素) */
  35. z-index: 1;
  36. border-width: 6px;
  37. border-color: #291617 #662e1f #99604c #65413b;
  38. color: rgba(0,0,0,0.2);
  39. box-shadow: 4px 4px 4px inset;
  40. }
  42. .choco::after {/* after(擬似要素) */
  43. z-index: 2;
  44. margin: -3px;
  45. border-radius: 4px;
  46. border-width: 5px;
  47. border-color: #985d4d #885041 #885041 #985d4d;
  48. color: rgba(255,255,255,0.3);
  49. box-shadow: -1px -1px 1.4px,-1px -1px 1.4px inset;
  50. }

何をやっているのか

demo

text

before elment after

擬似要素のbefore,afterを使って立体的にしています。

demo内ボタンクリックでそれぞれ分離できるようにしたので個別にどんな表示か確かめたい人はそちらから。

各部品役割
  • elemnt(要素自体)
    :
    • borderで外側法面描画
    • background-colorでベース色描画
    • box-shadowで全体の影描画
    • あと文字の表示領域担当
  • before(擬似要素)
    :
    • borderで内側法面描画
    • box-shadowでくぼみ部分にかかる影を描画
  • after(擬似要素)
    :
    • borderで最上面描画
    • box-shadowでハイライト描画

他諸々。表示ソースの背景色でそれぞれ分けておいたので後は読み取ってください。

チョコレートで法面ってなんだと思いつつも他にどう呼べばいいのかわからない。

編集

いっぱい並べる

<span class="choco">text</span>の記述数だけチョコレートも増えます。好きなだけ並べてください。

ただ、一ヶ所にまとめて並べる場合は下記を採用した方が無駄がなくてよいと思います。

demo
text text text text text text text text text text text text
html
  1. <div class="chocoBOX">
  2. <span>text</span>
  3. <span>text</span>
  4. <span>text</span>
  5. <span>text</span>
  6. <span>text</span>
  7. <span>text</span>
  8. <span>text</span>
  9. <span>text</span>
  10. <span>text</span>
  11. <span>text</span>
  12. <span>text</span>
  13. <span>text</span>
  14. </div>
css
  1. @import url(https://fonts.googleapis.com/css?family=Lobster);
  3. .chocoBOX {/* 大枠 */
  4. display: grid;
  5. grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  6. }
  8. .chocoBOX > * {/* 要素自体の設定 */
  9. box-sizing: border-box;
  10. position: relative;
  11. z-index: 0;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. min-height: 56px;
  16. border-radius: 4px;
  17. border: solid 8px;
  18. border-color: #804535 #3c1a11 #2c100a #6a3b2b;
  19. background-color: #6f3c2f;
  20. color: #6a3a2d;
  21. text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(0,0,0,0.4);
  22. box-shadow: -1px 4px 8px rgba(0,0,0,0.3);
  23. font-family: 'Lobster', serif;
  24. font-size: 20px;
  25. line-height: 1;
  26. }
  28. .chocoBOX > *::before ,
  29. .chocoBOX > *::after {/* 擬似要素共通設定 */
  30. content: '';
  31. position: absolute;
  32. top: 0; right: 0; bottom: 0; left: 0;
  33. display: block;
  34. border-style: solid;
  35. pointer-events: none;
  36. }
  38. .chocoBOX > *::before {/* before(擬似要素) */
  39. z-index: 1;
  40. border-width: 6px;
  41. border-color: #291617 #662e1f #99604c #65413b;
  42. color: rgba(0,0,0,0.2);
  43. box-shadow: 4px 4px 4px inset;
  44. }
  46. .chocoBOX > *::after {/* after(擬似要素) */
  47. z-index: 2;
  48. margin: -3px;
  49. border-radius: 4px;
  50. border-width: 5px;
  51. border-color: #985d4d #885041 #885041 #985d4d;
  52. color: rgba(255,255,255,0.3);
  53. box-shadow: -1px -1px 1.4px,-1px -1px 1.4px inset;
  54. }

その他編集

傾ける
demo
text text text text text text text text

一部傾けると砕いた感を出せるかもしれません。

追加CSS
  1. .crack1 {
  2. z-index:1;
  3. transform: rotate(-12deg);
  4. }
  5. .crack2 {
  6. z-index:1;
  7. transform: rotate(30deg);
  8. }
  • 傾けたいチョコレート一片にcrack1crack2どちらかのクラス付与
    例：<span class="choco crack1">text</span>
リンク化
demo

span要素の代わりにa要素を使用するだけでOKです。

CSSの追加記述をするなら、a要素デフォルト装飾の文字下線の消去をしたり、クリック時動きをつけてみたり色々遊んでください。

おすすめ追加CSS
  1. a.choco {
  2. text-decoration: none;
  3. }
  5. a.choco:active {
  6. top: -2px;
  7. z-index: 2;
  8. transform: rotate(-30deg);
  9. }

味変え

text text text text text text text text

CSSでの単純な描画なので、色を変えればチョコレートの味変えも簡単にできます。

一部のチョコだけ変えるか全部のチョコを変えるかで編集方法が異なるので、お好みの方法を採用してください。

一部のみ変更
  • 後述色変え追加CSSをCSS末尾に追加
  • 色変えしたいチョコレート用の要素にtaste1クラス追加
    例１：<span class="choco taste1">text</span>
    例２：<span class="taste1">text</span>
全部変更
  • 後述色変え追加CSSの、同内容を指すセレクタボックス内のプロパティの値のみ書き換え
上記が良く分からない場合
  • 後述色変え追加CSSの.taste1部分を.choco(いっぱい並べるverだと.chocoBOX > *)に変更後CSS末尾に追加

色変え追加CSS

CSS
  1. .taste1 {/* 要素自体 */
  2. border-color: #f59a92 #e95760 #e1495e #f28986;/* 外側法面( 上右下左 ) */
  3. background-color: #ee7f85;/* ベース背景 */
  4. color: #ea7c80;/* 文字色 */
  5. text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(120,0,0,0.3);/* 文字影( ハイライト 影 ) */
  6. }
  7. .taste1::before {/* before(擬似要素) */
  8. border-color: #dc455a #f28986 #f59a92 #e95760;/* 内側法面( 上右下左 ) */
  9. color: rgba(255,0,0,0.2);/* くぼみ部分にかかる影の色 */
  10. }
  11. .taste1::after {/* after(擬似要素) */
  12. border-color: #f7afa1 #f59a92 #f59a92 #f7afa1;/* 最上面( 上右下左 ) */
  13. color: rgba(255,255,255,0.3);/* ハイライトの色 */
  14. }

配色等簡易変更ツール

demo
text

入力で上記色変え追加CSSが書き換わります。

セレクター
ベース
外側法面
内側法面
最上面
明暗

▽立体

▽文字

色変えサンプルコード

  • default
    text
    CSS
    1. .default {
    2. border-color: #804535 #3c1a11 #2c100a #6a3b2b;
    3. background-color: #6f3c2f;
    4. color: #6a3a2d;
    5. text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(0,0,0,0.4);
    6. }
    7. .default::before {
    8. border-color: #291617 #662e1f #99604c #65413b;
    9. color: rgba(0,0,0,0.2);
    10. }
    11. .default::after {
    12. border-color: #985d4d #885041 #885041 #985d4d;
    13. color: rgba(255,255,255,0.3);
    14. }
  • bitter
    text
    CSS
    1. .bitter {
    2. border-color: #977770 #431e15 #291811 #5f3d34;
    3. background-color: #5f3831;
    4. color: #5d3730;
    5. text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(0,0,0,0.4);
    6. }
    7. .bitter::before {
    8. border-color: #3f2526 #6a453 #8d665f #5f321c;
    9. color: rgba(0,0,0,0.2);
    10. }
    11. .bitter::after {
    12. border-color: #8d665f;
    13. color: rgba(255,255,255,0.3);
    14. }
  • milk
    text
    CSS
    1. .milk {
    2. border-color: #cc8b60 #834126 #b3674c #b97e54;
    3. background-color: #bc733f;
    4. color: #ba703e;
    5. text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(0,0,0,0.4);
    6. }
    7. .milk::before {
    8. border-color: #b3674c #b97e54 #cc8b60 #834126;
    9. color: rgba(0,0,0,0.2);
    10. }
    11. .milk::after {
    12. border-color: #b97e54;
    13. color: rgba(255,255,255,0.3);
    14. }