搜尋

隨機推薦

23 十一月 2010
22 十一月 2011

用 text-shadow 我實現了在 Firefox 和 Chrome 瀏覽器下的文字陰影效果,可唯一遺憾的就是 text-shadow 是 CSS 3.0 的屬性,IE 還不能識別。昨天在逛朋友的 QQ 空間時無意中發現在 IE 瀏覽器下,他的留言板字體居然可以有陰影效果,用開發者工具一看才恍然大悟,原來是用 filter:shadow 濾鏡實現的效果。只怪我腦子一直沒有轉過彎來,一心想著 text-shadow,把濾鏡這一強大手法給忘了。

首先說明一下,在這裡討論的均是 Windows XP 操作系統下的情況,其他操作系統下我還沒有機會進行測試。

首先讓我們來看看什麼是 OpenType 字體:(via Wikipedia

OpenType,是一種可縮放字型(scalable font)電腦字體類型,採用PostScript格式,是美國微軟公司與Adobe公司聯合開發,用來替代TrueType字型的新字型。這類字體的文 件擴展名為 .otf,類型代碼是OTTO,現行標準為 OpenType 1.4。

下面是一些 OpenType 字體的例子:

Smashing Magazine 為了激發 Web 設計者對 CSS3 的興趣,上月組織了一次 CSS3 設計賽,最終有 5 位設計師獲獎,獲獎作品體現了 CSS3 技巧的原創性與獨特性,同時展示了 CSS3 的強大的功能,這些作品基於純 CSS3 技術,並不借助 JavaScript 或其它技術。

第一名: CSS3 圖表

CSS3 Charts [ 預 覽 | 下 載 ]

該設計試驗了 CSS3 在圖表方面的應用,不借助任何 JavaScript 和圖片。用到了 CSS3 強大的選擇器功能:nth-child 和 :target,同時用到了過渡,漸變等技術,由來自美國的 Sean Oh 設計。

Css3-charts-full 1 in CSS3 Design Contest Results

Css3-charts-full 2 in CSS3 Design Contest Results

 

html5 demos

你最近可能已經聽到了很多關於Flash是面臨垂死掙扎的技術以及它將如何很快被HTML5的取代。就個人而言,我認為HTML5會慢慢 取代一些Flash的東西,但Flash會永遠有它的一席之地,特別是開發複雜的遊戲和豐富的互聯網應用。如果你還沒有看到HTML5 動畫是怎麼樣做的,我這裡收集了10個演示,顯示了它的一些出色的動畫能力。 那麼,你認為——HTML5會取代Flash嗎?

1 Video介紹

引用我翻譯文檔《在HTML5頁面中嵌入音頻和視頻》中的介紹文字:「當今,在網頁上嵌入視頻且所有用戶不管使 用任何瀏覽器或者操作系統都能看到的唯一可靠方法是使用Flash。這需要Adobe Flash插件,並且結合<object>和<embed>標籤。

大多數用戶已經安裝了Flash插件(事實上,大概95%的上網用戶都裝有Flash的某個版本),但HTML 5的支持者正在推動一個開放的,不需要任何插件的視頻標準。這就是HTML 5的新標籤<video>帶來的構想,他提供了一個嵌入視頻(以及與其交互)而不需要類似Flash的私有插件的方法。

不幸的是,視頻並非那麼簡單。不僅僅是瀏覽器需要理解<video>標籤,而且需要一個必要的編碼譯碼器來播放視頻。明顯的解決方法只 能是HTML 5規範的締造者們選擇一個視頻編 碼譯碼器,並且讓每一個瀏覽器製造商執行。

 

HTML5 的Canvas 對象將改變JavaScript 的使命,使之成為HTML5 下強大的動畫腳本編寫工具。本文介紹了8 個你從未見過的,基於HTML5 Canvas 和JavaScript 的動畫,這些令人難以置信的效果將使你對HTML5 徹底折服。需要指出的是,這些都是瀏覽器的原生動畫,無需任何插件。


Tunnelers



純JavaScript + HTML5 Canvas 生成的交互動畫,難以置信。

我們生活在一個幸福又痛苦的時代,有太多的瀏覽器可以使用,對 Web 開發與設計者而言,你有義務保證你的設計兼容所有主流瀏覽器。然而跨瀏覽器測試是件相當複雜的事,涉及不同的瀏覽器,不同的版本,不同的平台。本文介紹了 與跨瀏覽器兼容測試有關的大量資源。

在線測試資源

Browsershots

是一個備受歡迎的免費在線跨瀏覽器測試工具,包含各種平台的各種瀏覽器,會為你的網站截圖,因為太受歡迎,所以要排隊。

browsershots Complete Guide to Cross Browser Compatibility Check

HTML5的是給網頁設計師和開發新的功能,是事物的幻想與以前的版本的HTML。網頁現在將使用更多的語義與結構的特定標記。視覺元素如圓角現在 內置的,因此是能夠創造拖放互動。即使是不完全支持HTML5的主要瀏覽器中,有那些是推進和試驗的新功能。為了鼓勵你做同樣的和準備你的未來,我們』 VE的圍捕 15個有用的HTML5的教程和速查表.

教學

如何使一個 HTML5的iPhone應用程序

html5 tutorial

W3C 在 1 月 22 日發佈了最新的 HTML 5 工作草案。HTML 5 工作組包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及數百個其他的開發商。HTML 5 中的一些新特性:嵌入音頻、視頻、圖片的函數、 客戶端數據存儲,以及交互式文檔。其他特性包括新的頁面元素,比如 <header>, <section>, <footer>, 以及 <figure>。

通過制定如何處理所有 HTML 元素以及如何從錯誤中恢復的精確規則,HTML 5 改進了互操作性,並減少了開發成本。

按字母順序排列

標籤 描述 html4 html5
<!--...--> 定義註釋。 4 5
<!DOCTYPE>  定義文檔類型。 4 5
<a> 定義超鏈接。 4 5
<abbr> 定義縮寫。 4 5
<acronym> HTML 5 中不支持。定義首字母縮寫。 4  
<address> 定義地址元素。 4 5
<applet> HTML 5 中不支持。定義 applet。 4  
<area> 定義圖像映射中的區域。 4 5
<article> 定義 article。   5
<aside> 定義頁面內容之外的內容。   5
<audio> 定義聲音內容。   5
<b> 定義粗體文本。 4 5
<base> 定義頁面中所有鏈接的基準 URL。 4 5
<basefont> HTML 5 中不支持。請使用 CSS 代替。 4  
<bdo> 定義文本顯示的方向。 4 5
<big> HTML 5 中不支持。定義大號文本。 4  
<blockquote> 定義長的引用。 4 5
<body> 定義 body 元素。 4 5
<br> 插入換行符。 4 5
<button> 定義按鈕。 4 5
<canvas> 定義圖形。   5
<caption> 定義表格標題。 4 5
<center> HTML 5 中不支持。定義居中的文本。 4  
<cite> 定義引用。 4 5
<code> 定義計算機代碼文本。 4 5
<col> 定義表格列的屬性。 4 5
<colgroup> 定義表格列的分組。 4 5
<command> 定義命令按鈕。   5
<datalist> 定義下拉列表。   5
<dd> 定義定義的描述。 4 5
<del> 定義刪除文本。 4 5
<details> 定義元素的細節。   5
<dfn> 定義定義項目。 4 5
<dir> HTML 5 中不支持。定義目錄列表。 4  
<div> 定義文檔中的一個部分。 4 5
<dl> 定義定義列表。 4 5
<dt> 定義定義的項目。 4 5
<em> 定義強調文本。 4 5
<embed> 定義外部交互內容或插件。   5
<fieldset> 定義 fieldset。 4 5
<figcaption> 定義 figure 元素的標題。   5
<figure> 定義媒介內容的分組,以及它們的標題。   5
<font> HTML 5 中不支持。 4  
<footer> 定義 section 或 page 的頁腳。   5
<form> 定義表單。 4 5
<frame> HTML 5 中不支持。定義子窗口(框架)。 4  
<frameset> HTML 5 中不支持。定義框架的集。 4  
<h1> to <h6> 定義標題 1 到標題 6。 4 5
<head> 定義關於文檔的信息。 4 5
<header> 定義 section 或 page 的頁眉。   5
<hgroup> 定義有關文檔中的 section 的信息。   5
<hr> 定義水平線。 4 5
<html> 定義 html 文檔。 4 5
<i> 定義斜體文本。 4 5
<iframe> 定義行內的子窗口(框架)。 4 5
<img> 定義圖像。 4 5
<input> 定義輸入域。 4 5
<ins> 定義插入文本。 4 5
<keygen> 定義生成密鑰。   5
<isindex> HTML 5 中不支持。定義單行的輸入域。 4  
<kbd> 定義鍵盤文本。 4 5
<label> 定義表單控件的標註。 4 5
<legend> 定義 fieldset 中的標題。 4 5
<li> 定義列表的項目。 4 5
<link> 定義資源引用。 4 5
<map> 定義圖像映射。 4 5
<mark> 定義有記號的文本。   5
<menu> 定義菜單列表。 4 5
<meta> 定義元信息。 4 5
<meter> 定義預定義範圍內的度量。   5
<nav> 定義導航鏈接。   5
<noframes> HTML 5 中不支持。定義 noframe 部分。 4  
<noscript> 定義 noscript 部分。 4 5
<object> 定義嵌入對象。 4 5
<ol> 定義有序列表。 4 5
<optgroup> 定義選項組。 4 5
<option> 定義下拉列表中的選項。 4 5
<output> 定義輸出的一些類型。   5
<p> 定義段落。 4 5
<param> 為對象定義參數。 4 5
<pre> 定義預格式化文本。 4 5
<progress> 定義任何類型的任務的進度。   5
<q> 定義短的引用。 4 5
<rp> 定義若瀏覽器不支持 ruby 元素顯示的內容。   5
<rt> 定義 ruby 註釋的解釋。   5
<ruby> 定義 ruby 註釋。   5
<s> HTML 5 中不支持。定義加刪除線的文本。 4  
<samp> 定義樣本計算機代碼。 4 5
<script> 定義腳本。 4 5
<section> 定義 section。   5
<select> 定義可選列表。 4 5
<small> 定義小號文本。 4 5
<source> 定義媒介源。   5
<span> 定義文檔中的 section。 4 5
<strike> HTML 5 中不支持。定義加刪除線的文本。 4  
<strong> 定義強調文本。 4 5
<style> 定義樣式定義。 4 5
<sub> 定義下標文本。 4 5
<summary> 定義 details 元素的標題。   5
<sup> 定義上標文本。 4 5
<table> 定義表格。 4 5
<tbody> 定義表格的主體。 4 5
<td> 定義表格單元。 4 5
<textarea> 定義 textarea。 4 5
<tfoot> 定義表格的腳註。 4 5
<th> 定義表頭。 4 5
<thead> 定義表頭。 4 5
<time> 定義日期/時間。   5
<title> 定義文檔的標題。 4 5
<tr> 定義表格行。 4 5
<tt> HTML 5 中不支持。定義打字機文本。 4  
<u> HTML 5 中不支持。定義下劃線文本。 4  
<ul> 定義無序列表。 4 5
<var> 定義變量。 4 5
<video> 定義視頻。   5
<xmp> HTML 5 中不支持。定義預格式文本。 4  

這篇文章介紹了一種通過CSS3實現的視差(Parallax)效果,這個效果通過在一個元素上疊加多個背景圖片,並使用-webkit- transition-屬性來實現。

這個效果是仿照Chirs Coyier的視差教程實現的,經過Chirs的允許使用了其中的星空背景。

 

運行效果:

在這裡觀看:http://www.fofronline.com/experiments/parallax/#experiment

該 效果可以在Safari 4 Beta和Google Chrome中正常預覽,實現該效果無需JavaScript。
(但是在IE7及以下版本 中無法觀看)


 

第 3 頁,共 5 頁

Please publish modules in offcanvas position.