隨筆分類 - CSS3
樣式設置
摘要：《CSS3 實用技巧》之實現黑白圖像效果。CSS3 規范讓前端開發人員能夠創建出各種復雜的視覺效果，使網站更好看，更能夠吸引用戶訪問。
閱讀全文
摘要：CSS3 Gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是針對線性漸變來剖析其具體的用法。其共有三個參數，第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。
閱讀全文
摘要：text-shadow 曾經在 CSS2 中就出現過，但在 CSS 2.1版本中又被拋棄了，現在 CSS3 版本又重新撿回來了。這說明 text-shadow 這個屬性非常值得我們做前端的人員重視，而且 CSS3 這么多屬性中，我個人覺得 text-shadow 運用得是最多的一個屬性，作為我們前端人員我覺得有必要學習并掌握這個 text-shadow 屬性。
閱讀全文
摘要：前一篇文章詳細介紹了CSS3 RGBA 的用法，今天這篇文章我們在一起來看看 CSS3 中用于實現圓角效果的 border-radius 屬性的具體用法。以前制作圓角效果，我們都需要使用多張圓角圖片做為背景分別應用到每個角上，我應用最多的就是在需要圓角的元素標簽中加四個空標簽，然后在每個空標簽中應用一個圓角的背景位置，然后在對這幾個應用了圓角的標簽進行定位到相應的位置，非常繁瑣。
閱讀全文
摘要：顏色在 CSS 中有三種定義方式：使用顏色方法（RGB、RGBA、HSL、HSLA），十六進制顏色值和預定義的顏色名稱。RGBA 是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha（不透明度）的色彩空間。雖然它有的時候被描述為一個顏色空間，但是它其實僅僅是 RGB 模型附加了額外的信息從而形成了我們今天需要討論的 RGBA。如果需要更詳細的解說，大家就跟著我一起往下看吧。
閱讀全文
摘要：這篇文章收集了Google 前端工程師 Addy Osmani 分享在 Speaker Deck 的15個精彩幻燈片，每個都是精華中的精華，真正的干貨！相信你認真閱讀之后一定會有收獲！Addy Osmani 創建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator，出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》兩本書籍，還是著名 jQuery、Modernizr 以及 Backbone.js 框架的貢獻者。
閱讀全文
摘要：這篇文章是前端優秀講座和討論列表系列連載第二篇，包含未來的前端開發趨勢和 CSS 開發兩部分內容。前端領域發展迅速，只有時刻掌握前端發展趨勢和技術動態，學習前沿的開發思想和理念才能讓自己跟上時代的步伐，保持自己的技術優勢。
閱讀全文
摘要：這是《CSS3 探索發現》系列文章的第二篇，分享一組閃亮的半透明 CSS3 按鈕效果。CSS3 為網頁設計引入了眾多強大的新功能，讓設計和開發人員能夠輕松的創作出精美的界面效果。推薦閱讀：《CSS3 探索發現系列一：一組夢幻般的 CSS3 動畫按鈕效果》。這些閃亮的按鈕使用了兩個 DIV 實現，一個是按鈕主要部分，一個是用來顯示光澤。下面是在線演示，很漂亮吧？把鼠標放在按鈕上試試，有驚喜哦！（溫馨提示：在 Chrome，Firefox 和 Safari 瀏覽器中效果最佳。
閱讀全文
摘要：Profound Grid 是一個實現固定和流動布局的網格系統。內置 SCSS，帶給你靈活性和全面的控制。你可以讓讓個流動或者固定，還可以根據需要為每個媒體添加布局。更改列和間隔寬度，并根據需要刪除或添加列。這個網格系統讓您的的標記語義化，沒有任何“grid_x”類。除非你想使用它們，在這種情況下，它們也可以包括在內。深刻的網格使用負外邊距計算列。與其他網格系統不同，流體布局在每一個瀏覽器看起來幾乎完全一樣。
閱讀全文
摘要：過去的這一年，CSS3 被更多的人關注和學習，應用得越來越多。這篇文章挑選出的2012年最值得關注的 CSS3 教程能夠幫助你更好的掌握 CSS3 的實際使用。CSS3 提供了眾多強大的視覺效果特性，它使得 Web 開發人員可以很容易的在網站中加入時尚的效果。以前很多需要編寫 JavaScript 才能實現的效果，如今只需要簡單的寫幾句 CSS3 代碼就能實現。
閱讀全文
摘要：2012年，Web 開發領域繼續在快速的發展，HTML5 仍然在展示其跨平臺的優越性，CSS3 被人們更多的應用到實際項目中，響應式設計（Responsive Design）技巧也被人越來越多的人熟知和使用。技術的快速發展讓 Web 開發人員學習起來不知所措，幸運的是，很多優秀的開發者和設計人員在努力尋找各種有特色的解決方案。 因此，我們有了很多優秀的小工具和庫，每一個都是用來解決特定的問題或維護一組特定的項目。這篇文章收集了2012年度新發布的最具有代表性 Web 前端開發工具和框架，這是一個非常值得收藏的工具列表。
閱讀全文
摘要：夢想天空博客即日起推出《CSS3 探索發現》系列文章，分享和展示各種讓人驚奇的 CSS3 示例。夢天空博客關注 前端開發 技術，分享各種增強網站用戶體驗的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技術應用，推薦優秀的 網頁設計 案例，共享精美的設計素材和優秀的 Web 開發工具。
閱讀全文
摘要：2012年，Web 開發領域繼續在快速的發展，HTML5 仍然在展示其跨平臺的優越性，CSS3 被人們更多的應用到實際項目中，響應式設計（Responsive Design）技巧也被人越來越多的人熟知和使用。這篇文章收集了2012年度新發布的最具有代表性 Web 前端開發工具和框架，這是一個非常值得收藏的工具列表，從功能全面的 IDE 到美觀、充滿異國情調的小框架，小工具等等。他們能夠幫助你降低 Web 開發過程中的復雜度，節省時間和精力。
閱讀全文
摘要：2012年涌現出眾多獨特的，令人印象深刻的 CSS 網站作品，要從中挑選出年度應用 CSS 的最佳網站列表一個嚴峻的挑戰，因為 CSS 涵蓋了媒體查詢（CSS3 Media Queries）、CSS 動畫和3D轉換等眾多特性。我根據過去 CSS 典型的應用場景挑選了其中的優秀作品組成一個列表，如果你有收藏更好的作品，歡迎留言向大家分享。
閱讀全文
摘要：
2012年12月12日，【《Web 前端開發人員和設計師必讀文章》系列十二】和大家見面了。夢想天空博客關注 前端開發 技術，分享各種增強網站用戶體驗的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技術應用，推薦優秀的 網頁設計 案例，共享精美的設計素材和優秀的 Web 開發工具，希望這些精心推薦的文章能夠幫助到您。
閱讀全文
2012年12月12日，【《Web 前端開發人員和設計師必讀文章》系列十二】和大家見面了。夢想天空博客關注 前端開發 技術，分享各種增強網站用戶體驗的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技術應用，推薦優秀的 網頁設計 案例，共享精美的設計素材和優秀的 Web 開發工具，希望這些精心推薦的文章能夠幫助到您。
閱讀全文
摘要：在 CSS2 中，你可以為不同的媒介設備（如屏幕、打印機）指定專用的樣式表，而現在借助 CSS3 的 Media Queries 特性，可以更為有效的實現這個功能。你可以為媒介類型添加某些條件，檢測設備并采用不同的樣式表。例如，你可以把用于大屏幕上顯示的樣式和用于移動設備的專用樣式放在一個樣式文檔中，這樣，在不改變文檔內容的情況下，不同的設備可以使用不同的界面外觀。閱讀這篇文章學習 CSS3 Media Queries 的基本功能和國外使用 CSS3 Media Queries 的優秀網站案例。
閱讀全文
摘要：之前向大家介紹8款優秀的 jQuery 加載動畫和進度條插件，今天這篇文章向大家推薦10個純 CSS3 實現精美加載進度條動畫效果的方案。加載動畫和進度條在網站和 Web 應用中的使用非常流行，特別是在使用 Ajax 技術加載內容的應用場景中，使用時尚的加載動畫和進度條告訴用戶內容正在加載中是一種非常友好的方式。
閱讀全文
摘要：這篇文章收集了7個非常絢麗的 CSS3 效果應用演示，這些示例演示了 CSS3 各種新特性的強大能力。隨著越來越多的瀏覽器對 CSS3 支持的不斷完善，設計師和開發者們有了更多的選擇，以前需要使用 JavaScript 才能實現的各種很酷的界面效果和動畫，如今使用純 CSS 代碼就可以很容易實現。相信下面這些 CSS3 演示會讓你感到吃驚！
閱讀全文
摘要：CSS3 是對 CSS 規范的一個很大的改善和增強，它使得 Web 開發人員可以很容易的在網站中加入時尚的效果。以前很多需要編寫復雜的 JavaScript 代碼才能實現的效果，如今只需要簡單的寫幾句 CSS3 代碼就能實現。今天這篇文章就向大家分享14個讓人驚嘆的 CSS3 特性應用演示，讓大家感受一下 CSS3 的魅力。
閱讀全文
摘要：這篇文章繼續給大家帶來最近兩個月發布在《夢想天空》的優秀文章，特別推薦給 Web 開發人員和設計師閱讀。夢天空博客關注 前端開發 技術，展示前沿 HTML5 和 CSS3 技術應用，分享實用的 jQuery 插件，推薦優秀的 網頁設計 案例，共享精美的 設計素材 和優秀的 Web 開發工具。希望這些文章能幫助到您。
閱讀全文
浙公網安備 33010602011771號