以下の画像は、『自由の翼フォント』を使って背景を透過にして、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の最新記事】
- CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する
- CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました
- CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味
- CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説
- 『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する
- Google ストリートビューを表示している class="gm-style"
- linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)
- 現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述
- CSS3 : box-shadow の影分身の解説
- CSS で画像が立ってるような影を付けて、画像の角は丸くしておく
- IE 兼用背景 Fade transition の実装
- CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )
- CSS3 と HTML5 で実装具合の表示テスト
- ブラウザ別の角丸とグラデーションの適用状態の比較画像
- CSS3 の borderRadius で、四角から円へのモーフィング
- CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript
