Stroke text

Practice Easy Download

1556 Views

Front-End

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

2 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

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .stroke {
            font-size: 50px;
            color: white;
            text-shadow: 
                -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000;
        }
    </style>
</head>
<body>
    <p>این یک متن <span class="stroke">استروک دار</span> است.</p>
</body>
</html>

Download

HTML & CSS

Submit answer

Submitting answers is currently unavailable.

CodeSolved

Solved Programming Questions & Exercises

Stroke text

2 Answers

Submit answer

Stroke text

2 Answers

Submit answer

Account

I can't solve this exercise 😞