HTML Code:
<!DOCTYPE HTML><!-- Defines the document type and HTML version -->
<html lang="en"><!-- Begins the HTML document with the specified language -->
<head><!-- Contains metadata and links to external resources -->
<meta charset=utf-8><!-- Specifies the character encoding for the document -->
<title>Blurry text with CSS3</title><!-- Sets the title of the document -->
<style type="text/css"> /* Begins CSS styling */
p{ /* Selects all <p> elements */
color:#000000; /* Sets the text color to black */
font-size:50px; /* Sets the font size to 50 pixels */
font-family:arial; /* Sets the font family to Arial */
text-shadow: 0 0 3px #000000, /* Applies a black shadow to the text with a blur effect */
3px 0 3px #000000, /* Adjusts the shadow offset horizontally to create a blurred effect */
0 3px 3px #000000, /* Adjusts the shadow offset vertically to create a blurred effect */
-3px 0 3px #000000, /* Adjusts the shadow offset horizontally in the opposite direction to create a blurred effect */
0 -3px 3px #000000; /* Adjusts the shadow offset vertically in the opposite direction to create a blurred effect */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section of the document -->
<body><!-- Begins the body section of the document -->
<p>This text is blurred</p><!-- Inserts a paragraph element with blurred text -->
</body><!-- Ends the body section of the document -->
</html><!-- Ends the HTML document -->
Explanation:
Live Demo:
See the Pen blurry-text-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4