Another 5 Next-level CSS tricks to make beautiful Web Designs.

Previously I showed 5 cool CSS tricks that help you make beautiful web designs.

5 Next-level CSS Tricks to Enhance Your Web Design

Now, let’s explore five more cool tricks!

1. Truncate long Text with Lines

You may already know how to truncate longer texts which exceed a certain width using ellipses using text-overflow property like the following,

p {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

However without restrict using the width property. you can also truncate the long text by the number of lines of your liking. for that, you need the following CSS properties.

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10; /* change line numbers */
  overflow: hidden;

  font-size: 1.5rem;
}

Take a look at this CodePen snippet.

2. Gradient Text

You may already have seen gradient colours used in the background of many websites. Well, it’s not just limited to backgrounds; you can also apply gradient colours to text as well using the following CSS rules.

h1{
  background: linear-gradient(100deg, blue, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  font-size: 5rem;
}

Take a look at this CodePen for a quick example.

3. Flip Using CSS

You can flip an image horizontally or vertically in CSS by using the transform property with scale functions.

To flip an image horizontally, simply use scaleX(-1) CSS property and use scaleY(-1) to flip an image vertically.

To flip an image both horizontally and vertically at the same time use scale(-1)

In the example below, you can see the same image repeated four times. Starting from the second image, images are flipped in various ways using CSS.

img:nth-of-type(2) {
  transform: scaleX(-1); /* flip verticlally */
}

img:nth-of-type(3) {
  transform: scaleY(-1); /* flip horizontaly */
}

img:nth-of-type(4) {
  transform: scale(-1); /* flip in both verticlally and horizontaly */
}

Take a look at this CodePen for a demonstration.

And for a side note, you can rotate an image to any degree using the rotate() property in CSS.

img {
  transform: rotate(45deg); 
}

4. Dynamic Contrast using CSS

You can dynamically make specific parts of text or design stand out by visually distinguishing them from the background, like the following image.

You can see that the text has two different colours in two distinct parts depending on the background colour. To make this effect, you can blend the colour of the text with the surrounding background just using 1 CSS rule

h1{
  mix-blend-mode: difference;
}

The difference blend mode subtracts the colour values of the content from the colour values of the background, creating a striking visual effect. Elements with light colors tend to stand out against dark backgrounds, and vice versa.

In the following CodePen, you can drag the white circle on the screen. When it goes under the text, the text colour above the circle changes.

5. Write Text vertically

In the past, if you wanted text to appear from top to bottom, you had to rotate the text. but now you can use CSS writing-mode property to specify whether your lines of text are arranged horizontally or vertically.

.text1{
  writing-mode:vertical-rl
}

You can explore various writing modes by checking out the documentation on MDN.

writing-mode - CSS: Cascading Style Sheets | MDN

So here they are, Another 5 Next-level CSS tricks. These are just a few of the numerous CSS tricks that help you create beautiful web designs. So go ahead and play with them!

Happy Coding!!!