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

サイト構築 -CSS Post on:2011年8月2日 sponsors

ロゴやアイコンを素早く形にしよう！ここまで進化したIllustratorの生成AI機能 2024年7月17日水曜日開催 20時から21時

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

CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ●ボックスシャドウ -box-shadow ●角丸 -border-radius ●対応ブラウザ

ボックスシャドウ -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; 
}