
It's the mark of a great designer when someone comes to your site and knows it looks good, but doesn't know why. I love using subtle styling in my designs and one of my favorites is applying inverse drop shadows to give the appearance that something is inset. 

Take my portfolio, for instance. If you look carefully, you'll notice that the text has a thin white outline on the top of the text to make it look carved in:

![](/images/posts/subtle-inset-styles/inset_text.png)

How do you achieve this, you ask? Simple, just add the following style to your text - you can adjust the colors, blur, and position of the shadow to your own tastes.
    
```css
p {
    text-shadow: white 0px -1px 0;
}
```

Another type of subtle styling I love is inset styling for text fields. I don't really like the standard UI for browser text fields, so I always override it (`border: 0px; outline: none;` for the win!) and apply my own minimalistic styling. 

I've always really enjoyed the subtle inset style on [Grooveshark](http://www.grooveshark.com)'s login fields (they use background images), but only recently discovered the CSS way of doing it, with box shadows. Well, I won't keep you in suspense any longer; here it is:

```css
input.field {
    box-shadow: inset 0 1px 1px 1px #dedede;
}
```

Don't forget to add the `-webkit` and `-moz` prefixes to make sure your code is cross browser compatible! When done correctly, it should look like this: 

![](/images/posts/subtle-inset-styles/field_inset.png)

(That's a sneak peek of something new I'm working on!)



Subtle Inset Styles


Sometimes, in websites that you design, you'll find that you want to implement some kind of footer (with copyright information, contact links, etc). The naive way to go about adding a footer to your design to just add a div with some fixed (or `auto`) height at the bottom, like so:

    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>

This should work, right? Well, this works as expected in certain cases when your content is longer than the height of your browser (figure on the left). In the case where you have very little (or no) content on one of your pages, the footer "slides up", leaving an awkward looking space below your footer (figure on the right).

![](/images/posts/sticky-footers/footers.png)

To force the footer to stick to the bottom, thus the name "sticky footers", you need to wrap all other content in a container div, and give this `div` a height of `100%` and negative bottom margin of whatever the height of the footer is.

This way, the footer is always forced to the bottom in cases where the content isn't long enough, and still works as before when the content is long enough. You'll notice that the negative margin causes the lower portions of your content to overlap with the footer; this can be fixed with some simple bottom padding or a `div` fixed to the height of the footer.

```html
<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="push"></div>
</div>
<div id="footer"></div>
```

And the css:

```css
html, body { height: 100%; margin: 0; }
#container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto [footer-height];
}
#footer, #push {
  height: [footer-height];
}
```

And that's it! Simple, really!

**Credits**: I first learned how to do this from [Ryan Fait](http://ryanfait.com/sticky-footer/).



Sticky Footers


For all of you CSS coders who are pretty lazy (myself included), you can use CSS shorthand to type out certain properties in one line instead of many many lines. Here's an example:

Say you want to add a background image to your fancy new website using CSS. And it should not repeat. And the position should be on the top left. Oh, and you also want to add a background color because parts of your image are transparent.

Instead of tediously typing this out:

```css
background-color: #ccc;
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: top left;
```

You can simply do this:

```css
background: #ccc url('../images/background.png') no-repeat top left;
```

Not only does this save you from having carpal tunnel in the future, but it makes your CSS files smaller so they take less time to load as resources = less loading times for your website. It's a win-win for everyone!

## Background

```css
background:
  [background-color]
  [background-image]
  [background-repeat]
  [background-position];

background: #ccc url('background.png') no-repeat left top;
```

Be careful -- these need to be in the correct order and if you omit any, the browser will use the default values for each property which may not be what you were expecting.

## Font

```css
font:
  [font-style]
  [font-variant]
  [font-weight]
  [font-size]/[line-height]
  [font-family]

/* These two are equivalent */
font: normal normal bold 13px/11px Helvetica, serif;
font: bold 13px/11px Helvetica, serif;
```

Same deal as for backgrounds -- anything that is omitted gets applied the default property value. When in doubt, specify those values! There's another handy CSS shorthand guide [here](http://www.dustindiaz.com/css-shorthand/) that lists various default values for different shorthand properties as well.

These next couple are pretty straight forward:

## Margin/Padding

```css
/* Remember this as clockwise from the top */
margin:
  [margin-top]
  [margin-right]
  [margin-bottom]
  [margin-left];

margin: 1px 2px 3px 4px;
```

OR

```css
margin:
  [margin-top]
  [margin-right AND margin-left]
  [margin-bottom];

margin: 1px 2px 3px;
```

OR

```css
margin:
  [margin-top AND margin-bottom]
  [margin-right AND margin-left];

margin: 1px 2px;
```

OR

```css
margin: [margin for all sides];

margin: 1px;
```

The same goes for padding properties.

```css
padding: 1px 2px 3px 4px;
```

## Border

```css
border:
      [border-width]
      [border-color]
      [border-style];

border: 1px red solid;
```



←

frontend

Subtle Inset Styles

Sticky Footers

CSS Shorthand