متن استروک دار

تمرین آسان 1945 visibility link download flag

با استفاده از HTML و CSS همانند تصویر زیر، یک متن استروک دار ایجاد کنید

دقت کنید که همانند تصویر زیر، فقط به یک کلمه از متن، استروک را اضافه کنید


reply 2

visibility
<!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; /* برای مرکز کردن عمودی */
    background-color: #f0f0f0; /* رنگ پس‌زمینه */
    font-family: Arial, sans-serif;
}

.stroke-text {
    font-size: 60px; /* اندازه فونت */
    color: white; /* رنگ متن */
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* استروک */
}
<!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>

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×
بستن