CSS is a wonderful tool for web developers to take their amazing code and add the much-needed special sauce that will impress users. Most developers know the basics of how to define things like colors, font sizes, and more, but CSS has tons of functionality that can do so, so much more.

Here are some amazing CSS tricks that every developer can use to spark their websites.

1. Selection in CSS:

On the web, we select content for different reasons. Maybe we want to copy a text and quote it somewhere, or maybe copying is just a habit that some users have that makes reading easier. Usually, when the user selects any text on the web page, it has a white background with a blue background. Why keep your webpage simple and the same as others, although we can style it according to the web page theme? Here is an amazing trick.

In the above example, the first paragraph shows the default color while selecting text. On the other hand, another paragram shows the custom color which we added in CSS.

2. Negation pseudo-class:

The :not(selector) selector is used to style every element that the selector does not specify. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Ex: If you choose the particular text color of the web page to expect some tag, class, or ids, then you can use :not(selector) pseudo-class. Here is a live example:

3. Background-Blend Mode

The background-blend-mode property sets how an element's background images should blend with the element's background color. Blending modes should be defined in the same order as the background-image property. Here is a live example:

In the above example, only one blend mode is used, we can also use other values such as normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, etc.

4. Scroll Behavior

The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.

The syntax for smooth scroll-behavior specified on the root element as:

*{
    scroll-behavior: smooth;
}

Here is the live example for smooth scroll behavior:

5. Uploading Custom Fonts

Adding custom fonts to a project is pretty straightforward with CSS. An extremely simple way to do this if you’re using something like Google Fonts is to just use @import url (‘GOOGLE FONT URL HERE’) and then call your font in a specific element using “font-family”.

Sometimes these google fonts aren’t enough though — you might have a designer create your business a custom font that isn’t available anywhere else, or you might buy a font that you need to download to your local computer to use in your projects.

We will do this by using the @font-face property. Here is an example:

6. Truncate a string

Sometimes we want to fit the string inside the div, but it overflows outside a div because of the long string. So we want to truncate the string by length, by height, or lines. In Javascript, there are a few ways how we can manage it but, did you know that it’s possible to cut the text in CSS as well? Let’s check it out:

Above, you can see how CSS can cut the text and finish it with …. Here, I used text-overflow: ellipsis; to show dots and -webkit-line-clamp: 3; to show only three lines.

7. Clip path

Sometimes the designer went a little bit more creative, and now you have to put an image in a specific shape, like the triangle or other. For this, you could use the clip-path property! Let’s take a quick look at how it works:

In the example above, I created a circle, ellipse, and a custom polygon shape.

8. Design Custom Scrollbar

Sometimes we need a custom scrollbar instead of a default scrollbar design to match with web page design. Custom scrollbars on the web can make a site or design stand out. They can help in portraying key design aspects of a site, whether that be a specific color or a particular style.

For example, the scrollbar at the YouTube web app portrays a very minimalist style that matches their web design.

Here is a live example of a custom scrollbar:

9. Centering div on the web page

Centering your div element can be daunting sometimes, but not when you have this trick in your toolbox. You can center any div with just a couple of lines of CSS.

Here, center a div which is root class by using flex, justify-content: center; use to center horizontally, and align-items:center; use to center vertically on given height.

Note: Flex items will only center vertically according to the height of their container. That means that the container itself needs to be the same height as the page itself. That easy is enough to do using viewport units, where 100vh is 100% of the height of the viewport.

10. Writing Mode

The writing-mode property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element.

In simple, the writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, let’s say we want to add some text that is read from top to bottom and from right to left, like this:

All done!

I hope you found this blog post helpful when deploying your project! If you know of any interesting tricks in CSS, share your favorites with me in comments or social media, I really would like to know.

Follow me on:

GitHub: https://github.com/tanmaythole

LinkedIn: https://www.linkedin.com/in/tanmay-thole-b82978175/

Thanks for reading, and happy coding! 👨🏽‍💻