Mendesain dan Menulis Kata Ulang Tahun dengan CSS
CSS
Happy Birthday to you. Happy birthday to you. Penggalan lirik alunan nada pada perayaan ulang tahun itu sering kita dengar ya teman-teman. Dalam Bahasa Indonesia, "Selamat ulang tahun, Selamat ulang tahun, kami ucapkan". Begitu ya liriknya. Sontak yang merayakan ulang tahun akan merasakan kegembiraan yang amat sangat. Umur bertambah tidak masalah, yang penting senang. Dan dirayakan dengan semua temannya.
Dalam kamus umum dikatakan, ulang tahun atau hari lahir adalah hari kelahiran seseorang, menandai hari dimulainya kehidupan di luar Rahim setelah dilahirkan oleh seorang ibu. Dalam beberapa kebudayaan, ulang tahun atau hari lahir seseorang biasanya dirayakan dengan mengadakan pesta ulang tahun dengan keluarga dan/atau teman. Hadiah sering diberikan kepada orang yang merayakan ulang tahun. Pada saat seseorang ulang tahun, sudah menjadi kebiasaan untuk perlakukan seseorang secara istimewa.
Perayaan ulang tahun biasanya dirayakan oleh orang berada atau kaya. Untuk si miskin, biasanya hanya sebagai tamu undangan atau hanya sekedar penggembira. Dan hal itu sudah lumrah dan sudah berlangsung sejak jaman romawi kuno (persia, red). Para raja dan bangsawan pada jaman itu mengadakan acara pesta besar-besaran pada saat memperingati hari lahirnya dengan menghadirkan seluruh rakyatnya di halaman istana yang luas.
Kesenangan demi kesenangan menyelimuti mereka yang merayakan. Tapi apakah ulang tahun menjadi hal mutlak. Dalam pandangan tatanan beberapa agama, memperingati ultah tidak mesti dan malah sebisa mungkin tidak dirayakan secara berlebihan apalagi dengan pesta besar-besaran. Tapi cukup dengan kesederhanaan beserta iringan doa dan renungan diri. Mungkin terdengar klise tapi hal itu dibenarkan secara agama dan etika (adab, red).
Baca Juga :
Video semarak pesta ulang tahun.
@kidssong_animation88 semoga terhibur lagu anak anak selamat ulang tahun. #lagu #laguanak #laguanakanak #laguanakindonesia #selamatulangtahun #animasi ♬ Lagu Ulang Tahun - Baba Lili Tata
Tapi ada yang unik nih teman-teman. Di Korea Utara, negara yang dipimpin oleh Kim Jong Un, rakyat dilarang merayakan ulang tahun pada tanggal 8 Juli dan 17 Desember, karena tanggal tersebut merupakan tanggal wafat pemimpin negara itu, masing-masing Kim Il-sung dan Kim Jong-il beberapa tahun silam. Lebih dari 100.000 orang Korea Utara memindahkan tanggal ulang tahunnya menjadi 9 Juli atau 18 Desember untuk menghindari tanggal-tanggal tersebut. Seseorang yang lahir pada tanggal 8 Juli sebelum 1994 dapat mengubah hari ulang tahunnya, dengan pengakuan resmi. Sungguh unik ya, memang negara om Kim nih emang agak gimana gitu teman-teman :D.
Inilah ucapan selamat ulang tahun dari berbagai negara :
Ucapannya :
1. Bahasa Inggris : Happy Birthday.
2. Bahasa Italia : Buon compleanno.
3. Bahasa Perancis : Joyeux anniversaire.
4. Bahasa Spanyol : Feliz cumpleaños.
5. Bahasa Arab : عيد ميلاد سعيد. eid milad saeid.
6.Bahasa Jepang : お誕生日おめでとう. Otanjōbiomedetō.
7.Bahasa Korea : 생일 축하해요. saeng-il chughahaeyo.
8.Bahasa Belanda : Gefeliciteerd.
9.Bahasa Jawa : Sugeng ambal warsa.
Selain itu, ulang tahun adalah cara untuk refleksi diri setelah setahun berlalu. Mencoba memperbaiki diri dan bermusahabah diri dengan mendekatkan kepada sang Pencipta. Karena kita mesti bersyukur masih diberi kesempatan hingga hari kelahiran datang kembali. Ada juga yang merayakan dengan puasa, tidak merayakan secara berlebih. So, mana nih tim yang kamu pilih? pesta atau meresapi diri dengan cara agama. Pilihan ada pada dirimu.
Catatan : Ulang tahun dengan sederhana dan doa adalah yang terbaik :D
Baca Juga :
Asal Usul
Sejarah atau asal usul perayaan ulang tahun dapat ditelusuri kembali ketika kita berada di zaman Mesir Kuno, di mana perayaan ulang tahun sang maha raja kalau itu yaitu Firaun diadakan sebagai bentuk penghormatan kepada penguasa yang dianggap sebagai titisan dewa. Busyeh keren banget nih Raja Firaun, semua rakyatnya tidak terkecuali merayakan pesta ulang tahunnya. Gilak ! Kemudian, tradisi ini diadopsi dan dikembangkan oleh berbagai peradaban lain seperti Yunani Kuno dan Romawi, dengan makna dan ritual yang tentu saja berbeda-beda.Bentuk Pemujaan kepada Dewa
Apakah yang terbesit dalam benak kita saat mendengar kata ulang tahun ? meniup lilin yang dipasang di atas kue, yang akan dinikmati kemudian dengan keluarga atau sahabat ? Laman Fact Site mengungkap bahwa, mulanya ternyata kue ulang tahun tercatat sebagai bentuk persembahan kepada Firaun, yang dianggap sebagai dewa-dewi yang disebut dengan 'birthday' atau hari ulang tahun. Orang Mesir kuno menganggap kue sebagai hal yang suci dan dibuat sebagai persembahan tanpa darah kepada dewa, raja, dan pahlawan. Langkah ini dinilai sebagai alternatif selain pengorbanan hewan.Ultah di Jaman Sekarang / Jaman Medsos
Media sosial telah menjadi bagian yang tak terpisahkan dari kehidupan modern, memfasilitasi komunikasi, berbagi informasi, dan membangun komunitas online. Meskipun memiliki banyak manfaat, penting juga untuk diingat bahwa ada potensi risiko, seperti penyebaran informasi palsu atau ujaran kebencian yang secara sengaja atau tidak sengaja lewat media sosial tersebut. Sepertinya memang harus ada kendali khusus untuk upload konten di media sosial meski itu acara ulang tahun supaya tidak terjadi hal-hal yang tidak menyenangkan di kemudian hari.Ulang Tahun dengan CSS
Di malam yang cerah dan diselimuti cahaya sinar rembulan ini saya akan memberikan tutorial membuat balon ulang tahun disertai kata-katanya menggunakan teknik CSS. Agak lucu ya ntar gambarnya. Soalnya ya gimana lagi, kecanggihan bahasa pemrograman saat ini telah merasuk ke semua lini. Tidak sekedar roti dan topi diiringi lantunan lagu tapi sudah merambah ke era digitalisasi modern. Langsung saja ya kita ke tutorialnya :D.Ini dia caranya :
Caranya adalah sebagai berikut :
1. Langsung tambahkan saja kode HTML ini di blog kalian.
2. Tempelkan di Postingan Baru.
3. Tempelkan kode dibawah ini di tempat yang disediakan situ.
<html __fvdsurfcanyoninserted="1" class=" clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone"><head>
<meta charset="UTF-8">
<title>Happy Birthday</title>
<style>
/* If you can't see it just hit space in here*/
body {
font-family:'Wendy One', sans-serif;
}
body {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #374566), color-stop(100%, #010203));
background-image: -webkit-radial-gradient(#374566, #010203);
background-image: -moz-radial-gradient(#374566, #010203);
background-image: -o-radial-gradient(#374566, #010203);
background-image: radial-gradient(#374566, #010203);
}
span {
text-transform: uppercase;
}
.container {
width: 800px;
height: 420px;
padding: 10px;
margin: 0 auto;
position: relative;
}
.balloon {
width: 738px;
margin: 0 auto;
padding-top: 30px;
position: relative;
}
.balloon > div {
width: 104px;
height: 140px;
background: rgba(182, 15, 97, 0.9);
border-radius: 0;
border-radius: 80% 80% 80% 80%;
margin: 0 auto;
position: absolute;
padding: 10px;
box-shadow: inset 17px 7px 10px rgba(182, 15, 97, 0.9);
-webkit-transform-origin: bottom center;
}
.balloon > div:nth-child(1) {
background: rgba(182, 15, 97, 0.9);
left: 0;
box-shadow: inset 10px 10px 10px rgba(135, 11, 72, 0.9);
-webkit-animation: balloon1 6s ease-in-out infinite;
-moz-animation: balloon1 6s ease-in-out infinite;
-o-animation: balloon1 6s ease-in-out infinite;
animation: balloon1 6s ease-in-out infinite;
}
.balloon > div:nth-child(1):before {
color: rgba(182, 15, 97, 0.9);
}
.balloon > div:nth-child(2) {
background: rgba(242, 112, 45, 0.9);
left: 120px;
box-shadow: inset 10px 10px 10px rgba(222, 85, 14, 0.9);
-webkit-animation: balloon2 6s ease-in-out infinite;
-moz-animation: balloon2 6s ease-in-out infinite;
-o-animation: balloon2 6s ease-in-out infinite;
animation: balloon2 6s ease-in-out infinite;
}
.balloon > div:nth-child(2):before {
color: rgba(242, 112, 45, 0.9);
}
.balloon > div:nth-child(3) {
background: rgba(45, 181, 167, 0.9);
left: 240px;
box-shadow: inset 10px 10px 10px rgba(35, 140, 129, 0.9);
-webkit-animation: balloon4 6s ease-in-out infinite;
-moz-animation: balloon4 6s ease-in-out infinite;
-o-animation: balloon4 6s ease-in-out infinite;
animation: balloon4 6s ease-in-out infinite;
}
.balloon > div:nth-child(3):before {
color: rgba(45, 181, 167, 0.9);
}
.balloon > div:nth-child(4) {
background: rgba(190, 61, 244, 0.9);
left: 360px;
box-shadow: inset 10px 10px 10px rgba(173, 14, 240, 0.9);
-webkit-animation: balloon1 5s ease-in-out infinite;
-moz-animation: balloon1 5s ease-in-out infinite;
-o-animation: balloon1 5s ease-in-out infinite;
animation: balloon1 5s ease-in-out infinite;
}
.balloon > div:nth-child(4):before {
color: rgba(190, 61, 244, 0.9);
}
.balloon > div:nth-child(5) {
background: rgba(180, 224, 67, 0.9);
left: 480px;
box-shadow: inset 10px 10px 10px rgba(158, 206, 34, 0.9);
-webkit-animation: balloon3 5s ease-in-out infinite;
-moz-animation: balloon3 5s ease-in-out infinite;
-o-animation: balloon3 5s ease-in-out infinite;
animation: balloon3 5s ease-in-out infinite;
}
.balloon > div:nth-child(5):before {
color: rgba(180, 224, 67, 0.9);
}
.balloon > div:nth-child(6) {
background: rgba(242, 194, 58, 0.9);
left: 600px;
box-shadow: inset 10px 10px 10px rgba(234, 177, 15, 0.9);
-webkit-animation: balloon2 3s ease-in-out infinite;
-moz-animation: balloon2 3s ease-in-out infinite;
-o-animation: balloon2 3s ease-in-out infinite;
animation: balloon2 3s ease-in-out infinite;
}
.balloon > div:nth-child(6):before {
color: rgba(242, 194, 58, 0.9);
}
.balloon > div:before {
color: rgba(182, 15, 97, 0.9);
position: absolute;
bottom: -11px;
left: 52px;
content:"▲";
font-size: 1em;
}
span {
font-size: 4.8em;
color: white;
position: relative;
top: 30px;
left: 50%;
margin-left: -27px;
}
/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
0%, 100% {
-webkit-transform: translateY(0) rotate(-6deg);
}
50% {
-webkit-transform: translateY(-20px) rotate(8deg);
}
}
@-moz-keyframes balloon1 {
0%, 100% {
-moz-transform: translateY(0) rotate(-6deg);
}
50% {
-moz-transform: translateY(-20px) rotate(8deg);
}
}
@-o-keyframes balloon1 {
0%, 100% {
-o-transform: translateY(0) rotate(-6deg);
}
50% {
-o-transform: translateY(-20px) rotate(8deg);
}
}
@keyframes balloon1 {
0%, 100% {
transform: translateY(0) rotate(-6deg);
}
50% {
transform: translateY(-20px) rotate(8deg);
}
}
/* BAllOON 2 5*/
@-webkit-keyframes balloon2 {
0%, 100% {
-webkit-transform: translateY(0) rotate(6eg);
}
50% {
-webkit-transform: translateY(-30px) rotate(-8deg);
}
}
@-moz-keyframes balloon2 {
0%, 100% {
-moz-transform: translateY(0) rotate(6deg);
}
50% {
-moz-transform: translateY(-30px) rotate(-8deg);
}
}
@-o-keyframes balloon2 {
0%, 100% {
-o-transform: translateY(0) rotate(6deg);
}
50% {
-o-transform: translateY(-30px) rotate(-8deg);
}
}
@keyframes balloon2 {
0%, 100% {
transform: translateY(0) rotate(6deg);
}
50% {
transform: translateY(-30px) rotate(-8deg);
}
}
/* BAllOON 0*/
@-webkit-keyframes balloon3 {
0%, 100% {
-webkit-transform: translate(0, -10px) rotate(6eg);
}
50% {
-webkit-transform: translate(-20px, 30px) rotate(-8deg);
}
}
@-moz-keyframes balloon3 {
0%, 100% {
-moz-transform: translate(0, -10px) rotate(6eg);
}
50% {
-moz-transform: translate(-20px, 30px) rotate(-8deg);
}
}
@-o-keyframes balloon3 {
0%, 100% {
-o-transform: translate(0, -10px) rotate(6eg);
}
50% {
-o-transform: translate(-20px, 30px) rotate(-8deg);
}
}
@keyframes balloon3 {
0%, 100% {
transform: translate(0, -10px) rotate(6eg);
}
50% {
transform: translate(-20px, 30px) rotate(-8deg);
}
}
/* BAllOON 3*/
@-webkit-keyframes balloon4 {
0%, 100% {
-webkit-transform: translate(10px, -10px) rotate(-8eg);
}
50% {
-webkit-transform: translate(-15px, 20px) rotate(10deg);
}
}
@-moz-keyframes balloon4 {
0%, 100% {
-moz-transform: translate(10px, -10px) rotate(-8eg);
}
50% {
-moz-transform: translate(-15px, 10px) rotate(10deg);
}
}
@-o-keyframes balloon4 {
0%, 100% {
-o-transform: translate(10px, -10px) rotate(-8eg);
}
50% {
-o-transform: translate(-15px, 10px) rotate(10deg);
}
}
@keyframes balloon4 {
0%, 100% {
transform: translate(10px, -10px) rotate(-8eg);
}
50% {
transform: translate(-15px, 10px) rotate(10deg);
}
}
h1 {
position: relative;
top: 200px;
text-align: center;
color: white;
font-size: 3.5em;
}
</style>
<script>
window.open = function() {};
window.print = function() {};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function() {};
}
</script>
<script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script>
<meta content="clickberry-extension-here">
<meta content="clickberry-extension-here">
<style type="text/css"></style>
<style type="text/css"></style>
<style type="text/css"></style><style type="text/css"></style><script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script><meta content="clickberry-extension-here"></head>
<body>
<link href="https://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet" type="text/css">
<div class="container">
<div class="balloon">
<div><span>☺</span>
</div>
<div><span>B</span>
</div>
<div><span>D</span>
</div>
<div><span>A</span>
</div>
<div><span>Y</span>
</div>
<div><span>!</span>
</div>
</div>
<h1>Alifa</h1>
</div>
<script>
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage('resize', "*");
}
</script>
</body></html>4. Save dan Publikasikan.
5. Lihat blog kalian. Semoga jadi dan tidak berantakan.
Mohon untuk memback up template blog kalian ya teman-teman. Supaya kalau terjadi apa-apa bisa langsung dikembalikan seperti semula.
See the Pen Dekorasi Balon Ulang Tahun Alifa dengan HTML by Alifacode (@Alifacode) on CodePen.
Berbagai salam Ulang tahun yang populer di dunia maya :
Ucapan untuk Orang Spesifik :
Untuk Istri :
"Barakallah fii umrik, istriku. Semoga setiap langkahmu diberkahi oleh Allah."
Untuk Suami :
"Barakallah fii umrik, suamiku. Semoga Allah memberimu kesehatan dan kebahagiaan."
Untuk Anak :
"Barakallah fii umrik, anakku. Semoga Allah selalu memberikanmu petunjuk dan perlindungan."
Untuk Teman :
"Barakallah fii umrik, sahabatku. Semoga Allah selalu memberikanmu kesehatan, kebahagiaan, dan kesuksesan."
"Ulang tahun sebagai ajang refleksi diri. Jadikan lebih baik dan memohon hal yang baik dari yang Maha Pencipta."
