網頁邊框設計邊框增益式屬性

統雄社群-相關主題

圖文框設計:表格1.2.3/圖片/非圖表物件/圖層

數位出版設計:意涵/樣式篇Web Design: Blocks - Epistemological/Digital Aesthetics - Formation Methodology

數位出版設計:意涵/樣式篇網站/網頁設計:圖文框實作-知識美學/數位美學建構方法

Blocks include pictures, tables and other objects such as shape and border, division, inline frames, embedded maps, photo gallery... etc.


在 CSS3 之後,邊框設計的增益式屬性設計,比從前版本增加了許多彈性,是改變較大的1組命令。

邊框設計與邊框增益式屬性 CSS Border PropertiesCSS3 邊框增益式設計

CSS3 邊框的增益式屬性設計,增加了許多,但複雜並不表示好看;統雄老師建議使用2個:border-style 邊框樣式、border-color 邊框色彩。

border-style 邊框樣式

邊框樣式一樣有許多選擇,統雄老師同樣建議,使用2-3種變化即可。

基本型:實線型

即預設,不需要程式增益,而實線寬度由以下屬性設定,如 10px 寬:

border-width: 10px;

凸型

border-style: ridge;

凹型

border-style: groove;

在實務上,凸型或凹型任選一即可,統雄老師建議,優先選凸型。 

border-color 邊框色彩

根據數位色彩設計TX 選色與四大配色定律,就是將 3 原色中,除掉個性太強的紅色,而以其他的2色作排列組合,可得 3 組溫和的邊框色彩。


設計使用者 class

在正規設計上,應先將以上設計構想,寫成 class,如下:

實線型

.border0 {border: 0px; padding:2px; text-align:left; vertical-align : top;}
.border1 {border: 1px solid #FFCC66; padding:2px; text-align:left; vertical-align : top;}
.bordery {border: 4px solid #FFCC66; padding:2px; text-align:left; vertical-align : top;}
.borderb {border: 4px solid #00CCFF; padding:2px; text-align:left; vertical-align : top;}
.borderp {border: 4px solid #CC00FF; padding:2px; text-align:left; vertical-align : top;}

凹凸型 

.boxb {
border-style: ridge;
border-width: 10px;
border-color: #00ccff;
}

.boxp {
border-style: ridge;
border-width: 10px;
border-color: #cc00ff;
}

.boxy {
border-style: ridge;
border-width: 10px;
border-color: #ffcc00;
}

CSS3 凸型邊框設計

CSS3 凸型邊框設計之程式與範例如下。

注意,因 css 通常不會把表格寬度寫死,所以通常以手動加入。實作程序如下:

〉表格

〉插入表格

設定:列1、欄1

在〈設計〉介面,以滑鼠點選,出現<table>標籤。

〉套用樣式

選擇 .boxb

到〈程式碼〉介面,加入 style 宣告。

<table id="table1" style="width: 400px;" class="boxb">
<tr>
<td><h5>藍色凸型邊框設計<span><br>Blue ridge borders design</span></h5></td>
</tr>
</table>

藍色凸型邊框設計
Blue ridge borders design

<table id="table3" style="width: 400px;" class="boxy">
<tr>
<td><h5>黃色凸型邊框設計<span><br>Yellow ridge borders design</span></h5></td>
</tr>
</table>

黃色凸型邊框設計
Yellow ridge borders design

<table id="table2" style="width: 400px;" class="boxp">
<tr>
<td><h5>紫色凸型邊框設計<span><br>Purple ridge borders design</span></h5></td>
</tr>
</table>

紫色凸型邊框設計
Purple ridge borders design

其他 CSS3 邊框增益式設計

其他邊框增益式設計如以下連結。

CSS Borders

http://www.w3schools.com/css/css_border.asp

CSS border-style Property

http://www.w3schools.com/cssref/pr_border-style.asp

CSS border-color Property

http://www.w3schools.com/cssref/pr_border-color.asp 


邊框設計與邊框增益式屬性 CSS Border PropertiesCSS2 邊框增益式設計

在CSS2 時代,邊框增益式設計,統雄老師推薦的是:漸層式邊框設計 Gradient design of borders。

漸層式邊框設計 Gradient borders design

漸層式邊框設計又可以分作正向、和反向2種,程式碼與成果如下:

正向設計,使用 inset 指定色彩。

<table style="width: 400px; height: 0; border: 10px inset #00CCFF; " >
<tr>
<td>
<h5>漸層式邊框設計<br> Gradient borders inset design</h5>
</td>
</tr>
</table>
漸層式邊框設計
Gradient borders inset design

反向設計,使用 outset 指定色彩。

<table style="width: 400px; height: 0; border: 10px outset #00CCFF; " >
<tr>
<td>
<h5>反向漸層式邊框設計<br> Gradient borders outset design</h5>
</td>
</tr>
</table>

反向漸層式邊框設計
Gradient borders outset design

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題