❗Great resources
CSS Tricks: https://css-tricks.com/
A List Apart: https://alistapart.com/blog/topic/css/
Frameworks
https://tailwindcss.com/
Guides and tools
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Animations
Button animations
Cubic Bezier
3D transforms with Webflow
Examples
CSS Zen Garden: http://www.csszengarden.com/
Fonts
Fonts to use
Font Squirrel: https://www.fontsquirrel.com/
Google Web Fonts: https://fonts.google.com/
Typekit: https://fonts.adobe.com/fonts
Fonts.com: https://www.fonts.com/
Web safe fonts
CSS Font Stack: https://www.cssfontstack.com/
Colors
Color names: https://www.w3schools.com/colors/colors_hex.asp
Hexadecimal to filter(): https://codepen.io/sosuke/pen/Pjoqqp
⭐ Cloudflare
Gradients
A Complete Guide to CSS Gradients: https://css-tricks.com/a-complete-guide-to-css-gradients/
Patterns
Verou: https://projects.verou.me/css3patterns/
Buttons
Gradient buttons: https://gradientbuttons.colorion.co/
📦 Cool gradients
uiGradients: https://uigradients.com/#JuicyOrange
Shadows
86 shadow examples: https://getcssscan.com/css-box-shadow-examples
Layout
Page layout with floats and positioning (provide support for old browsers): https://learningwebdesign.com/articles/LWD5_FloatLayout.pdf
Flexbox
A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Video course about Flexbox: https://flexbox.io/
See flexbox in action 1: https://codepen.io/enxaneta/full/adLPwv
See flexbox in action 2: https://the-echoplex.net/flexyboxes/
Detailed Flexbox Tutorial for Beginners (everything you need to know!): https://www.zachgollwitzer.com/posts/2021/fullstack-developer-series/10-flexbox-crash-course/
Tutorial: https://www.samanthaming.com/flexbox30/
Grid
THE EXPERIMENTAL LAYOUT LAB: https://labs.jensimmons.com
Grid by Example: https://gridbyexample.com
Definition and explanation: https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/
The Complete CSS Grid Tutorial: https://jst.hashnode.dev/css-grid-tutorial
Responsive Web Design (RWD)
W3Schools: Responsive Web Design: https://www.w3schools.com/css/css_rwd_intro.asp
Screen sizes: https://screensiz.es
Multi-Device Layout Patterns: https://www.lukew.com/ff/entry.asp?1514
Responsive Patterns: https://bradfrost.github.io/this-is-responsive/patterns.html
Get started with variable fonts: https://medium.com/@clagnut/get-started-with-variable-fonts-c055fd73ecd7#:~:text=As with regular OpenType fonts,-variations or truetype-variations .
Responsive navigation patterns: https://bradfrost.com/blog/post/responsive-nav-patterns/
Adventures in Responsive Navigation: https://responsivenavigation.net/
⭐ Responsive Resources
Images
background-image opacity: https://coder-coder.com/background-image-opacity/
Change colour of PNG images using filter: https://codepen.io/sosuke/pen/Pjoqqp
Borders
Cool border radius: https://rattibha.com/thread/1392799793135693825
Media Queries
https://mediaqueri.es/
Reset styles
CSS reset
Normalize.css
Reboot, Resets, and Reasoning
/* Initial reset */
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
/*outline: 1px dashed blue; /* Debugging purposes */
}Reducing HTTP reuqests
Images: CSS sprites
Browser support (CSS, HTML, JavaScript)
Modernizr
Pre- and Post-processors (and CSS authoring frameworks)
Deconfusing Pre- and Post-processing
Pre-processors
Sass
Less
Stylus
CSS authoring frameworks
Compass (works well with SASS)
Post-processors
Autoprefixer
PostCSS > PostCSS.parts