2015年05月28日

リボンのような見出しをCSSで表示

スポンサード リンク

border のプロパティを使って三角形を生成し、 :before擬似要素 / :after擬似要素
対象要素内の先頭 / 末尾に、これを追加します。そして
見出し本体の適切な位置に配置して、リボンを表現します。

CSS リボン風見出し サンプル

容量1GB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。
さくらのレンタルサーバ

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リボンのような見出しをCSSで表示</title>
<style>
	/* リボン風見出し 本体 */
.ribbonBox0{
	position: relative;  /* 相対配置(相対位置)*/
	width: 440px;
	line-height: 26px;  /* 行の高さ */
	margin: 50px;
	padding: 10px 0px;
	background: #eb225e;
	font-size: 20px;
	font-weight: bold;
	color: #ffff00;
	text-align: center;
	box-shadow: 0 8px 25px -10px #f562dd;/ * ボックスに影 */
	  }

.ribbonText{   /* テキスト部分 */
	margin: 0 15px;
	padding: 5px;
	border-top: 1px dashed #99ff99;
	border-bottom:1px dashed #99ff99;
	 }
.ribbonText span{
	color:#fff;
        }
.ribbonText span:before{   /* テキスト部分に ★ マーク */
	content: "★";
	position: absolute;
	color:#99ff99;
	font-size: 10px;
	top:-2px;left:10px;
	  }
.ribbonText span:after{  /* CSS疑似要素 :before / :after */
	content: "★";
	position: absolute;
	color:#99ff99;
	font-size: 10px;
	bottom:-2px;right:10px;
	  }

	/* ここから本番 リボン飾り */
	  /* 左右の凹み(逆)三角形 */
.ribbonBox0:before, .ribbonBox0:after{   /* 左右の凹み三角,共用コード */
	content: "";
	position: absolute; /* 絶対配置 */
	z-index: -1;/* 要素の重なり順序 */
	bottom: -20px; /* 下辺からの距離  top,left,bottom,right 親要素からの距離*/
	width: 0; height: 0; 
	 border: 30px solid #ec4477; /* ボーダー: 幅 実線 色 */
	  }
.ribbonBox0:before{   /* 左の凹み三角 */
	left: -40px;  /* 左辺からの距離 */
	border-left-color: transparent; /* 左ボーダーを透明に */
	  }
.ribbonBox0:after{   /* 右の凹み三角 */
	right: -40px; /* 右辺からの距離 */
	border-right-color: transparent;/* 右ボーダーを透明に */
	  }
	/* 左右の折り返し三角 */
.ribbonText:before, .ribbonText:after{   /* 左右の折り返し三角,共用コード */
	content: "";
	position: absolute;/* 絶対配置 */
	width: 0; height: 0;
	bottom: -20px;/* 下辺からの距離 */
	  }
.ribbonText:before{   /* 折り返し三角 左 */
      left: 0;/* 左辺からの位置 */
      border-top: 20px solid #690629;
      border-left: 20px solid transparent;
	  }
.ribbonText:after{   /* 折り返し三角 右 */
      right: 0;/* 右辺からの距離 */
      border-top: 20px solid #690629;
      border-right: 20px solid transparent;
	  }
</style>
</head>
<body>
  <div class="ribbonBox0">
    <p class="ribbonText">キャンペーン期間<span> 2020/07/24 </span>まで</p>
  </div>
</body>
</html>

リボン飾り  左右の凹み(逆)三角形 作成

  幅、高さ、共に’0’のボックスにボーダーを付けます。
四辺のボーダーの幅は’30px’で、色は解りやすくする為に、変えてあります。
そして、左ボーダーを透明にすると、左凹み(逆)三角が、出来上がりです。
   width: 0; height: 0; // ボックスの幅、高さ ;
    border: 30px solid #ec4477; // ボーダー: 幅30px 実線 色 ;
   border-left-color: transparent; // 左ボーダーを透明 ;
