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

Design Is By: Kasra Kyanzadeh
pタグは文章、tableタグは表と言ったようにタグにはそれぞれ意味があります。しかし、divタグはHTML上意味の無いタグとして扱われます。
そのため、レイアウトやデザインなど装飾に使われます。
今回はそんなdivタグでボックスデザインをいくつか作成したので紹介します。
divボックスデザイン
- ぼかし線で囲まれたボックス
- シンプルなボックス
- 立体感があるボックス
- グラデーションを付けたボックス
- 2重線で囲んだボックス
- 影付きのボックス
- 内側に線があるボックス
- 影付きのボックス2
- 影付きのボックス3
- 影付きのボックス4
ぼかし線で囲まれたボックス
divボックス1
CSS
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ボックス2
CSS
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ボックス3
CSS
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ボックス4
CSS
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ボックス5
CSS
div.div5{ border: 3px double #ddd; padding: 10px 10px; border-radius: 2px; margin: 10px 0px; width: 200px; height:100px; }
影付きのボックス
divボックス6
CSS
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ボックス7
CSS
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ボックス8
CSS
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ボックス9
CSS
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ボックス10
CSS
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; }
Related Posts

« アップロード済みの画像ファイルを圧縮するプラグイン「EWWW Image Optimizer」 センスの良い配色のWebサイトを作る方法 »
Trackback URL
http://webnonotes.com/css/div/trackback/No Comments Yet