CSS3 Zoom Focus, Blur Text

Yes, this can be done using just CSS. CSS3 doesn't have a property specifically for blur, but this effect can be achieved using a clever trick with shadows.

I discovered this technique while experimenting with the color property. Some browsers support the value transparent for the color property. This makes the text invisible, but it doesn't affect the text's shadow.

The Technique

The key to this effect is:

1. Make the text transparent (color: transparent)
2. Apply a text shadow with the desired color
3. Control the shadow's blur radius to create the blur effect
4. Animate the shadow's properties to create zoom/focus effects

.blurred-text {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  transition: text-shadow 0.3s ease;
}

.blurred-text:hover {
  text-shadow: 0 0 0px rgba(0,0,0,0.8);
}

Creating a Zoom Effect

The zoom effect is created by animating the text-shadow property. By changing the blur radius from a higher value to a lower value (or zero), we create the impression that the text is coming into focus:

@keyframes focus-zoom {
  0% {
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
    transform: scale(0.8);
  }
  100% {
    text-shadow: 0 0 0px rgba(0,0,0,1);
    transform: scale(1);
  }
}

.zoom-text {
  color: transparent;
  animation: focus-zoom 2s ease-in-out infinite alternate;
}

Browser Compatibility

This technique works best in modern browsers that support CSS3 animations and the text-shadow property. For older browsers, you may need to provide fallback styles.

Demo

Here's a simple example that demonstrates the blur and focus effect:

<h1 class="blur-demo">This text will blur and focus</h1>

<style>
.blur-demo {
  font-size: 3em;
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,150,0.8);
  animation: blur-focus 3s ease-in-out infinite alternate;
}

@keyframes blur-focus {
  0% {
    text-shadow: 0 0 10px rgba(0,0,150,0.3);
  }
  100% {
    text-shadow: 0 0 0px rgba(0,0,150,1);
  }
}
</style>

Practical Applications

This effect can be used for:

• Creating focus animations for important text
• Highlighting text on hover
• Adding visual interest to headings
• Creating a "coming into focus" effect for page elements

Conclusion

While this technique has its limitations (especially in terms of browser support), it demonstrates how creative use of CSS3 properties can achieve interesting visual effects without relying on JavaScript or images.

Note: This article was migrated from the original A thousand nodes blog (2011)