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%;
}

コメントを残す

Smarthouse (.xd)

smarthouse

DOWNLOAD

Smarthouse ui(.xd)

smartbath

Download

Smarthouse ui (Sound)

sound

DOWNLOAD

Smarthouse ui (light)

Smarthose

DOWNLOAD

Smarthouse ui (Air conditioner)

air

DOWNLOAD

Smartphone App(.xd)

smartphoneapp

DOWNLOAD

smartphoneApp

movieApp

DOWNLOAD

Smartphone App(.xd)

app

DOWNLOAD

Pets app

pet_app

DOWNLOAD

Smartphone UI (.xd)

appli

Download

Smartphone UI

smartphoneUI

DOWNLOAD

Smartphone App (.xd)

app_1

DOWNLOAD

Novelist web(.xd)

novelist

DOWNLOAD

Factory Web (.xd)

Web 1920 – 1

DOWNLOAD

Glass Morphism (.xd)

glassmorphism

Download

Artist (.xd)

artist

DOWNLOAD

Hospital Web Layout(.xd)

hospital

DOWNLOAD

Aquarium web layout (.xd)

AQUALIUM

DOWNLOAD

Creative(.xd)

creative

Download

Furniture Web(.xd)

furniture

Download

Burger Shop Web(.xd)

burger

Download

Studio Web (.xd)

studio

DOWNLOAD

Japan Sports web (.xd)

japansports

DOWNLOAD

Church Web Design (.xd)

church

DOWNLOAD

Photographer(.xd)

photographer

DOWNLOAD

Japan web (.xd)

japan

DOWNLOAD

Against Covid-19 web (.xd)

Web 1920 – 1

DOWNLOAD

branding web(.xd)

branding

DOWNLOAD

Art Web(.xd)

cinema

DOWNLOAD

Aquarium(.xd)

aquarium

DOWNLOAD

Interior Shop (.xd)

interiorshop

Download

Music (.xd)

music

DOWNLOAD

Flower web (xd)

flower

DOWNLOAD

Feather web (.xd)

feather

DOWNLOAD

Politician Web (.xd)

politician

DOWNLOAD

Restaurant Web(.xd)

beef_restaurant

Download

Finance web(.xd)

finance

Download

Consulting Web (.xd)

consulting

Download

Architecture web layout(.xd)

architecture

DOWNLOAD

Shoes Web(.xd)

shoes

Download

Tailor Web (.xd)

tailor

Download

Fashion Web Layout (.xd)

Web 1920 – 1

DOWNLOAD

Web Magazine web Layout (.xd)

webmagazine

DOWNLOAD

Car web (xd)

car

Download

PublicDomain web

publicdomain

DOWNLOAD

Coin Laundry

coinlaundry

Download

Machine Web (.xd)

machine

machine.xd

Sports Web Layout (.xd)

sports

Download

color web (.xd)

colorful

Download

Photographer web layout(.xd)

photographer

Download