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

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

デモのキャプチャ

CSS3 vs. Photoshop: Rounded Corners and Box Shadows

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

ボックスシャドウ -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とのことです。

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

デモのキャプチャ

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

top of page

Trackback

Comments

もう一度復習したい初めてのスマートフォンサイト制作の前に押さえておく13のポイント | シンクブログ

on 2011年11月4日

[…] グラデーションなど、ページの容量を少なくしながら、表現力や分かりやすいリンクボタンなどを作ることができるため、必ず理解しておきたい部分です。 CSS3での角丸とグラデーション […]

もう一度おさらいする、初めてのスマートフォンサイト制作の前に押さえておきたい12のポイント | シンクブログ

on 2011年11月4日

[…] グラデーションなど、ページの容量を少なくしながら、表現力や分かりやすいリンクボタンなどを作ることができるため、必ず理解しておきたい部分です。 CSS3での角丸とグラデーション […]

もう一度おさらいする、初めてのスマートフォンサイト制作の前に押さえておきたい12のポイント | シンクブログ-集客・売上UPのWebマーケティング情報を

on 2012年2月12日

[…] グラデーションなど、ページの容量を少なくしながら、表現力や分かりやすいリンクボタンなどを作ることができるため、必ず理解しておきたい部分です。 CSS3での角丸とグラデーション […]

Sota Yamashita

on 2012年2月18日

-moz と-webkitはどう違うのですか?

よろしくお願いします

コリス

on 2012年2月18日

> Sota さん
-mozはFirefox用、-webkitはWebkit系ブラウザ(Chrome, Safari)用のプレフィックスになります。
現在流通しているブラウザではこれらのプレフィックスが必要になりますが、将来的には必要無く動作する予定になっています。

top of page

©2014 coliss