A long list of helpful CSS resources. Dig in and enjoy! Let me know of other CSS resources I should add or when I need to edit the list.
CSS Reference – list of all CSS properties.
A list of 300+ CSS properties
Learn CSS Layout
CSS Tutorial at w3schools.com
Colors
Colors: material ui – colors and Adobe – Color Wheel and htmlcolorcodes.com
colorbox.io
cssfilters.co
coolors.co – color schemes generator.
flatuicolorpicker.com – Color models.
canva.com/colors – Color tools.
colorspark.app – Load random colors and gradients.
grabient.com – Gradients.
Colorzilla – Gradient Editor
gradienty
websitesetup.org/website-color-schemes – Using color schemes.
jenreviews.com/color-meaning – Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean.
colorspark.app (Load random colors and gradients. Get inspired and download the CSS.)
canva.com/colors
grabient.com
Colorzilla – Gradient Editor
gradientbuttons.colorion.co
gradienty – A very interesting way to add a gradient
webhostingplanguide.com – browse a CSS gradient list
CSS3maker
CSSmatic – Border radius
CSS3gen – Box Shadow
cssmatic.com/box-shadow
css3buttongenerator.com
cssbuttons
sitepoint.com – css properties to control web typography
marketblog.envato.com/web-design/css3-typography-code-snippets
Paulund – Typing effect
h5bp github – Effeckt.css
codepen – Progress bar
codepen – Tool tips
microtip
hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/
alligator.io/css/exploring-blend-modes
.webdesignerhut – pure-css-modal-window-effect
css-tricks.com/the-backdrop-filter-css-property
Border Radius, box shadow and buttons.
https://www.cssmatic.com/border-radius (Gradients, Border Radius, Noise texture and Box Shadow.)
https://css3gen.com/box-shadow/
gradientbuttons.colorion.co
https://css3buttongenerator.com/
Typography
https://www.sitepoint.com/css-properties-to-control-web-typography/
https://envato.com/blog/css3-typography-code-snippets/
Image effects and image hover effects
https://html5-demos.appspot.com/static/css/filters/index.html
https://imagehover.io/
kristofferandreasen.github.io/wickedCSS/
https://ianlunn.github.io/Hover/
https://tympanus.net/codrops/2016/11/23/tilt-hover-effects/
https://tympanus.net/codrops/2017/03/15/stack-motion-hover-effects
https://css3.bradshawenterprises.com/transitions/alligator.io/css/cropping-images-object-fit
Hover over buttons and create an icon effect:
https://codepen.io/daviddarnes/pen/VLXxMa
https://www.hostingreviewbox.com/tools/css3-button-generator/
https://premium.wpmudev.org/blog/css-button-libraries-collections/
Transitions & animations
https://h5bp.org/Effeckt.css/
https://github.com/michalsnik/aos
https://daneden.github.io/animate.css/
https://animista.net/
3dtransforms.desandro.com
Upgrading CSS Animation With Motion Curves – smashingmagazine.
freefrontend.com/css-flip-cards
Using Transitions to create an animated effect.
https://www.w3schools.com/css/css3_transitions.asp
Picks up colors from web sites with stylifyme.
CSS Layerstyles
CSS 3 Generator
Patterns
pattern.css – CSS only library to fill your empty background.
Navigation:
CSS multi level accordion menu
jonsuh: hamburgers
freefrontend: css-menu
freefrontend.com/css-toggle-menus
Grid
cssgrid.cc
cm.engineering/getting-to-know-css-grid-layout-818e43ca71a5
https://premium.wpmudev.org/blog/css-flexbox/
flexboxfroggy.com
learncssgrid.com
gridbyexample.com/examples/
alistapart.com/article/the-new-css-layout-excerpt
smashingmagazine.com/2018/05/future-of-web-design
medium.com/codyhouse/create-your-design-system-part-2-grid-layout-aa961d59b8d6
Material design and style guides:
styleguides.io
getuikit.com
designsystem.digital.gov/components/form-controls
designyourway – material design resources for designers
Plugins:
csshero.org: CSS Hero
themeover.com: Microthemer
Long lists of great resources to go through:
designyourway – the most popular css libraries that are on github
Simplilearn – css3 resources ultimate list article
22 Essential CSS Recipes
30-seconds.github.io/30-seconds-of-css
https://github.com/MikhailMasny/useful-web-pages/blob/master/docs/css.md
Additional resources:
spaceninja.com/2018/09/17/what-is-modular-css/
CSS Cheat sheet
10 fixed CSS backgrounds.
