In this post, I will show you how to blur text using HTML and CSS, while building a nice blurry menu. Here is an example of what we will do together:
What are the requirements you need to do this ?
To reproduce this menu, you only need to know two things:
The basics of HTML
The basics of CSS
The HTML part
The HTML part is very simple. See it yourself :
As you can see, I created a nav element, which i gave the class name: "menu". This nav element is used to insert all the navigation elements. It's as simple as that.
P.S: I could have replaced the nav element by a div. The result would be the same. But to respect a semantic HTML structure, it makes more sense to use a nav to specify that this element represents a navigation.
The CSS part
Let's start by setting up the background of the HTML page to black:
body { background-color: #3c3c3c; }
And the result is this :
Let's place all the elements in the middle of the page by using flex boxes:
Now let's give our nav element a width.
As a reminder, the nav element has the class name “menu”
You can give a width as you wish.
Let's give some styles to the menu items:
This is what we get
How to make the text blurry ?
To make the texts blurry, we will use the text-shadow property . For those who don't remember, the text-shadow property receives a value with 4 parameters:
text-shadow: horizontal-distance vertical-distance blur-radius color
horizontal-distance : Horizontal Shadow Offset
vertical-distance : Vertical shadow offset
blur-radius : (Optional) The blur radius determines the sharpness of the shadow. The default value is 0.
color : The color of the shadow
What interests us is the blur-radius. It is thanks to this parameter that we will be able to blur the text. So, add a text-shadow to the menu items:
This is what we got :
The texts are not blurred. You fooled us 😖😫
Oh yes ! I purposely brought you here 😂 😂. If the text is not blurred, as in the preview at the very beginning of this article, it is because the text has been given a white color. For the blur to be obvious, the text color must be transparent:
And Tadaaaa :
The last step
We will ensure that when the cursor is on an item in our menu, the text becomes readable again. To do this, you have to trigger when the cursor is on the text of the menu, reset the text-shadow and give the text the color white :
The very last thing to do is to smooth the transition between when the text is blurred and unblurred. To do, just add this line in the set of rules that stylizes the menu items:
And, JOB DONE ! 😊