程設筆記本: HTML / CSS

顯示具有 HTML / CSS 標籤的文章。顯示所有文章

2010年10月12日星期二

網頁設計比賽

介紹兩場以檔案大小為重點的網頁設計比賽

JS1K

這是限制javascript檔案大小 >1 kb = 1024bytes。

10K Apart

而這是以前端為目的，可以使用最新的html 5 或css 3 來寫，也不限使用資料庫，但是不許使用flash或者silverlight。
這個倒設計的較美觀，雖然檔案大小限制在10kb，但似乎還算寬裕，但是既然用到html 5的話，那麼很垃圾的ie8以下想必是絕對沒辦法開啟的。

最近沒空，留著改天再來欣賞。

2010年9月19日星期日

程式設計員小抄大全

轉貼自：http://coolshell.cn/articles/1566.html

這篇也很棒，筆記一下…

你是否會經常忘記一些CSS中的函數名或是一些屬性名，那個時候，你一定覺得，如果手邊有一個「小抄」（Cheat Sheet）就好了。當然，這個「小抄」不是給你作弊用的，這個「小紙條」就是可以讓你馬上知道那個你最想知道的東西。這個「小抄」上也不需要有所有的東西，就需要那些經常用的就行了。現在，網上有很多這樣的「小抄」，它們可能是PDF格式的，可能是PNG格式的，你可以很方便地把其打印出來（可以打印得很小），然後貼在你的電腦旁，一但需要，瞟一眼就可以了，這對於我們的工作是相當方便的。
之前，酷殼也有兩篇關於速查卡的文章《Web設計的速查卡》和《Vim命令速查卡》，不過都不如本貼多。
下面是N多的各種和樣的「小抄」，其中包括了Ajax, C++, Java, Python, PHP, Perl, ASP, Unix, Ruby, Google, HTML, CSS, XML ……..，讓我們姑且叫做「程序員小抄大全」吧。當然，他們都是英文版的，可能某些鏈接你可能需要翻牆軟件才能訪問。我這裡就不教你怎麼翻牆了，這樣的貼子網上多的是。

2010年8月15日星期日

不同的CSS技巧及其效能差異

原文：http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/

這篇文章主要是在測試CSS選擇器各種寫法上效能所產生的差異

2010年5月21日星期五

Google網頁字體在線服務，設計師的福音

轉貼自：http://www.google.org.cn/posts/google-font-directory-released.html

目前網頁上使用的字體都是常見的幾種，如』Lucida Grande』, Verdana, Arial, Sans-Serif,中文常見的有宋體。

要想用比較個性的字體就比較麻煩了，因為你不能保證客戶端是否支持這種字體，常用的方法是用Photoshop把文字製作成圖片。為了讓網頁設計更加靈活，Google從2010年5月19日啟動了網頁在線字體服務，並一口氣發佈了十八字體族。但與 Monotype Web Fonts、FontShop 等字體商不同，Google 這次開放的字體與它其他很多服務一樣，完全免費。

2010年4月27日星期二

開始HTML5 – Video

轉貼自：http://blog.colorbase.tw/web-development/947

在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。
現在就連 YouTube 也開始測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但瞭解一下新技術是有其必要的。

2010年4月14日星期三

IE-CSS3 - 讓IE支援CSS3

轉貼自：http://ka-yue.com/blog/ie-css3

IE-CSS3 是個能令 Internet Explorer 不完整地支援幾個常用的 CSS3 屬性的小 script。它利用了 Internet Explorer 專有的 Vector Markup Language (VML) 來繪制所需效果。
使用方法很簡單，如果你需要圓角效果，只需一如以往地用 border-radius，再加上 behavior: url(ie-css3.htc) 即可：

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Internet Explorer 6+ with IE-CSS3! YEAH! and Opera */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

IE-CSS3 支援 Internet Explorer 6, 7 及 8，可惜支援的屬性並不是太多，僅限於 border-radius, box-shadow 及 text-shadow。並未有實際使用過，不知道大量使用的話會不會把 IE 拖慢（大概也習慣了吧？）。以往需要圓角的時候我一般會選用 DD_roundies，未曾出過問題，而 DD_roundies 也是用 VML 來 implement 的，所以相信值得一試的。
未經壓縮的檔案大小為 12KB，官方沒有壓縮版。

2010年4月1日星期四

CSS簡寫指南

轉貼自：http://www.qianduan.net/css-font-shorthand-attribute-handbook.html

高效的css寫法中的一條就是使用簡寫。通過簡寫可以讓你的CSS文件更小，更易讀。而瞭解CSS屬性簡寫也是前端開發工程師的基本功之一。今天我們系統地總結一下CSS屬性的縮寫。

色彩縮寫

色彩的縮寫最簡單，在色彩值用16進制的時候，如果每種顏色的值相同，就可以寫成一個：

1	color：#113366

可以簡寫為

1	color：#136

所有用到16進制色彩值的地方都可以使用簡寫，比如background-color、border-color、text-shadow、box- shadow等。

