EC-CUBEカレンダーcss

クリエイターズレシピ
今回はEC-CUBEのカレンダーのcssサンプルをつくってみました。
フォントや背景色などをいろいろ試すサンプルにどうぞ。
(画像を使っていないのでコピー・ペーストですぐにデザイン変更可能です)

モノクロシンプル

テーブルの基本形?のシンプルデザインです

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    background: #fff;
    border: none;
    width: 150px;
    margin: 0 auto 10px auto;
    font-size: 11px;
	border-collapse:collapse;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #ddd;
}
#calender_area table td {
    padding: 5px;
	border:none;
    text-align:center;
	border:1px solid #ddd;
	text-align:right;
}
#calender_area th {
    padding:2px 5px;
	margin:0;
    background: #f7f7f7;
    border: none;
    text-align: center;
	font-size:11px;
	border:1px solid #ddd;
	font-weight:normal;
}
#calender_area table .month {
    margin:0;
	padding:2px 5px;
	text-align:center;
	background-color:#333;
	color:#FFFFFF;
	font-size:11px;
}
#calender_area .off {
    color: #000;
	background-color:#f7f7f7;
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

スマートシンプル

ビジネスチックなスマートスタイルです。

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    background: #fff;
    border: none;
    margin: 0 auto 10px auto;
    font-size: 11px;
	border-collapse:separate;
	font-family:Arial, Helvetica, sans-serif;
}
#calender_area table td {
    padding: 0;
	width:20px;
	border:none;
    text-align:center;
	line-height:20px;
}
#calender_area th {
	width:20px;
	line-height:20px;
    padding:0;
	margin:0;
    background: #f7f7f7;
    border: none;
    text-align: center;
	font-size:11px;
	border:none;
	font-weight:normal;
}
#calender_area table .month {
    margin:0;
	padding:2px 5px;
	text-align:center;
	color:#1f4a86;
	font-size:12px;
	font-weight:bold;
}
#calender_area .off {
    color: #fff;
	background-color:#1f4a86;
	border:3px solid #122f58;
	width:14px;
	line-height:14px;
	
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

サークルタイプ

オフの表示が●になっている可愛いタイプです。オフの日の背景色を替えるのも面白いですね。
IEでは通常の四角表示です。

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    background: #fff;
    border: none;
    width: 170px;
    margin: 0 auto 10px auto;
	padding:5px 10px 10px 10px;
    font-size: 11px;
	border-collapse:separate;
	border:none;
	border-radius: 10px;		/* CSS3草案 */

}
#calender_area table td {
	line-height:20px;
	width:20px;
	margin:0;
	padding:0;
	border:none;
    text-align:center;
	border:none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#calender_area th {
    padding:0;
	line-height:20px;
	width:20px;
	margin:0;
    border: none;
    text-align: center;
	font-size:12px;
	border:none;
	font-weight:normal;
	color:#eb6100;
}
#calender_area table .month {
    margin:0;
	padding:5px 0;
	line-height:20px;
	text-align:center;
	color:#fff;
	font-size:12px;
	background-color:#a40000;
	background: -moz-linear-gradient(top, #f19149, #eb6100); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#f19149), to(#eb6100));
    -webkit-border-top-left-radius: 10px;  
    -webkit-border-top-right-radius: 10px;  
    -webkit-border-bottom-right-radius: 0px;  
    -webkit-border-bottom-left-radius: 0px;  
    -moz-border-radius-topleft: 10px;  
    -moz-border-radius-topright: 10px;  
    -moz-border-radius-bottomright: 0px;  
    -moz-border-radius-bottomleft: 0px;  
}
#calender_area .off {
    color: #fff;
	background-color:#eb6100;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

クリアタイプ

よく見かけるクリアタイプ?のカレンダーです
IEでは単色背景色になります。

