Basic Ready-to-Use CSS Styles

Today we are going to dig a little bit more into process development. When you’re creating a website or an application from scratch, you may need a collection of patterns helping you building thing up.
That is the point of today’s tutorial. Just for you, I baked a little suite of basic CSS snippets, ready for use!
Before going any further, let me explain to you how I’ve built this up. I tried to classify things according to their type. So you have some enhancements for block-level elements, for links, for inputs, regular text, and so on.
My point was also to focus on re-usability, that’s why I used classes. The styles are not directly applied to an element, but to a class with a not-so-semantic name, that can be used and re-used.

You can also build classes of classes to custom things to suit your needs. It could look like this:

  .my-class {
    /* My awesome styles here */
  }

  .my-class.custom {
    /* Specific styles to .my-class only if it only has the .custom class */
  }

This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Do you see what I mean?

Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements.

Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS.

Block-level elements

You are creating an image gallery and want to give some subtle styles to the pictures? You are designing a template for your articles on your blog and want to emphasize the little “aside” block? You’re building your resume and want to make this little photo of you look nicer? There you go my friends.

The Markup

For this whole section, I took an a division with the class “block-level” and added the additional classes to it. You could of course do it on pretty much whatever you want as long as it is a block-level element. If you’re planning on applying one of those styles on an image, be sure to set display: block to it.

  <div class="block-level"></div>

The Basic CSS

For the demo, I applied a few lines of CSS to my little div:

.block-level {
    width: 120px;
    height: 120px;
    margin: 20px;
    position: relative;
    float: left;
}

You’ll find some more styles for the font but that’s just for the demo, let’s focus on the main styles.

Shadows

One of the simplest way to give a little depth to a block-level element is to apply a little shadow to it. However, shadows are dangerous: they can screw up your design easily. If you don’t believe me, just have a look at those shadows on the “New eBay”.

The idea behind this one is to give a very little and subtle shadow to a block element. Not a big black fat shadow making it look like “HEY IM HERE! OVERHERE!!”. Something quiet.

.drop-shadow {
    background: #9479fa;
}

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4)
}

Look how we use a negative spread value in order to give a little depth to the shadow. It looks way more realistic this way in my humble opinion.

Note: the color used in the box-shadow declaration may vary depending on the background-color of your element. The lighter the box, the lighter the shadow has to be in order to preserve a decent contrast.

Note: you won’t be able to add multiple directional classes on the same element. The latter will override the others. If you would like a box to have more than one shadow, simply create a multiple box shadow.

Those 4 examples aim at emphasize the content with an outer glow, black or white, blurred or not blurred, depending on what you want and more importantly on the background in the box (plain color, texture, image, etc.).

div[class*="emphasize-"] {
    background: #69D2E7;
}

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
}

.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25)
}

.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
}

.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.5)
}

Last but not least when it comes to shadows, two embossed effects. The first on is pretty subtle since it only applies a very small light reflection on the top of an object, and the second one is more complex. It looks particularly good on circle elements, like buttons.

div[class*="embossed"] {
    background: #8ec12d;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}

.embossed-light {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.3), 
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
}

Gradients

Sometimes, you may want to apply a soft gradient to an element in order to give it some relief. The idea was to give you a gradient that you don’t have to change if you change the background color / image.

div[class*="gradient"]{
    background-color: #DEB8A0;
    box-shadow: 0 0 0 1px #a27b62;
}

.gradient-light-linear {
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}

.gradient-dark-linear {
    background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}

Basically, it relies on applying a transparent to more transparent layer over your stuff, as you would do on Photoshop for example. Fairly simple.

Please note that gradients might not work in some browsers (e.g. IE9), you’ll have to provide some kind of fallbacks for them.

Okay, so that was the easy part. Now, let’s deal with radial gradients. You want to add some sweet light effects to your block elements, right? So you need radial gradients. First, the easy way for supported browsers.

.gradient-light-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}

.gradient-dark-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}

Except the fact that I have to check out the syntax every single time I want to do a radial gradient, it was fairly simple. Right?

Rounded corners

Have you noticed, we have fought for years to have an unprefixed border-radius in all major browsers and now that we have them, the trend wants to get rid of every rounded corner? That is irony.

Depending on the design, sharp angles can be beautiful or very harmful. Anyway, you may want to add border-radius to a bunch of elements. Even small ones. So I’ve created some classes for that.

div[class*="rounded"] {
    background: #fca1cc;
}

.light-rounded {
    border-radius: 3px;
}

.heavy-rounded {
    border-radius: 8px;
}

.full-rounded {
    border-radius: 50%;
}

.barrel-rounded {
    border-radius: 20px/60px;
}

My theory on border-radius (depending on the size of the element):

