ちょっと遅いが「明けましておめでとうございます!」を覚えたてのCSSで。

昨年はブラック企業に就職してみたり無職になってみたりと、色々忙しい一年でした。このブログを読んでくださったり、スターをつけてくださった皆さん、ありがとうございます。今年はおもしろい一年にしたいと思います。

 

昨年からHTMLなどを触りだし、ついでにCSSにも手を出しました。小学生のときなどは、文字を立体的に書いたりするのが流行って、自分もはまっておりましたが、CSSもそのノリでやってみます。

 

 

とりあえずLiveweaveを使ってまず、HTMLを記述します。

f:id:and-number-9318-42:20140107170242p:plain

 

そして肝心のCSSですが、こちらのサイトのLetterpressを参考にさせていただきました。ドイツ語ですが、サンプルが載っているので大丈夫でした。

f:id:and-number-9318-42:20140107170903p:plain

 

色は、お正月らしくしたいので、「WEB色見本 原色大辞典 - HTML Color Names」というサイトの和色大辞典から探しました。

配色コーナーから背景と文字色を比較しつつ選びましたが、影らしくみえるような組み合わせを選ぶのに苦労しました。デザインというのは難しいです…。

が、Liveweaveだと横の画面ですぐ結果が見れるので、あれこれ試すのが楽です。

 

そんなこんなで完成したのがこちら!

 

f:id:and-number-9318-42:20140107172424p:plain

 

背景色は、猩猩緋(しょうじょうひ)としました。織田信長豊臣秀吉の陣羽織など、高級品に使われた色だそうです。ウィキペディアでは16進表記は、#ce313d となっていましたが、WEB色見本では、e2041b となっていたので、WEB色見本に従ってみました。

「謹賀新年」の文字は、#e6b422 の金色、キャプチャでは見にくいですが、シャドウの暗い方が、#69821bの苔色、明るい方が、#f5b199の一斤染め(いっこんぞめ)としました。

 

<p>タグの中の文字は、意味も無くこだわって、#eaf4fcの月白という色にしました。普通の白と何が違うのかよく分かりません。

そして色の名前にひっぱられて、ぼーっと発光しているようなエフェクトにしてみました。#f6bfbcの虹色で影をつけて、ぼかしを大きくしています。少し文字をくっきりさせたかったので、#752100の赤銅色で影をつけました。

 

こんな単純なことでも初めてやると楽しいです。なぜ平面に立体を表現するというのはこんなにも人を惹き付けるのでしょうか…小学生じゃあるまいし…と思ったお正月でした。

今年もよろしくお願いします。

 

sponsored link

【その他の記事】