CSS疑似要素 :before, :after で作る見出しデザイン カフェのテント風 もくもく

文字の入っている枠の部分の共通CSS

.box{
	background:#FFBFFF;
	padding:20px;
	font-size:20px;
	line-height:1;
}

 

疑似要素を使って見出しにカフェのテント風の飾りをつける。
(ヘッダーでも使える。)

カフェのテント風 もくもく

30pxの正円の画像(http://www.nanairoweb.com/img/20170815_circle.png)を作って、15pxの高さの疑似要素tent1の背景にして使って、くっつけてる。

.tent1:after {
content : "";
display:block;
height:15px;
background: url(http://www.nanairoweb.com/img/20170815_circle.png) repeat-x center bottom;
}

  
 

使うかわからないけど、飾りを上につけることもできる。

カフェのテント風 もくもく
.tent2:before {
content : "";
display:block;
height:15px;
background: url(http://www.nanairoweb.com/img/20170815_circle.png) repeat-x center top;
}

 
 

上下ともつけることもできる。

カフェのテント風 もくもく
.tent3:before {
content : "";
display:block;
height:15px;
background: url(http://www.nanairoweb.com/img/20170815_circle.png) repeat-x center top;
}
.tent3:after {
position: relative;	
content : "";
display:block;
height:15px;
background: url(http://www.nanairoweb.com/img/20170815_circle.png) repeat-x center bottom;
}

 
 

バリエーション♪

カフェのテント風 もくもく

  

カフェのテント風 もくもく

 

カフェのテント風 もくもく