右凹み(逆)三角は、右ボーダーを透明にします。
  border-right-color: transparent; // 右ボーダーを透明 ;

リボン飾り  左右の折り返し三角形 作成

  幅、高さ、共に’0’のボックスにボーダーを付けます。
左側の折り返し三角形は、’上、左 ’ ボーダーに幅 ’20px’を設定します。
’下、右 ’ は設定しないので表示されません。// border-style のデフォルト値は noneです。
そして、左ボーダーを透明にします。
  width: 0; height: 0; // 幅、高さ、共に’0’のボックスにボーダーを付けます。
  border-top: 20px solid #690629;// 上ボーダー : 幅20px 実線 色 ;
  border-left: 20px solid transparent;// 左ボーダーを透明 ;
右側の折り返し三角形は、’上、右 ’ ボーダーに ’20px’を設定します。
  border-top: 20px solid #690629;// 上ボーダー : 幅20px 実線 色 ;
  border-right: 20px solid transparent;// 右ボーダーを透明 ;
     三角形を CSS で作る

リボン飾り 配置

  リボン風見出し 本体(親要素)position: relative;
各リボン飾りに position: absolute; を設定しておきます。
これで親要素を基準にして配置する事ができます。
配置位置の指定は top,left,bottom,rightプロパティで行います。

  • 左の逆三角      bottom: -20px; left: -40px;
  • 右の逆三角      bottom: -20px; right: -40px;
  • 左の折り返し三角 bottom: -20px; left: 0;
  • 右の折り返し三角 bottom: -20px; right: 0;

:before擬似要素 :after擬似要素

:before及び:after擬似要素は
対象要素内の先頭 / 末尾にコンテンツを追加します。
CSS疑似要素 :before / :after
posted by javaScript at 20:26 | 大阪 ☁ | 吹き出し、見出し装飾 | このブログの読者になる | 更新情報をチェックする

2009年12月10日

背景画像を使わないで角丸吹き出しポップアップ CSS

スポンサード リンク

角丸吹き出し ポップアップ CSSサンプル

吹き出しを ここにマウスを乗せるとCSSだけで吹き出しを
 実現!!
画像は使っていません。
表示します。

  ボックスの四隅を丸くするプロパティにCSS3のborder-radiusがあります。
border-radiusプロパティに対応しているブラウザは
Safari Google Chrome 「-webkit-border-radius
Firefox 「-moz-border-radius」 で独自実装しています。
残念ながら IEはIE8になってもまだ未対応です。
なので当サンプルを「IE」でご覧の方は吹き出しの四隅は四角いままです。

ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

サンプルソース

<html>
<head>
<title>背景画像を使わないで角丸吹き出しポップアップ</title>
<style type="text/css">
<!--
.pop{ /*吹き出しの親要素*/
position: relative;
}

.fukidasipop { /*吹き出し本体*/
        position: absolute;
        top:30px; left:100px;
        display: none; /*何も表示しない*/
        padding: 5px; /*内側の余白*/
        width: 250px; /*ブロックの幅
        font-weight: bold; /*文字の太さ*/
        text-decoration: none; /*文字飾り*/
        color:#cc0033 ; /*文字色*/
        background-color: #f7ffff; /*背景色*/
        border: 2px solid #66a9ff;
        -webkit-border-radius: 10px;/* Safari、Google Chrome */
        -moz-border-radius: 10px;/* Firefox */
        
     }

a:hover .fukidasipop {
        display: block; /*ブロック要素で表示*/
     }

.wing{ /*吹き出しの突起*/
        border-top: 15px solid  transparent;
        border-left: 15px solid #66a9ff;
        width : 0px;
        height : 0px;
        position: absolute;
        left : 10px;
        top: -15px;
  }

.wingin{ /*吹き出しの突起の入れ子部分*/
        border-top: 13px solid  transparent;
        border-left: 13px solid #f7ffff;
        width : 0px;
        height : 0px;
        position: absolute;
        left : -13px;
        top: -11px;
  }
