Every developer should know these CSS tricks to develop their projects quickly and efficiently. They’re sure to increase your productivity to the next level—let’s get started.

1. Hover Effects

You can add a hover effect to an HTML element using the :hover selector.

Example: Adding hover effect to a button element.

HTML Code:

CSS Code:

You can play around with this code and add effects like fade-in, grow-in, skew, and so on. Make it your own!

CSS Fade-in Effect on Hover

CSS Grow-in Effect on Hover

2. Resize Images to Fit a div Container

You can resize an image to fit a div container using the height, width, and object-fit properties.

HTML Code:

CSS Code:

3. Overriding all the Styles

You can override all other style declarations of an attribute (including inline styles) using the !important directive at the end of a value.

HTML Code:

CSS Code:

In this example, the !important rule overrides all other background-color declarations and ensures the background color will be set to blue rather than green.

4. Truncate Text With Ellipsis

You can truncate overflowing text with an ellipsis (…) using the text-overflow CSS property.

HTML Code:

CSS Code:

5. Using text-transform

You can force text to be uppercased, lowercased, or capitalized using the text-transform CSS property.

Uppercase

HTML Code:

CSS Code:

Lowercase

HTML Code:

CSS Code:

Capitalize

HTML Code:

CSS Code:

6. Using Single-Line Property Declaration

You can use the shorthand properties in CSS to make your code concise and easily readable.

For example, CSS background is a shorthand property that allows you to define the values of background-color, background-image, background-repeat, and background-position. Similarly, you can define properties for font, border, margin, and padding.

Single-Line Background Property Declaration

You can simplify the above declaration to a single line:

The shorthand properties are very convenient to use, but you need to consider some tricky edge cases (as outlined on MDN Web Docs) while using them.

7. Tooltips

Tooltips are a way to provide more information about an element when the user moves the mouse pointer over the element.

Right Tooltip

HTML Code:

CSS Code:

Left Tooltip

HTML Code:

CSS Code:

Top Tooltip

HTML Code:

CSS Code:

Bottom Tooltip

HTML Code:

CSS Code:

You can also use the Bootstrap library to create custom Bootstrap tooltips.

8. Add Shadow Effects

You can add CSS shadow effects to texts and elements using the text-shadow and the box-shadow CSS properties respectively.

CSS Text Shadow

The text-shadow CSS property adds shadows and layers to the text. The text-shadow property accepts a comma-separated list of shadows to be applied to the text.

Syntax of the text-shadow CSS Property:

Note: The color and blur-radius arguments are optional.

For example:

CSS Box Shadow

The box-shadow property is used to apply a shadow to HTML elements.

Syntax of the box-shadow CSS property

Note: The blur, spread, and color parameters are optional.

For example:

If you want to have a look at the complete source code used in this article, here’s the GitHub repository.

Style Your Website Using Modern CSS Tricks

Adding CSS text shadows to a website is a great way to draw the attention of the users. It can give the website a certain elegance and a unique feel. Get creative and experiment with some text-shadow examples that may align with the theme of your website.