• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

6 February - 2015 By Paal Joachim 1 Comment
Last updated on: November 8, 2019

There are a lot of great resources to help you create better CSS code.

I will add on to this article when I find additional resources that I find useful.

cssreference.io
learnlayout.com
w3schools.com: css
web4college.com/css-play/index.php

Force CSS and JS changes to go live immediately
(Very useful when the browser is not showing your updates right away as your working on the site.)

Colors

Colors: material ui – colors and Adobe – Color Wheel and htmlcolorcodes.com
colorbox.io
cssfilters.co
coolors.co
flatuicolorpicker.com
qrohlf.com/trianglify
websitesetup.org/website-color-schemes
jenreviews.com/color-meaning

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

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

bennettfeely.com/clippy

css-tricks.com/the-backdrop-filter-css-property

 

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

designmodo.com/tabbed-widgets

 

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/

 

 

Animation
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

Picks up colors from web sites with stylifyme.

CSS Layerstyles
CSS 3 Generator

CSS Values
CSS Desk
CSS Lint

Navigation:
CSS multi level accordion menu
jonsuh: hamburgers
freefrontend: css-menu
freefrontend.com/css-toggle-menus

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

Additional resources:
spaceninja.com/2018/09/17/what-is-modular-css/

CSS Cheat sheet
10 fixed CSS backgrounds.

Share this:

  • Email

Categories: Web Design, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. spanish to english says

    3 May - 2017

    Great selection! Thanks for sharing. This means a lot to me!

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.