Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Tricks That Will Make Your Work Easier

DZone's Guide to

CSS Tricks That Will Make Your Work Easier

Here are a few fun and aesthetically pleasing tips and tricks for all you web devs who love working with CSS to help make your site look great and function well.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

The Cascading Style Sheets (CSS) offer such a wide variety of creative options that no one can master them all. Luckily, there are several tweaks that may seem simple or insignificant, but they are actually that set of details that contribute to a sleek and witty design. So, let’s see the best CSS tips and tricks out there that will make your programmer work easier.

Start With a Master Style Sheet

We all know the drill when beginning a new stylesheet. Open the new page with the <Head> </Head> sandwich where you add the CSS text style and spice it all up with style sheet information that should be enfolded in <!-- and --> to make them invisible.

However, by diving directly in the middle of your commands, you will overlook the connection between your style sheet and web browser. Many programmers face inconsistencies in their web design which doesn’t make sense. The secret here is that usually web browsers have some format of their own which jams your commands.

To avoid that, start with a Master Style Sheet which will reset these standard formats. You should just insert the following script at the top of your sheet to override the original theme with your own.

@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");

Replace the Normal With Smart Quotes

Typography is an important factor of any website, and everybody should use it correctly. For instance, did you know that simply using the quotation marks from your keyboard are actually used for coordinates or measurements? If you simply insert them into your text to signal a quote, the inverted commas will land an unusual look, which will be disturbing for the professional eye.

This is why the “q” tag is highly recommended to mark down your quotes, which simply go by the name of smart quotes. This is because they automatically adjust to the proper quotation marks before and after your text.

q {
    quotes: "“" "”";
}


However, the story doesn’t end here. There are some variations of quotation marks that depend on culture to culture. For example, the Germans are a bit peculiar when it comes to these signs, so they actually invert them, and they somehow ended up looking like this „ Ich glaub, mein Schwein pfeift. “ To make sure that you respect all of these variations, you can simply insert the attribute of language inside your code.

q:lang(de) {
    quotes: "„" "“";
}


Parallax Scrolling Effect

One of the most beloved designs of this year is the Parallax website theme. It is everything that the web trends dream about such as sleek design, compact and modern features, a simplicity which becomes the ultimate sophistication. The Parallax effect can be equally with the smooth touch of a silk material.

Many rely on a JavaScript library to achieve this kind of design, but we recommend you take control over the situation and insert your own code lines in CSS. This way, there will be no room left for inconsistencies with your design which can create a sluggish parallax scroll effect.

@import url(http://fonts.googleapis.com/css?);
html {
    height: 100%;
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: Nunito;
}
h1 {
    font-size: 250%
}
p {
    font-size: 140%;
    line-height: 150%;
    color: #333;
}
.slide {
    position: relative;
    padding: 25vh 10%;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}
img {
    position: absolute;
    top: 50%;
    left: 35%;
    width: 320px;
    height: 240px;
    transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
    padding: 10px;
    border-radius: 5px;
    background: rgba(240, 230, 220, .7);
    box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
    transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.title {
    width: 50%;
    padding: 5%;
    border-radius: 5px;
    background: rgba(240, 230, 220, .7);
    box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
    margin-left: 0;
    margin-right: auto;
}
.slide:nth-child(2n+1) .title {
    margin-left: auto;
    margin-right: 0;
}
.slide,
.slide:before {
    background: 50% 50% / cover;
}
.header {
    text-align: center;
    font-size: 175%;
    color: #fff;
    text-shadow: 0 2px 2px #000;
}
#title {
    background-image: url("http://lorempixel.com/640/480/abstract/6/");
    background-attachment: fixed;
}
#slide1:before {
    background-image: url("http://lorempixel.com/640/480/abstract/4/");
    transform: translateZ(-1px) scale(2);
    z-index: -1;
}
#slide2 {
    background-image: url("http://lorempixel.com/640/480/abstract/3/");
    background-attachment: fixed;
}
#slide3:before {
    background-image: url("http://lorempixel.com/640/480/abstract/5/");
    transform: translateZ(-1px) scale(2);
    z-index: -1;
}
#slide4 {
    background: #222;
}

CSS Multiple Backgrounds

With CSS3, you can take the powerful impacts that several backgrounds have on our impression and combine them into one. You can achieve this by using the shorthand property and its individual properties except the background-color. The first background will be the first picture you insert in the code and it will be followed by the visuals that are next in line.

.css_multiple_bg {
    width: 100%;
    height: 400px;
    background-image: url(http://image.flaticon.com/icons/svg/214/214280.svg), url(https://pixabay.com/static/uploads/photo/2015/12/10/16/04/mountain-1086641_960_720.jpg), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: bottom right, left, right;
    background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}


Backgrounds That Blink

It wouldn’t have been a proper list with CSS tips and tricks without the presence of an animation. There are thousands of ways to create beautiful clips in CSS, but this is a simple and attention grabbing one. You know that simple image with a mesmerizing, harmonious change of colors that you can spend hours looking at? Well, the following are all the code lines to obtain this effect.

@keyframes blink {
    0% {
        background: violet;
    }
    14.3% {
        background: indigo;
    }
    28.6% {
        background: blue;
    }
    42.9% {
        background: green;
    }
    57.2% {
        background: yellow;
    }
    71.5% {
        background: orange;
    }
    85.8% {
        background: red;
    }
    100% {
        background: violet;
    }
}
@-webkit-keyframes blink {
    0% {
        background: violet;
    }
    14.3% {
        background: indigo;
    }
    28.6% {
        background: blue;
    }
    42.9% {
        background: green;
    }
    57.2% {
        background: yellow;
    }
    71.5% {
        background: orange;
    }
    85.8% {
        background: red;
    }
    100% {
        background: violet;
    }
}
div {
    height: 300px;
    width: 300px;
    border: 1px solid black;
    animation: blink 20s linear infinite;
    -webkit-animation: blink 20s linear infinite;
}

Show Off File Formats

This one is to offer the website visitors more information about your content. There is nothing more annoying than downloading files that you don’t want just because they are in the wrong format. So, to ensure that the users will come to your web page again, you can simply make the icon of the file format pop up next to the download hyperlink. So, let’s begin!

[href$=".pdf"]::after {
    content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647716-pdf-24.png");
}
body {
    font-size: 24pt;
}


Conclusion

So, these are some of the CSS tips and tricks that will come in handy for your future projects. Even though there are many shortcuts throughout the web as in prewritten JavaScript libraries, it is best to take the hard road and use CSS code lines. This way you make sure that everything works smoothly and there are no inconsistencies in your work.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
css ,web dev ,markup

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}