[CSS]HTMLは汚さずに、ディテールにこだわったリボンをつくるチュートリアル

Post on:2011年8月25日

リボンの実装

HTML

HTMLは非常にシンプルです。
h1要素にclassを付与するだけです。

<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>

Webフォントの設定

フォントも美しく表示されるように、Webフォントを利用します。

<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>

このフォントはGoogle Web Fontの「Montez」を使用します。

CSS

まずは、背景などのスタイルシートです。

html {	
	background: url(black-linen.png); 	/* Black Linen http://subtlepatterns.com */
	}
	
body {
	margin: 0;
	padding: 100px 0 0 0;
	}

次にリボンのベースを作成します。

.ribbon {
    padding: 0 25px;
    height: 80px;
 
    background: #c94700;
    color: #301607;
 
    position: relative;
    float: left;
    clear: left;
 
    font-family: 'Montez', cursive;
    font-size: 32px;
    line-height: 80px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    }

下記のように表示されます。

リボンに折り目を加えます。
折り返す箇所を「:after」で作成します。

.ribbon:after {
    content: "";
    display: block;
    width: 40px;
    height: 0px;
 
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 20;
 
    border-bottom: 80px solid #de6625;
    border-right: 80px solid transparent;
    }

作成した台形は下記のように回転して使用します。

右下のポイントを中心に90度回転させます。

highlight="41-50"
.ribbon:after {
    content: "";
    display: block;
    width: 40px;
    height: 0px;
 
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 20;
 
    border-bottom: 80px solid #de6625;
    border-right: 80px solid transparent;
 
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
    }

回転すると、下記のようになります。

このままでは平面的なので、次元を与えるために:beforeを使ってシャドウをいれます。

.ribbon:before {
    content: "";
    display: block;
    width: 40px;
    height: 0px;
 
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 10;
 
    border-bottom: 80px solid #000000;
    border-right: 80px solid transparent;
 
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(80deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(80deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(80deg);
    -ms-transform-origin: right bottom;
    transform: rotate(80deg);
    transform-origin: right bottom;
    }

シャドウがこのままだと濃いため、不透明度を調整します。

.ribbon:before {
    content: "";
    display: block;
    width: 20px;
    height: 0px;
 
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 10;
 
    border-bottom: 80px solid rgba(0, 0, 0, 0.3);
    border-right: 80px solid transparent;

同様に、.ribbonにもシャドウを加えます。

.ribbon {
    -moz-box-shadow:        -7px 7px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:     -7px 7px 0px rgba(0, 0, 0, 0.3);
    box-shadow:             -7px 7px 0px rgba(0, 0, 0, 0.3);
    }

シャドウをソフトにしました。

ディテールをよりアップするためにハイライトを加えます。
まずは、.ribbonに。

.ribbon {
    background-color: #c94700;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
    background-image: -webkit-linear-gradient(top, #c94700, #b84100);
    background-image:    -moz-linear-gradient(top, #c94700, #b84100);
    background-image:     -ms-linear-gradient(top, #c94700, #b84100);
    background-image:      -o-linear-gradient(top, #c94700, #b84100);
    background-image:         linear-gradient(top, #c94700, #b84100);
    }

:afterにも加えます。

.ribbon:after {
    bottom: -1px;
    }

ハイライトを加えると、下記のようになります。

最後の仕上げに、折り返した箇所が鋭角なので滑らかにします。

border-bottom-right-radius: 20px 5px;

[ad#ad-2]

最終的なスタイルシートは下記のようになります。

.ribbon {
	padding: 0 25px;
	height: 80px;
	
	color: #301607;
	
	background-color: #c94700;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100)); 
    background-image: -webkit-linear-gradient(top, #c94700, #b84100); 
    background-image:    -moz-linear-gradient(top, #c94700, #b84100); 
    background-image:     -ms-linear-gradient(top, #c94700, #b84100); 
    background-image:      -o-linear-gradient(top, #c94700, #b84100); 
    background-image:         linear-gradient(top, #c94700, #b84100);
	
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        
	position: relative;
	float: left;
	clear: left;
	
	font-family: 'Montez', cursive;
	font-size: 32px;			
	line-height: 80px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
	
	-moz-box-shadow:        -7px 7px 0px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow:    	-7px 7px 0px rgba(0, 0, 0, 0.3); 
    box-shadow:             -7px 7px 0px rgba(0, 0, 0, 0.3);
    
    border-bottom-right-radius: 20px 5px;
	}
	
.ribbon:after {
	content: "";	
	display: block;
	width: 40px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 20;
	
	border-bottom: 80px solid #de6625;
	border-right: 80px solid transparent;
	
	-webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
	}	
	
.ribbon:before {
	content: "";	
	display: block;
	width: 20px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 10;
	
    border-bottom: 80px solid rgba(0, 0, 0, 0.3);
	border-right: 80px solid transparent;
	
	-webkit-transform: rotate(80deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(80deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(80deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(80deg);
    -ms-transform-origin: right bottom;
    transform: rotate(80deg);
    transform-origin: right bottom;
	}

デモページ