CSS – Ling's Note https://www.chunho-ling.com Everything related IT, and me. Mon, 12 Jun 2017 05:03:32 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 104401516 [CSS] 建立Calendar-like 日期顯示 https://www.chunho-ling.com/css-%e5%bb%ba%e7%ab%8bcalendar-like-%e6%97%a5%e6%9c%9f%e9%a1%af%e7%a4%ba/ https://www.chunho-ling.com/css-%e5%bb%ba%e7%ab%8bcalendar-like-%e6%97%a5%e6%9c%9f%e9%a1%af%e7%a4%ba/#respond Mon, 12 Jun 2017 05:03:32 +0000 http://www.chunho-ling.com/?p=711 [...]]]> 早期建立網頁時, 若要建立陰影 / 弧邊的話, 都須要利用修圖軟件幫助, 現在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>

 

]]> https://www.chunho-ling.com/css-%e5%bb%ba%e7%ab%8bcalendar-like-%e6%97%a5%e6%9c%9f%e9%a1%af%e7%a4%ba/feed/ 0 711 [CSS] 於圖片建立相片效果 https://www.chunho-ling.com/css-%e6%96%bc%e5%9c%96%e7%89%87%e5%bb%ba%e7%ab%8b%e7%9b%b8%e7%89%87%e6%95%88%e6%9e%9c/ https://www.chunho-ling.com/css-%e6%96%bc%e5%9c%96%e7%89%87%e5%bb%ba%e7%ab%8b%e7%9b%b8%e7%89%87%e6%95%88%e6%9e%9c/#respond Tue, 06 Jun 2017 10:14:45 +0000 http://www.chunho-ling.com/?p=700 [...]]]> 以前設計網頁時, 若圖片須要制造相片效果, 則須要利用修圖軟件加工, 後來隨著CSS 技術日漸成熟以及IE 的式微, 現在已經可以從CSS 層面著手. 方法如下:

HMTL:

<ul class="learn">
     <li class="thumbnaile"><img id="portrait" src="http://lorempixel.com/300/300/nature" class="stretch" /></li>
</ul>

CSS:

img {
    // 相框顏色.
    background-color: #fff; 
    // 相框闊度.
    padding: 10px;
    // 相片陰影位置及顏色.
    box-shadow: 10px 10px 5px #888888;
    // 若想邊框圓潤, 可以加入.
    border-radius: 10px;
}

 

]]> https://www.chunho-ling.com/css-%e6%96%bc%e5%9c%96%e7%89%87%e5%bb%ba%e7%ab%8b%e7%9b%b8%e7%89%87%e6%95%88%e6%9e%9c/feed/ 0 700