CodeSolved

Solved Programming Questions & Exercises

Stroke text

Practice Easy 240/ Download 1252 Views

Create a stroke text using HTML and CSS as shown below

Be careful to add a stroke to just one word as the one of the text, just as in the image below


1 Answers

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متن استروک دار</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="stroke-text">متن استروک دار</h1>
</body>
</html>
CSS (styles.css)
css
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; # To center vertical
    background-color: #f0f0f0; # The background color
    font-family: Arial, sans-serif;
}

.stroke-text {
    font-size: 60px; # Font size
    color: white; # Text color
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; # Stroke
}
Mma123 Download HTML & CSS

Submit answer

Submitting answers is currently unavailable.

×

Account

You must be logged in to access this section.

Login/Sign up
×

I can't solve this exercise 😞

If you don’t understand the exercise or can’t solve it for any reason, that’s completely normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer might be correct even if it’s different from others.

Close