10 Awesome CSS Tips and Tricks

This is a collection of CSS tips, tricks, and fixes, or whatever you want to call them, that I stumbled upon along the way. I have to say from the very beginning that you can find most of these, if not all of them, familiar. On the other hand, I really hope that some of you might learn something new from this post. So let’s begin.

1. How to add another border

If you ever find yourself in the situation where you need to display an element with two borders or you just want to give your border some space in or out of the box, outline may come in handy:

.div{
    outline: 1px #000 solid;
    outline-offset: 5px;
}

You can easily try it out  and you might also want to check which browsers support it.

As you can see, the offset is another cool thing that you can play with when using outline.

2. How to add ellipsis dynamically with CSS

If you ever want to shorten a longer text, but you don’t want to just suddenly cut the text, you can use:

.div{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

You can see an example here or check which browsers support this here.

3. How to easily clear the floats in your element

Let’s say that you have an element with two inline children. One has to float to the left, and one to the right. The problem that you’re going to see is that the parent element will not take the height of the children elements.
Example

You can fix this by using a third child element which has “clear:both” property, or you can just add the overflow property to your parent element with the value of auto, hidden or scroll.

.customBox{
    overflow:auto;
    //overflow:hidden;
    //overflow:scroll;
}

Fixed example

4. How to style placeholders

Have you ever had the need to style a placeholder? Then,for example, you may know that is not as easy at it is to style a text. Using the next few lines will do the trick:

::-webkit-input-placeholder {}
::-moz-placeholder {}
:-ms-input-placeholder {}

See it work here.

5. How to keep your padding and borders inside

There is a thing I never liked about paddings and borders: in most browsers, I had to take them into consideration when thinking about my element’s width.
There is a CSS property that you can use so that you force the element to display them inside your box without affecting the width.

box-sizing: border-box;

Interested in it’s browser support? Find it here.

6. How to avoid mobile font boosting

You might have noticed that some of your texts look bigger than they should when browsing your website from some mobile devices. That’s called font boosting and appears when the height of the element is set dynamically. One way to stop this is by adding the next line of code at the beginning of your CSS file:

html * {max-height:1000000px;}

This will set the max-height property with an unreachable value for all your elements and stop the font boosting.

7. How to add multiple background images

If you ever need to add multiple background images to an element, you need to know that you can easily do this by just adding the URLs and other background properties separated by a comma.

.div{
    background-image: url("http://imageUrl.jpg"), url("http://imageUrl.jpg");
    background-position: left top, right top;
    background-size: 50px auto;
    background-repeat: no-repeat, repeat-y;
}

You can see an example here.

8. How to better position your background images

It’s good to know that you can specify exactly where you want your background image to be positioned inside your element. You can add the exact number of pixels you want it to distance itself from the element extremity.

.div{
    background-position: right 200px top 40px;
}

See it working here.

Browser support, here.

9. How to dynamically calculate dimensions with CSS

A pretty cool thing added to CSS is the property that let us to calculate dimensions dynamically. The property is simply called calc and you can see it working here.

.div{
    width:calc(100% - 125px);
}

You just need to still be careful about its browser support, here.

10. How to scale your elements relative to the viewport dimensions

When speaking of element dimensions relative to the viewport sizes we should consider using these units: vw, vh, vmin, vmax.
Setting an element’s width to 25vw and its height to 35vh will make it 25% of your viewport width and 35% of your viewport height.

.div{
    width:40vw;
    height:70vh;
}

You can play with it here.
This is it’s browser support, here.

I hope these tips helped! Let me know your thoughts in the comment section below.