Handy CSS

Posted on September 5, 2012

1



Late at night, I often find myself cruising sites for typography

I’ve been so busy building sites that I haven’t had a chance to take a picture or go fishing, let alone write about it, but I have been adding to my CSS arsenal and thought people might find some of these tricks handy.

I’ve been building websites since at least HTML 2.0 and using the same style sheet for about the last 10 years, reconfiguring it from project to project. This is a big time saver. Web code is a lot like rock’n’roll, it’s all stolen from a few great acts. I didn’t develop most of this. A lot of it comes from Handcrafted CSS , and others from around the web. They are mostly cross-browser with elegant degradation for inane browsers

Actually, I use a series of style sheets, which I’m constantly tweaking to make my framework more configurable and even occasionally toy with trying to have an OOP approach to CSS. The things that occupy my mind. Anyway:

  • reset.css to remove all browser defaults, you know that one-pixel padding you can’t get rid of? Well this is how to do it.
  • typography.css to control all my type in one place. This brilliant snippet below gives you a very nice scale of sizes that will fall onto a vertical rhythm, and allow you to build a fluid grid. This is the holy grail of typography CSS I have been looking for for a very long time. I might get some sleep now. That article is also the  best primer on laying out CSS for a fluid-grid I’ve ever seen.
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
          margin-bottom: 24px;
          font-weight: bold;
        }

        h1 {
          font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
          line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */
        }

        h2 {
          font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */
          line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */
        }

        h3 {
          font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */
          line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */
        }

        h4 {
          font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */
          line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */
        }

        h5, h6 {
          font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
          line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
        }
     p    {
     font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
    line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
  • layout.css to control the grid structure of the page. This is where I lay out and style all of my divs
  • ie.css to fix all of the IE-specific issues. You can pick these up any where and definitely need one.
  • list.css which I just added to keep all of my menus in. This is really handy because I use the suckerfish drop-down a lot and having a commented, configurable version of this is a really handy thing to have.
  • special.css which I use for things like rounded corners and CSS gradients. Note that I keep borders in almost all my styles so I  can see the divs on the page as I develop, and comment them out later.
/* ROUNDED CORNERS - HANDCRAFTED CSS*/
 .round_fix {
   margin-left           :-5px; 
    padding-left         :-5px;
    /*border             : 1px solid yellow;    */
    max-width            : 62.5em;
    /* min-width: 700px; */
    margin               : 0 auto;
    padding              : 0px 0 0 0;
    /* rounded corners, not working?   */
    border-radius        : 8px;    
    -webkit-border-radius: 8px;
    -moz-border-radius   : 8px;
    }
/* TRANSPARENT BACKGROUND - HANDCRAFTED CSS**/
.transparent {
    background    : #2F2FFF;
    background    : rgba(55,109,198,.4);
}
/* TRANSPARENT BORDERS */
.lightbox {         
    background-color        : white;            
    -moz-background-clip    : padding;     /* Firefox 3.6 */
    -webkit-background-clip : padding;  /* Safari 4? Chrome 6? */
    background-clip         : padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */                         
    border                  : 20px solid rgba(0,0,0,0.3);                        
    -webkit-border-radius   : 40px;
    -moz-border-radius      : 40px;
    border-radius           : 40px;         
    padding                 : 30px;
    width                   : 250px;
    text-align              : center;        
    }

WordPress is not loving my formatting, but I learned that trick of tabbing out the colons some where. It makes a beautiful, easy-to-read CSS file.

One other useful trick it to apply CSS gradients like so, this is so handy when working with designers, you can just pop them in, and unlike image backgrounds, they scale to the page, button, div, or whatever you apply them to:

/* BUTTON GRADIENT */
 .blue_grad {
 /* fallback (Opera) */
 background: #2D79AD;
 /* Mozilla: */
 background: -moz-linear-gradient(top, #2D79AD, #97D3F8);
 /* Chrome, Safari:*/
 background: -webkit-gradient(linear,
 left top, left bottom, from(#2D79AD), to(#97D3F8));
 /* MSIE */
 filter: progid:DXImageTransform.Microsoft.Gradient(
 StartColorStr='#2D79AD', EndColorStr='#97D3F8', GradientType=0);
}

Altogether this would be:

<body class ="round transparent blue_grad">

BTW, I was wondering if the order you apply multiple classes like that is important. I can see some interesting bugs coming out of that.
Here is a little snippet I’ve started using lately to position an image absolutely inside another div. You need to first set up a relative div, and then position absolutely. I don’t know why I just now came up with this for putting things in place. I’ve wasted days of my life on  this problem:

.image_fix{
    position    : relative;
    }
img.bite {    
    position    :absolute;
    width        : 25px;
    height        : 24px;    
    left:0%; 
    bottom: -15px;
    }

Here is an example of the gradient, the rounded corners, and the image fix all in one button, with two images. Sorry, just a placeholder image on the bite mark, but you get the idea. I like the bit out of the rounded corner. It took a while to figure that out and it goes to the branding of the site. It looks good with the rounded corners, don’t you think?:

I also learned a very cool CSS tag whereby you can control the width of the stroke on the font: font-weight    : lighter; Very sexy stuff. I don’t think even print designers have that option.

One last bit I almost forgot, using a grid for a background image to layout your stuff, here I’ve just linked directly to one on the web. Again  you can find these in all different sizes to suit your needs:

body     {
 background    : url(http://griddle.it/1024-12-20) repeat-y center top;
}

Well that’s just a few things I’ve collected, mostly to do things in CSS that previously required JavaScript. Hope they come in handy.

Updates:

Attributes and Selectors

I’ve spent 6 months editing a site with extremely f’ed HTML/CSS. It would’ve been easier to start over, but that is another blog. Anyway, on this site, the input labels, fields, and buttons were all given the same label, so styling one with a border (say so the input fields which were white on a white background would show up, and suddenly getting black borders on the buttons) styled them all.  Enter this little tidbit from the W3C. I spent a day on this, as the site is full of forms I don’t control and don’t want to rewrite. Lifesaving CSS.
http://www.w3schools.com/css/css_attribute_selectors.asp

Styling Forms

The attribute selectors are particularly useful for styling forms without class or ID:

Example

input[type=”text”]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type=”button”]
{
width:120px;
margin-left:35px;
display:block;
}


Advertisements
Posted in: Web