بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
BENDERA Merah Putih adalah bendera Nasional Kebangsaan Kita. Sebagai warga negara Indonesia yang baik, semestinya kita mewarisi gen keturunan dari para Pahlawan kita untuk menjunjung tinggi nilai kebangsaan. Dan kali ini saya sebagai Blogger akan memberikan cara membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3. Dalam penerapannya, kita hanya membutuhkan property HTML dan CSS3 saja tanpa ada embel-embel tambahan seperti Javascript misalnya.
Bendera Merah Putih membentuk obyek berupa kotak dan bergradient warna. Pada property ini, bisa ditambahkan radius atau sudut lengkung maupun tidak ditambahkan juga tidak papa sehingga hasil akhirnya nanti si obyek akan memiliki sudut lancip saja. Efek bendera merah putih yang akan saya berikan tutorialnya ini memang tidak jauh dari CSS3. Seperti biasa CSS memang menjadi obyek utama dari sekian banyak artikel-artikel di website ini. Jadi stay tune ya.
Baca Juga :
Dalam tutorial kita kali ini, saya akan membahas tentang pemberian efek bergradient warna warni pada bendera merah putih. Nantinya obyek itu akan berbentuk lancip pada keempat sudutnya dan berwarna merah serta putih. Sehingga akan menambah kesan yang estetik dari sebuah desain dengan bahasa pemrograman CSS3. Memang lumayan bagus untuk ukuran sebuah gradient warna. Karena warna solid sudah mainstream digunakan oleh beberapa blogger. Sehingga kali ini akan kita buat sebuah obyek dengan gradasi warna dan akan membentuk bendera bangsa kita Indonesia.
Yuk mulai saja tutorialnya :
Membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3
1. Masuk ke Tema2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan menuju ke template
3. Kemudian cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
.page {
padding: 40px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#splash {
background: #cc1f2f;
background-repeat: repeat-y;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: splash 3s ease-in;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#loader {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
#loader:after {
content: '';
position: absolute;
left: 50%;
margin-left: -8px;
bottom: -170px;
width: 3px;
background: #fff;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
height: 200px;
}
#loader:before {
content: '';
position: absolute;
left: 50%;
margin-left: 8px;
bottom: -190px;
width: 3px;
background: #000;
background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 100%);
height: 200px;
}
#splash .anim {
height: 100%;
position: absolute;
left: 50%;
width: 100px;
transform: translate(-50%,100%);
animation: loader 4s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes loader {
0% {
transform: translate(-50%,110%);
}
30% {
transform: translate(-50%,50%);
}
100% {
transform: translate(-50%,0%);
}
}
@keyframes splash {
0% {
transform: translate(0%,0%);
}
50% {
transform: translate(0%,0%);
}
100% {
transform: translate(0%,-100%);
}
}
Catatan :
Untuk menempelkan diatas kode skin template jangan sampai salah taruh ya, dan usahakan Back Up Template dulu seperti biasa.
4. Kemudian menuju ke postingan.
5. Taruh kode dibawah ini di Postingan baru : Catatan -- Pilih HTML bukan Compose ya.
<div class="page">
<header>
<h1>Selamat Datang</h1>
<p>Bendera Sang Saka Merah Putih berkibar di angkasa raya Indonesia.</p>
</header>
</div>
<div id="splash">
<div class="anim">
<div id="loader">
<svg version="1.1" width="60px" height="70px" viewBox="0 0 60 70">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<g id="airplane">
<path fill="#000" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(44,0) rotate(90 0 0)" />
</g>
<g id="shadow" transform="scale(.9)">
<path fill="#000" fill-opacity="0.3" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(64,30) rotate(90 0 0)" filter="url(#f1)" />
</g>
</svg>
</div>
</div>
</div>Nah sekarang saatnya save pekerjaanmu. Untuk demonya bisa dilihat dibawah ini ya
Oke sampai penghujung acara. Semoga jadi ya nanti ketika kalian mempraktekkannya. Sudah larut malam nih. Saatnya istirahat dan besok lanjut kerja lagi. Mata sudah 5 watt. Tangan juga sudah pegal mengetik jadi maaf ya teman-teman bila ada salah kata salah tulis dalam artikel kali ini. Silakan kirim komentar bila ada yang perlu ditanyakan. Terima kasih banyak yang sudah mampir. "Di dunia ini tidak ada yang sempurna, tapi setidaknya perbaikilah dirimu supaya menjadi istimewa." Salam Blogger.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
