[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

CSSのロゴサンプル集

ロゴサンプル集です。フォントにはGoogle Web Fontsを使用しています。

基本設定 プレート 鈍い光
Labyrinthe Noir Labyrinthe Noir Labyrinthe Noir 
<span class="basefont">Labyrinthe Noir</span>
       
.basefont {
	display: block;
	width: 200px;
	height: 40px;
	padding: 5px;
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	text-align: center;
}
 
+
	color: #FC0;
	border: 5px inset #FC0;
	background-color: #000;
    
+
	color: #FC0;
	border: 5px solid #A80;
	background-color: #000;

	border-radius: 10px;
	text-shadow: 0 0 5px #FC0;
	box-shadow: 0 0 5px #000;
  縁取り 明るい光
  Labyrinthe Noir Labyrinthe Noir
  
+
	color: #000;
	border: 6px double #FC0;
	background-color: #000;

	text-shadow: 0px 1px 0 #FC0, 0px -1px 0 #FC0, 1px 0px 0 #FC0, -1px 0px 0 #FC0;
 
+
	color: #FC0;
	border: 5px solid #FC0;
	background-color: #000;

	border-radius: 10px;
	text-shadow: 0 0 20px #FC0, 0 0 5px #F00, 0 0 20px #FC0;
	box-shadow: 0 0 5px #000;
  光の影 光の反転
  Labyrinthe Noir Labyrinthe Noir
  
+
	color: #000;
	border: 3px dotted #FC0;
	background-color: #000;
	
	text-shadow: 0px 1px 5px #FC0, 0px -1px 5px #FC0, 1px 0px 5px #FC0, -1px 0px 5px #FC0;
 
+
	color: #000;
	border: 5px solid #A80;
	background-color: #A80;
    
	border-radius: 10px;
	text-shadow: 0 0 5px #000;
	box-shadow: inset 0 0 5px #000;
  燃える バックライト
  Labyrinthe Noir Labyrinthe Noir
  
+
	color: #FC0;
	border: 6px ridge #FC0;
	background-color: #000;
    
	text-shadow: 0px -2px 2px #F99, -2px -3px 3px #C00, 2px -3px 3px #C00, 0px -7px 5px #F33;
 
+
	color: #CA0;
	border: 10px solid #000;
	background-color: #000;

	border-radius: 15px;
	text-shadow: -1px -1px 1px #A80;
	box-shadow: inset 1px 1px 20px #660;
  浮き彫り エンボス
  Labyrinthe Noir Labyrinthe Noir
  
+
	color: #DDD;
	border: 6px ridge #BBB;
	background-color: #CCC;
	text-shadow: 2px 2px 1px #999;
	box-shadow: 2px 2px 2px #999;
 
+
	color: #DDD;
	border: 6px solid #BBB;
	background-color: #CCC;
	border-radius: 12px;
	text-shadow: -2px -2px 0 #999;
	box-shadow: inset 2px 2px 0 #999;
  浮き彫り2 エンボス2
  Labyrinthe Noir Labyrinthe Noir
  
+
	color: #DDD;
	border: 6px ridge #BBB;
	background-color: #CCC;
	text-shadow: 0px 2px 1px #999, 0px 3px 2px #666, 0px 4px 2px #222;
	box-shadow: 2px 2px 2px #999;
 
+
	color: #DDD;
	border: 6px solid #BBB;
	background-color: #CCC;
	border-radius: 12px;
	text-shadow: -1px -2px 1px #444, -1px -3px 2px #666, -1px -4px 2px #999;
	box-shadow: inset 2px 2px 0 #999;
  角タイル 丸タイル
  Labyrinthe Noir Labyrinthe Noir
  
+
	height: 115px;
	padding-top: 85px;

	color: #FC0;
	border: 10px double #FC0;
	background-color: #310;

	text-shadow: 0px 1px 0 #000,0px -1px 0 #000,1px 0px 0 #000,-1px 0px 0 #000;
	box-shadow: 2px 2px 2px #999;
 
+
	height: 115px;
	padding-top: 85px;

	color: #FC0;
	border: 10px double #FC0;
	background-color: #310;

	border-radius: 50%;
	text-shadow: 0px 1px 0 #000,0px -1px 0 #000,1px 0px 0 #000,-1px 0px 0 #000;
	box-shadow: 2px 2px 2px #999;
基本設定 テキストオーバー テキストカット
Labyrinthe Noir Labyrinthe Noir Labyrinthe Noir 
<span class="basebox">
<span class="basetext">Labyrinthe Noir</span>
</span>
       
.basebox {       
	display: block;
	width: 200px;
	height: 40px;
	padding: 5px;
}
.basetext {
	font-size: 24px;
	font-family: 'Henny Penny', cursive;
	text-align: center;
}
 
.basebox {
+
	width: 100px;
	height: 100px;
	border: 5px solid #A80;
	margin-left: 40px;
	background-color: #310;
}
.basetext {
+
	position: absolute;
	height:70px;
	padding-top: 30px;
	margin-left: -40px;
	white-space: pre;

	color: #FC0;
}
 
.basebox {
+
	width: 100px;
	height: 100px;
	border: 5px solid #A80;
	margin-left: 40px;
	border-radius: 50%;
	overflow: hidden;
}
.basetext {
+
	margin-left: -40px;
	white-space: pre;

	color: #FC0;
	background-color: #310;
	-ms-transform: translate(0px,30px) rotate(45deg);
	-moz-transform: translate(0px,30px) rotate(45deg);
	-webkit-transform: translate(0px,30px) rotate(45deg);
	transform: translate(0px,30px) rotate(45deg);
}

戻る