2012年9月7日 星期五

插畫家、藝術家網站收集

印度插畫家 Nithin Rao Kumblekar 

紐約的『FOLEYgallery』畫廊

光影藝術家Darius twin

 日本搞怪藝術 rrrrrrrroll
張貼者： 於 沒有留言:
標籤：

攝影師的部落格收集

Adrian Storey

Maianer 高速攝影

張貼者： 於 沒有留言:
標籤：

2012年9月6日 星期四

HTML、CSS、JavaScript、Flash技法討論網站收集

日本 HTML4 & 5、CSS & CSS3、JavaScript 範例展示。

日本 Flash 範例展示。
張貼者： 於 沒有留言:
標籤：

互動設計與視覺設計網站收集


張貼者： 於 沒有留言:
標籤：

2012年8月30日 星期四

CSS Class Selectors

CSS Class Selectors

類別選取：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
}

 /*elements selector,選取所有的DIV元素*/
div{
width: 50px;        /*寬度*/
height: 50px;       /*高度*/
line-height: 50px;  /*讓文字垂直置中*/
text-align: center; /*讓DIV內部的文字水平置中*/
border: #808080;    /*邊的顏色*/
border-style: solid;/*border為實線*/
border-width: 1px;  /*border寬度*/
margin-bottom: 2px; /*margin下方寬度*/
        color:white;        /*文字的顏色*/
}

/**選取document裡所有有宣告class為top的元素*/
.top{
background-color:#1E646F;
}

 .center{
background-color:#26681B;
}

 .bottom{
background-color:#6F691E; 
}

 </style>
</head>
<body>
<div class="top">上</div>
<div class="center">中</div>
<div class="bottom">下</div>
</body>
</html>

結果：














DOM 上宣告多個Class ，並用CSS選取套用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
}

 /*elements selector,選取所有的DIV元素*/
div{
width: 100px;        /*寬度*/
height: 100px;       /*高度*/
line-height: 100px;  /*可讓文字垂直置中*/
text-align: center; /*讓DIV內部的文字水平置中*/
border: #808080;    /*邊的顏色*/
border-style: solid;/*border為實線*/
border-width: 1px;  /*border寬度*/
margin-bottom: 2px; /*margin下方寬度*/
color:white;
}

.sky{
background-color:#25B3F7;
font-weight: bold;
}

 .flowers{
background-color:#F72598;
font-style: italic; 
}
/**選擇有宣告兩個class的DOM元素，套入以下屬性*/
.sky.flowers{
background-color:#AB25F7;
}

 </style>
</head>
<body>
<div class="sky">空</div>
<div class="flowers">花海</div>
<!--會套入sky的粗體，flower的斜體-->
<div class="flowers sky ">Mix</div>
</body>
</html>


結果：




















Note:在早於IE7的版本中，多類別選取會有問題，因此不建議使用多類別選取。

 選擇具有class=article 屬性的span element。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css"> 
html{
background-color: #000000; /*背景色為黑色*/
color: OliveDrab;    /**預設所有字體是橄欖綠*/
}

 /**選擇有class為article的span元素 ，套用CSS屬性*/
span.article{
  border: #808080;
  border-style: dotted;
  border-width: 1px;
  color:DarkMagenta;
}
</style>
</head>
<body>
<p><span class="article">八陣圖  杜甫</span></p>
<!--雖然class為article但CSS要選擇的是有article class的span所以這裡color是繼承html的color:OliveDrab-->
<p class="article">功蓋三分國，名成八陣圖。</p>
<p class="article">江流石不轉，遺恨失吞吳。</p>
<div><p><span class="article">諸葛孔明石兵八陣</span></p></div> 
</body>
</html>

結果：

張貼者： 於 沒有留言:
標籤：

CSS Grouping Selectors

CSS 群組選擇

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Grouping Selectors</title>
<style type="text/css">
h1{
   background-color:black; /**背景色*/
}

/**Group selector*/
h1 , p{
   color:gray; /**文字內容顏色*/
}
</style>
</head>
<body>
   <h1>CSS</h1>
   <p>層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表，由W3C定義和維護的標準，
一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言。
目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發過程中。</p>
<span>上段文字引用自維基百科</span>
</body>
</html>

運作結果： 
張貼者： 於 沒有留言:
標籤：

CSS 學習資源收集

CSS 學習資源收集


Box Model文章：

em單位文章：
CSS2 & CSS3  X11Colors：
張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)