以圖明志

CSS

使用CSS3線性漸變實現圖片閃光劃過效果

線性漸變linear-gradient
在百度音樂 http://music.baidu.com/ 看到這么一個圖片效果,當鼠標移上去的時候,會有一道閃光在圖片上劃過,效果挺酷炫的。大體思想是,設計一個透明層i,skewx在X軸上做了負25度的變形,背景顏色用的是CSS3的線性漸變linear-gradient,然后hover的時候,設置0.5s的動畫時間。

CSS

可以嘗試用Google Font API來擺脫網頁字體的單調

僅僅拋磚引玉
在網頁設計里,字體的顯示是個問題。最普遍用的是宋體,但是宋體在 Win 7 下的表現真的很難看。雅黑端莊一些,但是隨著字體大小,感覺漢字的大小也會有區別。小站現在用的字體是是宋體 + Arial/Georgia,因為習慣了也沒多在意,其實對于英文字體有其它更好的選擇。

CSS

常見的瀏覽器Hack技巧總結

總結是為了更好地記憶
如果你經常需要做前端頁面,那么你一定多多少少需要解決頁面的瀏覽器兼容問題。而瀏覽器兼容問題大部分也集中在對IE系列的兼容。這里就總結一下對IE系列的CSS Hack,記錄一下,方便以后查閱。瀏覽器對css的解析是從前到后的,并且采用最后一個樣式聲明。

CSS

活潑的CSS 3動態氣泡按鈕制作

完全CSS 3實現
這一次,我們正在創造一個有用的設置與對CSS3的多重背景和動畫的力量動畫按鈕。通過此按鈕包,您可以很容易地變成一個動畫按鈕,在您的網頁上的任何鏈接只是指定一個類名。沒有必要JavaScript。四色主題和三個大小也可通過分配額外的類名。

CSS

如何組織與管理CSS文件

方便管理、修改和多人合作
CSS的管理一直是個讓人有點頭疼的問題,沒有絕對的對錯,無非就是為了方便管理、修改和多人合作罷了;網上流行的CSS管理方式講來講去無非也就以下幾種:對于單個頁面那種非常簡單的,其實也可以直接把所有的樣式寫在一個外部文件里就行,或者直接寫在頁面的頭部里,沒有必要去糾結繁瑣的CSS文件管理。

CSS

最優的浮動清除方案之一推薦

W3標準不變,清除浮動不止
對于日新月異的WEB開發技術和瀏覽器更新頻率來說,清除浮動已然是一個被人嚼碎了的話題。說是這些年過去了,有關float的地方,還依然少不了清除浮動的標簽和css代碼。W3C整天研究html5,就不能抽出點時間來把這種煩人的小細節修正一下嗎?抱怨歸抱怨,飯還得吃,錢還得掙,清除浮動就不能停止。

CSS

收藏一個很有愛的CSS背景設計

閑逛收獲
有一次在網上閑逛,看到一個很有愛的CSS,地址:F::Archieve。這里扒下來,保存一下~效果可以看本頁的演示,在右下角。圖片如下,覺得好可以右鍵卷走。

CSS

IE 6最小最大寬度與高度的寫法

CSS表達式的使用
最小最大寬度,最小最大高度,這是CSS很常見的一個要求。在現代瀏覽器中,一個 min-height,min-width 就可以解決問題,但是在IE系列,比如IE6則比較繁瑣一點。下面總結一些IE 6下的最小最大寬度與高度的一些寫法。

CSS

CSS讓圖片垂直居中的幾種技巧

三種方法介紹
在網頁設計過程中,有時候會希望圖片垂直居中的情況。而且,需要垂直居中的圖片的高度也不確定,這就會給頁面的布局帶來一定的挑戰。下面總結了一下,曾經使用過的幾種方法來使圖片垂直居中,除了第一種方法只限于標準瀏覽器外,另外兩種方法的兼容性還不錯。

