株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > CSSのネタ帳~チョコレート~

CSSのネタ帳~チョコレート~

UPDATE : 2022.02.14

CATEGORY :
Sato
Sato

Sato

ハッピーバレンタイン!


ということで今回のcssのネタ帳は
実際のwebサイトに使いどころがあるかどうかは全く分からない…

cssで“チョコレート”!


Chocolate Chocolate Chocolate
Chocolate Chocolate Chocolate
Chocolate Chocolate Chocolate


料金表などを作る際にお馴染みのtable要素を板チョコ風にしてみました!
非常に読みづらい!!!
けど、可愛いです。

ポイントはborder-collapseプロパティをseparateに(テーブルセルの境界線を分離)
border-spacingプロパティでセル同士の間隔を広げるところです。
パキッと割れそうな感じに仕上がりました。

この記事を書いた人Who wrote this blog

Sato Tomoe

核心をツク鋭い感性を持つ
デザイナー系WEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design