配色メモ

20-11-26 20-11-26

#f4ead5/#98607c/#e94e77/#c6e5d9/#ebdac8
#e0e0c0/#000000/#c0e000/#e08040/#cccccc
#eae5da/#3f3541/#ea9575/#add5c0/#ac887b
#cfd2c1/#8c9974/#a0cebd/#95b6aa/#ffffff
#f0f0f0/#838986/#ccccf2/#a2b5dd/#ffffff
#ffeec0/#cccccc/#c0ffee/#ffc0ee/#ffffff
#4080a0/#f0f0c0/#ffffff/#00d8fc/#cccccc
#00c5ff/#000000/#f2270d/#ffffff/#ffff79
#fcb21b/#cae3d7/#fefcfe/#ff510c/#fcef3d
#35caca/#fefef9/#ffb010/#e34700/#35faff
#ff8d87/#ffffff/#eade00/#00daea/#ffcabc
#58bb2b/#dffb0b/#ffffff/#ffef00/#426325

ボックスデザインのソースコード調整
おまけのボックスデザイン追記
記事再掲
記事投稿

以前junkページに置いていたものの再掲。

クリックでカラーコード表示。

カラーコードクリックでコピーできるようにしているのですが、カラーピッカー開けるようにした方が便利だったりするんでしょうか。　ダブルクリックやら長押しやらで判定変えるべきか……🤔

おまけ

ボックスデザイン

HTML


        
	<div class="box">
	
	  <div class="header">header</div>
	
	  <p>
	    <a href="">menu</a>
	    <a href="">menu</a>
	    <a href="">menu</a>
	  </p>
	
	  <p>text text text</p>
	
	  <div class="footer">footer</div>
	
	</div>

CSS


        
	@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
	
	.box {
		--bg: #eae5da;/* 背景 */
		--fc: #3f3541;/* 文字 */
		--lc: #add5c0;/* リンク */
		--hc: #ea9575;/* 見出し */
		--sc: #ac887b;/* サブ */
		position: relative;
		border-radius: 12px;
		padding: 48px 0 36px;
		font-family: 'Fredoka One', cursive;
		font-size: 14px;
		line-height: 1.8em;
		text-align: center;
		background-image: radial-gradient(circle at center 24px, transparent 8px, var(--bg) 8px);
		color: var(--fc);
		filter: drop-shadow( 0 3px 3px rgba(0,0,0,0.1) );
	}
	
	.box a {
		text-decoration: none;
		color: var(--lc);
	}
	
	.box p {
		margin: 0;
	}
	
	.box .header {
		margin: 0 0 0.7em;
		font-size: 1.6em;
		font-weight: bold;
		line-height: 1em;
		color: var(--hc);
	}
	
	.box .footer {
		margin-top: 0.5em;
		color: var(--sc);
	}

demo

menu menu menu

text text text

カスタムプロパティは色違いを多数並べるときにでも活用してください。このページの配色例を並べたものは配色メモが楽になるやつを利用していますが、カスタムプロパティでにて<div class="box" style="--bg:#000;--fc:#fff" >的に要素に直書きしてもいいと思います。