整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          你未必知道的49個CSS知識點

          你未必知道的49個CSS知識點

          者:老姚,《JS正則迷你書》的作者 https://github.com/qdlaoyao/css-gif

          本文的每一條,都是我曾經發過的掘金沸點,其中有很多條超過了百贊(竊喜)。鑒于時不時有童鞋翻我以前的沸點,因此,本文收集了個人目前發過的所有CSS知識點動圖,以便閱讀。

          需要說明的是,順序仍是按當時發布順序羅列的,還沒有系統的總結,多多包涵。另外這里,老姚謝謝各位一如既往的支持。

          01.【負邊距】負邊距的效果。注意左右負邊距表現并不一致。左為負時,是左移,右為負時,是左拉。上下與左右類似

          02.【shape-outside】?不要自以為是了。你以為自己是方的,在別人眼里你卻是圓的

          03.【BFC應用】BFC應用之阻止外邊距合并(margin collapsing)

          04.【BFC應用】BFC應用之消除浮動的影響

          05.【flex不為認知的特性之一】flex布局下margin:auto的神奇用法

          06.【flex不為認知的特性之二】flex布局,當flex-grow之和小于1時,只能按比例分配部分剩余空間,而不是全部

          07.【input的寬度】并不是給元素設置display:block就會自動填充父元素寬度。input 就是個例外,其默認寬度取決于size特性的值

          08.【定位特性】絕對定位和固定定位時,同時設置 left 和 right 等同于隱式地設置寬度

          09.【層疊上下文】層疊上下文:小輩就是小輩,再厲害也只是個小輩

          10.【粘性定位】position:sticky,粘性定位要起作用,需要設置最后滯留位置。chrome有bug,firefox完美

          11.【相鄰兄弟選擇器】相鄰兄弟選擇器之常用場景

          12.【模態框】要使模態框背景透明,用rgba是一種簡單方式

          13.【三角形】css繪制三角形的原理

          14.【table布局】display:table實現多列等高布局

          15.【顏色對比度】?藍底紅字,由于顏色對比度比較低,故而看不清,因此不是好的配色方案

          16.【定寬高比】?css實現定寬高比的原理:padding的百分比是相對于其包含塊的寬度,而不是高度

          17.【動畫方向】動畫方向可以選擇alternate,去回交替進行

          18.【線性漸變應用】css繪制彩帶的原理

          19.【隱藏文本】隱藏文字內容的兩種辦法

          20.【居中】實現居中的一種簡單方式

          21.【角向漸變】新的漸變:角向漸變。可以用來實現餅圖

          22.【背景位置百分比】background-position百分比的正確理解方式:圖片自身的百分比位置與容器同樣的百分比位置重合

          23.【背景重復新值】background-repeat新屬性值:round和space。前者表示湊個整,后者表示留點縫

          24.【背景附著】background-attachment指定背景如何附著在容器上,注意其屬性值local和fixed的使用

          25.【動畫延時】動畫添加延遲時間可以使步調不一致

          26.【outline使用】可以使用outline來描邊,不占地方,它甚至可以在里面

          27【背景定位】當固定背景不隨元素滾動時,背景定位是相對于視口的

          28【tab-size】瀏覽器默認顯示tab為8個空格,tab-size可以指定空格長度

          29【動畫暫停】CSS動畫其實是可以暫停的

          30【object-fit】圖片在指定尺寸后,可以設置object-fit為contain或cover保持比例

          31【鼠標狀態】按鈕禁用時,不要忘了設置鼠標狀態

          32【背景虛化】使用CSS濾鏡實現背景虛化

          33【fill-available】設置寬度為fill-available,可以使inline-block像block那樣填充整個空間

          34【fit-content】設置寬度為fit-content,可以使block像inline-block那樣實現收縮寬度包裹內容的效果

          35【自定義屬性】CSS自定義屬性的簡單使用

          36【min-content/max-content】可以設置寬度為min-content和max-content,前者讓內容盡可能地收縮,后者讓內容盡可能地展開

          37【進度條】使用漸變,一個div實現進度條

          38可以在打印網頁時,設置page相關屬性。比如page-break-before屬性來表示是否需要另起新頁

          39【逐幀動畫】利用CSS精靈實現逐幀動畫

          40【resize】普通元素也可以像textarea那樣resize

          41【面包屑】使用before偽元素實現面包屑

          42【sticky footer】使用grid布局實現sticky footer

          43【動畫填充狀態】CSS可以設置動畫開始前和結束時所保持的狀態

          44【動畫負延遲】CSS動畫可以設置延遲時間為負數,表示動畫仿佛開始前就已經運行過了那么長時間

          45【過渡】愛的魔力轉圈圈

          46【動畫案例】水波效果原理

          47【動畫案例】CSS彈球動畫效果的原理

          48【outline】outline屬性的妙用

          49【grid】火狐瀏覽器grid布局檢測器

          希望有所幫助。

          也歡迎閱讀本人的《JS正則迷你書》

          本文完。

          References

          • 《JS正則迷你書》(https://github.com/qdlaoyao/js-regex-mini-book)

          1.【負邊距】負邊距的效果。注意左右負邊距表現并不一致。左為負時,是左移,右為負時,是左拉。上下與左右類似

          02.【shape-outside】?不要自以為是了。你以為自己是方的,在別人眼里你卻是圓的

          03.【BFC應用】BFC應用之阻止外邊距合并(margin collapsing)

          04.【BFC應用】BFC應用之消除浮動的影響

          05.【flex不為人知的特性之一】flex布局下margin:auto的神奇用法

          06.【flex不為人知的特性之二】flex布局,當flex-grow之和小于1時,只能按比例分配部分剩余空間,而不是全部

          07.【input的寬度】并不是給元素設置display:block就會自動填充父元素寬度。input 就是個例外,其默認寬度取決于size特性的值

          08.【定位特性】絕對定位和固定定位時,同時設置 left 和 right 等同于隱式地設置寬度

          09.【層疊上下文】層疊上下文:小輩就是小輩,再厲害也只是個小輩

          10.【粘性定位】position:sticky,粘性定位要起作用,需要設置最后滯留位置。chrome有bug,firefox完美

          11.【相鄰兄弟選擇器】相鄰兄弟選擇器之常用場景

          12.【模態框】要使模態框背景透明,用rgba是一種簡單方式

          13.【三角形】css繪制三角形的原理

          14.【table布局】display:table實現多列等高布局

          15.【顏色對比度】?藍底紅字,由于顏色對比度比較低,故而看不清,因此不是好的配色方案

          16.【定寬高比】?css實現定寬高比的原理:padding的百分比是相對于其包含塊的寬度,而不是高度

          17.【動畫方向】動畫方向可以選擇alternate,去回交替進行

          18.【線性漸變應用】css繪制彩帶的原理

          19.【隱藏文本】隱藏文字內容的兩種辦法

          20.【居中】實現居中的一種簡單方式

          21.【角向漸變】新的漸變:角向漸變。可以用來實現餅圖

          22.【背景位置百分比】background-position百分比的正確理解方式:圖片自身的百分比位置與容器同樣的百分比位置重合

          23.【背景重復新值】background-repeat新屬性值:round和space。前者表示湊個整,后者表示留點縫

          24.【背景附著】background-attachment指定背景如何附著在容器上,注意其屬性值local和fixed的使用

          25.【動畫延時】動畫添加延遲時間可以使步調不一致

          26.【outline使用】可以使用outline來描邊,不占地方,它甚至可以在里面

          27【背景定位】當固定背景不隨元素滾動時,背景定位是相對于視口的

          28【tab-size】瀏覽器默認顯示tab為8個空格,tab-size可以指定空格長度

          29【動畫暫停】CSS動畫其實是可以暫停的

          30【object-fit】圖片在指定尺寸后,可以設置object-fit為contain或cover保持比例

          31【鼠標狀態】按鈕禁用時,不要忘了設置鼠標狀態

          32【背景虛化】使用CSS濾鏡實現背景虛化

          33【fill-available】設置寬度為fill-available,可以使inline-block像block那樣填充整個空間

          34【fit-content】設置寬度為fit-content,可以使block像inline-block那樣實現收縮寬度包裹內容的效果

          35【自定義屬性】CSS自定義屬性的簡單使用

          36【min-content/max-content】可以設置寬度為min-content和max-content,前者讓內容盡可能地收縮,后者讓內容盡可能地展開

          37【進度條】使用漸變,一個div實現進度條

          38【打印】可以在打印網頁時,設置page相關屬性。比如page-break-before屬性來表示是否需要另起新頁

          39【逐幀動畫】利用CSS精靈實現逐幀動畫

          40【resize】普通元素也可以像textarea那樣resize

          41【面包屑】使用before偽元素實現面包屑

          42【sticky footer】使用grid布局實現sticky footer

          43【動畫填充狀態】CSS可以設置動畫開始前和結束時所保持的狀態

          44【動畫負延遲】CSS動畫可以設置延遲時間為負數,表示動畫仿佛開始前就已經運行過了那么長時間

          45【過渡】愛的魔力轉圈圈

          46【動畫案例】水波效果原理

          47【動畫案例】CSS彈球動畫效果的原理

          48【outline】outline屬性的妙用

          49【grid】火狐瀏覽器grid布局檢測器

          希望有所幫助。

          們如何在保證實現功能性需求的同時又可以讓產品更好用好看呢?驚喜往往存在于被忽視的點上,這篇文章我就來給大家談談經常被我們忽視的模糊效果Blur Effects)。

          • 簡化操作流程

          模糊效果可以讓不同層級的功能與內容出現在同一個頁面中,特別是對于一些內容比較繁雜、功能比較多的app來說,模糊效果可以簡化操作流程,減少用戶的學習成本。

          例如雅虎天氣這個應用,對于不同的天氣會配有不同的圖片。基本的天氣數據會出現在頁面中,如果你想知道更多詳細的天氣信息(比如濕度,風速,氣壓,日出時間,日落時間等),只要點擊一下就能看到。

          用戶想獲取的任何信息都可以出現在當前頁面中,不需要重新打開新頁面。這種設計對于用戶來說很具有誘惑力。

          • 吸引用戶注意力

          人總是會不由自主的被那些對焦準確的部分吸引而忽視掉被虛化的部分。眼球的對焦機制好像一個調節器一樣捕捉那些離你忽遠忽近的物體,這樣才能讓你感受到周圍一切事物的深度和距離。這就是我們人眼的工作機制。設計師可以根據這個理論將界面中一些不重要的內容進行模糊處理來凸顯那些重要的內容。

          TweetBot就通過模糊功能來引導用戶的視線。在TweetBot界面中背景是被完全虛化處理的,根本無法看清。這樣用戶的注意力自然而然的被吸引到賬號信息和行為召喚按鈕了。

          • 良好的裝飾效果

          將模糊效果處理的圖片作為頁面背景對于設計師來說是一個不錯的選擇。簡潔而又美觀。

          下圖中的Trellie農場網站就使用了模糊處理的農場照片作為背景,首先給用戶對農村一個大體上的認識。但是農場長什么樣不是設計師希望用戶注意的。他們希望用戶關注的是那句廣告語:Family Owned Farm&Garden Store。為了進一步的吸引用戶的目光,設計師還使用了藝術字體。

          • 優化圖片加載過程

          隨著網速的不斷提升,這給網頁中加載更多的圖片提供了一個契機。如何優化網頁中圖片的加載過程也成為了設計師的一項新課題。Medium.com給我們提供了一個很好的范例:當用戶進入一個新頁面,正在加載中的圖片會以一種模糊效果展示給用戶。圖片會在加載過程中逐漸變得清晰直至完全加載完成。

          這種設計主要有兩點好處:

          1 模糊效果會解決不同設備中圖片的適配難題

          2 模糊效果的縮略圖很小,只有幾kb,降低了頁面的加載負擔

          • 測試頁面的視覺層次

          模糊效果不僅可以提升頁面的視覺表現力,還是衡量頁面視覺層次的一項重要測試工具。

          模糊效果可以幫助我們發現頁面的視覺重心,看用戶的目光是否放在我們希望他關注的內容上。方法其實很簡單,我們只要將圖片導進Photoshop中,對圖片進行高斯模糊處理,強度為5-10px。就像下圖一樣,模糊處理后的頁面模擬的就是用戶第一眼看到頁面的場景:用戶對頁面整體布局會有一種大致上的認識,但是不會注意到具體細節。如果模糊狀態下的頁面我們找不到任何重點,那么就以為我們要做出一些調整了。

          Mailchimp的首頁就可以說是通過了模糊效果測試,因為頁面視覺重點是“注冊”按鈕,這也是我們希望新用戶進到這個頁面的初衷。

          • 模糊效果與文字可讀性

          我們在給頁面引入模糊效果之前,我們要考慮的一個問題就是:模糊效果是否影響到了文字的可讀性。下圖中谷歌錢包首頁中我們可以發現,次標題內容完全無法辨識。

          • 模糊效果與頁面內容的兼容性問題

          當頁面中內容比較多的時候,我們對模糊效果的使用就要謹慎了。我們可以比較下圖中的兩個案例,左邊因為使用了模糊效果,致使頁面整體效果比較“臟”;右邊的頁面則明顯的清爽許多。

          我見過一些設計師為了炫技抑或是為了提高所謂的“設計感”使用模糊效果,其實大可不必。內容是決定了一款產品的氣質風格的,為了追求設計感而使內容得不到完全展示是本末倒置。

          總結

          模糊效果會給用戶提供一個視覺引導,幫助他們更好的了解頁面,特別是可以很好的解釋元素之間的關系,更能提升頁面的美感。但是我們也不能過度迷信模糊效果,要謹慎使用。

          文章來源:UI中國

          文章鏈接:http://www.ui.cn/detail/217625.html


          主站蜘蛛池模板: 日本一区二区三区在线观看| 无码精品人妻一区二区三区影院 | 无码人妻精品一区二区三18禁| 日韩一区二区免费视频| 日产亚洲一区二区三区| 日本片免费观看一区二区| 亚洲一区二区三区亚瑟| 一区二区传媒有限公司| 成人h动漫精品一区二区无码| 国产一区二区三区樱花动漫| 亚洲国产成人精品久久久国产成人一区二区三区综 | AV天堂午夜精品一区| 国产亚洲一区二区三区在线不卡| 成人区人妻精品一区二区不卡视频| 婷婷国产成人精品一区二| 国产一区二区四区在线观看| 无码乱人伦一区二区亚洲| 天堂一区人妻无码| 国产日韩一区二区三区在线观看 | 无码日韩AV一区二区三区| 九九久久99综合一区二区| 伊人色综合网一区二区三区 | 视频一区视频二区制服丝袜| 人妻少妇一区二区三区 | 亚洲国产精品自在线一区二区 | 久久91精品国产一区二区| 日本v片免费一区二区三区| 国产av天堂一区二区三区| 亚洲AV无码片一区二区三区| 国产熟女一区二区三区四区五区| 亚洲精品无码一区二区| 亚洲成AV人片一区二区密柚 | 无码中文人妻在线一区 | 亚欧成人中文字幕一区| 国产综合无码一区二区辣椒| 亚洲AV一区二区三区四区| 精品亚洲AV无码一区二区三区 | 在线精品动漫一区二区无广告| 男人的天堂av亚洲一区2区 | 日韩免费无码视频一区二区三区| 国产熟女一区二区三区四区五区 |