Forem: Sandeep Sharma

Animated 3D Rubik's cube with CSS Only

Sandeep Sharma — Sun, 26 Jun 2022 14:51:45 +0000

Animated 3D Rubik's cube

Tooltip with pseudo-elements

Sandeep Sharma — Fri, 17 Jun 2022 10:23:19 +0000

As we're already aware of how important sometimes a simple tooltip is, be it any website that we're visiting or we're building. It is used to give us more info without just clicking anywhere which is nothing but a huge plus.

Did you know, you can build a simple tooltip without writing any extra markup (HTML)? Yes, we can achieve this by just using pseudo-elements. So let's dive right into the code.

Starting with simple HTML and Styling

To start with this, I am going to setup a simple HTML with some basic styling.

<p> Show me some <span id="tooltip-container">more</span></p>

p {
  font-size: 32px;
  color: white;
  font-family: monospace;
}

#tooltip-container {
  text-decoration: underline;
  postition: relative;
  color: lightblue;
}

Adding a pseudo-element

To add a pseudo element, we're going to use a css selector. We can either use ::before or ::after, both would work but we may have to do some positioning changes. I am going to implement this with ::before but you can also try with ::after.

#tooltip-container::before {
  content: 'The more is here';
  position: absolute;
  background: #0a0a0a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  bottom: 100%;
}

As you can see, we have our pseudo-element which is positioned in a certain way according to the styles that we have put. Looking good for now.

Adding hover effect

We added the element but we do not want it be always there, right? We want it to behave like a tooltip. For that, let's add a hover effect (this is just an example, you can add your own effect as well).

#tooltip-container::before {
  content: 'The more is here';
  position: absolute;
  background: #0a0a0a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  bottom: 0;
  transform: scale(0);
  transition: 
    transform 150ms ease-out,
    bottom 150ms ease-out;
}

#tooltip-container:hover::before {
  bottom: 100%;
  transform: scale(1);
}

Adding dynamic content

This is all good, but we may want to avoid putting tooltip content directly into the css. Do we have a better way? The answer is Yes, we do. We can use the data- attribute in HTML which later can be used as a selector in the CSS. Let's continue with the above example and change a few things.

<p> Show me some <span data-tooltip="New tooltip is here!!">more</span></p>

#span[data-tooltip]::before {
  content: attr(data-tooltip);
 // ... All other CSS Properties are same as previous example
}

#span[data-tooltip]:hover::before {
  // ... All other CSS Properties are same as previous example
}

Next steps

You can implement this using Javascript. Please try once by yourself, if you still face the issue, please check this codepen where I have implemented the same.

I hope you enjoyed this blog and learned something new. If you have some questions/suggestions, feel free to add them in the comments. Connect with me at Linkedin.

Blob shapes with CSS

Sandeep Sharma — Fri, 10 Jun 2022 19:54:08 +0000

In this article, I'm going to talk about how can we create Blob shapes just using CSS.

So let's start with this. To achieve this, we're going to use a well-known CSS property called border-radius. Yes, you read it right we can do with just border-radius. To understand how this works, we need to first understand the property in-depth.

Learning about border-radius

We use border radius to have rounded/smoother corners for the elements. Each element in HTML has four corners(top-left, top-right, bottom-right, and bottom-left). We can use this property in multiple ways. For example,

// one value (all 4 corners)
border-radius: 10px;
// four values (top-left top-right bottom-right bottom-left)
border-radius: 10px 20px 30px 40px;

How this works

This syntax is just a shorthand. As we already know, we apply all 4 border-radius just using the single property. So if we want to apply it to a single corner (let's say top-left), we can do

border-top-left-radius: 10px;

What it does here is, it goes 10px right and down from the top-left corner and creates the round shape.

Enhance the learning

So we learned the basics of border-radius. But we have another thing to talk about which is, we can pass another value to this.

border-top-left-radius: 10px 20px;

Now, what's it doing here is, it is going 10px to the right and 20px down and connecting with a round shape.

Creating blob shapes

We did learn about shorthands, but we're not going to write shorthands, right? So the question here is, can we not do this directly from the border-radius property? The answer is, that we can. Let's learn about syntax by looking at this example.

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

If you notice, each value after the slash(/) is mapped to its corresponding value. This results in this.

border-top-left-radius: 10px 40px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 30px 20px;
border-bottom-left-radius: 40px 10px;

Let's make this more fun

Okay, now we have learned to create blob shapes with CSS. To make it more fun we can add animations, transitions and hover effects, etc. Please check out this codepen with a simple hover effect with pseudo-elements.

I hope this article was helpful and you learned something new. You can connect with me at Linkedin