隨筆分類 - CSS3
樣式設(shè)置
摘要:在CSS中,我們使用 ::first-line 選擇器來給元素第一行內(nèi)容應(yīng)用樣式。但目前還沒有像 ::nth-line、::nth-last-line 甚至 ::last-line 這樣的選擇器。實際上這期選擇器在某些情況下是非常有用的,Lining.js 提供了這樣的功能。
閱讀全文
摘要:tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 圖片濾鏡來實現(xiàn)照片的移軸鏡頭效果。使用非常簡單,使用 data 屬性配置參數(shù)。可以自定義對焦點的位置、模糊半徑、焦點的區(qū)域大小以及方向。
閱讀全文
摘要:今天我們要為您展示如何創(chuàng)建一些簡單又不失時尚的圖片說明懸停效果。我們的想法應(yīng)用懸停效果來顯示圖片對應(yīng)的標題,作者和鏈接按鈕。對于一些的效果,我們將使用3D變換。這樣做的目的是保持奇妙的效果,并為許多不同的變化提供了靈感。
閱讀全文
摘要:這里集合了幾款很棒的制作網(wǎng)頁滾動動畫的 JavaScript 庫和插件。它們中,有的可以幫助你在頁面滾動的時候添加動感的元素動畫,有的則是實現(xiàn)目前非常流行的全屏頁面切換動畫。相信借助這些插件,你也可以讓網(wǎng)站變得高大上起來。
閱讀全文
摘要:這是一個基于 CSS3 動畫實現(xiàn)的圖片過渡效果,共有 Flip、Rotation、Multi-flip、Cube、Unfold 等6種效果,它們將證明 CSS3 Transform 和 Transition 屬性的強大能力。隨著越來越多的瀏覽器對 CSS3 支持的不斷完善,設(shè)計師和開發(fā)者們有了更多的選擇。
閱讀全文
摘要:Web 界面上交互的方式很多,只要你去探索,你會發(fā)現(xiàn)很多讓你眼前一亮的想法。Codrops 最近發(fā)布了一組懸停效果,總共分為兩組,多達30種不同的風格。為了讓效果盡可能的平滑,最好不要在元素上使用變換以免影響布局。在第二組中采用了 SVG 動畫,這也是目前比較流行的方式。
閱讀全文
摘要:《Web 前端開發(fā)精華文章推薦》自2011年6月20號發(fā)布第一期以來,歷經(jīng)三年半,總共發(fā)布了30期。今天這篇是2014年第10期(總第31期),希望你能在這里發(fā)現(xiàn)有用的資料。夢想天空博客關(guān)注前端開發(fā)技術(shù),分享各類能夠提升網(wǎng)站用戶體驗的優(yōu)秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技術(shù)應(yīng)用。
閱讀全文
摘要:如果你想快速制作出一個優(yōu)秀的網(wǎng)站,網(wǎng)站模板一定是必不可少的。網(wǎng)頁設(shè)計師和開發(fā)人員也可以從網(wǎng)站模板入手,學(xué)習(xí)先進的布局方式和編碼風格。下面這個列表為大家挑選了15款免費的 HTML5/CSS3 響應(yīng)式網(wǎng)頁模板,相信會有你需要的。
閱讀全文
摘要:Schema 是一個模塊化的,響應(yīng)式的前端框架,方便,快捷地幫助您迅速啟動你的 Web 項目。Schema 配備完整的創(chuàng)建多個視圖的能力。從桌面顯示器到移動設(shè)備,它的12列網(wǎng)格提供強大的靈活性。Schema 借助了強大的 LESS,這使得代碼結(jié)構(gòu)干凈簡潔,超級容易維護。
閱讀全文
摘要:網(wǎng)絡(luò)有很很多的 CSS 工具和教程可用,它可以幫助設(shè)計人員和開發(fā)人員輕松、快速地學(xué)習(xí) CSS 技術(shù)。這些工具中在高效開發(fā) Web 應(yīng)用程序中發(fā)揮重要作用。在這篇文章中,我們收集了40個最好的 CSS 工具用于加速網(wǎng)站開發(fā),如創(chuàng)建 CSS 菜單,動畫,三維模型,響應(yīng)式頁面,動畫按鈕等等。
閱讀全文
摘要:如果能把 CSS 運用好,我們創(chuàng)作出好的交互和效果的可能性大大增加。這篇文章中,我想與大家分享一組結(jié)合 jQuery & CSS 制作的充滿金屬質(zhì)感的選擇框效果,絕對是超級精美的效果。
閱讀全文
摘要:最近給大家分享 CSS3 效果比較多,都是充分運用了 CSS3 來實現(xiàn)的。通過 CSS3 的新特性,我們創(chuàng)作出好的交互和效果的可能性大大增加。這篇文章中,我想與大家分享使用 CSS3 過渡特性實現(xiàn)的信封效果的聯(lián)系表單。
閱讀全文
摘要:在這篇文章中,我們?yōu)榇蠹彝扑]12個創(chuàng)建響應(yīng)式布局的優(yōu)秀網(wǎng)格框架。如果網(wǎng)頁設(shè)計和開人員采用了正確的工具集,并基于一個靈活的網(wǎng)格架構(gòu),以及能夠把響應(yīng)圖像應(yīng)用到到設(shè)計之中,那么創(chuàng)建一個具備響應(yīng)式的網(wǎng)站并不一定是一項艱巨的任務(wù)。enjoy!
閱讀全文
摘要:通過 CSS3 的新特性,我們創(chuàng)作出好的交互和效果的可能性大大增加。這篇文章中,我想與大家分享一些 CSS3 動畫按鈕效果。我們的想法是創(chuàng)建一個具有不同風格的一些動畫鏈接元素,鼠標懸停時有動畫效果和活動狀態(tài)。
閱讀全文
摘要:作為最重要的導(dǎo)航展示形式之一,面包屑導(dǎo)航能夠讓用戶更清楚的知道他們所在頁面的層次結(jié)構(gòu),讓他們可以方便的導(dǎo)航到上一層頁面。在本教程中,您將學(xué)習(xí)如何使用 CSS3 技術(shù)創(chuàng)建自己的面包屑導(dǎo)航效果。
閱讀全文
摘要:CSS3 里引入的偽元素讓 Web 開發(fā)人員能夠在不需要額外添加 HTML 標簽的情況下制作出復(fù)雜的視覺效果。例如,:before 和 :after 這個兩個 CSS3 偽元素就可以幫助你實現(xiàn)很多有趣的效果。本教程將告訴你如何使用 CSS3 為元素創(chuàng)建一組漂亮的圖片堆疊效果。
閱讀全文
摘要:
這里是精選的12個很炫的 CSS3 效果。CSS3 是對 CSS 規(guī)范的一個很大的改善和增強,它使得 Web 開發(fā)人員可以很容易的在網(wǎng)站中加入時尚的效果。以前很多需要編寫復(fù)雜的 JavaScript 代碼才能實現(xiàn)的效果,如今只需要簡單的寫幾句 CSS3 代碼就能實現(xiàn)。
閱讀全文
這里是精選的12個很炫的 CSS3 效果。CSS3 是對 CSS 規(guī)范的一個很大的改善和增強,它使得 Web 開發(fā)人員可以很容易的在網(wǎng)站中加入時尚的效果。以前很多需要編寫復(fù)雜的 JavaScript 代碼才能實現(xiàn)的效果,如今只需要簡單的寫幾句 CSS3 代碼就能實現(xiàn)。
閱讀全文
摘要:《Web 前端開發(fā)精華文章推薦》2014年第9期(總第30期)和大家見面了。夢想天空博客關(guān)注 前端開發(fā) 技術(shù),分享各類能夠提升網(wǎng)站用戶體驗的優(yōu)秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技術(shù)應(yīng)用,推薦優(yōu)秀的 網(wǎng)頁設(shè)計 案例,共享精美的設(shè)計素材和優(yōu)秀的 Web 開發(fā)工具,希望這些精心整理的前端技術(shù)文章能夠幫助到您。
閱讀全文
摘要:Arctext.js 是基于 Lettering.js 的文本旋轉(zhuǎn)插件,根據(jù)設(shè)置的旋轉(zhuǎn)半徑準確計算每個字母的旋轉(zhuǎn)弧度并均勻分布。雖然 CSS3 也能夠?qū)崿F(xiàn)字符旋轉(zhuǎn)效果,但是要讓安排每個字母都沿著彎曲路徑排布相當?shù)膹?fù)雜,結(jié)合 Arctext.js 則可以輕松實現(xiàn)這個效果。
閱讀全文
摘要:HTML5 和 CSS3 網(wǎng)站模板存在巨大的需求,網(wǎng)頁設(shè)計師們都喜歡現(xiàn)成的網(wǎng)站模板,能夠輕松地設(shè)計和開發(fā)美觀,吸引眼球的網(wǎng)站。如果你正在尋找響應(yīng)式的 HTML5 & CSS3 模板,那么你找對地方了,這里羅列了30套免費的響應(yīng)式 HTML5 & CSS3 模板,可以免費下載。
閱讀全文

浙公網(wǎng)安備 33010602011771號