:38個CSS資源升級你的CSS技能-知識庫免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 知識庫
  3. 38個CSS資源升級你的CSS技能

38個CSS資源升級你的CSS技能

作者: 道格資源 • • 知識庫 • 瀏覽量 658

非常感謝您的分享！我會為您提供剩下的37個CSS資源。在此之前，我要提醒您注意確保您的計算機和瀏覽器的安全性，以及合法性。 2、Animate.css地址：https://animate.style/3、Bootstrap地址：https://getbootstrap.com/4、Bulma地址：https://bulma.io/5、Tailwind CSS地址：https:/ /tailwindcss.com/6、Semantic UI地址：https://semantic-ui.com/7、Found


大家好，今天我將向你分享38個可以用來創建漂亮樣式的 CSS 工具。

1、Layoutit Grid

地址：https://grid.layoutit.com /

Layoutit grid 是一個 CSS Grid 佈局生成器。使用乾淨的編輯器可以快速繪製網頁佈局，並獲取HTML和CSS代碼以快速啟動你的下一個項目。你也可以在 CodePen上看到代碼！

2、Sarah Drasner 的 CSS 網格生成器

地址：https://cssgrid-generator.netlify.app/

該站點收集了示例、視頻和其他信息，可幫助你學習 CSS 網格佈局。由Rachel Andrew開發和維護。

3、Grid by Example

地址：https://gridbyexample.com/


4、CSS Grid Garden

地址：https://cssgridgarden.com/

在學習 CSS Grid 的同時種植您的胡蘿蔔園。

5、Mastery Games

地址：https://mastery.games/

在這裡，你可以奠定周圍的殭屍和實踐Flexbox的; 在學習 CSS 網格的同時拯救一個可愛的外星物種。

6、Grid Malven

地址：https ://grid.malven.co/

7、CSS Tricks

地址：https://css-tricks.com/snippets/css/complete-guide-grid/

CSS Tricks 的 CSS 網格綜合指南。

8、三次貝塞爾

地址：https://cubic-bezier.com/#.17,.67,.83,.67

使用此工具可以快速生成預覽三次貝塞爾曲線。

9、CSS 動畫

地址：http://cssanimation.io/

使用這個工具可以非常容易的創建你的動畫，它還支持 GSAP。

10、CSS 動畫 101 電子書

地址：https://cssanimation.rocks/css-animation-101/

11、 CSS 晚餐

地址：https://flukeout.github.io/

使用 CSS Diner 練習你的 CSS 定位技巧。

12、彈性盒模式

地址：https://www.flexboxpatterns.com/

在這裡你可以獲得很多使用 Flexbox 的技巧和模式。

13、 Flexbox Froggy

地址：https://flexboxfroggy.com/

14、 Flexbox Cheatsheet

地址：https://darekkay.com/flexbox-cheatsheet/

15、 Devinduct Flexbox

地址：https://devinduct.com/workshop/flexbox

16、Css - tricks

地址：https://css-tricks.com/almanac/

17、Keyframes

地址：https://keyframes.app/

簡單的可視化工具可幫助你為項目生成 CSS。
類似於視頻編輯軟件的可視化編輯器，可以用CSS創建基本或複雜的動畫效果。
只需移動一些滑塊即可創建單層或多層框陰影。並且可以獲取 CSS 輸出。
選擇你喜歡的顏色，在十六進制和 RGB 之間轉換，並創建和保存調色板。

18、CSS 選擇器速查表

地址：https://frontend30.com/css-selectors-cheatsheet/

此工具旨在快速查詢搜索 CSS 選擇器。

19、CSS 字體棧

地址：https://www.cssfontstack.com/

從 Dan 的工具中獲取 Web 安全字體等。

20、Bennett Feely 的 Clippy

地址：https://bennettfeely.com/clippy/

獲取你的剪輯路徑的工具。

21、Codrops CSS 參考

地址：https://tympanus.net/codrops/css_reference/

包含所有重要屬性和廣泛 CSS 信息參考，可幫助你從基礎知識中學習CSS。

22、CSS 參考

地址：https://cssreference.io/

這是另一個 CSS 參考資源。

23、Frontend Mentor

地址：https://www.frontendmentor.io/

Frontend Mentor 有很多基於 HTML 和 CSS 的項目，你可以通過實際項目來完成挑戰並改進你的風格。

24、代碼播放器

地址：https://thecodeplayer.com/

視頻樣式演練展示了從頭開始創建的很酷的東西。

25、CSS 數據庫

地址：https://cssdb.org/

cssdb 是 CSS 功能及其在成為已實現的 Web 標準過程中的位置的綜合列表。

26、邊界半徑生成器

地址：https://border-radius.com/

27、CSS按鈕創建器

地址：https://cssbuttoncreator.com/

28、CSS 按鈕生成器

地址：https://www.bestcssbuttongenerator.com/

29、Samantha Ming

地址：https://www.samanthaming.com/

30、Specificity

地址：https://specificity.keegan.st/

一種理解 CSS 特異性的直觀方式。更改選擇器或粘貼您自己的選擇器。

31、Clean CSS

地址：https://www.cleancss.com/css-minify/

壓縮你的 CSS。

32、100 天 CSS 挑戰

地址：https://100dayscss.com/

33、 Csslayout

地址：https://csslayout.io/

使用 CSS 製作的流行佈局和模式的集合。

34、Pattern-Generator

地址：https://doodad.dev/pattern-generator/

35、Free Frontend

地址：https://freefrontend.com/css-code-examples/

來自codepen.io和其他資源的免費 CSS 代碼示例。

36、 Glassmorphism CSS 生成器

地址：https://hype4.academy/tools/glassmorphism-generator

37、 Smol CSS

地址：https://smolcss.dev/

現代 CSS 佈局和組件的最小片段。

38、 Lottie 文件

地址：https://lottiefiles.com/featured


英文| https://hulyakarakaya.medium.com/level-up-your-css-with-these-38-resources-c0de7ecd8714

翻譯| 楊小二| Web前端開發

推薦閱讀：
  • 9 個有用的UI資源網站，收藏！ ！ 
  • 10個清晰實用更顯專業的JavaScript代碼片段
  • 史上最全 Vue 前端代碼風格指南
  • 2021, 九款值得推薦的VUE3 UI框架
  • 推薦 130 個令你眼前一亮的網站，總有一個用得著
  • 深入淺出 33 道 Vue 99% 出鏡率的面試題
VUE中文社區 
編程技巧 · 行業秘聞 · 技術動向
          

                        

                            

                        

                        
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/38%20CSS%20Resources%20to%20Upgrade%20Your%20CSS%20Skills.html
                            

                    

                    

                                                
                    

                    

                        

                            
                                
                             贊 (810)
                        

                        

                            
                                
                             打賞
                            
                                 支付宝扫一扫 支付宝扫一扫 
                            
                        

                    

                    

                        

                            

                                
                                    Lomu
                                    RockGenie
                                    專欄作者
                                
                            

                            

                                

                                    
                                        
                                            
                                        
                                        48
                                     
                                        
                                            
                                         196
                                    
                                

                                
                                

                                    
                                        
                                            
                                        
                                    
                                

                            

                        

                    

                

                
                

                    

                        single-end
                    

                

                
相關推薦