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

2012/02/15

CSS3 Background Future

JaceJu 的噗浪上看到 CSS3 background 新的特性,可以讓瀏覽器控制背景圖片的一些屬性,頗好用的。


CSS3 Backgrounds of the Future
http://www.andismith.com/blog/2012/02/css-backgrounds-of-the-future/


設定背景圖片:
body {
   backgroud: bg.jpg;  /* 1024x768 */
}

以上的設定,當視窗大小如你預期相同時,畫面便會與最初的設計相同,但若視窗較大或較小,都可能會讓畫面走樣。


加上 background-size 屬性,讓瀏覽器決定圖片的大小:
body {
   backgroud: bg.jpg;
   background-size: contain; 
}

修改之後,背景圖片便會依照視窗大小做調整。

2011/06/11

轉貼:開元中最好的 web 開發資源

CoolShell.cn 網站上整理了不少網頁開發相關資源,包括:
  • 學習 HTML5 編成與設計
  • Server 端工具
  • PHP Framework 與工具
  • 資料庫
  • API 與即時資訊處理 (在線數據)
  • 線上軟體開發與媒體工具
  • 程式資源與版本管理工具
  • JavaScript Framework
  • JavaScript 移動與觸摸相關 framework
  • jQuery 外掛與相關資源
  • HTML5 視訊播放器
  • JavaScript 音訊處理與視覺化工具
  • JavaScript 2D、3D 圖形
  • JavaScript 與 HTML5 API (接口?)
  • 其他 JavaScript 工具
  • Client 端工具
  • CSS3 與字型資料
  • 網站樣板

忘了貼網址 XD

开源中最好的Web开发的资源

2010/07/12

幾個 CSS3 排版用語法

維基百科:互助客棧/技術/存檔/2010年5月 上面挖到寶,找到幾個 CSS 語法可以讓過長的列表自動分欄。

-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-width: auto;
-webkit-column-width: auto;
column-width: auto;
-moz-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
-moz-column-rule: ;
-webkit-column-rule: ;
column-rule: ;

效果如下:
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I

看不到效果可能是因為使用 IE 的關係,目前 Firefox 和 Chromium 都有支援這個語法,Opera 和 Safari 我就不太確定了。

如果還在使用 IE,請容我說一句話:使用 IE 的死亡率比新流感更高!請改用免費又安全的 Firefox 或是其他瀏覽器!

2010/01/16

CSS 版面設計樣板範例

最近要生一個網頁樣板出來,不過沒碰過 CSS 單單調整幾個區塊也讓我想撞牆,後來阿雷固推薦我一個網站很不錯,把常用的樣板整理出來,將 CSS 複製貼上就可以使用了。



網站名稱:Little Boxes
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html