Design your way

Wednesday, June 3, 2015

Coding takes time and if you’re not used to it, it is actually annoying. Why? Well, consider that you don’t know how to do a certain thing. It will take you a lot of time by trial and error to find the right piece of code that will work correctly on your page.

Using a snippet? Time saving! Your snippet or someone else’s, it doesn’t matter. As long as you know how to use it and it gets its job done, than it’s exactly what you need.

The great thing about snippets is that you can use them over and over again. So as soon as you find a good selection of CSS snippets, hang on to it.

This article comes as a follow-up to the “31 code snippets” one and hopefully will be for you as useful as that one.

CSS Shapes

See the Pen RPNNQG by Preethi (@rpsthecoder) on CodePen.

Login form

See the Pen Login by Marco Biedermann (@m412c0) on CodePen.

Perspective Scrolling in CSS

See the Pen Perspective Scrolling in CSS by Hornebom (@Hornebom) on CodePen.

Responsive Navigation Bar

See the Pen Responsive Navigation Bar by Hanlin Chong (@hanlinC) on CodePen.

App Store Button

See the Pen THREES App Store Button by Katy DeCorah (@katydecorah) on CodePen.

CSS vertical align

.abracadabra{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}