CSS Tips For Developers

Introduction

Once the HTML skeleton of your webpage has been set up, CSS is used to add styling to the webpage. CSS also allows designers to create slick designs with just a few lines of code.

To develop projects quickly and efficiently, all developers need to know these CSS tricks. Let’s get started with them since they are sure to boost your productivity.

1. Adding a shadow

CSS enhances the professional appearance of your design. If you spend five additional hours editing the look of a project that you spent 150 hours on, your effort is immediately visible. As a result, you have an advantage when you are looking for better clients or jobs. Shadows are a subtle effect that will improve your quality immediately. Box-shadow is one of the simplest yet most powerful effects. All you need is a single property to do it. Let us look at an example 

#example1 {
box-shadow: 5px 10px;
}

#example2 {
  box-shadow: 5px 10px #888888;
}

2. Perfecting your buttons

In order to get your customers to take action, buttons are essential. It is possible to buy an item, add it to your cart, add it to your favorites, etc., almost on every page. Make buttons more appealing by adjusting their color, size, shadow, adding hover effects, and so on.

Here are a few steps

button {
margin: 25px;
line-height: px;
min-width: 160px;
font-family: serif, sans-serif;
background-color: #brown;
border-radius: 6px;
text-align: center;
border: 0;
cursor: pointer;
color: #blue;
box-shadow: 0 0 3px rgba(115, 0, 0, 0.0);
transition: background-color 0.5s ease-in-out;
}

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

3. Fixed Headers

Getting the header right is an essential part of the design. Fixed headers are popular because they’re familiar and easy. With fixed headers, one of the major setbacks is when the page resizes, the height of the page fluctuates. To solve this problem, use “Flex”. This makes the header scrollable and the overflow is automatic

.pageex{
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.pageex .header{
background-color: #red;
line-height: 30px;
color: #blue;
text-align: center;
}
.pageex .content{
overflow: auto;
flex: 1;
}

4. Centering elements

When you learned CSS, who didn’t end up tearing out their hair for learning about this? Here are 3 magical CSS lines to center anything:

.center {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

5. Adding … when text is too long

After finishing our well-designed design, we realize that the text does not fill the space we designated for it when we insert the real data. E-commerce stores often have long product titles is a perfect example of this scenario. The text will not always align with the design if it occupies more than two lines, since there will be no space for description.

For example instead of having a Refurbished Grade B Bella 12-Cup Programmable Coffee Maker, Matte Black we can have it as  a Refurbished Grade B Bella 12-Cup,…

This would be a more appealing design. Despite the limited space above, we can include a short description and possibly even a buy button with it

To achieve this, we need the following three properties:

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

7. HTML IMG Backgrounds

When designing a website, you often want a container with a background image. Many people do this with the background-image CSS property, but I think it is very bad due to the following reasons:

•  SEO is lost.
• CSS needs to be edited every time.
• Code cannot be reused

Let’s put an image inside HTML and turn it into a dynamic background!

.bg image {
position: relative;
}
.bg image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top:0;
left:0;

7. Use Shorthands

By using shorthands, some CSS properties, such as paddings, margins, fonts, and borders, can be expressed much more simply.

These shortcuts simplify the process of writing CSS rules. For example, a class would look like this without shorthands:

.article {
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 25px;
  margin-right: 25px;
  border-width: 2px;
  border-style: solid:
  border-color: red;
}

Here’s how the same class looks using shorthands:

.article {
  padding: 5px 10px 25px 10px;
  margin: 5px 25px;
  border: 2px solid red;
}

8. Animated lines and decorations

Often, you wish to create interesting effects such as animated underlines, and background images that appear and disappear.

Utilize the ::after and ::before pseudo-element instead of creating a new element. These work well for these things.

The content property must be set; if not, the pseudo-element will not be rendered.

.item::after {
content: "";
position: absolute;
top: yzx;
left: yzx;
... properties you want;
}

Conclusion

Even if browsers or how websites are built change drastically in the future, a good knowledge of CSS will remain a critical skill at any level of development.

CSS tips like these have one thing in common: They are intended to maximize the power of CSS as a styling language so that the browser can do all the heavy lifting. In the long run, when done correctly, this will result in better results, better performance, and a better user experience.

I would like to hear from you if you have any CSS tricks you find useful or interesting in the comments below

Also Read: How to Build a Responsive Website Footer Using HTML and CSS