10 Simple & Smart CSS Snippets

CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use.

If you want to wrap long text, autoadjust the width of your table columns, or create a simple loading state without the use of Gifs, we have the snippets that will deliver, and more.

Recommended Reading: 50 Useful CSS Snippets Every Designer Should Have

1. Vertical Align Anything

If you work with CSS, then this will bug you: how do I align text or an element vertically of the container? Now, with the use of CSS3 Transforms, we can address this problem more elegantly, like this:

.verticalcenter
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);

Using this technique, everything — from a single line of text, a series of paragraphs, or a box — will align vertically. As far as browser support is concerned, CSS3 Transform works in Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.

2. Stretch an Element To Full Window Height

In certain scenarios, you might want to stretch an element to the full window height. Basic element resizing will only resize up to the container size so to make an element span the height of the entire window height, we need to span the top-most element: html and body.

html, 
body 
 height: 100%;

Then apply 100% height to any element, like so:

div 
 height: 100%;

3. Applying Different Styles Based on File Format

Sometimes you can have several links that you want to make look different from others, in order to make it easier to know where the link is going. This snippet below will add an icon before the link text and use different icons or images for different kinds of sources, which in this example is an external link.

a[href^="http://"]
 padding-right: 20px;
 background: url(external.gif) no-repeat center right;

/* emails */
a[href^="mailto:"]
 padding-right: 20px;
 background: url(email.png) no-repeat center right;

 
/* pdfs */
a[href$=".pdf"]
 padding-right: 20px;
 background: url(pdf.png) no-repeat center right;

Here’s what it looks like.

4. Cross-Browser Image Grayscale

Grayscale can deliver a deeper tone to your website making it look more classy and sometimes minimalistic. Here, we will be adding a grayscale filter to an image using SVG. Here’s what we do to apply grayscale:

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

And to deliver this cross-browser, we use the filter property this way:

img 
 filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

5. Animating A Gradient Background

One of the most enticing feature in CSS is the ability to add animation effect. You can animate background color, opacity, size, but unfortuantely not for Gradient Color. Currently, you can’t animate the gradient background however this snippet may be of some help. It moves the background postion to make it look as if it is animating.

button 
 background-image: linear-gradient(#5187c4, #1c2f45);
 background-size: auto 200%;
 background-position: 0 100%;
 transition: background-position 0.5s;
  
button:hover 
 background-position: 0 0;

Here’s a demo to show you what it does.

6. CSS Table Column Autowidth

Tables are a pain especially when it comes to adjusting the widths of columns. However, there is a shortcut you can use. Add white-space: nowrap in the td element to easily correct the text wrapping.

td 
 white-space: nowrap;

Check out the demo to compare the result.

7. Showing Box Shadow Only on One or Two Sides

If you want to have box shadows, try this trick which can give you box shadows on either side of a box. To make this, first define a box with a specific width and height. Give it a shadow using :after pseudo element and play around to get the right positioning. This is the code to make a bottom-only shadow:

.box-shadow 
 background-color: #FF8020;
 width: 160px;
 height: 90px;
 margin-top: -45px;
 margin-left: -80px;
 position: absolute;
 top: 50%;
 left: 50%;

.box-shadow:after 
 content: "";
 width: 150px;
 height: 1px;
 margin-top: 88px;
 margin-left: -75px;
 display: block;
 position: absolute;
 left: 50%;
 z-index: -1;
 -webkit-box-shadow: 0px 0px 8px 2px #000000;
 -moz-box-shadow: 0px 0px 8px 2px #000000;
 box-shadow: 0px 0px 8px 2px #000000;

This is the demo:

8. Wrapping Long Text Context

If you ever come across a word that is longer than the container itself, this trick will be helpful to you. By default, the text will fill horizontally regardless of the width of the container for example:

With simple CSS code you can make the text adjust the width of the container.

pre 
 white-space: pre-line;
 word-wrap: break-word;

This is what it looks like now:

9. Making the Blurry Text

Want to turn text blurry? What we can do is make the color transparent,t hen add text-shadow like this.

.blurry-text 
 color: transparent;
 text-shadow: 0 0 5px rgba(0,0,0,0.5);

And voila, you got yourself some blurry text.

10. Animating Ellipsis Using CSS Animation

These snippets will help you make an animation called ellipsis, useful for making simple loading states instead of using a gif image.

.loading:after 
 overflow: hidden;
 display: inline-block;
 vertical-align: bottom;
 animation: ellipsis 2s infinite;
 content: "26"; /* ascii code for the ellipsis character */

@keyframes ellipsis 
 from 
 width: 2px;
 
 to 
 width: 15px;
 

Lets see the demo.

Do play with the snippets and experiment with what more you can do with it.

Related posts:

1. Web Design: Equal Column Height With CSS


2. Creating a Stitched Effect Using CSS


3. A Look Into: CSS Border Corner Shape


4. A Look Into: CSS4 Image Set

10 Simple & Smart CSS Snippets