日本の伝統色、とCSS。
こんばんは、さじです。
印刷関連で和のパターンを作る時は
文様を意識した色遣いをしますが
印刷する紙によって印象がぐっと変わります。
和紙はオフセット印刷に向いてないので
それっぽいものを選びたいところですが。。
たいてい、マットコートに落ち着きます。安いですからね。
歌舞伎のような原色、または水墨画のようなグレートーン、
そして、藍色や若草色など日本古来の色なども
見ているだけでも楽しい色の世界です。
自分の中では、デザインだけでなく色の使い方も
デザイナーの仕事と思ってますので
近年の企業ブランディングは正直振り幅が狭く
悲しいものです。
予備色をたくさん使えるところもありますが
ほとんどは基調色が決まったガイドラインで
企業イメージを壊さないように作らなければいけません。
おっと、愚痴になります（笑）。
外国人も含め、日本文化をこよなく愛する人に
色を紹介するサイトがあります。
webカラーも拾えます。
印刷関係者にはとても便利ですね。
これを使って、CSSで遊びます。
ついこの前書いた自力で出来なかったCSSを
LSSさん(id:little_strange)が
物凄いスピードで再現してくれました。↓注：CSSです
小田原城の寄木細工
コードをまた考えてくださいましたので
伝統色の紹介がてら練習してみました。
色の名前、いくつ知ってます？
aiiro × kamenozoki
藍色×甕覗
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#105779 50%,#C5E4Ed 50%) , linear-gradient(90deg,#C5E4Ed 50%,#105779 50%); background-size: 80px 20px , 80px 20px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">藍色×甕覗</div>
tanpopoiro × kokeiro
蒲公英色×苔色
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#FFE200 50%,#78882d 50%) , linear-gradient(90deg,#78882d 50%,#FFE200 50%); background-size: 80px 20px , 80px 20px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">蒲公英色×苔色</div>
geppaku × komachinezu
月白×小町鼠
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#F6F7F8 50%,#E5E2E4 50%) , linear-gradient(90deg,#E5E2E4 50%,#F6F7F8 50%); background-size: 80px 20px , 80px 20px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">月白×小町鼠</div>
柄を細かくしてみますね。
asagiiro × shiraai
浅葱色×白藍
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#00A5BF 50%,#D4ECEE 50%) , linear-gradient(90deg,#D4ECEE 50%,#00A5BF 50%); background-size: 20px 10px , 20px 10px; background-position: 0% 25px , 0% 45px; background-repeat: repeat-x;">浅葱色×白藍</div>
あれっ。なんか離れました！
これはこれで可愛いですね。まいっか。
（原因がわかったら追記しておきます。）
6/10追記:background-positionが間違っていたようです。差をsize指定した10にする必要があるのですね！LSSさんありがとうございます！くっくけたコードは以下です。
<div style="width: 320px; height: 65px; font-size: 29px; color: white; text-align: center; text-shadow: 1px 1px 7px black; font-weight: bold; background-image: linear-gradient(90deg,#00A5BF 50%,#D4ECEE 50%) , linear-gradient(90deg,#D4ECEE 50%,#00A5BF 50%); background-size: 20px 10px , 20px 10px; background-position: 0% 35px , 0% 45px; background-repeat: repeat-x;">浅葱色×白藍</div>
浅葱色×白藍
おう。遊んでいるうちに9時を過ぎてしまいました。
今日はここまでにします。
コードの詳しい説明はLSSさんちです↓
アレンジしやすく書いてくれてます。お世話になります！
ということで（？）さらなるアレンジは後日に。
伝統色をネタにしたCSSのトライ記事でした。
さじ
