Css blurred text input

Input type «Text» to have a blurred text, which dissappears onFocus?

Some websites have forms with input type=»text». And inside these textboxes there is a blurred text, which says for example: «Enter your name here». And then onClick or OnFocus or whatever, the text dissappears and you can type into the textbox. Like the title of posting a question here at stackoverflow, same thing. How is this done easiest way? Would prefer if there was not too much js involved. Thanks

4 Answers 4

That’s not blurred text, it’s called a «watermark.» You can create the same effect by using inline onfocus() and onblur() statements on your input.

Then in your CSS file, you define classes for both .watermark and .regular . This way the text will be semi-transparent when displayed as a watermark and become completely opaque when the user types some information:

input.watermark input.regular

I’d change this up to use this.defaultValue in place of the repeated hard coding of ‘Enter your name’

What happens when you submit the form without focus on this input? What happens if JavaScript isn’t enabled? There’s a more usable, semantically better solution here.

I use this solution only with forms that require validation. Even if validation isn’t required, you can easily filter POSTed information to strip out any default values you’ve placed in the form . unless you run into a case where someone’s name really is «Enter your name» you shouldn’t have a problem. But what is your solution? If it’s a better solution, I’d love to try it out.

That is done with an overlay. The text is not actually inside the input, but in a span above it. It is set to disappear when the user clicks.

Be careful with some of these simple add/remove label solutions posted, as their may be 1) usability issues due to the reliance on JavaScript and 2) you might have a bunch of submissions to your form that have «enter your name here» as the value.

Here’s a good overview of the potential concerns and an offered solution. In fact, this solution is more like the SO «Ask Question» page, which uses a span overlay as opposed to showing/hiding text.

To implement this particular solution (there are others), you would download the script here, put it on your server, then include the following code:

That is a really good option, but it does rely heavily on jQuery. The question author asked for a solution without too much JS involved. While the jQuery solution is a better option (and I think I’ll be using it from now on), I don’t feel that it satisfies that JS-light requirement. All things considered, though, still +1.

But the «complete» version of your script (one that correctly filters the case where the input isn’t focused) requires either 1) more JS to clear input on form submit or 2) server side validation. And you still have the usability/accessibility issues. I guess my point is that there isn’t a «good JS light version» of this :).

Plus the question says «How is this done easiest way? Would prefer if there was not too much js involved.» I would think including two js files (jQuery, label script) and adding one line to initialize said script all in the same place would be easier than 1) adding JS to all inputs, 2) adding CSS for watermark styling and 3) adding PHP for validation.

In principle I agree with you. I was working under the assumption that integrating jQuery would be too much JS than «Would prefer if there was not too much js involved» would allow. That’s why I opted for the onfocus/onblur system (particularly since onfocus was referenced in the answer). In the end, I think your solution is more elegant and flexible.

Источник

Create Stunning Blurred Text Effects with CSS and HTML

Learn how to add a visual effect to your website by creating stunning blurred text using CSS and HTML. This blog post covers key points, important tips, and helpful techniques to get you started.

• Creating Blurred Text with CSS and HTML
• Combining with JavaScript
• How to Blur Text (with Animations)
• Using CSS3 Blur Text Effect
• Blurring Background Images and Links
• Additional Techniques and Tools
• Other useful CSS and HTML code samples for creating blurred text effects
• Conclusion
• Can you blur text in CSS?
• How do I make blurred text visible?
• How do you blur an element in CSS?
• How do you blur a box in HTML?

Blurred text is a creative and unique design element that can add a visual effect to a website. In this blog post, we will explore how to create a blurred text effect using CSS and HTML. We will discuss the key points, important points, and helpful points that correspond to the user intent of learning how to create a blurred text effect.

Creating Blurred Text with CSS and HTML

Blurred text can be created by making the color of the text transparent and adding a text-shadow with a blur effect. The blur() CSS function applies a Gaussian blur to the input image. The text-shadow CSS property adds shadows to text. Pseudo elements can be used to add blurred text or images with text in HTML. The use of contrast and font size can impact the effectiveness of the blurred text effect.

To create a simple blurred text effect, we can use the following code:

This code sets the color of the h1 element to transparent and adds a text-shadow with a blur radius of 10 pixels and an opacity of 0.5. This creates a subtle blurred effect behind the text.

We can also use pseudo-elements to add a blurred image with text. Here’s an example:

Blurred Text with Pseudo-Elements 
 