#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    background: #fff;
    border: none;
    width: 170px;
    margin: 0 auto 10px auto;
	padding:5px 10px 10px 10px;
    font-size: 11px;
	border-collapse:separate;
		border-width: 1px;
	border-style: none solid solid solid;
	border-color: #eee;
	background: -moz-linear-gradient(top, #eee, #f7f7f7); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f7f7f7));
	border-radius: 10px;		/* CSS3草案 */
    -webkit-border-top-left-radius: 0px;  
    -webkit-border-top-right-radius: 0px;  
    -webkit-border-bottom-right-radius: 10px;  
    -webkit-border-bottom-left-radius: 10px;  
    -moz-border-radius-topleft: 0px;  
    -moz-border-radius-topright: 0px;  
    -moz-border-radius-bottomright: 10px;  
    -moz-border-radius-bottomleft: 10px;  
		-webkit-box-shadow:inset 0px 0px 5px 5px #f7f7f7; /* Safari, Chrome用 */
	-moz-box-shadow:inset 0px 0px 5px 5px #f7f7f7; /* Firefox用 */
	box-shadow:inset 0px 0px 5px 5px #f7f7f7; /* CSS3 */
}
#calender_area table td {
	line-height:20px;
	width:20px;
	margin:0;
	padding:0;
	border:none;
    text-align:center;
	border:1px solid #ddd;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */  
    background: -moz-linear-gradient(top, #eee,  
            #fff 50%,  
            #eee 51%,   
            #fff); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#eee),  
            color-stop(0.50, #fff),  
            color-stop(0.51, #eee),   
            to(#fff)); /* Safari,Google Chrome用 */ 
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff; /* Safari, Chrome用 */
	-moz-box-shadow:inset 0px 1px 0px 0px #fff; /* Firefox用 */
	box-shadow:inset 0px 1px 0px 0px #fff; /* CSS3 */
	background-color:#eee;
}
#calender_area th {
    padding:0;
	line-height:20px;
	width:20px;
	margin:0;
    border: none;
    text-align: center;
	font-size:12px;
	border:none;
	font-weight:normal;
	border-radius: 4px;		/* CSS3草案 */
	-webkit-border-radius: 4px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 4px;	/* Firefox用 */
	border:1px solid #000;
    background: -moz-linear-gradient(top, #acbabc,  
            #6f7875 50%,  
            #000 51%,   
            #000); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#acbabc),  
            color-stop(0.50, #6f7875),  
            color-stop(0.51, #000),   
            to(#000)); /* Safari,Google Chrome用 */ 
	background-color:#000;
	color:#FFFFFF;
}
#calender_area table .month {
	margin:0;
	padding:5px 0;
	line-height:20px;
	text-align:center;
	font-size:12px;
	border:1px solid #000;
    background: -moz-linear-gradient(top, #acbabc,  
            #6f7875 50%,  
            #000 51%,   
            #000); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#acbabc),  
            color-stop(0.50, #6f7875),  
            color-stop(0.51, #000),   
            to(#000)); /* Safari,Google Chrome用 */ 
	background-color:#000;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	color:#FFFFFF;
}
#calender_area .off {
    color: #fff;
	border-radius: 4px;		/* CSS3草案 */
	-webkit-border-radius: 4px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 4px;	/* Firefox用 */
	border:1px solid #1d93fd;
    background: -moz-linear-gradient(top, #7cc4f7,  
            #33b8ff 50%,  
            #169df9 51%,   
            #1d90fc); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#7cc4f7),  
            color-stop(0.50, #33b8ff),  
            color-stop(0.51, #169df9),   
            to(#1d90fc)); /* Safari,Google Chrome用 */ 
	-webkit-box-shadow:inset 0px 1px 0px 0px #b2dcfa; /* Safari, Chrome用 */
	-moz-box-shadow:inset 0px 1px 0px 0px #b2dcfa; /* Firefox用 */
	box-shadow:inset 0px 1px 0px 0px #b2dcfa; /* CSS3 */
	background-color:#169df9;
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

コメントを残す

Suits Web Layout (.psd ファイル)

suits

ダウンロードはこちら

Jewelry web layout(.psdファイル)

jewelry

jewelry

Japan New Year Web Layout (.psdファイル)

JAPAN

ダウンロードはこちら

Flower web layout (.psdファイル)

flowers

ダウンロードはこちら

SHAMPOO web layout (.psdファイル)

shampoo

ダウンロードはこちら

Architect Web Layout(.psdファイル)

architect

ダウンロードはこちら

Photographer web layout(.psdファイル)

photographer

ダウンロードはこちら

Fashion Web Layout (.psdファイル)

fashion

ダウンロードはこちら

Bedding Shop Web Layout(.psdファイル)

bed

ダウンロードはこちら

BAR website layout (.psdファイル)

bar

ダウンロードはこちら

Headphone Web Layout(.psdファイル)

headphone

ダウンロードはこちら

Pet Service Web Layout (.psdファイル)

petservice

ダウンロードはこちら

Japan web layout(.psdファイル)

japan

ダウンロードはこちら

Toaster Web Layout (.psdファイル)

toaster

ダウンロードはこちら

Wedding Web Layout(.psd ファイル)

wedding

ダウンロードはこちら

Cosmetics Web Layout(.psdファイル)

cosmetics

ダウンロードはこちら 使用素材 psdmockups

Suits Shop Web Layout (.psdファイル)

suitsshop

ダウンロードはこちら

Tea Shop Web Layout(.psdファイル)

teashop

ダウンロードはこちら

fashion magazine web layout

fashionmag

ダウンロードはこちら

Hotel Web Layout ( .psdファイル)

hotel

ダウンロードはこちら

Watch Shop Web Layout (.psdファイル)

watch

ダウンロードはこちら

Fruits Shop web layout(psdファイル)

fruitsshop

ダウンロードはこちら

Design Office Web Layout(.psdファイル)

designoffice

ダウンロードはこちら

Music Web Layout(.psd ファイル)

music

ダウンロードはこちら

Sweet Web Layout (.psdファイル)

sweets

ダウンロードはこちら

Winter Sports Web Layout(.psdファイル)

ski

ダウンロードはこちら

CAR Web Design(.psd ファイル)

car

ダウンロードはこちら

Shoes Web Layout (.psdファイル)

shoes

ダウンロードはこちら

coffee shop web layout(.psd ファイル)

coffee

ダウンロードはこちら

Furniture Shop Web Sample(.psd ファイル)

furniture

ダウンロードはこちら

OUTDOOR web layout (.psd ファイル)

outdoor

ダウンロードはこちら

BICYCLE SHOP web template (.psdファイル)

bicycle

ダウンロードはこちら

web design sketch(webデザインラフスケッチ .psdファイル)

restaurant

ダウンロードはこちら

white Mac Monitor mock up (Macモックアップ)

mac

ダウンロードはこちら

web design layout sample(Webデザインサンプル .psd)

layout

ダウンロードはこちら

Amplifier Isometric ICON(アンプ アイソメ アイコン .aiファイル)

amp

ダウンロードはこちら

Isometric icon “Lamp” (アイソメトリックアイコン ランプ aiファイル)

lamp

ダウンロードはこちら

Isometric Stool (スツール アイソメアイコン .aiファイル)

stool

ダウンロードはこちら

Toaster Isometric Icon(アイソメトリック トースター .ai)

toaster

ダウンロードはこちら

CoffeeMaker Isometric Icon(コーヒーメーカー アイソメアイコン .ai ファイル)

coffeemaker

ダウンロードはこちら

Light Isometric Icon ライトアイソメトリックアイコン(.ai ファイル)

light

ダウンロードはこちら

Chair Isometric Icon 椅子アイソメトリックアイコン(.ai ファイル)

chair

ダウンロードはこちら

Sofa Isometric Icon ソファアイソメトリックアイコン(.ai ファイル)

sofa

ダウンロードはこちら

Microwave Isometric Icon 電子レンジアイソメトリックアイコン(.ai ファイル)

microwave

ダウンロード

Isometric Icon Kitchen01(.ai ファイル)

kitchen

ダウンロード

HOTEL Isometric icon( ホテルアイコン .aiファイル)

hotel

ダウンロードはこちら

bakery shop icon(.ai ファイル)

BAKERYshop

ダウンロードはこちら

Isometric Icon COFFEE SHOP(アイソメトリックアイコン aiファイル)

coffeeshop

a href=”http://recipe.nakweb.com/wp-content/uploads/2017/02/coffeeshop.ai_.zip”>ダウンロードはこちら

Isometric Icon Speaker(アイソメトリックアイコン スピーカー .ai ファイル)

isometric_speaker

ダウンロードはこちら

Isometric Icon House(アイソメトリックアイコン .aiファイル)

isometric_house

ダウンロードはこちら