2015年2月11日 星期三

作業用素材

張貼者： 於 沒有留言:

2015年2月4日 星期三

HTML/CSS

Fonts & Interactions

Font Face

之前有介紹到設定字型，當使用者沒有字型時，瀏覽器會自動使用備用字型，而@font-face可以讓網頁載入網路上的字型，或是設計者的字型檔，讓網頁製作更具有彈性
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@font-face{
     font-family:'OpenSansBold',Helvetica,Arial;     --這裡設定使用的字型與備用字型
     src:url('OpenSansBold-webfont.eot');    --字型的位置，也可以用local("字型名稱')
                                                                使用者電腦中的字型，以逗號分隔可設定備用字型
     font-style:normal;
     font-weight:bold;
}

Transforms

transform可以指定元素的特效
  • transform:translate(3px,5px)  --向右移 3px 下移 5px，可以分別以translateX、translateY來設定
  • transform:rotate(45deg);  --元素旋轉45度
  • transform:scale(1.2)   --橫向、縱向縮放元素1.2倍，以逗點分隔或scaleX Y可分別                                           指定，若是scale(0,2)表示只有縱向放大兩倍
  • transform:skewX(-25deg)     --元素橫向傾斜-25度，以逗點分隔或skewX Y可分別指定







Transitions

transition可以做出簡單的動畫效果，transition:<property> <duration> <timing-function> <delay>

  • transition-property      --表示要改變之屬性的屬性名稱(background-color)，all表示全部
  • transition-duration      --效果的持續時間，單位是/s秒，預設為0
  • transition-timing-function   --效果的速度，有八種(ease、ease-in、ease-in-out、linear、cubic-bezier、step-start、step-end、steps())
  • transition-delay           --效果發生的延遲時間
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.element{
     background-color:black;
     color:white;
     transition:all 0.2s ease-in-out;   --效果持續0.2秒，.element的元件都會改顏色
}

.element:hover{
     background-color:grey;
     color:black;
}
張貼者： 於 沒有留言:

HTML/CSS

CSS3 Styles


Multiple Backgrounds

這個CSS3的新屬性可以做出圖片重疊的效果
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
     background-image:url(bg1.png),url(bg2.png);    --以逗點分隔兩個圖片的設定
     background-position:top left,center right;
     background-repeat:no-repeat,no-repeat;
}
這也可以縮寫為
{
     url(bg1.png) top left no-repeat,
     url(bg2.png) center right no-repeat;
}















Color

在CSS3中color也增加了兩種新屬性，分別是RGBa、HSLa
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
    color:rgba(255,255,255,0.75)     --前三個值為0~255與過去相同，但不可以使用十六進制(ff、6c)，最後一個值為不透明度0~1，0表示完全透明，1表示完全不透明
}
{
    color:hsla(120,0%,50%,0.6)     --依序為色相值(0或360紅色、60黃、120綠、240藍)，飽和度(0%~100%)，亮度(0%~100%)，不透明度(0~1)
}

Opacity

opacity是不透明度的屬性值，可以用它來設定不透明度(0~1)，0是完全透明，1是完全不透明
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
     opacity:0.45;     --0~1
}










<div class="element">
     <h2>
          Hello.
     </h2>
</div>
.element{
     background:url(bg1.png) center no-repeat;
     opacity:0.45;
}





整張圖片(含字)都會變透明




Gradients


在CSS3中也新增了漸層色的功能，分別是Linear-gradient 線性漸層、Radial-gradient 放射狀漸層

Linear-gradient

{
     background:linear-gradient(to bottom ,red ,yellow);     --輸入值為漸層角度、起始色、結束色
}
to bottom表示從上往下，這裡也可以輸入deg(角度)
red,yellow 表示從紅色到黃色，也可以是red 70%,yellow 30% 代表70%是紅色30%是黃色



0deg      --to top(往上)
90deg    --to left(往左)
180deg  --to bottom(往下)
270deg  --to right(往右)


Radial-gradient 

radial-gradient用以建立放射狀漸層，輸入值為radial-gradient(<shape> <size> at <position> ,<color-stop>s)，其中size有四種特別字可使用：closest-side、closest-corner、farthest-side、farthest-corner(預設)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -




{
     background:radial-gradient(circle at top left,aqua,blue);
     --從左上開始漸層的圓形
}







{
     background:radial-gradient(aqua,blue);
     --預設從中間開始漸層
}
張貼者： 於 沒有留言:

HTML/CSS

CSS3 Styles

