Buồn buồn lấy HTML và CSS ra vẽ cờ nước Mỹ chơi, cái này cũng vui lắm, làm giàu trí tưởng tượng thiết kế với HTML và CSS, bạn hãy thử vẽ một nước khác xem sao, tin tôi đi nó sẽ khiến cho kỹ năng sử dụng HTML và CSS được mượn mà và thành thạo hơn đó :))
Mã Nguồn - Source Code:
Demo:
Mã Nguồn - Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>America Flag</title>
</head>
<body>
<div style="height: 10em; color: white; width: 19em; margin: 3em; box-shadow: 0 0 0.5em rgba(0,0,0,0.25), 0.4em 0.6em 0.5em rgba(0,0,0,0.25); background-image: linear-gradient(0deg, #3C3B6E, #3C3B6E), repeating-linear-gradient(180deg, #B22234, #B22234 7.7%, white 7.7%, white 15.4%); background-size: 40% 53.85%, 100% 100%; background-repeat: no-repeat; background-position: top left;">
<div style="font-size: 16px;padding:2px">
★ ★ ★ ★ ★ ★ <br />
★ ★ ★ ★ ★ <br />
★ ★ ★ ★ ★ ★ <br />
★ ★ ★ ★ ★ <br />
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset='UTF-8'>
<title>America Flag</title>
</head>
<body>
<div style="height: 10em; color: white; width: 19em; margin: 3em; box-shadow: 0 0 0.5em rgba(0,0,0,0.25), 0.4em 0.6em 0.5em rgba(0,0,0,0.25); background-image: linear-gradient(0deg, #3C3B6E, #3C3B6E), repeating-linear-gradient(180deg, #B22234, #B22234 7.7%, white 7.7%, white 15.4%); background-size: 40% 53.85%, 100% 100%; background-repeat: no-repeat; background-position: top left;">
<div style="font-size: 16px;padding:2px">
★ ★ ★ ★ ★ ★ <br />
★ ★ ★ ★ ★ <br />
★ ★ ★ ★ ★ ★ <br />
★ ★ ★ ★ ★ <br />
</div>
</div>
</body>
</html>
Demo:
★ ★ ★ ★ ★ ★
★ ★ ★ ★ ★
★ ★ ★ ★ ★ ★
★ ★ ★ ★ ★
★ ★ ★ ★ ★
★ ★ ★ ★ ★ ★
★ ★ ★ ★ ★
No comments:
Post a Comment