2010年3月14日星期日

跨瀏覽器 CSS3 代碼生成器

跨瀏覽器 CSS3 代碼生成器: "

可憐天下 web developers 不知花了多少光陰在支援不同瀏覽器上。Internet Explorer 就甭提了，即使 Safari、Firefox 都支持的陰影（box-shadow）效果，偏偏都有不同寫法。結果就是同一件事情要寫好幾次，不幸要修改數值的話又要連續改數次。杯具啊……（還是都習慣了？）

原本簡單一個陰影效果往往要六行 code 才可以搞定：

.box_shadow {
    -moz-box-shadow: 1px 0px 4px #ffffff; /* FF3.5+ */
 -webkit-box-shadow: 1px 0px 4px #ffffff; /* Saf3.0+, Chrome */
         box-shadow: 1px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
             filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
         -ms-filter:'progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff')'; /* IE8 */
}

為瞭解決這個問題，我在此隆重介紹～ CSS3 Please.com－一個網上 跨瀏覽器 CSS3 代碼生成器。以後寫 CSS3，只需修改一處地方，網站自動幫你更新其他瀏覽器的代碼。支持的效果有圓角 border-radius、陰影 box-shadow、漸變、移動 transform等，而且還會最大限度地支援各個瀏覽器：Internet Explorer, Safari, Chrome, Firefox, Opera。比較意外的是，原來有不少效果在 Internet Explorer 下可以靠 filter (DXImageTransform) 來達成，如果要自己寫的話，大概要花不少時間查文檔吧。

CSS Sprites 產生器，改造網頁以加快圖示載入速度

CSS Sprites 產生器，改造網頁以加快圖示載入速度: "

csssprites

一般在做網頁時，都會加入許多圖示來讓整體網頁看起來更為活潑，不過你可能不知道，當一個頁面裡圖示越多，使用者就必須花更多時間來讀取這些零散的圖示，但透過CSS Sprites這項技術，可以幫你把所有圖示合併成一張大圖，在以CSS的定位方式來讓某圖示出現。

CSS Sprites Generator是一個幫你把圖片組合起來的網站工具，除了幫你組合起來之外，還會幫你算好位置並且顯示出來，讓你不必自己辛苦計算位置，因為CSS Sprites Generator會幫你搞定。

在介紹之前先來展示一個範例，讓大家瞭解這個功能到底是做什麼的，首先拿Yahoo!奇摩的網站來給大家看看背景圖。

▲ 圖中紅色框部分的圖示其實都是同一張圖片，當然不只這些...還有更多。

詳細請見：http://l.yimg.com/f/i/tw/hp/spirit/sprite_icos_090507.png

其實Google的首頁也有用CSS Sprite，只是數量上比較沒那麼明顯，使用CSS Sprite的目的是為了提升網頁頁面讀取的速度，可以有效降低圖片的HTTP請求數，尤其是你的網站有很多小圖示或圖片時，一張張上傳也很麻煩。

使用教學

CSS Sprites Generator的頁面大致上非常簡單易懂，最初會有三個，如果不夠可以點 'Need More »' （每次增加三個）將你的圖片加進去，在點 Generate。

csssprites-upload

上傳完成後，會出現合併完成的 PNG 檔以及範例頁面，下方也會有詳細的 CSS 設定教學，告訴你要設定多少的 background-position 才能讓該圖示顯示出來。

csssprites-results

網站網址：http://csssprites.com/

補充 …

CSS Sprite Generator | Project Fondue - http://spritegen.website-performance.org/ （可用壓縮檔）
這是類似的網頁服務，可以用壓縮檔的形式上傳比較大量的圖片，就不另外做介紹。

如需閱讀本文章，請至 http://www.freegroup.org/ 或查詢免費資源網路社群原始文章（http://www.freegroup.org/2010/02/css-sprites-generator/）。
本文章僅供免費電子發佈使用，如需印刷許可，請提出申請。轉載時必須附上原文章連結，謝謝。

跨瀏覽器 CSS3 代碼生成器

跨瀏覽器 CSS3 代碼生成器: "

原本簡單一個陰影效果往往要六行 code 才可以搞定：

.box_shadow {
    -moz-box-shadow: 1px 0px 4px #ffffff; /* FF3.5+ */
 -webkit-box-shadow: 1px 0px 4px #ffffff; /* Saf3.0+, Chrome */
         box-shadow: 1px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
             filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
         -ms-filter:'progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff')'; /* IE8 */
}

訂閱：文章 (Atom)

2010年10月12日 星期二

2010年9月19日 星期日

2010年8月15日 星期日

2010年5月21日 星期五

2010年4月27日 星期二

2010年4月14日 星期三

2010年4月1日 星期四

色彩縮寫

2010年3月14日 星期日

使用教學

相關文章：

2010年10月12日星期二

2010年9月19日星期日

2010年8月15日星期日

2010年5月21日星期五

2010年4月27日星期二

2010年4月14日星期三

2010年4月1日星期四

2010年3月14日星期日