CSS3ジェネレーターとGoogle Web Fontsを使って日付を入れてみた

どうもこんばんは!

いい加減少しはWebなお話をしようかと思い、本日はCSS3とWeb Fontのお話です。

以前からこのWeb Kid Blogを読んでくれてる方ならわかるかもしれませんが、記事のタイトルの横に日付を入れてみました。

そこで利用した以下のサイトのサービス。

Ultimate CSS Gradient Generator

ultimate_css_gradient_generator

CSS3のグラデーションを視覚的に作成して、ソースを出力してくれるサービス。

CSS3のgradientは設定する項目が多く、結構手間がかかるし、ソース上では実際の表示色とかわからないものだから、こういうサービスは結構便利。以下はこのサイトで出力されたソース。

	background: #6db3f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

Google Web Fonts

google_web_fonts

言わずと知れたGoogleさんが提供しているWeb Fontサービスですね。

かなりの種類のフォントはあるけど、日本語がない(?)のが難点ですね。

他サイトで日本語のWeb Fontサービスもあるけど、有料なところが多いんですよね。。。(モリサワさんとか)

まぁ日本語で表示しない部分だし、使ってみるかー!なノリで導入してみました。

使い方も簡単で、以下のようなHTMLで外部スタイルシートを読み込んで、サイト側のスタイルシートに記述するだけ。

<!-- HTML -->
<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>
/* CSS */
font-family: 'Kavoon', cursive;

というわけで、今更感が漂ってますが、ちょっとした便利なサービスの紹介でした♪