1. Home
  2. JavaScript
  3. 10 Practical CSS Tricks every developer should know

10 Practical CSS Tricks every developer should know

Juan Carlos Arias Ambriz

Juan Carlos Arias Ambriz

A freelance Frontend developer with over 15 years of experience.

Last updated on

CSS is quite unpopular, might look boring, and very few people are able to master it the right way. However, it is a skill that can give you a great competitive advantage over other developers. If you like solving puzzles, then you will find joy in writing CSS by looking at it as a puzzle to solve.

One of the (good) side effects of being fluent in CSS is that your HTML becomes smaller – you won’t need as many nodes to create a certain look. Also, you will find it a lot easier to make not only your websites but also your apps responsive. In the end, you will save a lot of time, headache, and discussions with designers.

Keeping all of this in mind, we have created a list of 10 practical CSS tips that you can use in your everyday life. We are sure you will find their application in a lot of situations. Let’s dive right in then.

Illust
10 practical CSS tricks

Table of Contents


CSS Trick #1 – Adding … when text is too long

We have all been there – finished our nice-looking design just to discover that when real data comes in, the text simply doesn’t fill in the space assigned to it. Long titles of products in an e-commerce store is a common example. Having the text over two lines will not always align with the design since that will leave us with no space for description. Check the example in the image below:

I would rather prefer a design like the one shown below. Here, we have enough room to place a short description or even a buy button.

To achieve this, we need a combination of 3 properties:

/* Avoids text being rendered outside the container */
overflow: hidden;
/* Avoid text going to multiple lines */
white-space: nowrap;
/* Sets the ... once the text overflows */
text-overflow: ellipsis;

You can view the example below:


CSS Trick #2 – Adding a shadow

One of the biggest advantages of CSS is that your design looks more professional. You might have spent 150 hours on a project but if you work on it just an extra 5 hours adjusting the look, your effort is visible right away. This gives you an advantage when looking for better clients or better jobs as you deliver higher quality. Shadows are one of those subtle effects that will increase your quality instantly.

One of the most simple yet powerful effects is box-shadow. The best part is you can do it using a single property. Check the example below to see how effective this is:

Now, let’s look at the values box-shadow uses:

/* Box shadow properties */
box-shadow: h-offset v-offset blur color;
/* Box shadow example */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

As a bit of extra advice, the key to having nice subtle shadows is to use rgba values instead of a regular #hex rgb. This is because with rgba values we can make our shadows have an opacity which will make them more subtle and will look a lot more professional.


CSS Trick #3 – SVG Alignment and Color

Icons are used everywhere nowadays, be it menu icons, cart icons, favourite icons, and a variety of others. We run into problems with icons since we need to have our pages work over multiple screens with multiple resolutions. SVGs come to your rescue in such scenarios!

SVGs are perfect for icons since they look great at every resolution. However, if you want to add SVGs as the source of an image tag, there are several things you will be unable to do, like controlling the color. So, the best way to deal with an SVG file is to simply copy the content of the file and place it directly into the HTML code.

One quick way to do that is to go to a website like fontAwesome, search for the icon you like and download the file. Once you download the file, you can view the source and paste the content in your HTML like this:

<b class="favorite-icon"><svg>.....</svg></b>

Having done that, let’s now go ahead to create a 30x30 circular button and center our icon inside it:

