pCloud Partner Program

好用Google中文字體

程式技術 2016/10/12 11:07
views: 70170 times
製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.

先來看看有哪些吧:

https://fonts.google.com/earlyaccess

上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:

楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei

這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

之後只需要在對應的 class 下 font-family 語法即可, 如下:

font-family: 'cwTeXKai', serif;

為方便一次檢視所有字體, 可以參考範例資料:

http://sample.diary.tw/42/index.htm

繼續閱讀:
http://www.ithome.com.tw/news/108941

top

如何取消Chrome瀏覽器會出現藍色邊框的狀況

程式技術 2016/04/27 14:43
views: 47174 times
同事問到, 在 Chrome 瀏覽器中, 一些特定的連結(應該是某些已自訂的 class 狀況下), 在點擊時, 會有藍色邊框(就是 focus時), 要如何取消這個功能, 這個部分在 Firefox 與 IE 都不會發生.

模擬的狀況如下:
用戶插入圖片

上圖的左邊是都還沒有 focus 時, 右邊則是 pink button 在 chrome 瀏覽器下的 focus 狀態, 會出現藍框. 範例連結: http://sample.diary.tw/39/index.htm

如何取消這個藍框, 可以使用以下語法:

.b2:focus{
    outline: 0;
}

也就是在 focus 時, 把 outline 設為 0即可. 上面的範例連結, 其中 pink 為 b1 class, lightblue 為 b2 class, 所以 pink 會有藍框, 而 lightblue 在 focus 時, 不會出現藍框.

參考資料: http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

top

原生CSS開始支援變數了

程式技術 2016/03/08 09:58
views: 27182 times
同事傳來連結: http://muki.tw/tech/native-css-variables/ 介紹了原生的 CSS已開始支援變數了, 雖然目前支援度還不太廣, Firefox, Chrome 是都還有支援, 不過 IE 目前尚未支援, 對於前端介面設計的伙伴們, 相信在撰寫 CSS 有更多選項.

以往使用 CSS 變數, 可以用前置處理器的方式, 例如

Sass/SCSS: http://sass-lang.com/guide
Less: http://lesscss.org/

現在原生的 CSS 有支援變數了, 看起來就更加方便了, W3C相關文件可以參考這篇: https://www.w3.org/TR/css-variables/ 另外從文件上來看, 其實更久之前也就有一些 W3C文件在開始設計這樣的功能, 如這篇: https://www.w3.org/TR/2012/WD-css-variables-20120410/

對於前端的變化多端與多樣化的介面應用, 有更多的 CSS 原生支援, 對於前端工程師來說, 真的是更方便多了(當然, 也會需要學習更多了)

繼續閱讀:
http://muki.tw/tech/native-css-variables/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

支援度查詢:
http://caniuse.com/#feat=css-variables
top

CSS寬度問題

程式技術/Javascript 2015/07/23 14:43
views: 87004 times
今天在修正一個瀏覽器相容性問題時, 在使用 css 中的 calc(100%- 10px) 這樣的語法時, 由於 ie8 不支援, 所以改用 jQuery 的 obj.parent().width() 來進行設置.

測試後發現有一點落差, 起用 browser 的 box model 來檢查, 發現其中 parent 有設定左右的 padding, 導致 parent width 和原來的 css calc(100% -10px) 的 100% 會有落差, 所以查了一下 jQuery 語法, 使用 obj.parent().outerWidth() 就能順利取得和原來 css calc(100% -10px) 的 100% 寬度相同了.

如此一來就解決了在 ie8 下寬度使用 calc(100% -10px) 語法的問題.
top

網頁排版文字排不下的略語語法

程式技術 2013/03/21 19:22
views: 343882 times
在網頁排版上, 有個很麻煩的地方, 就是在固定寬度的文字走文, 若字數太多時, 需要隱藏, 但又希望在介面上看起來理想, 作法可以利用一個 css 的語法:

text-overflow: ellipsis;

這個語法可以應用在限制一定寬度時, 文字走文若有隱藏的部分, 則會出現 ... 這種略縮語的方式, 讓看到的訪客可以理解後面還有文字, 只是被略縮掉了, 這是透過 css 的部分來進行, 而不是限制字數輸出(從server端的作法), 而且可以配合文字的字型(有些字型是調合字, 就是有寬有窄), 不是用字數來設限的方式, 會更有彈性的多了.

來看看效果吧:

http://sample.diary.tw/33/1.htm

這個範例利用了一個 slider (jQuery UI) 來進行寬度限制, 方便大家在測試時, 可以看到不同寬度對於略縮語的應用, 有不同的呈現效果.

這裡用的 css 語法如下:


其中, overflow: hidden; 是超出的部分就不要出現, 而 white-space: nowrap; 是不要換行.

繼續閱續:
http://ant4css.blogspot.tw/2009/03/text-overflow.html

[2013/3/22 12:33]
overflow: hidden; 及 white-space: nowrap; 和這兩個條件併用是必需的, 所以基本上是應用在標題比較適合, 若用在內文走文就沒有辦法利用這個方式來進行了.

可以參考這篇:
http://leeiio.me/text-overflow-ellipsis/

