CSS has thousands of secrets, today we will explore 8

If you think CSS is only used to ‘prettify’ a website, add some colors to a text or simply make cool bouncing animations, then you may have to rethink what all CSS is capable of. Already tired of using and searching for ‘How to do X or how to implement Y in CSS?’ Or just want to know the actual powers of CSS? This article will tell you all you need to know about some awesome tips and tricks of CSS features. It focuses on explaining some hidden but valuable things you can do with just the Cascading Style Sheets (CSS).

The entire article will cover the following topics in order:

1. Cursors
2. CSS Smooth Scrolling
3. CSS Shapes
4. Truncating text with CSS
5. Center align with Flexbox
6. Making a drop shadow
7. Creating a typewriter effect
8. Using CSS Custom Properties

So, are you ready to discover some fun yet awesome tricks? Let’s begin!

---

Cursors

CSS comes with some built-in types of cursors for your need. They support multiple conditions depending on what the website interface state is at the current moment. For example, you might need a loading state cursor while items are loading. This tells the users that something is in progress in the background, and they need to wait until the fetching finishes.

How to add cursors?

The cursor property helps you to set the mouse cursor when you point it to any element on the web interface. Here are some of the standard cursors available:

CSS Cursor Property	Description
cursor: wait	This shows that the program is busy, and users can’t interact with the interface till it goes back to default.
cursor: help	This shows that some help information is available.
cursor: crosshair	This cross cursor is used to indicate a selection of a media or bitmap.
cursor: grab	This is used in situations where you want to show that an element can be gripped.

Example:

Let’s take a look at how we can implement this along with the output.

<div>
	<div class="demo-waiting">Waiting...</div>
	<div class="demo-help">Get help</div>
	<div class="demo-crosshair">Crosshair</div>
	<div class="demo-grab">Grab</div>
</div>

This defines four headings of different levels nested inside a div container. We want each of these to have different cursor values in CSS. Here’s how we do it:

div.demo-waiting {
  cursor: wait;
}

div.demo-help {
  cursor: help;
}

div.demo-crosshair {
    cursor: crosshair;
}

div.demo-grab {
    cursor: grab;
}

You can try the results here:Waiting…Get helpCrosshairGrab

Add custom emoji and image cursors!

Want to go even further in customizing the default cursor? With CSS you can replace that boring cursor with your favorite image, or emoji! Let’s make the following demo to illustrate this:HappySad

Looks cool right? Here’s the CSS code for the same:

.happy {
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
  
.sad { 
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
}

As you can see, we simply need to use the url() function which takes two arguments, the first is the link to the emoji or an image (support for SVGs and PNGs is available) and if that doesn’t work, it falls back to the auto mode of the system cursor. Learn more about this on the official docs .

---

CSS Smooth Scrolling

The smooth scrolling feature in CSS provides us to set the behavior of the scrolling box when the scrolling is trigged. It comes with two simple properties; auto and smooth. When set to auto, you will see that the scrolling box will scroll instantly while with smooth, it scrolls smoothly using a timing function decided by the user’s platform.

Example:

The best example here is when we need to scroll to a specific section on a webpage.

<div class="scroll-container">
  <h3 class="scroll-page scroll-page-1">1st Section</h3>
  <h3 class="scroll-page scroll-page-2">2nd Section</h3>
  <h3 class="scroll-page scroll-page-3">3rd Section</h3>
</div>

We made a parent scroll-container that houses three child elements with different class names.

.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.scroll-page-1 {
	background: #f0de7a;
}

.scroll-page-2 {
	background: #afe69a;
}

.scroll-page-3 {
	background: #b8b7cd;
}

On the scroll-container class, we added the scroll-behavior: smooth; property which lets us scroll smoothly over the next child element:

1st Section

2nd Section

3rd Section

---

CSS Shapes

If you want to make a custom or a predefined shape, you just have to write some basic CSS! Whether it’s circles, triangles, or even a star! Let’s see how to make each of them.

Make a circle:

<div class="circle"></div>

Yes, that’s it! You only need one div element and everything else will be handled by CSS.

div.circle {
  width: 300px;
  height: 300px;
  background: #2762e9;
  border-radius: 50%;
}

The important part is that we need to give it an equal value of width and height and then use the border-radius property to round off the borders completely. This gives us our circle:

Make a triangle:

div.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2762e9;
}

