
セロテープ風の装飾ボックスの基本形
【横向きのセロテープ】
html
- <div class="tape">セロテープ</div>
css
- .tape{
- width:200px;
- height:40px;
- background-color: rgba(255,255,255,.5);
- border-left: 2px dotted rgba(0,0,0,.1);
- border-right: 2px dotted rgba(0,0,0,.1);
- box-shadow: 0 0 3px rgba(0,0,0,0.3);
- }
解説
background-color: rgba(255,255,255,.5);
背景全体を、半透明の白色で塗りつぶしています。
border-left: 2px dotted rgba(0,0,0,.1); border-right: 2px dotted rgba(0,0,0,.1);
左右に点線を描くことで、セロテープの切断面を表現しています。
box-shadow: 0 0 3px rgba(0,0,0,0.3);
周囲を少しぼかしています。
width:200px; height:40px;
細長い形状を作るために、幅と高さを固定しています。
装飾ボックスとして使用する場合は、高さを指定せずに、次のように幅と余白等を指定します。
width:100%; padding:1em;
色バリエーション
rgbaの3つの値で、指定
rgba(赤,緑,青,透明度)
background-color: rgba(255,0,0,.5);
background-color: rgba(0,255,0,.5);
background-color: rgba(0,0,255,.5);
background-color: rgba(255,100,100,.5);
透明度バリエーション
rgbaの4つ目の値で、透明度を指定。
0.0 .. 透明 ~ 1.0 ..不透明
background-color: rgba(255,0,0,0.1);
background-color: rgba(255,0,0,0.3));
background-color: rgba(255,0,0,0.5));
background-color: rgba(255,0,0,0.7));
background-color: rgba(255,0,0,1));
【縦向きのセロテープ】
html
- <div class="tape-tate">セロテープ</div>
css
- .tape-tate{
- width:40px;
- height:200px;
- background-color: rgba(255,255,255,.5);
- border-top: 2px dotted rgba(0,0,0,.1);
- border-bottom: 2px dotted rgba(0,0,0,.1);
- box-shadow: 0 0 3px rgba(0,0,0,0.3);
- }
解説
border-top: 2px dotted rgba(0,0,0,.1); border-bottom: 2px dotted rgba(0,0,0,.1);
上下を点線にすることで、縦に貼ったセローテープを表現しています。
【斜めのセロテープ】
html
- <div class="tape-naname">セロテープ</div>
css
- .tape-naname{
- width:200px;
- height:40px;
- background-color: rgba(255,255,255,.5);
- border-left: 2px dotted rgba(0,0,0,.1);
- border-right: 2px dotted rgba(0,0,0,.1);
- box-shadow: 0 0 3px rgba(0,0,0,0.3);
- transform:rotate(-45deg);
- }
解説
transform:rotate(-45deg);
transform:rotate()を使用し、要素を回転させています。
装飾ボックスのラベルとして使用する
html
- <div class="box1">
- <div class="tape-title">タイトル</div>
- </div>
css
- .box1{
- border:2px solid #333;
- background-color:#fff;
- width:300px;
- height:100px;
- position:relative;
- }
- .tape-title{
- width:200px;
- height:40px;
- background-color: rgba(10,255,255,.5);
- border-left: 2px dotted rgba(0,0,0,.1);
- border-right: 2px dotted rgba(0,0,0,.1);
- box-shadow: 0 0 3px rgba(0,0,0,0.3);
- transform:rotate(-5deg);
- position:absolute;
- top:-30px;
- right:0;
- }
解説
position:relative;(box1)
基準となるボックスに、position:relative;を指定します(必須)
position:absolute;
セロテープを自由に移動できるようにします。
top:-30px;
box1の上端から、さらに30px上に、セロテープを移動します。
right:0;
box1の右端に、セロテープを移動します。
バリエーション
transform:rotate(5deg); top:-30px; left:0;
transform:rotate(-80deg); bottom:0; left:0; transform-origin:bottom left; /* 回転の中心をセロテープの左下に設定 */
before , after でセロテープを描画
html
- <div class="box2" data-before="before" data-after="after">
- </div>
css
- .box2{
- border:2px solid #333;
- background-color:#fff;
- width:300px;
- height:100px;
- position:relative;
- }
- .box2:before{
- content:attr(data-before);
- background-color: rgba(10,255,255,.5);
- top:40px;
- left:-10px;
- transform:rotate(-45deg);
- transform-origin:bottom left;
- }
- .box2:after{
- content:attr(data-after);
- background-color: rgba(255,10,255,.5);
- top:40px;
- right:-10px;
- transform:rotate(45deg);
- transform-origin:bottom right;
- }
- .box2:before,.box2:after{
- width:100px;
- height:30px;
- border-left: 2px dotted rgba(0,0,0,.1);
- border-right: 2px dotted rgba(0,0,0,.1);
- box-shadow: 0 0 3px rgba(0,0,0,0.3);
- position:absolute;
- }
解説
装飾ボックスのbefore,after要素を、セロテープの形状に加工しています。
基本は、今までのものと同じです。