Monday, April 29, 2013

Useful css3/css properties

Double Borders
Today I relearned to make some nice css3 double borders with the following article: http://css-tricks.com/snippets/css/multiple-borders/

The article goes on to explain how you can use either the :before :after selectors or simply use box-shadow.  For a more thorough explanation on the box-shadow property I visited: http://www.css3.info/preview/box-shadow/

And on the too pick hsl colors (because the css-tricks guide uses them) I used: http://hslpicker.com/

Here's an example:
.site{
-moz-box-shadow:
0 0 0 1px hsl(161, 0%, 77%),
0 0 0 2px hsl(184, 0%, 17%);
-webkit-box-shadow:
0 0 0 1px hsl(161, 0%, 77%),
0 0 0 2px hsl(184, 0%, 17%);
box-shadow:
0 0 0 1px hsl(161, 0%, 77%),
0 0 0 2px hsl(184, 0%, 17%);
}

Gradients
To create a background gradient I found I just have to use this site to select my colors and I can copy and paste the code into my stylesheet: http://www.colorzilla.com/gradient-editor/

The css they give you is compatible with all browsers which is great!

Rounded Edges
I've done this effect numerous times but always forget the syntax so I'm finally writing this one down for my horrible memory.  So for rounded corners I only need to put this:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

That's compatible with majority of the browsers and I can get more details on this from here: http://www.the-art-of-web.com/css/border-radius/#.UX8BMbXOmic


I might be using a border on the site and buttons.  I'll probably make use of the rounded edges and gradients on buttons.  That just about covers the new css stuff I learned/wrote down today just to remember.  This is going to be useful to me so I'm sure it'll help out any of you reading.

No comments:

Post a Comment