CSS3でお手軽ロゴもどきサンプルソース(丸編)

社内向けWEBシステムやWEBサービスを作った時、「なんかちょっとログイン画面が寂しいな…」なんて思うことはないでしょうか。
すでにカッコイイロゴ画像がある時はいいのですが、そんなもの存在しない!ということもよくあります。

というわけで、いつでも使えるロゴっぽい物のサンプルコードを作ってみました。
突然ですが新サービスのおしらせです ちびキャラ おまちしてます!

WEBフォントを活用する

フォントがオシャレだと、よりロゴっぽさが増すので、サンプルソースではWEBフォントを使っています。
面倒だったら省略してしまっても問題ありません。

今回はgoogle fontsから、IM Fell DW Picaというフォントを使うことにしました。
他のフォントを使いたい場合は、font-familyを書きかえて下さい。
The quick brown fox jumps over the lazy dog

WEBフォントは、サイトに表示してみてから(ちょっとイメージ違ったかな…)と思ったとしても、ソースを書き換えるだけで修正ができます。
あまり難しく考えずに、とりあえず好きなフォントを選んでみましょう。

イタリック体や装飾的な派手なフォントは、表示位置が思っているのとズレてしまうことがあります。
そんな時はちょっと面倒ですが、margin、paddingでちょこちょこ調整してください。

ロゴもどきサンプルソース

頭文字をワンポイントで

なんかちょこっと目を引くものが欲しいなーという時に。
T
<div class="logo_01">
	<span>T</span>
</div>
.logo_01{
	position:relative;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	background:#53DAE6;
	border:1px solid #53DAE6;
	border-radius: 50%;
	box-shadow: 0 4px 0 -1px #43A1A8, inset 0 4px 0 rgba(255,255,255,0.3);
}
.logo_01 span{
	position:absolute;
	top:50%;
	width:100%;
	margin-top:-24px;
	font-family: 'IM Fell DW Pica', 'serif';
	font-size:60px;
	line-height:1;
	color: #43A1A8;
	text-align:center;
	text-shadow: 0 2px 0 rgba(255,255,255,0.3);
}

モダンな感じで真面目っぽく

ビジネスっぽい感じ。フォントサイズを小さめにするとよりそれらしい感じに見える気がします。
TetraChroma WebSystem
<div class="logo_02">
	<span>TetraChroma WebSystem</span>
</div>
.logo_02{
	position:relative;
	width: 240px;
	height: 240px;
	margin: 0 auto 40px;
	background:#333333;
	border-radius: 50%;
	box-shadow: 0px 20px 0px -8px rgba(0,0,0,0.5) ,0px 40px 0px -16px rgba(0,0,0,0.2) ;
}
.logo_02 span{
	position:absolute;
	top:50%;
	width:100%;
	margin-top:-8px;
	font-family: 'IM Fell DW Pica', 'serif';
	font-size:16px;
	line-height:1;
	color: #FFFFFF;
	text-align:center;
	text-shadow: 0 -2px 0 rgba(0,0,0,1) ;
}

元気さを出して!

ぴょんっと飛び込んできた感じ
Tetra
<div class="logo_03_wrapper">
	<div class="logo_03">
		<span>Tetra</span>
	</div>
</div>
.logo_03_wrapper{
	width:360px;
	margin:0 auto;
}
.logo_03{
	position:relative;
	width: 120px;
	height: 120px;
	margin:0 0 100px 180px;
	background:#FF72AD;
	border-radius: 50%;
	box-shadow: 
	-110px 40px 0px -30px rgba(255,114,173,0.4),
	-170px 80px 0px -40px rgba(255,114,173,0.3),
	-220px 40px 0px -45px rgba(255,114,173,0.2),
	-260px 20px 0px -50px rgba(255,114,173,0.1);
}
.logo_03 span{
	position:absolute;
	top:50%;
	width:100%;
	margin-top:-16px;
	font-family: 'IM Fell DW Pica', 'serif';
	font-size:32px;
	line-height:1;
	color: #FFFFFF;
	text-align:center;
}

なんとなく神秘的

ふわっとした柔らかいイメージです。
Tetra System
<div class="logo_04">
	<span>Tetra System</span>
</div>
.logo_04{
	position:relative;
	width: 240px;
	height: 240px;
	margin: 36px auto;
	background:#FFFFFF;
	border-radius: 50%;
	box-shadow:  0 0 10px 5px rgba(255,255,255,1), 0 0 80px 10px rgba(0, 0, 0, 0.1);
}
.logo_04 span{
	position:absolute;
	top:50%;
	width:100%;
	margin-top:-16px;
	font-family: 'IM Fell DW Pica', 'serif';
	font-size:32px;
	line-height:1;
	color: #EEEEEE;
	text-align:center;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}

カスタマイズでお好みに

border-radius、box-shadow、text-shadowは本当に便利で、いろいろな使い方ができて面白いですね。
transformなどを使うともっともっといろんなことができるのですが、それはまた今度ご紹介したいと思います。
コピペして貼り付けた後、サイトデザインにあうように、色やサイズ、フォントを自由に変えてカスタマイズして使ってみてください!