• At 0px, you have sharp angles. True story.
• Between 1 and 4px, you have subtle rounded corners. Most people won’t be able to tell corners are rounded, but they won’t have the “sharp knife” impression.
• Between 5 and 10px, you have rounded corners. Not more, not less. Depending on the design, it can look very cheap, or absolutely lovely.
• After 10px, you have -in my opinion- ugly rounded corners. It looks like you’re trying to recreate the “we do because we can” thing from the past. Plus, as I said earlier, the trend isn’t much into round corners any more.

There are two values you should remember when you’re using the border-radius property:

• border-radius: 50% draws a perfect circle as long as you’re dealing with a square. If it’s a rectangle, then you’ll turn it into an ellipse.
• In order to achieve icon-like border-radius, the perfect ratio is 6.4 according to this tweet from Nina Giorgieva. So if you have a 100*100px square and want to turn it into an icon, you should apply it 16px border-radius (100 / 6.4 = 15.625).

Links

We are done with block-level elements improvements. Let’s talk about links. Links are absolutely everywhere. From navigation to external links, passing by button for social networks and anchors, links are crowding every website.

From now on, let’s make a difference between inline links and block links. Inline links are mostly anchors from the current page to another page somewhere on the web. Block links are a little bit more multipurpose: buttons, nav menus, etc.

The Markup

You may have understood it already. For this section we will need two different contexts: a sentence with a link for the inline-link case, and a simple link for the block-link case. I use an anchor tag for the latter but you could use a submit input or a button as well.

This is some dummy text to show an <a href="#">inline link</a>.


<a href="#">Link</a>

Inline links

I tried to stay as far as possible from the default solid underline and the changing color on hover. I tried to be a little bit more creative to make you something cool. Is it cool?

.inline-link-1 {
    display: inline-block;
    margin: 0 0.2em;
    padding: 3px;
    background: #97CAF2;
    border-radius: 2px;
    transition: all 0.3s ease-out; 
    /* Font styles */
    text-decoration: none;
    font-weight: bold;
    color: white;
}

.inline-link-1:hover {
    background: #53A7EA
}

.inline-link-1:active {
    background: #C4E1F8
}

.inline-link-1:visited {
    background: #F2BF97
}

Important: don’t forget to add a visited state to inline links. Some people like to know what links they have gone through when reading a site. Here, I applied a 180° rotation to the hue color wheel; I like this to really make a difference between default links and visited links.

This example is very effective if you really want inline links to be seen. I’d say it depends on your design choice: some people want links to be very discrete, others want to make them big enough to trigger call-to-action. Your choice.

This was the “heavy” example. Let’s see something lighter, mostly based on the default link styles.

.inline-link-2 {
    display: inline-block;
    border-bottom: 2px dashed rgba(0,0,0,0.9);
    /* Font styles */
    text-decoration: none;
    color: #777;
}

.inline-link-2:hover {
    border-bottom-style: dotted;
}

.inline-link-2:active {
    border-bottom-style: solid;
}

.inline-link-2:visited {
    border-bottom: 2px solid #97CAF2;
}

The idea is to have a dashed line as a default state. When you hover the link, the line becomes dotted and finally when you click it, it’s a solid underline.

Last idea, involving a pseudo-element to create a little arrow before the link. We could think of it as a way to show the user the link is leaving the website, or something.

