10 Useful CSS Snippets Every Designer Should Have

This article was contributed by Rajeesh PK.

Designers and developers should always be looking out for tricks and hacks that help them develop their process in-line with browser support.

You can use some of these CSS snippets to automatically adjust the specifications of the columns in your table, wrap long text or even create a simple loading state without using GIFs.

1) Align anything vertically

This is one of the scenarios that designers who work with CSS face most often – we all wanted help with text alignment or element alignment vertically at least once! Using CSS3 Transforms, this can be easily sorted out.

Find the snippet provided below, which you can use the next time you are stuck.

.verticalcenter{

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);
}

With this, you can bring about a vertical alignment across boxes, single lines of text, paragraphs. And, you can easily find browser support for Firefox 3, Chrome 4, Opera 10, Internet Explorer 9 and Safari 3.

2) Stretch elements to fit into the full height of a window height

There might be scenarios when you would want to expand your components to fit into the exact height of your window. With the basic element resizing, you can resize to fit into the container size. But, if we want to resize a component to the size of a container’s full window height, then we need to start from the elements, such as html and body.

Here, is how to:

html,

body {

height: 100%;

}

Let us then apply 100% height to the specific component and:

div {

height: 100%;

}

3) Apply different styles to different file formats

Sometimes it is not easy to identify where a link is moving to, in such situations, you wish that that these different links would appear different from one another. Here you can find a snippet which will add icons to the link text and also insert icons above the link text. It will use a variety of icons or images for different sources.

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;

4) Grayscale images with cross browser support

If you want your website to appear more classic and even minimalistic, you can use Grayscale that will splatter a brighter and in-depth tone. Here is an example on how to apply grayscale filters to images using SVGs. Many of you might have already used this.

<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>

If you want this to be rendered across cross browsers, use the ‘filter’ property as given below.

img {

filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

}

5) Animate backgrounds in gradient

Have you ever thought of a life without animations? It is difficult to imagine. So, let us find out how the animation feature of CSS can help you with this. It is believed that this gradient is one of the best that CSS offers. It is possible to animate the opacity, size, and background color with this, but it doesn’t offer gradient colors. Here is a snippet that will help you with this. The background position would be moved to bring about an animation effect.

button {

background-image: linear-gradient(#5187c4, #1c2f45);

background-size: auto 200%;

background-position: 0 100%;

transition: background-position 0.5s;

}

button:hover {

6) Auto width in table columns

The truth is that none of like playing with tables as they are not easy to deal with while trying to bring about adjustments across the widths of columns. Here, is a shortcut or snippet that will help you. By inserting ‘white-space:nowrap’ within the ‘tdelement’, you can bring about appropriateness in the text wrapping.

td {

white-space: nowrap;

}

7) Display box shadows on any side (one or two)

Here is an interesting snippet that will help you with box shadows on both, or either side of the box. If we want this to be done, the box and its related height and width need to be defined. You can give this shadow using the ‘:after’ pseudo component. Just ensure that it is placed in the right point. This is how bottom-only shadows are created.

.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;

}

8) Wrap text content that is too long

For texts that are longer than their containers, use this simple hack and it will get sorted with ease. The default mode will fill text horizontally, no matter what the width of the container is, as given in the example below:

You can use this snippet to get the text to fall within the width of the container or holder.

pre {

white-space: pre-line;

word-wrap: break-word;

}

Before:

After:

9) Blur text in CSS

Do you want to blur your text? Use ‘text-shadow’ for this. All you have to do is use transparent color and then add the text-shadow as given below:

.blurry-text {

color: transparent;

text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

10) Animate ellipsis

The below-given sample shows how you can use snippets to create an animation named as ellipsis, which will further help in generating loading states that are simple – all without using GIF images.

.loading:after {

overflow: hidden;

display: inline-block;

vertical-align: bottom;

animation: ellipsis 2s infinite;

content: "\2026"; /* ascii code for the ellipsis character */

}

@keyframes ellipsis {

from {

width: 2px;

}

to {

These are just some popular CSS snippets that you can use to bring about changes to your design. Along with CSS snippets, keep yourselves updated with popular CSS frameworks as they are in the constant state of improvement.

—

About the author: Rajeesh is a Director and Creative Head at Acodez, a leading web development company in India.