The HTML just needs one div, just like in a circle, but there are two things to note here; first, make sure to set both the width and height to zero. This ensures our shape doesn’t exceed the given border length.

Second, give separate left and right borders to make sure the border values are equal to get the perfect triangle shape along with the transparent color because if you add any other color value there, it will show up the trimmed part of the square shape. Whatever color you want the triangle to be can be added to the border-bottom.

Here’s what we will get after this:

Make a star:

div.demo-star {
  position: relative; 
  display: block;
  color: #2762e9;
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #2762e9;
  border-left: 100px solid transparent;
  transform: rotate(35deg); 
}

div.demo-star:before {
  border-bottom: 80px solid #2762e9;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: ' ';
  transform: rotate(-35deg);
}

div.demo-star:after {
   position: absolute;
   display: block;
   color: #2762e9;
   top: 3px;
   left: -105px;
   width: 0;
   height: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #2762e9;
   border-left: 100px solid transparent;
   transform: rotate(-70deg);
   content: ' ';
}

With a single div, we can use the CSS pseudo-classes like :before and :after to make additional shapes of the star from the same element.

For the first ruleset, we need to define the base color of the star shape, the bottom-right, and bottom-left borders with the transparent color value just like in a triangle shape. To make sure your star is upright, we need to rotate the shape by 25 degrees we do this with the rotate(35deg) transform.

The :before pseudo-class makes the top triangle of the star. Make sure you give the border-bottom the same color as you gave in the parent rule. We need to move it freely from the rest of the shape so that we can give it custom top and left alignment. That’s why position: absolute is important here.

Finally, it’s time to make the diagonal shapes. Here, the :after pseudo-class will help. Again, make sure the position is set to absolute and the rotate value is around -70deg. This will give you the perfectly aligned star:

---

Truncating text with CSS

Imagine if you have a lot of text inside a container and you want to show only the first two lines of it while the remaining text should be clipped with an ellipse (…) or any other symbol. How to do this? Well, here we need the text-overflow CSS property. Let’s say we want something like this:

CLIPPED

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.

ELLIPSIS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.

As you can see, the first line in the “CLIPPED” demo gets cut off in its second sentence as soon as the text inside it exceeds a certain width. Same with the “ELLIPSIS” demo, but here we get extra ellipsis to indicate that there is more text.

<div class="flex justify-center border-2 border-gray-200 p-4">
    <div class="demo-truncation">
    	<h4>CLIPPED</h4>
      <p class="clipped">
      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.
      </p>
      <h4>ELLIPSIS</h4>
      <p class="ellipsis">
      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.
      </p>
    </div>
</div>

div.demo-truncation {
	width: 100%;
}

