ایجاد CSS Art یک چالش لذت بخش است

Summarize this content to 400 words in Persian Lang
ایجاد هنر CSS یک چالش لذت بخش است. در اینجا یک مثال ساده از یک نمایش هنری CSS از یک صورتک آورده شده است:

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>

.smiley {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
position: relative;
}
.eye {
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
position: absolute;
}
.left-eye {
top: 30px;
left: 30px;
}
.right-eye {
top: 30px;
right: 30px;
}
.mouth {
width: 60px;
height: 30px;
border: 2px solid black;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
position: absolute;
bottom: 20px;
left: 20px;
}

class=”smiley”>
class=”eye left-eye”>
class=”eye right-eye”>
class=”mouth”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به راحتی می توانید رنگ ها، اندازه ها و موقعیت ها را سفارشی کنید تا هنر CSS منحصر به فرد خود را ایجاد کنید.

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    
        .smiley {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            border-radius: 50%;
            position: relative;
        }
        .eye {
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
        }
        .left-eye {
            top: 30px;
            left: 30px;
        }
        .right-eye {
            top: 30px;
            right: 30px;
        }
        .mouth {
            width: 60px;
            height: 30px;
            border: 2px solid black;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            position: absolute;
            bottom: 20px;
            left: 20px;
        }
    


    
 class="smiley">
        
 class="eye left-eye">
        
 class="eye right-eye">
        
 class="mouth">