整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天繼續推薦提高我們摸魚時間的幾個神器，相信我，你會愛上他們的。
地址：https://neumorphism.io/
這個網站為 section 或 div 生成對應UI，它也可以自定義border-radius, box-shadow 等。
地址：https://shadows.brumm.af/
它可以為我們生成多個分層陰影，一種非常酷的效果，也可以從曲線中自定義顏色。
地址：https://bennettfeely.com/clippy/
這個算是我用的最多的，早期錄的CSS視頻，很多復雜點的效果都是用這個工具幫我生成，前列推薦。
地址：https://9elements.github.io/fancy-border-radius/#30.36.29.30--.
它通過操作 border-radius 生成很 awesome 形狀，我們可以在項目中盡情的使用的，通過微調來達到我們想要的形狀。
地址：https://cubic-bezier.com/
為 CSS 動畫生成cubic-bezier。
地址：https://cssgradient.io/
如果你的項目經常需要使用漸變，那么，你會愛上這個網站。我用了很長時間，它非常完美。在這里你也可以使用一些工具，比如漸變按鈕等等。
下面這三個波浪生成器可以生成任何類型的波浪，還在為畫破浪而苦惱的小伙伴可以用起來了。
地址：https://getwaves.io/
它能生成簡單的波浪，并有一些自定義功能。
地址：https://www.softr.io/tools/svg-wave-generator
它可以產生多個漸變波，非常棒。
地址：https://svgwave.in/
它可以生成多個漸變波浪，但主要特點是它還可以為此生成實時動畫。
地址：https://cssgrid-generator.netlify.app/
它為網格生成了很棒的css，你可以用div來定制它，它還會為它創建子元素。
它可以生成網格區域。我們可以根據具體需要來命名和定制區域。
地址：https://loading.io/
這個網站可以生成多個加載動畫，并以SVG、GIF、PNG和其他格式下載，但它的最大特點是你可以將這些動畫定制到新的水平。
地址：https://www.flaticon.com/
這個庫有5.7M+矢量圖標。可以在這里找到任何可能的圖標，你可以使用它。
地址：https://icons8.com/
這個庫也有大量的圖標，你可以定制它們，也可以直接使用圖標，而無需下載它。
希望你從這篇文章中學到了一些東西，如果有的話，請來波贊被。
~~完，我是刷碗，勵志等退休后，要回家擺地攤的人，我們下期見！
作者：Jatin Sharma 譯者：前端小智 來源：dev 原文：https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6
天就來和大家分享幾個好玩到爆的小網站，都智障中透露著智慧（？）
點開就摸魚一整天！
地址：https://tikolu.net/emojimix/
在線emoji合成器，可以隨機，也可以搜索自己選定的emoji合成出新的表情
我合成了幾個，有趣又好笑，感覺還挺智能的
地址：https://www.lanzouy.com/isSE4xlk0uj
大家喜聞樂見的肌肉金輪，就是拿這玩意做的哈哈哈哈哈哈哈哈哈！
下載之后，在這里找到模板就可以換了~~~
地址：https://www.yanlinma.com/10-billion-dollar/
10BillionDollars是一個用來展示100億美元占有空間有多大的網站，分別展示了來自不同國家的不同幣種所需要的大小（共有20個國家的貨幣，每個國家貨幣的面額不一樣，所以體積差距很大的）
這是100億美元
?日元對應的體積
?盧布對應的體積
地址：http://magickeyboard.io/
可以讓自己打出來的字母飛上天
有點炫酷的！
?
地址：https://www.6pian.cn/koutu.html
圖片拖進去就能摳出來！
?
地址：https://www.6pian.cn/dongman.html
圖片輕松變成各種風格的動漫臉
?
地址：https://www.6pian.cn/nianling.html
可以根據年齡，拖動改變效果
?
地址：http://emojisandearthporn.com/
在一堆emoji表情中，找到那個唯一不動的！
第一關
?第二關
?第三關
?第四關，我真的找不著了天吶
地址：http://liferestart.syaro.io/view/
既然人生都重開了，顏值必須點滿啊，說不定也會成為一代直男殺手（并不
?沃特？？？直接投胎成男孩了？？？
?2倍速度播放了這波瀾壯闊的一生，感覺不太平凡
?感覺顏值高的人生，注定還不錯，95分耶
?
地址：https://littlealchemy2.com/
一個在線模擬煉金術師的網站。開局只有四個元素：空氣、土壤、水、火。然后就可以任意組合了。比如將土和火合在一起，就能得到火山巖。火山巖和水合在一起，得到了蒸汽和黑曜石。
?
火和空氣合成了煙
我合成了半天，居然還有工廠房子之類的東西被我合成出來了。真好玩。
?
地址：https://sharkle.com/
點擊隨便進一個酷酷的網站
第一次進入的是這樣一個網站，是一個神奇的立方體
第二次看到的不知道是什么東西，一堆可以鬼畜拖動的面條
?第三個是一個可以點的七彩炫光氣泡
牛片的一系列好用工具：
牛片AI主播配音：在線配音，免費主播音隨意選
牛片一鍵智能字幕：為視頻一鍵添加字幕，音視頻轉文字稿
牛片視頻AI換裝：視頻AI換裝功能在牛片app中~
圖片文案提取：粘貼視頻鏈接就能提取文案
牛片一鍵智能摳圖：AI智能在線摳圖，一鍵摳出圖片主體
圖片圖片動漫化：圖片動漫化在線處理
照片圖片年齡變化：年齡變化面貌
牛片人聲分離：歌曲背景音樂伴奏提取
牛片工具箱：影視創作流程必備的效率神器
文：https://www.creativebloq.com/how-to/8-state-of-the-art-css-features
學習使用最新和最棒的CSS屬性來構建和設計面向未來的網站。
CSS一直在不斷地發展，規范中添加的許多功能，使得它成為web設計者手中一個強大的武器。
CSS的Grid將布局提升到了一個前所未有的高度，自定義屬性引入了變量的概念，功能查詢檢測瀏覽器是否支持。媒體查詢因為新的訪問屬性也提升到了一個新的高度。可變字體使得能用很少的代碼提供去最大的創造力，滾動捕捉（scroll snapping）消除了對JavaScript的依賴。查看我們炫酷的CSS動畫示例（https://www.creativebloq.com/inspiration/css-animation-examples），去看看你到底能創造出什么。或者，嘗試用網站構造器（https://www.creativebloq.com/web-design/best-website-builder-8133804）構造一個網站（不需要寫代碼）。
對于那些有創造力的人來說，這里有用于獨特布局的CSS形狀，以及大量的混合模式和濾鏡，以此獲得和PhotoShop類似風格的設計效果。繼續閱讀，了解如何在最新的版本中使用這些必須嘗試的新功能。但請記得，一個復雜的站點意味著你需要一個能夠支持你需求的虛擬主機服務。
如果你已經使用像Sass這樣的預處理器，或者確實使用過像JavaScript這樣的編程語言。那么您肯定對變量這樣的概念不會陌生 -- 為在代碼中重用而定義的值。自定義屬性使我們在css中，不需要預處理器，也能這么做。變量可以在 :root 級別設置（創建全局變量）或者在選擇器作用域中設置。然后可以使用var(變量名)這樣的語法來調用。例如像下面這樣我們設置一個--primaryColor這樣的變量：
/* On the root element (a global variable) */
:root {
--primaryColor: #f45942;
}
/* Scoped to a selector */
.my-component {
--primaryColor: #4171f4;
}然后我們能夠使用這個變量作為屬性的值：
h1 {
color: var(--primaryColor);
}自定義屬性是繼承的，使得它產生了一些非常有用的結果。其中之一就是網站的主題化。繼續上面的例子：我們能夠在根結點上對--primaryColor定義一個全局的值（#f45942 -- 一個明亮的橘紅色），因此每一個我們使用這個變量的地方的值將會是橘紅色。但是我們可以在一個選擇器內，用一個不同的值（#4171f4 -- 中藍色）重新定義這個變量。因此在選擇器內每一個使用--primaryColor變量的地方，它的計算值都會是藍色的。
>> 設置默認值
變量作用域是個很好的特性，但有時也可能會讓您很驚訝。如果你嘗試使用一個還未定義的變量，這個變量的值將會回退到瀏覽器的默認值或者是一個繼承值。而不是在級聯中進一步定義的值。在某些情況下，設置一個默認值是合適的：
h1 {
color: var(---primaryColor, blue);
}>> 自定義屬性和預處理器的變量有何不同？
自定義屬性在幾個關鍵地方與預處理器的變量不同。在你的代碼送到瀏覽器前，預處理器變量會先編譯。瀏覽器從來都不知道這個值是一個變量，它只能看到最終的結果。自定義屬性的值是在瀏覽器里被計算的。你可以在現代的開發者工具中檢查它們，改變變量并且查看解析的結果。它們是動態的變量，意味著它們的值可以在css中被改變，或者在JavaScript運行時中被改變。
不像預處理器的變量，自定義屬性不能被用在選擇器的名字中，屬性名或者媒體查詢聲明中 --- 它們只能被用作CSS屬性的值。css預處理器仍然有很多好處，因此我們可能會看到它們還會繼續存在一段時間，但是它們可能更多的是和自定義屬性組合起來一起被使用。
功能查詢是一種測試一個瀏覽器是否支持css文件中某個特定的CSS屬性-值組合的方式。它們實際上消除了對像Modernizr這種功能檢測庫的需求。它的語法和媒體查詢很像：使用 @supports 關鍵字，跟上你的 屬性-值 對。如果瀏覽器滿足這個特殊的條件，它就會執行那些被包裹其中的代碼。
功能查詢在現代瀏覽器中得到了很好的支持。但是它們相對來說都是比較新的瀏覽器，然后另外一個問題可能就是，某個你想要測試是否支持某個屬性的瀏覽器，可能本身并不支持功能查詢。通常，處理這種問題最好的方式，就是提供一個后備樣式（在功能查詢之外），然后在 @suports 規則中包裹瀏覽器支持的增強特性。
要特別注意，功能查詢需要謹慎使用。CSS中最偉大的功能之一就是瀏覽器會簡單地忽略任何它們不理解的屬性和值。只有在不這么做會產生視覺bug的情況下，才去使用功能查詢，否則你將會為自己增加許多額外的工作。
怎么樣去使用功能查詢
為了測試單個屬性值的支持，我們可以先提供一個后備樣式。在下面這個示例中，我們為不支持網格布局的瀏覽器提供了一個 flexbox 的后備樣式。
.my-component {
display: flex;
}
@supports (display: grid) {
.my-component {
display: grid;
}
}
// 或者
.my-component {
display: grid;
}
@supports not (display: grid) {
.my-component {
display: flex;
}
}您可能已經習慣使用媒體查詢去探測視口的寬度和高度，以及媒體的類型（通常是screen和打印）。Level 5的媒體查詢規范為我們帶來了一些可選的需要測試的新媒體特性，它們已經在某些瀏覽器中得到了支持。這些都給可訪問性提供了很好的幫助。
患有前庭疾病的用戶以及患有暈車病的用戶可能不會喜歡有很多動作移動的頁面，例如動畫和視差滾動效果。通過使用prefers-reduced-motion媒體查詢，我們能給用戶提供一個減少動畫的選擇。
.my-element {
animation: shake 500ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
.my-element {
animation: none;
}
}
網站提供一個可選的深色主題已經變得越來越流行。Prefers-colors-scheme能夠幫住我們查詢用戶是否設置了一個系統范圍的顏色喜好（使用關鍵字dark、light或者 no-preference），并相應地顯示適當的配色。
/* Media queries 02 */
body {
background: linear-gradient(to
bottom, #b5faff, #ffe2b4);
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: linear-gradient(to
bottom, #0c1338, #3e3599);
}
}通常，如果我們希望在我們的網頁上包含同一家族的一系列不同字體，我們一般也需要加載相同數量的字體文件。加載的字體文件越多，你的網頁也就越重。從而影響性能 -- 因此通常明智的做法就是最多加載三到四個字體文件（取決于你的性能期望）。
可變字體會改變所有的這些問題。它使得我們只需要一個字體文件就能加載整個字體家族。盡管這個文件通常比單個字體文件會大一點點，但是如果你想使用不同的粗細和風格，可變字體是一個更加性能的解決方案。如果您已經購買了整個字體加載，請記住將其安全的存儲在云存儲中，避免丟失文件。
>> 變化軸
不僅僅如此，而且使用可變字體，我們也不僅限于一小部分的字體粗細。使用常規字體時，我們可用的字體粗細通常都是用100的倍數描述。通常，400表示常規粗細，300表示細體，700表示粗體-不同的字體家族支持不同的粗細。可變字體有一個可變的軸，對于某些屬性，它給我們提供一個范圍內的值，例如字體粗細。字體的變化軸可能為1-900，這將會使得我們能夠使用900種不同的字體粗細。
這個變化的軸不僅僅局限于字體粗細。可變字體可以有x高度、傾斜、襯線長度、對比度（僅僅舉幾個例子）等不同的變化軸，這意味著單個字體文件可以為我們提供數百種甚至數千種變體。我們甚至可以給這些屬性設置動畫，從而使我們獲得一些非常酷的效果。Mandy Michael(https://codepen.io/mandymichael)擁有大量的能夠真實的測試這些極限的創意示例。
瀏覽器對可變字體的支持非常好。并且許多字體生產商都非常積極地開發新的可變字體，讓你現在就可以立即使用。盡管它們經常都是專業版，特別是那些有著更多特性的字體家族。如果你僅僅只是想試試可變字體，看看它們到底能做什么。這里存在著許多的可變字體試玩網站。
注意，如果你想立即使用可變字體，那么你需要確保你的操作系統是最新的。它們不能在老的系統上工作。
>> 字體變化的設置（font-variation-settings）
當我們想改變字體粗細的時候，我們只需要簡單地使用CSS的font-weight屬性。font-variation-settings是一個新的屬性，它能夠讓我們完全的訪問一個字體的不同變化軸。它們既包含預先注冊的軸，也包含自定義的軸。
>>> 預先定義的軸
有五種不同的預定義軸，分別對應著CSS中的不同屬性。其中每一個都有一個所謂的“軸標簽”。 這些預先定義的軸分別是: wght (font-weight), wdth (font-stretch), slnt (font-style: oblique/angle), ital(font-style: italic), opsz (font-optical-sizing)。我們可以通過單個css屬性或者通過font-variation-settings屬性訪問這些軸。
這些軸不是必須都包含在可變字體中（其中一些可能只有一個或兩個變化軸），但他們可能會變得更加通用。
>>> 自定義軸
自定義軸是字體設計者包含的定制軸，可以是任何東西。它們可以包括（舉例）襯線長度（serif length）、x高度（x-height），甚至其他一些更有創意的東西（排版不是那么典型），例如旋轉。
這兩種不同的軸，都必須表示為四個字符的標記。預定義的軸必須是大寫的，而自定義的軸必須是小寫的。這兩者都可以在Font-Variation-Settings屬性中組合使用。Font-Variation-Settings設置是可動畫的，可以實現一些非常酷的UI效果！其中在圖標字體中也進行了一些非常有趣的實驗。
假如你對像Photoshop和Illustrator這類的設計工具熟悉，那么你可能會注意到混合模式（blend modes）和它們怎么被用來在圖片上制作不同的效果。混合模式的工作方式是使用數學公式將兩個或者多個層混合在一起，以計算每個像素的結果值。圖層可以是任何東西--圖片、漸變或者純色。其中有些混合模式會產生比較黑的結果（例如，乘，將圖層的像素值相乘），也有比較亮的（例如，遮蓋和覆蓋）。然而，我們不需要理解它們的數學原理就能使用它們。嘗試使用不同的混合模式可以給我們一個很好的感覺，當與不同的層組合時，哪種混合模式會產生想要的效果。
通過CSS屬性mix-blend-mode和background-blend-mode，我們能夠在瀏覽器里獲得像Photoshop這樣的圖片效果。這兩個屬性都使用相同的屬性值，但工作方式稍微有些不同。
>> Background-blend-mode
背景混合模式將目標的背景層混合在一起。我們的元素有背景圖片、顏色和漸變。它們可以在不影響前景內容的情況下相互混合。我們可以為background-blend-mode指定多個值，每個背景層都單獨指定一個。
.my-element {
background: url(#myUrl),
linear-gradient(45deg, rgba(65, 68,
244, 1), rgba(203, 66, 244, 0.5)),
rgba(244, 65, 106, 1);
background-size: cover;
background-blend-mode: screen,
multiply;
}>> Mix-blend-mode
Mix-blend-mode 影響這個元素怎么和它的父節點以及兄弟節點的混合，包含任何的前景和背景內容，以及偽元素。可以通過混合覆蓋偽元素（::before、::after）來實現一些有趣的創造性效果。
.my-element {
background: rgb(244, 65, 106);
mix-blend-mode: multiply;
}>> CSS filters
CSS filter屬性也被用來創造醒目的視覺效果，使用filter屬性和濾鏡函數值。不像混合模式，它們直接應用一個圖片效果在它們指定的元素上，并且一個元素可以使用多個濾鏡。
>> 改變灰度
相比依賴混合模式，我們可以更大程度上控制元素的顏色。濾鏡可以把一個圖片變成黑白的，可以調整明亮、對比度和飽和度，模糊一個元素或者增加一個投影。它們同樣支持動畫，和hover配合可以有更好的效果。
>> SVG濾鏡(filters)
css濾鏡實際上是一個SVG濾鏡的簡化版本。CSS filter 屬性也接收一個url()函數，允許我們傳遞一個指向SVG濾鏡的URL。SVG過濾器非常強大，可以實現一些令人難以置信的圖片效果，但是它們也比CSS過濾器函數要復雜得多。Sara Soueidan在Codrops上有一系列文章，如果你有興趣編寫自己的自定義SVG過濾器。請在(https://tympanus.net/codrops/2019/01/15/svg-filters-101/)上閱讀這些文章。
>> 裁剪(clipping)和蒙版(masking):超越矩形
我們在web上習慣于處理盒子，但是不是所有的東西都必須是矩形。裁剪和遮罩是同一個硬幣的兩面，是兩種不同的方式，顯示或者隱藏一個元素的不同部分，使得背景可一穿透顯示。這使我們有能力在我們的設計中引入有趣和有創意的形狀。
>>> Clip-path
這個clip-path()屬性允許我們通過定義一個路徑來裁剪元素。它使用一些基本的形狀函數，inset(), circle(), ellipse(), 或者 polygon()。它允許我們使用一對xy坐標來定義路徑，來制作更加復雜的裁剪形狀。另外，我們也可以通過給path()函數傳遞一個SVG路徑，或者使用url()函數來提供一個SVG的路徑id。
>>> 不在path范圍內的
裁剪一個元素，會把你定義的path之外的任何東西都裁剪掉，不過元素依舊是一個矩形。如果你有在path邊界之外的內容，那么也會被一起裁剪掉--它不會包裹在形狀內。
>>> Mask-image
mask-image允許我們能夠通過使用一張圖片（SVG或者透明的PNG）或者漸變作為蒙版來顯示或者隱藏圖像的某些部分。不像clip-path，我們可以使用蒙版給我們的圖像添加紋理，因為蒙版源不是一個路徑，它允許是透明的。
CSS Shapes規范允許我們將文本環繞在浮動的幾何形狀周圍，創造有趣的，像雜志一樣的布局。使用shape-outside屬性能夠做到這一點。和clip-path類似，我們可以給這個屬性一個基本的形狀函數，circle(), ellipse(), inset(), polygon(), 或者一個指向SVG的path，事實上，這兩個一起工作的非常協調。shape-outside可以有效地包裹我們的文本，但不會影響浮動元素。如果我們想要我們的文本看起來像環繞在一個圖片或者浮動元素周圍，我們也能夠使用和clip-path相同的值。使用 shape-margin 增加形狀路徑和包裹它內容之間的空白。可以看一下Stuff & Nonsense（https://stuffandnonsense.co.uk）的網站，看看css-shape是怎么被用來把文字包裹環繞一個位于中心的圖片。
FireFox 在開發者工具欄面板里有一個 shape-path 編輯器，這個對于復雜的形狀工作來說非常有用。 但是，也必須小心使用。包裹一段文字的開頭有著非常好的藝術效果，但是卻不一定有最好的用戶體驗。復雜的鋸齒形狀會使那一塊的文本非常難以閱讀。對于重要的文本，你依然想讓它清晰明了。
許多網站利用JavaScript庫的優勢去提供一個流暢的、像本地App那樣的滾動體驗，當用戶滑動頁面的時候，內容快速定位到指定的位置。現在，隨著滾動捕獲的規范被制定，我們能夠在我們的CSS文件中完成這個操作--這就不需要引入大量的JS模塊，使得頁面變得很重。
為了實現滾動捕獲，我們需要一個元素去作為我們的滾動容器。容器的直接子元素指示將要捕捉地點，并且可以在捕捉區域以各種不同的方式對齊。
當我們和另一個新的CSS屬性值--position: sticky組合使用時，滾動捕捉能夠會更有效果。這個position的值表示，當子元素在容器內部滾動的時候，它會“粘住”在一個指定的位置--這是另外一個，以前只能用javascript實現的功能。點擊可以查看這個滾動捕捉和位置結合的示例。sticky and intersectionObserver示例（https://www.creativebloq.com/inspiration/css-animation-examples）。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