.shopping-item b.favorite-icon {
width: 30px;
height: 30px;
/* Set this as the ref to move svg */
position: absolute;
bottom: 10px;
right: 10px;
background-color: #E83D3D;
border-radius: 30px;
display: block;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.shopping-item b.favorite-icon svg {
/* Define size of the svg */
height: 20px;
/* Define color of svg icon */
color: #fff;
position: absolute;
/* Position Top-Left corner on the center */
top: 50%;
left: 50%;
/* Move SVG 50% of its size so it's centered */
transform: translate(-50%, -50%);
}

The result is the following:

4jqnrS0Ujyztz1_2-52dYmYPUHTonwFDUV1uAFrQIznTsrSxiN8Y2TOb0RF45_lOj8O5O2OnJhKJmImx4AS6RMp49SU3fpTFxMkR3jZhFz2SfcerOr_bOXi12I_M3mI3E_qy0Sd--hb3sw

Explanation:

SVGs can be colored via CSS which means we can use hover selectors to change the color of the icon. However, icons must be prepared for that, where the SVG file typically uses fill=”currentColor”. Fortunately, icons available at fontawesome and similar places exhibit this behaviour out-of-the-box.

Another handy tip is to use “transform: translate” to move a node according to the size of the node itself and not its parent as “top, left” properties do. Basically, we position the icon in the center and use transform to center it using the size of the icon.


CSS Trick #4 – Perfect your Buttons

There are multiple ways of achieving the same output in CSS as is the case with any programming language. This means there might always be a better way of doing the same thing and achieving an equivalent result.

Buttons are one of the elements which are used over almost every single page. In some cases, they even contain the purpose of the page e.g. buying an item, subscribing to an email list, answering a survey.

Given this context on buttons, let’s see what we can do to make our buttons more appealing:

  1. Size: To have a button clickable on a mobile device we should have an area of at least 40×40 px.
  2. Box-shadow: We can add a box-shadow to give a depth effect to the button.
  3. Min-Width: When the text is too short in a button, we can add a min-width to have a minimum size for the button. Also, remember to use textAlign to center the text.
  4. Hover: Hover makes your buttons interactive. When you change the color of a button on the mouse hover, you are able to grab the attention of the user easily.
  5. Transitions: Transitions add that little extra touch signifying that you are a pro, by adding a transition of colors
  6. Round Corners: Adding a bit of round corners will always make your buttons look more welcoming (check if this aligns with your brand guidelines though).
  7. Line-height: Are you tired of trying to vertically center the text in a button with padding? You should definitely try line-height. Line-height will set the space between lines but in the case of a single line and an element with display: block or inline-block will be the height of the element.

Let’s take a look at all of it together:

button {
 margin: 20px;
 line-height: 50px;
 min-width: 150px;
 text-align: center;
 font-family: Arial, sans-serif;
 background-color: #FD310F;
 border-radius: 5px;
 color: #fff;
 border: 0;
 cursor: pointer;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 transition: background-color 0.3s ease-in-out;
}

button:hover {
 background-color: #FE712A;
}


CSS Trick #5 – Button Bars

Button bars are bars where we group buttons with different actions. Essentially, they are critical for interaction. These bars contain multiple buttons and most of the time, we aren’t sure about the total number of buttons or size of each button. It is critical to be as flexible as possible while writing your CSS so that you can have the most amount of variations possible.

Now, we need to find a way of making the buttons work independent of the alignment (center, left, right), the number of buttons, and the size of each button. Planning your CSS ahead of execution is the key to pull off this kind of flexibility.

Solution:

// HTML
<div class="button-bar">
<button>Add to Cart</button>
<button>Buy Now</button>
</div>
// CSS
.button-bar {
text-align: right;
background-color: #000;
padding: 0 5px;
}
.button-bar button {
margin: 10px 5px;
display: inline-block;
}

To achieve the same spacing between the bar and the buttons, you need to first understand that the space between the buttons is doubled. This is because the right margin, 5px, of the first button adds up with the left margin, 5px, of the second button giving you a total of 10px which we eventually use for top and bottom. This is why you see that the left and right margins are 5px but the top and bottom are 10px.

Finally, there is an extra horizontal space added by the padding to add that extra 5px missing between the last button and the bar. The text alignment will now work no matter which option you choose.


CSS Trick #6 – Fixed Header

Headers are one of the most common elements on any website or app. Hence, it is critical to handle them correctly. Having a sticky header (making it stay at the top of the page) is something most people desire and achieve by using “position: fixed”. The problem with “position: fixed” is that there is a need to make an empty space at the beginning of the page corresponding to the size of the header.

This has several issues like when the page resizes, the height of the header might change. When this happens, you will need to adjust the space whenever the height of the header changes. Also, part of the scrollbar might be covered by the header, but this can be easily solved by using flex.

Solution:

// HTML
<div class="page">
<div class="header">Logo</div>
<div class="content">
  <!-- Content Page -->
</div>
</div>
// CSS
.page{
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.page .header{
background-color: #555;
line-height: 40px;
color: #fff;
text-align: center;
}
.page .content{
overflow: auto;
flex: 1;
}

What is important when you use this technique is that the element you want to be scrollable contains the property “flex: 1” and its overflow is set to auto. Also, the container of both the header and content should have its height defined and overflow set to hidden.


CSS Trick #7 – Center Content

In today’s world, it is extremely important that our content runs properly on multiple devices with multiple resolutions. This can be extremely difficult to achieve at times and gets very complex when you involve media queries using the same HTML to create a completely different layout.

We are going to start with the most simple scenario which is resizing the content of the page according to the size of the browser. We are also going to assume the content inside a div is text.

We don’t want our page to go extremely wide as it can become very difficult to read when each line is say, 1500px. So, we are going to limit how wide our content can be. Finally, since we are limiting the width of our content, we want to center it horizontally over the screen since it won’t cover the entire width on higher resolution.

Solution:

There are 3 crucial properties we will use here:

  • Max-width: Limits the size of our page to a maximum width
  • Margin: “0 auto” – This helps us have the same left and right margins, which will center our div horizontally with “class=page”
  • Padding: Helps us to have some space between the screen and our content
// HTML
<div class="page">
<p><!-- Content Page --></p>
</div>
// CSS
body{
padding: 20px;
font-family: Arial, sans-serif;
}
.page{
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 20px;
margin: 0 auto;
max-width: 640px;
}


CSS Trick #8 – Resize Image

Once we have dealt with resizing our page, we need to be able to resize our images. Images are special because you don’t want the image to be scaling up. For low-resolution images, it should be kept small so that it doesn’t look blurry.

This time, instead of trying to limit the size to a certain amount of pixels, we would want the maximum size to be the original size. Meaning, if the image is 300px wide, the maximum width should be 300px.

Solution:

The solution is quite similar to the previous example, but with a key difference. The trick relies on the fact that on images, we define the maximum width as percentage. We will set max width to a certain percentage of the screen width.

Let’s consider 2 scenarios where our image is 500px wide and max-width is set as 100%:

1. Screen is bigger than the image

If the screen (or parent element) is 1000px wide, the max width turns out to be 1000px. Note that since the width of the image is just 500px, it will actually display as 500px.

2. Image is bigger than the screen

If the screen is 320px, the max-width is 100%, which is set as 320px. The image in this case will scale down to 320px wide (maintaining the original aspect ratio).

This creates an effect of the image resizing down on smaller screens but having its original resolution on wider screens.

// HTML
<div class="content">
<img src="..."/>
</div>
// CSS
.content{
/* Min space between image and window */
padding: 20px;
}
.content img{
display: block;
margin: 0 auto;
max-width: 100%;
}

CSS Trick #9 – Tooltips

Tooltip is a simple way of giving more information to the user when he/ she hover an element. This becomes necessary because sometimes there is much more information that can fit into the screen. Some of these tooltips will actually open on onClick rather than on mouseOver which allows them to work on mobile devices as well.

One of the biggest issues with tooltips is positioning since most of them need to resize according to the content. So we need something that is flexible and which position it is depending on the position of the element you want to place the tooltip over.

Solution:

The solution relies on positioning the elements correctly and playing with transform to make adjustments depending on the content. As an example, we will try to emulate the tooltip of engagement info on Instagram shown below:

// CSS
.instagram > b .tooltip{
position: absolute;
left: 50%;
line-height: 30px;
border-radius: 5px;
color: #fff;
transform:translateX(-50%);
background-color: #F44456;
}
.instagram > b .tooltip:after{
/* Creates Triangle Pointing Down */
width: 0; height: 0;
display: block;
content: '';
bottom: -8px; left: 50%;
position: absolute;
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #F44456;
}
.instagram > b .tooltip i{
/* We display the stat in here */
padding: 0 5px 0 24px;
position: relative;
display: inline-block;
font-style: normal;
}
.instagram > b .tooltip i svg{
position: absolute;
top: 50%; left: 12px;
transform: translate(-50%, -50%);
}

The first thing you would have noticed is that the position of the tooltip is absolute. We use bottom and left to align the tooltip to the button. However, it still isn’t centered. To complete the trick, we must use transform. Transforms are calculated based on the size of the node to which the transform belongs.

In this example, we have also created an element from CSS that will render in HTML. For that, we have used :after and set the content as empty. Finally, we have used borders to create a triangle.


CSS Trick #10 – Zoom Effect

CSS is all about giving final touches to your project. If you have invested your time and effort in building a product but missed to give those extra touches, the perceived value of your entire product falls down. That’s why making your app look great is not only essential for visual appeal but also, in a saturated/ competitive market, it might be the difference between you and your competition. So, let’s give a cool touch to your project by using animations.

Avatars are used in a lot of places. Let’s create something with an effect on top of it. When we hover over an avatar, we want to make a light zoom over the image. This will make your app look great.

Solution:

The solution is extremely simple. First, we need to create our avatar using an image tag since we will be scaling the image using transform and transition to perform the animation. This trick relies on one important fact. When you use transform, only that element is affected. We will not change the position of the rest of the elements on the screen in any way. This is also a great way of creating effects without worrying about how the rest of the elements will flow since they won’t be affected at all.

// CSS
.avatar {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 50px;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
display: block;
transform: scale(1, 1);
transition: all 0.3s ease-in-out;
}

.avatar:hover img{
transform: scale(1.2, 1.2);
}

I hope you enjoyed the CSS tricks we discussed and that they will help you make your page look better and coding life easier.

Also, check out our Javascript tutorial series where we explain the code and concept behind common use cases.

// Related Blogs

// Find jobs by category

You've got the vision, we help you create the best squad. Pick from our highly skilled lineup of the best independent engineers in the world.

Copyright @2024 Flexiple Inc