Membuat efek salju merry christmas dengan html css
Bahas Tuntas Yuk...
Selamat natal atau merry christmas buat umat kristiani yang merayakan hari lahirnya kristus di setiap tanggal 25 desember. Kali ini saya akan membagikan tutorial membuat efek salju merry christmas hanya dengan html css saja.
Untuk tutorial atau caranya, berikut akan saya bagikan source codenya
Membuat struktur folder
- Buat dulu sebuah folder (nama folder terserah dengan nama apapun boleh)
- Didalam folder tersebut buat lagi foder img untuk menampung fille gambar
- Buat juga 1 buah file html
- Kemudian buat 1 buah file css dengan nama style.css
Kemudian download aset gambar berikut ini
Membuat kerangka HTML
Dilangkah ini kita akan langsung membuat struktur kerangka htmlnya terlebih dahulu
<!DOCTYPE html>
<html lang="in">
<head>
<title>Merry Christmast 2021</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="snow"></div>
<div class="box">
<div class="text">
Merry Christmast <span>2021</span>
</div>
</div>
<div class="snow-2"></div>
</body>
</html>
Menambahkan style css
Terakhir kita tinggal menambahkan kode-kode css dibawah ini
@import url('https://fonts.googleapis.com/css2?family=Pushster&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Pushster', cursive;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('img/background-natal.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.box {
background: url('img/background-natal-2021.png');
position: relative;
width:400px;
height: 400px;
overflow: hidden;
}
.snow {
left: 0%;
}
.snow-2 {
right: -70%;
}
.snow,.snow-2 {
position: absolute;
z-index: 20;
content: '';
width: 100%;
height: 100%;
background-image: radial-gradient(3px 3px at 293px 539px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 221px 202px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 135px 158px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 168px 6px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 504px 313px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 84px 354px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 537px 201px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 273px 268px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 190px 331px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 402px 511px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 8px 58px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 510px 454px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 438px 535px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 491px 310px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 105px 52px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 28px 392px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 351px 427px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 184px 260px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 99px 72px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 180px 416px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 291px 114px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 9px 270px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 457px 552px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 419px 132px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 372px 152px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 443px 575px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 368px 561px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 261px 5px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 413px 340px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(5px 5px at 527px 531px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 213px 63px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 23px 524px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 454px 188px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 74px 322px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 427px 248px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)),
radial-gradient(6px 6px at 591px 482px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 361px 105px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(3px 3px at 238px 556px, white 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 66px 228px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)),
radial-gradient(4px 4px at 173px 515px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0));
animation: snow 3s linear infinite;
}
.text {
margin-top: 30%;
font-size: 2.6em;
text-align: center;
display: flex;
flex-direction: column;
color: white;
text-shadow: rgb(255,0,0) 5px 5px 0px, rgb(255,0,0) -5px -5px 0px;
}
@keyframes snow {
to {
transform: translateY(500px);
}
}
Dan beginilah hasilnya saat kita jalankan dengan web browser
Begitulah tutorial yang saya bagikan kali ini lebih tepatnya source code untuk ucapan merry christmas dengan html css. Terimakasih sudah membaca artikel ini