Top 5 useful CSS3 snippets

Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases speciaclly when using CSS3. These are my top 5 CSS3 snippents which come in handy while web designing a website or working on a project etc.

1) Full-screen Backgrounds With CSS3
This following snippet is great for adding big photographs into the background of your website while keeping them resizable and fixed as you scroll. View Demo

[code lang=”css”]
html {
background: url(‘images/bg.jpg’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/code]

Note: This code will not work properly in older browsers which do not support CSS3 syntax.

2) CSS3 Gradients Template
CSS3 gradients are wondrous part of the newer specifications in CSS. This code snippet should save you a bit of time while working on your project. View Demo

[code lang=”css”]
.color-gradient {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
[/code]

For more on CSS3 gradients, I had recently posted Animating a Button with Gradient Background [Trick]

3) CSS3 Box Shadow
The box shadow property has offered cosmic changes into how we build websites. You can display box shadows on nearly any element and the best part, they all look great! View Demo

[code lang=”css”]
.inner-box-shadow {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}

.outer-box-shadow {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
[/code]

4) Center and crop images
This technique is one of my favorite and works for cropping awkwardly-sized avatar pictures down to squares or circles. Once object-fit: cover is applied to any image and a width and height are set, the photo crops and centers itself. I have been using this for creating avatar for each profile under team section in websites. View Demo

[code lang=”css”]
.avatar {
object-fit: cover;
}
[/code]

5) Animating Ellipsis Using CSS Animation
This following snippet will help you make an animation called ellipsis, useful for making simple loading states instead of using a gif image. View Demo

[code lang=”css”]
.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;
}
}
[/code]

And at last to conclude this post, I would suggest. If your designing any website from scratch without any framework then having Css Reset by Eric Meyer is a must. If your using a framework like bootstrap, not an issue as they already have a css reset. Eric Meyer’s css reset has become almost standard now days for use at the start of your stylesheet. Having been adopted by some of the most influential designers, you can be sure of its quality.