.inline-link-3 {
    display: inline-block;
    position: relative;
    padding-left: 6px;
    /* Font styles */
    text-decoration: none;
    color: #6AB3EC;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}

.inline-link-3:hover {
    color: #3C9CE7;
}

.inline-link-3:before {
    content: "25BA";
    font-size: 80%;
    display: inline-block;
    padding-right: 3px;
    pointer-events: none;
}

.inline-link-3:hover:before {
    color: #F2BF97;
}

Block links

Now, let’s have a look at block-level links. In most cases, when the user can interact with your site or application, it involves a button. Submit a comment, go to the next page, log in, and many more. Whatever the type of element you’re using for that (<a>, <input type="submit">, <button>, etc.), you may want to apply some neat styles to it to attract the user.

The first example is a very very simple one. However, in some designs, in can fit very well. I’m thinking about Windows 8 of course. 😉

.metro {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: #08C;
    /* Font styles */
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.metro:hover {
    background: #0AF
}

Okay, let’s keep the same base but with some 3D effect! You might recognize this from the new design of CSS-Tricks. We will even use a child class for this one.

.metro.three-d {
    position: relative;
    box-shadow: 
        1px 1px #53A7EA, 
        2px 2px #53A7EA, 
        3px 3px #53A7EA;
    transition: all 0.1s ease-in;
}

.metro.three-d:active {
    box-shadow: none;
    top: 3px;
    left: 3px;
}

Doesn’t it look cool? Especially the active state, right? Okay, enough with the metro theme.

Let’s try something lighter. This one is transparent with a thick border and a subtle shadow.

.bordered-link {
    display: inline-block;
    padding: 8px;
    border: 3px solid #FCB326;
    border-radius: 6px;
    box-shadow: 
        0 2px 1px rgba(0, 0, 0, 0.2), 
        inset 0 2px 1px rgba(0, 0, 0, 0.2);
    /* Font styles */
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    color: #222;
}

.bordered-link:hover {
    border-color: #FDD68B
}

.bordered-link:active {
    border-color: #FEE8BD
}

Let’s create something a little bit more appealing.

.modern {
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    background: #B8ED01;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    transition: all 0.3s ease-out;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.5), 
        0 2px 2px rgba(0,0,0,0.3), 
        0 0 4px 1px rgba(0,0,0,0.2); 
    /* Font styles */
    text-decoration: none;
    text-shadow: 0 1px rgba(255,255,255,0.7);
}

.modern:hover {
    background: #C7FE0A
}

We can even add some more complex box-shadows with the following class:

.embossed-link {
    box-shadow: 
        inset 0 3px 2px rgba(255,255,255,.22), 
        inset 0 -3px 2px rgba(0,0,0,.17), 
        inset 0 20px 10px rgba(255,255,255,.12), 
        0 0 4px 1px rgba(0,0,0,.1), 
        0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link {
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.5), 
        0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2), 
        inset 0 3px 2px rgba(255,255,255,.22), 
        inset 0 -3px 2px rgba(0,0,0,.15), 
        inset 0 20px 10px rgba(255,255,255,.12), 
        0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link:active {
    box-shadow: 
        inset 0 -2px 1px rgba(255,255,255,0.2), 
        inset 0 3px 2px rgba(0,0,0,0.12);
}

Last, but not least, a class adding a pseudo-element to make it look like as if the button is a part of the background.

.socle {
    position: relative;
    z-index: 2;
}

.socle:after {
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 6px;
    box-shadow: 
        inset 0 1px 0 rgba(0,0,0,0.1),
        inset 0 -1px 0 rgba(255,255,255,0.7);
    top: -6px;
    bottom: -6px;
    right: -6px;
    left: -6px;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}

You may want to change the value of the border-radius to suit your needs. Depending on the border-radius of the button, it may look weird.

That’s it pretty much with the links, but now you can create your own class to give some basic styles to your anchors.

Inputs

As I’ve said in my previous tutorial, forms are pretty much everywhere in the web, and so are inputs. Particularly text inputs. Sadly, the default styles for inputs are pretty ugly. I’m sure we can do better!

The Markup

<input type="text" placeholder="Input name">

The CSS

Let’s start with something very simple: replacing the default border and adding a border radius.

.simple-input {
    display: block;
    padding: 5px;
    border: 4px solid #F1B720;
    border-radius: 5px;
    color: #333;
    transition: all 0.3s ease-out;
}

.simple-input:hover {
    border-radius: 8px
}

.simple-input:focus {
    outline: none;
    border-radius: 8px;
    border-color: #EBD292;
}

Inputs are kind of weird elements, so here we set them to display: block; to make things easier. Padding is there to give some space to the content.

Ever wanted to replicate iOS inputs?

.mac {
    display: block;
    border: none;
    border-radius: 20px;
    padding: 5px 8px;
    color: #333;
    box-shadow: 
        inset 0 2px 0 rgba(0,0,0,.2), 
        0 0 4px rgba(0,0,0,0.1);
}

.mac:focus {
    outline: none;
    box-shadow: 
        inset 0 2px 0 rgba(0,0,0,.2), 
        0 0 4px rgba(0,0,0,0.1), 
        0 0 5px 1px #51CBEE;
}

Let’s try something with a gradient as a background and some inset box shadow.

.depth {
    display: block;
    border: 1px solid rgba(255,255,255,0.6);
    background: linear-gradient(#eee, #fff);
    transition: all 0.3s ease-out;
    box-shadow: 
        inset 0 1px 4px rgba(0,0,0,0.4);
    padding: 5px;
    color: #555;
}

.depth:focus {
    outline: none;
    background-position: 0 -1.7em;
}

As a last example, something a bit more original. Not a box, only a line. You could eventually couple this with a sweet font, and you have a nice form!

.line {
    display: block;
    border: none;
    color: #333;
    background: transparent;
    border-bottom: 1px dotted black;
    padding: 5px 2px 0 2px;
}

.line:focus {
    outline: none;
    border-color: #51CBEE;
}

Final words

Designing out of context is difficult. But having those kinds of “pre-built classes” are a huge time saver when you’re creating a website or and application, especially when you’re not a CSS ninja.

The main idea is simply to have those classes in your style sheet (or in a specific file if your using a pre-processor) and to call them easily when you build your markup. Or simply copy the styles that you need to style something quickly.

Last, I can only encourage you to create your own design classes, suiting your tastes, fitting your needs. Take a few hours to build some sort of UI kit, it will really save you some time during the design process. You’ll thank yourself, trust me. 😉

Thank you for reading this tutorial. And as always, if you have any questions just ask, or if you have your own classes to show, please do!