在CSS3中增加了一些屬性，讓網頁特效製作更為方便

Border Radius

這是一個產生圓角效果的屬性，可以分別設定四個角的圓半徑
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
     border-radius:15px;     --代表四個角都是15px
}






{
     border-top-left-radius:4px;            --將左上角圓半徑設為4px
     border-top-right-radius:15px;        --將左上角圓半徑設為15px
     border-bottom-left-radius:12px;    --將左上角圓半徑設為12px
     border-bottom-right-radius:10px;  --將左上角圓半徑設為10px
}

也可以寫成
{border-radius:4px 15px 12px 10px;}
依順序填入左上、右上、左下、右下角的圓半徑


要注意的是，如果圓半徑大於等於box的50%時，會變為圓形或橢圓形


{box-radius:50%;}



Box Shadow

box-shadow是一個陰影的屬性，總共有六個輸入值，前四個值都是尺寸值(不可以是%)，其中模糊強度blur不可為負，前兩個值為必填，其他可不填
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{box-shadow:offset-x offset-y blur-radius spread-radius color inset:}
依序代表X軸及Y軸位移值(可為負)、模糊強度、擴散強度(可為負)、陰影顏色、內陰影

{
     box-shadow:1px 2px 2px #000;   --表示陰影向下移1px、右移2px，模糊強度為2px
}






下面是blur-radus及spread-radius的效果