.blurred-text:before < content: ""; background: url("path/to/image.jpg"); filter: blur(10px); width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; >.blurred-text h1

In this example, we’re using a pseudo-element ( :before ) to add a blurred background image behind the h1 element. We’re using the filter: blur() property to apply a blur effect to the background image.

Combining with JavaScript

This effect can be combined with JavaScript for more advanced websites. The HTML DOM Input Text blur() Method can be used to blur input text. Here’s an example:

In this example, we’re using the onblur event to apply a blurred text effect to the input text when it loses focus. We’re using onfocus to remove the effect when the input text gains focus.

How to Blur Text (with Animations)

In this video tutorial I’ll be showing you how to easily create a blurred text effect using CSS3. Duration: 7:43

Using CSS3 Blur Text Effect

Blurred text can also be created using the CSS3 blur text effect. Blurred text can be created with animations and transitions. Here’s an example:

.blur-text < font-size: 72px; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-image: url("path/to/image.jpg"); animation: blur 5s infinite; >@keyframes blur < 0% < filter: blur(0); >50% < filter: blur(10px); >100% < filter: blur(0); >> 

In this example, we’re using the -webkit-text-fill-color and -webkit-background-clip properties to apply a blurred effect to the text. We’re also using an animation to create a blinking effect.

Blurring Background Images and Links

The filter: blur property can be used to apply a blur effect to the background image. Blurred links can be created by setting the text color to transparent and applying a CSS3 transition. Blurred background images with overlay text can be created using CSS approaches. Here’s an example:

Blurred Background Image with Overlay Text 
 

.blurred-image < position: relative; display: inline-block; >.blurred-image:before < content: ""; background: url("path/to/image.jpg"); filter: blur(10px); width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; >.blurred-image h1 < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; color: #fff; text-shadow: none; >.blurred-link < color: transparent; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: color 0.2s ease-in-out; >.blurred-link:hover

In this example, we’re using a pseudo-element to add a blurred background image behind the h1 element. We’re also using the filter: blur property to apply a blur effect to the background image. For the blurred link, we’re setting the text color to transparent and applying a transition to create a hover effect.

Additional Techniques and Tools

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. There are various ways to make blurred text visible on websites, such as using Google Translate or the Inspect Element Tool. The use of CSS preprocessors, such as Less or Sass, can streamline the process of creating blurred text effects. The use of vendor prefixes may be necessary for browser compatibility. The use of CSS frameworks, such as Bootstrap, can provide pre-made classes and styles for creating blurred text effects.

Other useful CSS and HTML code samples for creating blurred text effects

In Css , for example, css blur text code example

In Css case in point, make blur with css code sample

/* Add the blur effect in CSS */ filter: blur(8px); -webkit-filter: blur(8px);

In Css , in particular, blur css code sample

.mydiv < filter: grayscale(50%) >/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */ img

In Css as proof, css blur code sample

filter: blur(8px); -webkit-filter: blur(8px);

In Css , for example, blur css code sample

Conclusion

In conclusion, creating a blurred text effect using CSS and HTML is a simple and effective way to add a creative and unique touch to website design. By implementing the key points, important points, and helpful points discussed in this blog post, designers can create beautiful and effective blurred text effects.

Источник

Blur only text inside input, not whole element

For various reasons I want to graphically blur (i.e. not focus/blur) the text inside an input of type=text , not the whole element. Is there a way to do this? I currently have this:

.validation:not(:focus) < -webkit-filter: blur(3px); filter: blur(3px); border:0; >.validation-border

1. The border ‘perimeter’ is not the same dimension
2. If I increase the size of the outer border, I still get some blur leakage

Is there a better way of blurring the text only, and not the bounding box? Or some other way to cover up the side effects of blurring the input element

3 Answers 3

Rather than effecting the whole box, just we change the font color to transparent and add a text shadow effect.

tb1 is just an css selecter class, you can add following code to your validation class color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);

This actually turns out to work much better than the other answers, but I couldn’t tell because of how the answer was written. I’ve edited it for clarity, let me know if this is OK, so I can upvote and accept it.

Unfortunately, you cannot blur the interior of an element (at the time of writing) without also blurring its bounding box, border, etc. An alternative approach would be:

Where you style the .input-like container to look like an input (border, etc.). Then remove the border and other styles from the contained input element. At that point you can apply the blur filter to the input and leave the containing element unchanged.

The blur leakage seems to be coming from the white background of the input—try setting background-color: transparent; on the input and background-color: white; on the containing element.

Источник