[CSS] 建立Calendar-like 日期顯示

早期建立網頁時, 若要建立陰影 / 弧邊的話, 都須要利用修圖軟件幫助, 現在CSS3 亦已支援相對應的東西. 在這裡, 利用了日期顯來做示範.CSS

<!-- 設定整格的格式; -->
.date
{
	width: 130px; 
	height 160px;
	background-color: #fcfcfc;

	<!-- 設定漸變色; -->
	background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
	background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); 
	background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
	
	border: 1px solid #d2d2d2;
	<!-- 設定弧角; -->
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	<!-- 設定陰影; -->	
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

<!-- 設定整格文字式樣; -->
.date p
{
	font-family: Helvetica, sans-serif; 
	font-size: 100px; text-align: center; color: #9e9e9e; 
	margin: 0px;
}

<!-- 設定月份式樣. 因為月份在底部, 故須修改其弧位; -->
.date p .month{
	background-color: #d10000; 
	background: linear-gradient(top, #d10000 0%, #7a0909 100%);
	background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
	background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
	font-size: 25px; font-weight: bold; color: #fff; text-transform: uppercase; 	
	display: block;
	border-top: 3px solid #a13838;
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	padding: 6px 0 6px 0;
}

<!-- 設定年份式樣. 因為年份在頂部, 故須修改其弧位; -->
.date p .year{
	background-color: #d10000; 
	background: linear-gradient(top, #d10000 0%, #7a0909 100%);
	background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
	background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
	font-size: 25px; font-weight: bold; color: #fff; text-transform: uppercase; 	
	display: block;
	border-top: 3px solid #a13838;
	border-radius: 10px 10px 0 0;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 10px 10px 0 0;
	padding: 6px 0 6px 0;
}

HTML

<div class="date">
	<p><span class="year">2017</span>25<span class="month">May</span></p>
</div>