另外也實作了測試: http://sample.diary.tw/33/2.htm 是無法有這個效果的.

top

半浮動DIV區域

程式技術/Javascript 2012/09/03 18:33
views: 106896 times
一般網頁利用CSS排版, 通常分為上中下三段, 分別為 top, main, footer.

其中在 main 做一些特效, 讓一個區域能在捲動時, 會固定在畫面上. 這樣的特效, 需要配合 javascript (或 jQuery ) 來進行才能達成, 先來看一下效果: link.

除了上(top), 中(main), 下(footer)外, 另外在 main 中還有一個 content 及 flow_div 兩個區域. 在向下捲動時, 若 flow_div 捲動超過畫面上方時, 則會變成固定在畫面上.

程式的實作方式利用 jQuery 來進行, 先看程式碼:


在 document ready 時, 先把 #flow_div 的 top 距離算出來, 接下來在 window 的 scroll event 裡, 把 window 的捲動距離算出來後, 和上述的 top 變數比較, 若是超過了, 就把 #flow_div 多加上一個 class 名為 fixed, 讓它固定, 反之則將 fixed class 移除, 也就是跟著畫面捲動.

其中 fixed class 內容重點在於: position: fixed; top: 0px; , 也就是固定在距離畫面上方為 0, 看起來就是浮在原來的內容之上, 若還沒有捲動, 就移除這個 class, 會跟著捲動.

很有意思的一個排版特效.

範例頁: http://sample.diary.tw/29/1.htm
top

線上賓果產生器

程式技術/Javascript 2012/03/15 19:11
views: 155255 times
今天花了一點時間寫個"線上賓果產生器", 是個全 javascript 的程式, 主要是可以給想玩賓果, 但又不想畫格子及填數字的朋友們, 有個小工具可用.

這裡用了一個隨機排序的函數, 引用自: http://javascript.about.com/library/blsort4.htm, 程式如下:


利用了 Math.random() 隨機將一個陣列中的各元素互相交換的方式, 把陣列內容打散, 達成隨機排序, 使用方式就直接呼叫 aryNum.shuffle() 即可, 其中 aryNum 是一個自訂的陣列變數, 一開始先將 n*n 的數字填入, 再利用 shuffle() 函數進行打散.

另外值得一提的是利用了 @media print 的方式, 將操作的表單在列印時隱藏起來, 方便列印出來的賓果表格更清楚, 是一個 css 的技巧, 如下:


請到這裡玩看看: 線上賓果產生器: http://sample.diary.tw/bingo/

只需要填入維度及組數, 馬上就生出來所需要的賓果表格, 除了原來的 5*5 外, 想玩 6*6, 7*7 也不是問題. 快來玩看看囉!
top

VideoJS-HTML5的影片播放器

程式技術/Javascript 2011/02/19 23:19
views: 162167 times
用戶插入圖片

VideoJS-圖片引用自http://videojs.com/

瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.

不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS - http://videojs.com/

這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!


top

web版線上測試javascript-JSFIDDLE

程式技術/Javascript 2010/11/11 14:11
views: 234220 times
這個 JSFIDDLE: http://jsfiddle.net/ 是一個線上版本, 進行 javascript 測試及除錯使用的方便工具, 包含了大量的 javascript frame, 有 MooTools, jQuery, Prototype, YUI, Glow, Dojo, Processing, ExtJS, Raphael, RightJS 及不使用 framework 多種選擇.

不僅如此, html, css 更是能分區編輯, 方便測試, 而且實作的程式結果也可以存下來, 方便日後再拿出來看, 或是進行 share 討論, 還能分支開發 (fork) 下去, 真的是十分方便實用的 javascript 工具.

例如這個測試的程式, 功能就是一直累加而已, 可以玩看看: http://jsfiddle.net/Ej4rC/

還可以直接 embed (透過 iframe ) 放到外站, 如下:



可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!
top

好用的CSS STYLE截圖

程式技術 2009/06/16 23:27
views: 75302 times
基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, .... 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, ... 9, 0 做成一張橫的長條圖, 例如:

(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)

用戶插入圖片

而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.

這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:
  1. background-image
  2. background-position
  3. width
  4. height
也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

 

這個 2 數字, 是利用這個 HTML:

<div style="width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: -34px 0px;">&nbsp;</div>

來達成的, 實際上用圖示來說明就像是這樣:
用戶插入圖片
也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.

若是要秀出 307 則使用如下語法:

<div style="float: left; width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;">&nbsp;</div>
<div style="float: left; width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;">&nbsp;</div>
<div style="float: left; width: 17px; height: 21px; background-image: url(http://diary.tw/attach/1/1144413904.gif); background-position: -119px 0px;">&nbsp;</div>

如下:

 
 
 


上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.

接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:
用戶插入圖片

要取出其中的 4個部分, 可以利用以下語法, 例如:

同步中心:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;">&nbsp;</div>
 
Windows CardSpace:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;">&nbsp;</div>
 

Java:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;">&nbsp;</div>
 

iSCSI啟動器:
<div style="width: 65px; height: 83px; background-image: url(http://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;">&nbsp;</div>
 
這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!

[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2
top
TAG crop, css, image




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...