{box-shadow:1px 1px 2px #000,inset 1px 1px 2px blue;}     --分別設定外、內陰影






{box-shadow:-1px -2px 2px #000;}
將陰影位移值設為負




Text Shadow

text-shadow與box-shadow大致一樣只是套用在文字上，但只有四個輸入值
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{text-shadow:offset-x offset-y blur-radius color:}
依序代表X軸及Y軸位移值(可為負)、模糊強度、陰影顏色


{text-shadow:1px 2px 2px #000;}
Box Sizing
box-sizing是用來改變box長寬計算的屬性，首先要瞭解之前介紹過的Box Model












box-sizing有三種值分別是:content-box(預設)、padding-box、border-box
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
     border:2px solid black;
     margin:20px;
     padding:10px;
     width:300px;
}
這個box的width是324px=300+10*2+2*2
這也是content-box的計算方式



如果改為padding-box，那width是304=300(280+20)+4
如果改為border-box，那width是300=276+20+4








張貼者： 於 沒有留言:

2015年2月2日 星期一

HTML/CSS

HTML5 Forms

在HTML5對form做了一些改變，如下

  • 新的input type
  • 新的form 元件
  • 新的form 屬性
增加的input type有以下13種，如果瀏覽器不支援以下類型，會預設為text，讓網頁製作更為方便

  • Search   --手機鍵盤上會有search鈕
  • Email    --手機鍵盤上會有@、.符號
  • URL      --手機鍵盤上會有.、/、.com符號
  • Tel         --手機跳出數字鍵盤
  • Number --手機跳出數字鍵盤，桌機輸入框旁有加減鈕
  • Range    --會出現一可往左右拉的選取條
  • Date       --手機上會跳出日期選擇，桌機出現日曆
  • Month    --與Date相似，但只能選月份
  • Week     --與Date相似，但只能選某星期
  • Time      --可選時間
  • Datetime   --可選時間與日期
  • Datetime-local
  • Color      --可以呼叫調色盤

Datalist

datalist可以在網頁上建立一個輸入框，與select有些類似，但使用者是以文字輸入，當使用者輸入第一個字時，下方會自動跳出開頭一樣的選項(類似google)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text" list="browers" />     --list與id要相同
<datalist id="browers">     --id與list要相同
     <option value="Firefox">     --選項
     <option value="Chrome">
     ....
</datalist>

form屬性

在HTML5中，form增加了14種屬性，以下介紹 Placeholder、Autofocus、Required及Pattern 4種

Placeholder

Placeholder是input的預設值，用來說明要輸入的資料為何(Email、電話...)，只要使用者輸入資料，預設值就會自動刪除
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text"placeholder="Enter your Email.."/>

Autofocus

當網頁開啟時，焦點會自動移至autofocus的input
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input  type="text" autofocus />

Required

若input中有required屬性，那麼該input必須要有值才可以送出，如果沒有輸入值是無法送出的
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text" required />

Pattern

若input中有Pattern屬性，那麼該input有限制的格式，範例要輸入0-9組成的三位數數值，如果沒有符合條件，是無法送出的
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<input type="text" pattern="[0-9]{3}" />    --格式是3位數的0-9數字
張貼者： 於 沒有留言:

HTML/CSS

HTML5 Elements

與HTML4相比，HTML5增加了新的tag，幫助使用者更方便進行管理，不需要使用一大堆的div tag，下圖是新增的tag

section

section表示文章的一部分、一段落，與div類似，但是div並無代表意義，如果只是要區分區塊的話使用div，如果該區塊是有意義的話使用section
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<div class="section">
     <h2>The Gallery</h2>
       ..........
</div>
上面是過去的寫法使用div tag，下面是使用HTML5的section tag
<section>
     <h2>The Gallery</h2>
       ..........
</section>

<h1>This is the title of the page</h1>
<section>
     <h2>This is the title of a sub-section</h2>
</section>

header

header表示標題、標頭，在一個網頁中可能會有多個不同的header
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<div class="header">
     ..........
</div>
下面是HTML5的header tag用法
<header>
     ..........
</header>

header 可能是網頁的標題，也可能是一段文章的標頭
<section>
     <header>
          <h1>The heading of the section</h1>
          <p>this is content in the heeader</p>
     </header>
     <p>This is some information within the section</p>
</section>

footer

footer表示文章的結尾、表尾
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - 
<div class="footer">
     ..........
</div>
下面是HTML5的footer tag用法
<footer>
     ..........
</footer>

<section>
     <header>
          <h1>The heading of the section</h1>
          <p>this is content in the heeader</p>
     </header>
     <p>This is some information within the section</p>
     <footer>
          <p>By "Author Name"</p>
     </footer>
</section>

aside

aside是用來存放網頁的附加資訊、說明文字
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<div class="sidebar">
     ..........
</div>
下面是HTML5的aside tag用法
<aside>
     ..........
</aside>

<section>
     <header>
          <h1>The heading of the section</h1>
          <p>this is content in the heeader</p>
     </header>
     <p>This is some information within the section</p>
     <aside>
          <p>Some secondary infrmation</p>     
     </aside>
     <footer>
          <p>By "Author Name"</p>
     </footer>
</section>

nav

nav通常用用來存放連結
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - 
<div class="nav">
     ..........
</div>
下面是HTML5的nav tag用法
<nav>
     <ul>
         ..........
     </ul>
</nav>

article

article是另一種特別的section，與section不同的是它通常是放一獨立起完整的內容，通常包含header及footer
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - 
<div class="article">
     ..........
</div>
下面是HTML5的article tag用法
<article>
    ..........
</article>

main

一篇文章中只會有一個main用來表達文章的主旨
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -

<div class="main">
     ..........
</div>
下面是HTML5的main tag用法
<main>
    ..........
</main>

figure

figure通常放置插圖、圖片、圖表等，裡面包含標題
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<figure>
     <img src="image.jpg" alt="My Picture">   --src是圖片位置，alt是圖片說明
     <figcaption>This is a caption for the picture</figcaption>   --表示圖的標題
</figure>

time

time用來表示時間
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<time>2014-12-24</time>
如果我想要更換格式
<time datetime="2014-12-24">12/24/2014</time>   --只要在datetime屬性內輸入正確的時間，中間就可以打你所想要顯示的格式

張貼者： 於 沒有留言:

2015年1月28日 星期三

HTML/CSS

Overview & Updates

在接下來會介紹HTML5的更新，下面先介紹HTML5的更新項目
  • Doctype 
  • Meta declaration
  • Script tag
  • Link tag

Doctype(Document Type)文件類型定義

Doctype是用來宣告，該網頁的 HTML、XHTML 所用標籤是採用什麼樣的 (X)HTML 版本。
宣告DTD文檔類型，裡頭包含了 HTML、XHTML 標籤規則，瀏覽器依據 DTD 來分析 HTML 的編碼，在HTML5簡化為<!DOCTYPE html>

Meta declaration

過去我們宣告網站內容的種類與編碼，要在寫入
<meta  http-equiv="Content-Type" content="text/html; charset=UTF-8">

在HTML5只要寫
<meta charset="UTF-8">
就有一樣的效果了

Script tag

HTML5在加入js檔也變得更簡單了，過去是
<script type="text/javascript" src="file.js"></script>

而現在不需要寫type了，瀏覽會自動判讀
<script src="file.js">

Link tag

以前載入CSS檔案需要打
<link rel="stylesheet"  type="text/css" href="main.css">

現在只需要
<link rel="stylesheet" href="main.css">

張貼者： 於 沒有留言:
訂閱： 文章 (Atom)