因網上不同瀏覽器問題,所以不能直接 load xxx.ttf 就算,例如以下 code,只是自欺欺人,得自己睇到。

 

src: url('SnellRoundhand.ttf');

必須轉成 webfont 形式,而webfont包含以下檔案

webfont

隨便 google 一下,原來都很多網站都提供 Font to webfont,我就用以下網站成功轉成webfont format。

http://www.font2web.com/

如果透過以上網站轉的 webfont,會自動打包成zip。

在 CSS 內加 

@font-face {
    font-family: 'SnellRoundhand';
    src: url('../fonts/SnellRoundhand.eot');
    src: local('☺'), url('../fonts/SnellRoundhand.woff') format('woff'), url('../fonts/SnellRoundhand.ttf') format('truetype'), url('../fonts/SnellRoundhand.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {

font-family:'SnellRoundhand';

}

這樣就可以把自訂的 font 正式加到網頁內。

Read More →
Replies: 0 / Share:

sass/scss是啥?

Sass (Syntactically Awesome Stylesheets)是寫css樣式表的一個程式語言,語法跟css一樣(但多了些功能),比css來得好寫,且來得更容易閱讀,寫css的Designer不用考慮,可以換了! 但最好是配合compass!

Sass詳細介紹 或見 官網

sass跟scss差在那?

sass是屬於縮排語法,語法類似haml,sass與haml用意是為了更精簡,快速寫html及css,後來在css3之後延伸出scss,寫法近似css。

簡單說就是一個有花括號、分號(scss),一個沒有(sass)。

scss 對於會寫 css 的人來說,比較容易上手,本篇就都以scss作為範例的code!


上面介紹sass/scss了,現在要來談談Compass,Compass是一個sass的Framework,簡單的說是將原來在sass裡要寫很多次的樣式,Compass都幫你寫好了,再加一些常用的功能,並簡化了寫法,讓你寫css可以不必吹灰之力就寫出你要的效果! 呃~ 也沒這麼誇張!但速度快了不少就是!

安裝Compass

在終端機輸入以下就裝完啦!

gem update –system  #先更新gem
gem install compass  #安裝Compass

安裝時Compass,如果沒有安裝sass,會自動安裝。


建立Compass專案吧

compass creat myproject

myproject是你的專案名字
預設會產生如上面那些檔,接著可以在config.rb裡作設定css、sass、images等的資料夾設定,再依自已喜好吧!


監察機-接著進入在你的scss檔案的資料夾,並執行sass

cd myproject

compass watch

此時你就可以開始編輯你的scss檔了,編輯完存檔,compass會馬上編譯css到你設定的資料夾內,一樣可以按command + c 取消。
下次要再編輯就再watch就好


注意問題:

小心 path 很易出錯, 例如 : 

css \ style.css

\ index.html

style.css

background: url('/images/icons.png') no-repeat;    錯誤,index.html 的位置會引致path錯誤

background: url('../images/icons.png') no-repeat;    正確,因為要上一層;


Sprite 

我覺得…做Sprite是css designer的痛吧!維護非常費工,還要計算座標,萬一改個圖,就要座標重算!css再寫,而且改一個可能動全身!

哇~ 現在Compass都幫你搞定啦! Compass真是太強大了,三個願望一次滿足!
只要將要合併的圖片放在同一個資料夾下,compass會自動產生另一張合併檔,同時設定好座標。

compass_sprite

icon path : \images\icons\fb.png

SCSS :

$icons-spacing: 5px;
$icons-sprite-dimensions: true;
$toolbar-layout: 'smart';
@import "icons/*.png";
@include all-icons-sprites;

CSS : 

.icons-sprite, .icons-fb, .icons-tw {
  background: url('/images/icons-s53d3cea91c.png') no-repeat;
}

.icons-fb {
  background-position: 0 -49px;
  height: 44px;
  width: 45px;
}

.icons-tw {
  background-position: 0 0;
  height: 44px;
  width: 44px;
}

Read More →
Replies: 0 / Share:

The Wookmark jQuery plugin
用來 display 作品之用。
Link : http://www.wookmark.com/jquery-plugin

如想增加 mouse hover 效果,在以上code內加。

#tiles li:hover {background-color:rgba(0, 128, 255, 0.100);}


1. Download the Javascript plugin file from the Github repository

2. Include the file in your website (after your include of jQuery)

<script type="text/javascript" src="jquery.wookmark.js"></script>

3. Run it on your content

<script type="text/javascript">$('#myContent li').wookmark();</script>

 

align – "left", "right", or "center"
autoResize – if "true", updates layout after browser is resized
resizeDelay – default is "50", time in miliseconds between browser resize and layout update
comparator – a custom sorting function
container – the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
direction – "left" or "right", whether to start in top left or top right corner
ignoreInactiveItems – if "true", inactive items will still be visible, which can be used to fade filtered items out
itemWidth – width of one grid item in pixels ("200") or percentage ("10%"), defaults to width of first item
fillEmptySpace – if "true", creates placeholder at bottom of each column to create an even layout. Placeholders elements have the class "wookmark-placeholder".
flexibleWidth – "true" or "false", adjusts item width to create optimal layout based on browser size
offset – vertical and horizontal distance between items, defaults to 2
onLayoutChanged – a function that gets called after every layout change
outerOffset – default is "0"

Read More →
Replies: 0 / Share:

[codepen_embed height=600 theme_id=1 slug_hash=’dqBbH’ user=’ming’ default_tab=’Result’ animations=’run’]

Read More →
Replies: 0 / Share:

效果 :在 Page 1,按 Page 2 按鈕,會滑到Page 2。

簡單介紹

CSS 設定全頁page width 為6000px,每個顯示 section 設為 2000px,代表有3頁。可自行加頁數。

[codepen_embed height=600 theme_id=1 slug_hash=’azpob’ user=’ming’ default_tab=’Result’ animations=’run’]

Read More →
Replies: 0 / Share: