この前の勉強会でジェイコさんに知ってる?って聞いたら知らないといってたので、意外とみんな知らないのかな?と思いメモしておきます。
テキストを選択したときの色をCSSで自分の好きな色に変えれる事を知ってますか?
僕がお仕事で制作したサイトhttp://juicyeyes.com/サイトのイメージに合わせた色にしました。
テキストを選択してみてください。
Q. そんな事をして何かいいことあるの?
A. 特にありません、多分。クライアントさんにも気づいてもらってない。(笑)!….ただの自己満足に近い。….でもいいじゃないか。
文字を選択してみて↓
柿くえば 鐘がなるなり 法隆寺
古池や蛙飛びこむ水の音
朝顔に つるべとられて もらい水
1 2 3 |
<div id="chocolate">柿くえば 鐘がなるなり 法隆寺</div> <div id="darkblue">古池や蛙飛びこむ水の音</div> <div id="purple">朝顔に つるべとられて もらい水</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> #chocolate,#darkblue,#purple{ font-size:2em; } #chocolate::selection{ background-color:chocolate; /* Safari */ color:#fff; } #chocolate::-moz-selection{ background-color:chocolate; /* Firefox */ color:#fff; } #darkblue::selection{ background-color:darkblue; /* Safari */ color:#fff; } #darkblue::-moz-selection{ background-color:darkblue; /* Firefox */ color:#fff; } #purple::selection{ background-color:purple; /* Safari */ color:#fff; } #purple::-moz-selection{ background-color:purple; /* Firefox */ color:#fff; } </style> |