CSS

用CSS3可以很簡單地實現文字漸變效果

background-clip , text-fill-color
首先要說明,你的瀏覽器支持CSS3的話,才能看到正確的演示效果。如果你現在用的瀏覽器是Chrome、Safari等,就是你的瀏覽器支持background-clip + text-fill-color等CSS3屬性,那么你可以看到下面文字漸變的漂亮效果。文字漸變本身就是裝飾性的功能,所以,本著漸進增強的原則,我們在實際項目中其實是可以大膽使用的。

CSS

CSS樣式權重的級聯cascade的概念

權重高低問題取決于CSS選擇符優先級的的計算結果
我們知道,firefox在眾多瀏覽器中是對css 2高度兼容的一款瀏覽器,那是我能夠編寫一個中型b2b網站的時候(并不能說是我遇到過的難題)在禪意花園中看到的一個案例,說的是某個菜單在css中定義了以后只能在firefox中正常顯示。因為那個css涉及的濾鏡太多,而且還奧css中"級聯(cascade)"這種強大功能的支持。

CSS

你是否徹底了解margin屬性?

邊界,元素周圍生成額外的空白區
寫css,你少不了與margin打交道。你真的了解margin嗎?你知道margin有什么特性嗎?你知道什么是垂直外邊距合并?margin在塊元素、內聯元素中的區別?什么時候該用padding而不是margin?你知道負margin嗎?你知道負margin在實際工作中的用途嗎?常見的瀏覽器下margin出現的bug有哪些?

CSS

做一個所見即所得的CSS效果

將style設置成contenteditable會有好事情出現
style 也是標簽(在非ie內核的瀏覽器中支持),我們將style設置成 contenteditable的時候,那么那的內容就可以編輯了。仔細的體驗下,如果我們將背景修改成紅色的。那么只要書寫完,立馬呈現。哇靠,這很方便我們以后寫那種動態的編輯器效果呢,等有時間的話,我再試試。

CSS

一些比較高效的CSS寫法建議

避免一些低效的key selectors去匹配大量的元素
當瀏覽器解析html的時候,它構造了一個文檔樹來展現所有被顯示的元素。 它在特定的樣式表中去匹配元素,根據標準的css的層疊,繼承和順序規則, 在mozilla的實現中(可能其他的也是這樣),對于每一個元素,css引擎通過規則去尋找匹配,css引擎評估每一個規則是從右到左的,從最右的selector開始, 也稱之為key selector,直到找到匹配為止。

CSS

IE6支持!important嗎?

IE6對!important單個的類是支持的
設了!important的樣式的屬性優先于id選擇器和class選擇器。,比如id為"Main"的div在它的Class設背景色為紅色,,id選擇器下又設了背景色為藍色,照css的"就近原則",它的背景色應該是紅色了,因為id選擇器的優先級高于class選擇器,但是,一旦class里設了"!important",哈哈,id,一邊去吧。

CSS

用IE濾鏡實現的一些特效

透明度/陰影/漸變等
CSS3是當下非?;鸬囊粋€話題,很多瀏覽器都已經開始支持這一特性,然后IE這個擁有龐大用戶群體的平臺,卻無法提供這樣的支持,即便是IE9發布,也無法改變這一事實,然而,幸運的是,IE并非在這方面毫無作為,很多有經驗的開發者都聽知道IE的濾鏡,看看下面的內容將告訴大家,IE是如何通過這些濾鏡,實現CSS3效果的。
1 / 4 首頁 < Prev 1 2 3 4 Next > 尾頁 頁碼:
云南快乐十分走势一定牛 房地产股票融资 时时乐开奖结果 分分彩后二走势图怎么看 山西11选5任三遗漏 江苏体彩七位数开奖官网 沪深股票价格排名 陕西省快乐十分开奖结果今天 吉林11选5 东土科技股票股吧 安微11选5爱彩人彩票网