Web’Notes

CSSで作るdivボックスデザイン

Design Is By: Kasra Kyanzadeh

pタグは文章、tableタグは表と言ったようにタグにはそれぞれ意味があります。しかし、divタグはHTML上意味の無いタグとして扱われます。

そのため、レイアウトやデザインなど装飾に使われます。

今回はそんなdivタグでボックスデザインをいくつか作成したので紹介します。

1. ぼかし線で囲まれたボックス
2. シンプルなボックス
3. 立体感があるボックス
4. グラデーションを付けたボックス
5. 2重線で囲んだボックス
6. 影付きのボックス
7. 内側に線があるボックス
8. 影付きのボックス2
9. 影付きのボックス3
10. 影付きのボックス4

ぼかし線で囲まれたボックス

div.div1
{
	background-color: #fff;
	padding:10px 10px;
	border:1px solid #bbb;
	border-radius: 2px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 0 2px rgba(255, 255, 255, 0.3) inset,
                0 0 10px rgba(0, 0, 0, 0.1) inset,
                0 1px 20px rgba(0, 0, 0, 0.1);
	margin: 10px 0px;
	width: 200px;
	height:100px;
}

シンプルなボックス

div.div2{
     font-family:'Goudy Bookletter 1911',Georgia,serif;
     font-weight: bold;
     font-style:italic;
     border: 1px solid #ddd;
     padding:10px 10px;
     background:rgba(0,0,0,.1);
     border-radius: 3px;
     color:#666;
     margin: 10px 0px;
     width: 200px;
     height:100px;
}

立体感があるボックス

div.div3
{
     color:#fff;
     padding:0;
     text-shadow:0 1px 2px #111111;
     padding: 10px 10px;
     border-radius:3px;
     border:1px solid #222;
     background:#505050;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                 0 0 5px rgba(0, 0, 0, 0.3) inset,
                 0 1px 2px rgba(0, 0, 0, 0.3);
     margin: 10px 0px;
     width: 200px;
     height:100px;
}

グラデーションを付けたボックス

div.div4
{
     background: #505050;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#51a2c1', endColorstr='#74b5cd');
     background: linear-gradient(to bottom, #51a2c1, #74b5cd);
     background: -moz-linear-gradient(top,#51a2c1 0%,#74b5cd);
     background: -webkit-gradient(linear, left top, left bottom, from(#51a2c1), to(#74b5cd));
     border: 1px solid #DDD;
     color:#FFF;
     padding: 10px 10px;
     margin: 10px 0px;
     width: 200px;
     height:100px;
}

2重線で囲んだボックス

div.div5{
     border: 3px double #ddd;
     padding: 10px 10px;
     border-radius: 2px;
     margin: 10px 0px;
     width: 200px;
     height:100px;
}

影付きのボックス

div.div6{
     padding: 10px 10px;
     border-radius:4px;
     border:1px solid #222;
     box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4);
     margin: 10px 0px;
     width: 200px;
     height:100px;
}

内側に線があるボックス

div.div7{
     color: #fff;
     padding: 10px 10px;
     background:rgba(0,0,0,.9);
     border: 1px dotted #eee;
     box-shadow:0px 0px 1px 3px rgba(0, 0, 0, 1);
     margin: 10px 5px;
     width: 200px;
     height:100px;
}

影付きのボックス2

div.div8
{
     position: relative;
     padding: 10px 10px;
     border-radius:1px;
     border:1px solid #666;
     margin: 10px 0px;
     width: 200px;
     height:100px;
     background: #fff;
}
div.div8:before, div.div8:after
{
     z-index: -1;
     position: absolute;
     content: "";
     bottom: 15px;
     width: 30%;
     height:10px;
     box-shadow: 0 15px 10px #444;
}

div.div8:before
{
     left: 5px;
     -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
     -o-transform: rotate(-5deg);
     -ms-transform: rotate(-5deg);
     transform: rotate(-5deg);
}
div.div8:after
{
     right: 5px;
     -webkit-transform: rotate(5deg);
     -moz-transform: rotate(5deg);
     -o-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
     transform: rotate(5deg);
}

影付きのボックス3

div.div9
{
     position: relative;
     padding: 10px 10px;
     border-radius:1px;
     border:1px solid #666;
     margin: 10px 5px;
     width: 200px;
     height:100px;
     background: #fff;
}
div.div9:before, div.div9:after
{
     z-index: -1;
     position: absolute;
     content: "";
     top: 50%;
     width: 98px;
     height:5px;
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
     border-radius:20px;
}

div.div9:before
{
     left: -40px;
     box-shadow: 0px 5px 15px #444;
}
div.div9:after
{
     right: -40px;
     box-shadow: 0px -5px 15px #444;
}

影付きのボックス4

div.div10
{
     position: relative;
     padding: 10px 10px;
     border-radius:1px;
     border:1px solid #666;
     margin: 10px 0px;
     width: 200px;
     height:100px;
     background: #fff;
}

div.div10:before
{
     z-index: -1;
     position: absolute;
     content: "";
     top: 1px;
     left: 1px;
     width: 210px;
     height:118px;
     border-radius:20px;
}

div.div10:before
{
     box-shadow: 5px 2px 10px #444;
}

CSS CSS, Design, デザイン