p.clipped {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

p.ellipsis {
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

In the HTML, we simply have a container to hold these two text elements. Check how we have extra two lines that are clipped with the following lines of CSS.

For this to work, we need three things. First, we set the overall width of the entire container element i.e. 100%, then in the two paragraphs, we add:

• white-space: nowrap : This collapses all the available whitespace on the container.
• overflow: hidden : To fit the padding-box, it clips any content inside. That’s why we can truncate the text. And finally, we can use the two types of text-overflow properties i.e., clip and ellipsis, to get the desired output.

---

Center align with Flexbox

One of the classic problems while using the flexbox in CSS is how to align the contents inside it centrally. Whether it’s vertical, horizontal, or both. Let’s assume we want the circle we made above to be vertically and horizontally centered on the webpage.

Here, the border around the circle shows us the entire body of the webpage and we have the circle sitting at the center.

<div class="demo-center h-48">
  <div></div>
</div>

.demo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

First, we need the parent container to hold the circle i.e. flex-container. Inside, we have the simple div to make the circle. On the CSS, we need to use the following important properties related to flexbox:

• display: flex; This sets the parent container to have a flexbox layout.
• align-items: center; This sets the alignment of the flex children to the center of the cross-axis.
• justify-content: center; This sets the alignment of the flex children to the center of the main-axis .

After that, we have the usual circle CSS code that we used before also in this article. As now the circle is both vertically and horizontally centered, we can see that in any screen size, it remains in its place centered.

Centering, especially vertically centering content with CSS, is such a fascinating topic, so we wrote a whole article about it. To know more, read our guide to vertically centering content with CSS.

---

Make a drop shadow

The drop shadow property allows us to add a background shadow effect to our images. This uses the CSS filter property. Suppose we want to have this image with drop shadow:

As you can see in the image, we have a light blue shadow just behind the main image. This can be done as:

img.demo-shadow {
    filter: drop-shadow(10px 10px 10px #A4BBFF);
}

With a single line of CSS code, you can have a drop shadow effect on any image. It accepts the following syntax:

drop-shadow(offset-x offset-y blur-radius color)

So in our code, we gave our image the horizontal offset, vertical offset, and blur radius of 10px each along with the hex color code for light blue.

---

Create a typewriter effect

Creating a simple typewriter effect on a text is possible with the help of just CSS. We need to clear two things here; the first is the text part as to how it should be clipped and second is the actual typewriter animation which gives us the overall effect we need like:This is a typewriter effect!

<div class="demo-typewriter">
  <span>This is a typewriter effect!</span>
</div>

.demo-typewriter span {
  color: #262626;
  overflow: hidden;   
  border-right: .10em solid #FF8D8D;
  white-space: nowrap;   
  margin: 0 auto;   
  letter-spacing: .4rem;   
  animation: demo-typewriter 3s steps(30, end), demo-cursor 1s step-end infinite;
}
@keyframes demo-typewriter {
  from { 
    width: 0;
  }
  to { 
    width: 100%;
  }
}

@keyframes demo-cursor {
  from, to { 
    border-color: transparent; 
}
  50% { 
border-color: #FF8D8D; 
  }
}

Let’s see what each code line means here:

1. We center align the entire text with flexbox on the body tag.
2. Next, on the heading, we add overflow: hidden to make sure that the rest of the letters of the sentence do not show up until the animation is done.
3. To make the effect more realistic, we add a cursor and this is made by using the border-right property.
4. The white-space is used so that the entire text content lives on a single line and there is no text wrapping around its container.
5. Next we set up the animation. We have two of those; the typewriter animation simply changed the entire width of the text from 0 to 100% in 3 seconds, while the other cursor animation is added to the cursor we made in point #3. This runs for 1 second and it changes its border color from transparent to #FF8D8D.

---

Use CSS Custom Properties (vars)

Sometimes we need some CSS values to be used in multiple locations or elements. These values can be reused throughout the document or on the entire web project.

One common example is a brand color of a website. Say it is #120078. Now we need this to be applied to our link tags, buttons, ad containers, etc. Now multiple pages will have the same value across.

So to not use it each time and make it easier to find a specific fixed value, we use CSS Custom Properties. Here’s a quick example to showcase the situation:

:root {
  --brand-bg-color: #120078;
}

a  {
  color: white;
  background-color: var(--brand-bg-color);
}

.main-link {
  color: var(--brand-bg-color);
  padding: 3px;
}

The --brand-bg-color is our CSS variable here defined at the root of the project styles. Its value equals #120078. What this means is that whenever we need this specific color in any of our links, buttons, etc, we can simply use it as var(--brand-bg-color)instead of manually defining it everywhere. It helps a lot when we want to change the color. We simply update the value of --brand-bg-color and it reflects on every element it is used!

---

Conclusion

And that’s it! These are all of the common things frontend developers use in their code. Sometimes it’s about adding an animation while other times we need a shadow of CSS-only art like triangles and stars.

I hope this was useful to you and make sure to add your twist to each of these CSS tips!

Thanks for reading!

Source: livecodestream