SQLの窓

2014年01月23日


フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

以下の画像は、『自由の翼フォント』を使って背景を透過にして、CSS で枠線を付加しています。画像はフリーフォントで簡単ロゴ作成(横書きページ)で簡単に作成できます



この画像に CSS を適用して、以下のようにごく自然に影付きグラデーションボタンを調整する事ができます。

<style>
#img1 {
	cursor: pointer;
	background: linear-gradient(to top, #808080, #f7f7f7);
	border: solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
</style>
<img id="img1" src="https://lh3.googleusercontent.com/-MCf4SV3B_EQ/UuDrJMBuhdI/AAAAAAAASOg/5hwM7wY3Tt4/s150/_img.png">
これだけでもいろいろ他にも試したくなりますが、使い勝手を増やすためにここからさらにこれを吹き出しに変更したいと思います。

その為には、さすがに画像だけでは無理なので、画像を DIV で挟んで :after と :before を使用して三角形の吹き出し口を作成します。

DIV をベースとして位置指定する為、DIV には position:relative を指定し、内部では position:absolute を指定して、上からの位置で位置調整をします。

:after 三角形は、画像の上にのって、色をグラデーションの開始色にする事によってつなぎ目を無くしています。
:before 三角形はその後ろに隠れて少し下にずれて枠線を作成しています。
<style>
#box {
	position: relative;
	height: 80px;
}

/* 下向き三角用(手前側) */
#box:after {
	content: '';
	position: absolute;
	/* border の端の特性を生かして三角を作成 */
	border-top: 16px solid #808080;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	top: 29px;	/* 増やして下へ移動 */
	left: 15px;	/* 下向き三角の左からの位置 */
}
/* 下向き三角ボーダー用(後ろ側) */
#box:before {
	content: '';
	position: absolute;
	border-top: 16px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	top: 31px;	/* 増やして下へ移動させて、ボーダーとして使用 */
	left: 15px;	/* :after と一致させる */
}

#img2 {
	margin: 0!important;
	cursor: pointer;
	background: linear-gradient(to top, #808080, #f7f7f7);
	border: solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
</style>
<div id="box">
<img id="img2" src="https://lh3.googleusercontent.com/-MCf4SV3B_EQ/UuDrJMBuhdI/AAAAAAAASOg/5hwM7wY3Tt4/s150/_img.png">
</div>
フリーフォントで簡単ロゴ作成(横書きページ)から、リアルタイムにCSSを調整テストする事が可能です。

三角形の原理は以下のような感じです。





<style type="text/css">
#test1 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px #ff0000;
	border-left:solid 25px #00ffff;
}
#test2 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px #ff0000;
	border-left:solid 25px transparent;
}
#test3 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px transparent;
	border-left:solid 25px transparent;
}
</style>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>



【CSS3の最新記事】
posted by lightbox at 2014-01-23 22:38 | CSS3 | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり