[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ

Post on:2011年8月2日

一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。

デモのキャプチャ

CSS3 vs. Photoshop: Rounded Corners and Box Shadows

[ad#ad-2]

下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。

ボックスシャドウ -box-shadow

HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。

デモのキャプチャ

ボックスシャドウのデモページ

HTML

<section class="box dropshadow"></section>

CSS

.dropshadow{
    background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA));
 
    border:2px solid #F2F2F2;
 
    box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
}
デモのキャプチャ

ボックスシャドウのデモページ

HTML

<section class="box innershadow"></section>

CSS

.innershadow{
    background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC));
 
    border:2px solid #FEFEFE;
 
    box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
}
デモのキャプチャ

ボックスシャドウのデモページ

HTML

<section class="box intenseshadow"></section>

CSS

.intenseshadow{
    background-color:#FFF;
    border:1px solid #F00;
 
    box-shadow: 10px 10px 0px #F00;
    -moz-box-shadow: 10px 10px 0px #F00;
    -webkit-box-shadow: 10px 10px 0px #F00;
}
デモのキャプチャ

ボックスシャドウのデモページ

HTML

<section class="box bevel"></section>

CSS

.bevel{
    background-color:#CCC;
 
    box-shadow: 10px 10px 0px #F00;
    -moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60);
    -webkit-box-shadow: 10px 10px 0px #F00;
}

角丸 -border-radius

角丸のスタイルシートは、「,box」など共通で使用するclassも個々に記述しています。

デモのキャプチャ

角丸のデモページ

HTML

<section class="box fourcorners"></section>

CSS

.box{
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.fourcorners{
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	border-radius: 20px;
}
デモのキャプチャ

角丸のデモページ

HTML

<section class="box topleft bottomright"></section>

CSS

.box{
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.topleft{
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	-khtml-border-radius-topleft: 20px;	
	border-top-left-radius: 20px;
}

.bottomleft{
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-khtml-border-radius-bottomleft: 20px;	
	border-bottom-left-radius: 20px;
}
デモのキャプチャ

角丸のデモページ

HTML

<section class="box topright bottomleft"></section>

CSS

.box{
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.topright{
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
	-khtml-border-radius-topright: 20px;	
	border-top-right-radius: 20px;
}

.bottomleft{
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-khtml-border-radius-bottomleft: 20px;	
	border-bottom-left-radius: 20px;
}
デモのキャプチャ

角丸のデモページ

HTML

<section class="box asymmetrical1"></section>

CSS

.box{
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.asymmetrical1{	
	-webkit-border-top-left-radius: 160px;
	-khtml-border-radius-topleft: 160px;	
	-moz-border-radius-topleft: 160px;
	border-top-left-radius: 160px;
	
	-webkit-border-top-right-radius: 20px;
	-khtml-border-radius-topright: 20px;
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;

	-webkit-border-bottom-left-radius: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	
	-webkit-border-bottom-right-radius: 0px;
	-khtml-border-radius-bottomright: 0px;
	-moz-border-radius-bottomright: 0px;
	border-bottom-right-radius: 0px;
}
デモのキャプチャ

角丸のデモページ

HTML

<section class="box asymmetrical2"></section>

CSS

.box{
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.asymmetrical2{
	-webkit-border-top-left-radius: 0px;
	-khtml-border-radius-topleft: 0px;	
	-moz-border-radius-topleft: 0px;
	border-top-left-radius: 0px;
	
	-webkit-border-top-right-radius: 90px;
	-khtml-border-radius-topright: 90px;
	-moz-border-radius-topright: 90px;
	border-top-right-radius: 90px;

	-webkit-border-bottom-left-radius: 0px;
	-khtml-border-radius-bottomleft: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
	
	-webkit-border-bottom-right-radius: 90px;
	-khtml-border-radius-bottomright: 90px;
	-moz-border-radius-bottomright: 90px;
	border-bottom-right-radius: 90px;
}
デモのキャプチャ

角丸のデモページ

HTML

<section class="circle"></section>

CSS

.circle{
	width:170px;
	height:170px;
	
	padding:15px; 
	font-family:Arial, Helvetica, sans-serif; 
	color:#FFF; 
	font-size:12px; 
	font-weight:bold;
	float:left;
	
	background-image:-moz-linear-gradient(top, #FAD502, #E89502);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
	
		
	-webkit-border-top-left-radius: 100px;
	-khtml-border-radius-topleft: 100px;	
	-moz-border-radius-topleft: 100px;
	border-top-left-radius: 100px;
	
	-webkit-border-top-right-radius: 100px;
	-khtml-border-radius-topright: 100px;
	-moz-border-radius-topright: 100px;
	border-top-right-radius: 100px;

	-webkit-border-bottom-left-radius: 100px;
	-khtml-border-radius-bottomleft: 100px;
	-moz-border-radius-bottomleft: 100px;
	border-bottom-left-radius: 100px;
	
	-webkit-border-bottom-right-radius: 100px;
	-khtml-border-radius-bottomright: 100px;
	-moz-border-radius-bottomright: 100px;
	border-bottom-right-radius: 100px;	
}

対応ブラウザ

テスト済みのブラウザは、Firefox, Safari, Chromeとのことです。

[ad#ad-2]

元記事では、これらを組み合わせて実装するナビゲーションのチュートリアルも掲載されています。

デモのキャプチャ

CSS3 vs. Photoshop: Rounded Corners and Box Shadows
デモページ

sponsors

top of page

©2024 coliss