-->
</style>

</head>
<body>
<p class="pop">吹き出しを
<a href="javascript:void(0);">ここにマウスを乗せると
<span class="fukidasipop">CSSだけで吹き出しを<br>実現
<span class="wing">
<span class="wingin"></span></span></span></a>表示します。
</p>
</body>
</html>
  ボックスの配置方法
position: relative; position: absolute; top : *px; left : *px; リンク文字からの吹き出しの表示する位置を設定します。   a:hover (マウスポインタをリンクの上に合わせたとき)を使って
マウスポインタが乗ったら display: block; (表示する)
去ったら display: none ; (何も表示しない)をおこないます。

 前回のCSSで作る吹き出しボックスでは突起部分は上下左右の端にしか
配置できなかったのですが今回は自由な位置に設置することが可能です。
borderプロパティ 説明 プロパティの値
border-top 上のボーダー ボーダーの幅   // border-widthプロパティ
ボーダーの種類 // border-styleプロパティ
ボーダーの色    // border-colorプロパティ

 上記,三つのプロパティの値を順不同で
まとめて指定することができます。
border-top: 15px solid fuchsia; *solid(実線)
border-right 右のボーダー
border-bottom 下のボーダー
border-left 左のボーダー
まずborderプロパティに太い値を設定したボックスをつくります。
borderプロパティ
.smp1{
 border-top: 15px solid fuchsia;
 border-right: 15px solid #66a9ff;
 border-bottom: 15px solid fuchsia;
 border-left: 15px solid #66a9ff;
 width : 220px;
  }

各borderが斜めになって接していることが分かります。
 border-right、border-bottomを削除するか
値を0にします。border-right: 0; border-bottom: 0;

borderプロパティ
.smp2{
 border-top: 15px solid fuchsia;
 border-left: 15px solid #66a9ff;
 width : 220px;
  }
 border-top を透明にします。
borderプロパティ
.smp3{
 border-top: 15px solid transparent;
 border-left: 15px solid #66a9ff;
 width : 220px;
  }

transparent // 透明ですが幅は確保した状態でが描画されます。
 ボックスの幅、高さを '0' にします。これで完成
.smp4{
 border-top: 15px solid transparent;
 border-left: 15px solid #66a9ff;
 width : 0px;
 height: 0px;
  }
 上記の突起の中に入れる突起(色は本体に合わす)を同じ要領で作り
position: absolute;[絶対的配置]
下のようにボーダーがあるように位置合わせをします。

 
これをまた position: absolute;で任意の場所に吹き出し本体と
位置を合わせれば出来上がりです。
 これが吹き出し本体です。
CSSだけで吹き出しを実現!!
画像は使っていません。

吹き出しを ここにマウスを乗せるとCSSだけで吹き出しを
 実現!!
画像は使っていません。
表示します。

 傾斜を自由に変えることができる三角形の取り出し方
borderプロパティ
 下はそのままで,左右を透明に上ボーダーを '0' に
ボックスの幅,高さを '0' にします。

.smp6{
border-top:0;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom: 15px solid fuchsia;
width : 0px;
height: 0px;
}

 上記のプロパティの値を変えることで上,下,左,右向きの
三角形を作ることができます。
 左の傾斜を少し急 にします。border-left の幅の数値を減らします。
.smp7{
border-top:0;
border-left:8px solid transparent;
border-right:15px solid transparent;
border-bottom: 15px solid fuchsia;
width : 0px;
height: 0px;

border-radiusプロパティ
CSSで作る吹き出しボックス サンプル
display プロパティ
JavaScriptとCSSで指定した要素の表示/非表示
スタイルシート CSS
CSSだけでおこなう、画像の入れ替えとポップアップ
画像にマウスを乗せると説明文を表示します。
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
a:hoverを使ってアンカーのスタイルを CSSだけで変更します
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 17:30 | 大阪 ☁ | 吹き出し、見出し装飾 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。