A Good Way To Deal With Padding

This is probably old hat to most but I just saw this and didn’t realize it was in CSS(3) so here we go:

*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

This little tidbit here will enable you to pad things without doing “padding math”. In other words it pads things on the INSIDE of a box, not added to.

That’s it. Short’n’sweet.

It’s the little things

Sometimes those little touches can give you a nice feel to your site.  Here’s one…add this code to the top of your CSS:

* {  -webkit-transition: all 0.2s ease;  -moz-transition:    all 0.2s ease;  -ms-transition:     all 0.2s ease;  -o-transition:      all 0.2s ease;}

Wherever you have hovers and similar things, it will transition between the 2 states. Try it out!

The idea for this came from one of my favorite sites, CSS Tricks. Article is here: http://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/

Cool moving background with CSS3

I saw a cool thing on www.css-tricks.com (one of my favorite sites) and after looking at his code plus a few others was able to doit…so I present:
COOL SLIDE IN BACKGROUND (not the best name but, whattyagonnado?)

Here’s the code…all you need is a png file named droid.png:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#thebox {	
-webkit-border-radius: 14px;	
-moz-border-radius: 14px;	
border-radius: 14px;	
background-color: #10365b;	
height: 300px;	width: 400px;	
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	
color: #FFF;	font-size: 30px;	
background-image: url(droid.png);	
background-position: 390px 0px;	background-repeat:no-repeat;	
overflow: hidden;}#thebox p {	padding-top: 16px;	
padding-right: 150px;	
padding-bottom: 16px;	
padding-left: 16px;}#thebox:hover  {		
position: absolute;	
background-color: #30567b;	
background-image: url(droid.png);	
background-position: 190px 0px;	background-repeat:no-repeat;			
-webkit-transition: all 0.8s ease; 	
-moz-transition: all 0.8s ease; 	
background-position: 220px 100%; 	
background-repeat: no-repeat;	}
</style></head>
<body>	<div id="thebox">	  
<p>This is a cool box with some text in it </p>	  
<p>OK, that's all.</p>	
</div>
</body></html>

Super Helpful Nerdy Web Design Type Links

I love CSS-TRICKS.COM.  Always interesting, usually helpful…but today its MEGA HELPFUL!  This post in particular:

http://css-tricks.com/12389-one-page-apps-i-actually-use/

Why?  Because I’m always looking up the code for rounded corners or trying to find the exact link to jQuery…here are some great links from that article!

That’s it.  Have fun. 🙂

CSS3: The Wonder Years

If you build websites, CSS3 is slap-awesome.  Rounded corners, gradients, transparencies, drop shadows…oh my!

As we know though the good ol’ “red headed step child yet still mamas favorite”, Internet Explorer doesn’t do these things.  Well, correction, IE9, which has recently dropped, does do some of the cool new stuff.  But as of right now a lot of IE users are still on 7 or 8…some even on 6 (Egads!)

If you are building with IE in mind and want all those cool roundy boxes and droppy shadows, here are a couple of links that will help you  get those on IE:

http://css3pie.com/

http://www.modernizr.com/