CODE --> CSS Published: 2019-03-09
Some great CSS3 tools handy when developing a web site
With the introduction of CSS3, there are now so many different things that you can now do with CSS that you couldn't do before.

For example, you use to have to create an image for making a box shadow. Nowadays, that's no longer the case. Although a little bit of a hassle to make compatible with all browsers, it can now be done with:


-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); //webkit browsers, chrome, safari, opera
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); //Firefox
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); //Internet explorer / Edge


But with that said, there are some smart minds on the web that has made making these cool neat looking box shadow effects a breeze. If you haven't already, add:

https://www.cssmatic.com/box-shadow




to your list of CSS tools. This tool is great, very easy to use. This site also has other tools that you might find handy

Border Radius



Once again, this use to be a huge pain to do, nowadays this is no longer the case. Still a little bit of a hassle if you want to make compatible with all browser, the code for it is:


-webkit-border-radius: 5px; //webkit browser, chrome, safari, opera
-moz-border-radius: 5px; //Firefox browser
border-radius: 5px //Internet explorer / Edge


There's also a handy tool for this that I personally use all of the time from:

https://border-radius.com/




This tool works great. Does exactly what you need it to do without any clutter. That's definitely a bookmarker. Moving right along...

Gradient Tool



Yes, once again, never before possible without some crafty photoshoper, but now, just a few clicks away, we now have some awesome CSS gradient tools at our deposal. Now I have mixed feelings on these, choose whatever you would like here, but I have mostly used:

https://www.cssmatic.com/gradient-generator




This tool is great. Though I will say that depending on what type of gradient you're trying to get, there may be a better tool out there. This is definitely the prettiest one to look at. The others that I have used before in the past are:

  • http://www.colorzilla.com/gradient-editor/

  • https://cssgradient.io/

  • https://www.cssportal.com/css-gradient-generator/


  • Which are also great as well. CSS3 has definitely made it easier and much quicker to create beautiful looking websites with a lot less of a hassle. If only we could get the whole syntax compatibility thing down.
    Nerd+Geek is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.