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, auto adjust 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="https://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: "\2026"; /* 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.