CSS Tips & Tricks - Fun Effects & Tools

Thu Jul 30, 2015

Rounded Corners

Not all browsers support the border-radius property - namely, older versions of Internet Explorer - but, that doesn’t mean you shouldn’t at least get this working and looking nice on Opera, Safari, Firefox, and Chrome!

Rounding the corners of your regions/divs can make such a difference in the design of your site and it is super simple to implement.

Basically, to get the outcome below, I added a 10px border-radius to my div. I did this using the CSS code below:

border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

Purple is my FAVORITE color :)

 

More detailed information can be found here: http://www.css3.info/preview/rounded-border/ and you can even have the CSS code generated for you at: http://www.cssmatic.com/border-radius.


Picking Colors?

My all-time favorite color generator tool is Coolors*.

Basically, you hit the space-bar until you find a color you like, lock that color in, and then keep hitting the space-bar to generate other matching colors! You can even make a free account and save different color schemes. It is so simple and so amazing that I had to share :)


Patterns

CSS3 Patterns Gallery* is another amazing tool. Basically, you can use CSS3 to create patterns on your pages with only a few lines of CSS. The CSS3 patterns cut down on page load time since you don't have to use a background image to achieve a neat patterned background. The patterns on this site are limited, however, they have a Chevron (zig-zag) pattern that is my definite favorite!


*These tools/products are not created, maintained, supported, or sponsored by Percussion. These are just third-party tools that we love to use on a daily basis that we want to share :)

Casey Aiello
Casey Aiello
Professional Services Team Lead | Web Consultant/Designer | Percussion Software

Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.

comments powered by Disqus