6/17/2019

Kode Warna Pada HTML

      Comment   

Kode warna pada html biasanya digunakan untuk memberikan warna pada tulisan ataupun background suatu website agar tampilannya lebih menarik. Nah untuk menambahkan warna kan biasanya ada yang make seperti ini color="blue" itu sih boleh-boleh aja. Tapi gimana kalo warnanya ingin ke biru yang gelap gimana? agak susah kan.

Terus bagaiamana cara mengatasi nya? Kalian bisa menggunakan kode hex RGB. Contoh kode hex RGB untuk warna putih #FFFFFF

Apa itu RGB?

RGB adalah singkatan dari Red, Green, Blue yang artinya tiga warna itu digunakan untuk menghasilkan warna-warna lain. Seperti merah dengan biru dicampur menjadi warna merah muda.


Oh ya kalian ga perlu bingung bagaimana cara mendapatkan kode hex rgb. Saya sudah menyediakan alatnya dibawah. Kalian tinggal mencari warna yang sesuai dengan keinginan kalian kemudian kodenya akan muncul secara otomatis. Jadi ga perlu cari-cari digoogle deh. Contoh saya akan mencari warna jingga.




 Kalian pilih warna yang ingin kalian gunakan kemudian akan muncul deh kode hex nya. Untuk pengaplikasian nya cukup mudah. Contoh saya akan membuat Jingga seperti itu.

Bagaimana cara pewarnaan untuk background dan warna text di sebuah website?

Untuk caranya cukup mudah gan. Simpel tidak perlu repot-repot. Contoh saya akan membuat seperti gambar dibawah ini.


Cara penulisan kode warna menggunakan kode hex rgb seperti berikut
<html>
<head>
<title>Warna Pada HTML</title>
  <style type="text/css">
    body {background-color: #FAFF00;
    }
  </style>
</head>
<body>
<h1>Belajar Kode Warna di Dunia Internet 19</h1>
</body>
</html>
Kalian bisa mengubah warnanya sesuai keinginan kalian. Kalian juga bisa menggunakan kode rgb nya untuk mengganti warna. Caranya kalain ubah aja #FAFF00 nya menjadi rgb(250, 225, 0) kok bisa gitu? Karena 250, 225, 0 adalah kode rgb untuk warna yang diatas. Sebenarnya antara #FAFF00 sama 250, 225, 0 itu ga ada bedanya. Cara penulisan kodenya juga sesuai keinginan kalian.

Untuk memberikan warna text juga hampir sama. Contoh saya akan memberikan warna biru pada text yang diatas.


Penulisannya juga sama kaya menambahkan warna pada background tadi. Source code nya seperti ini.

<html>
<head>
<title>Warna Pada HTML</title>
  <style type="text/css">
    body {background-color: rgb(250, 225, 0);
    }
  </style>
</head>
<body>
  <h1 style="color: #2A00FF;">Belajar Kode Warna di Dunia Internet 19</h1>
</body>
</html>
Nah sama aja kan. Penambahan warna itu sebenarnya cukup mudah dan banyak caranya. Tapi saya buat sedemikian rupa biar blog saya ga disangka blog copas gan.

Sekian artikel kali ini. Semoga artikel ini bermanfaat bagi kalian. Selamat berkrativitas!

6/11/2019

5+ Text Effect Keren Menggunakan HTML

      Comment   

Assalamualaikum Wr. Wb.

Selamat datang di blog saya. Selamat membaca! Kali ini saya akan menulis tentang text effect menggunakan HTML. Sebelum lanjut ke topik saya basa basi dulu lah biar kata yang tertulis keliatan banyak.

Apa itu text effect?
Text effect adalah sebuah tulisan yang menggunakan effect tertentu seperti menambahkan fill, glow, dan shadow.

Nah seperti itulah sedikit penjelasan mengenai text effect. Nah terus bagaiamana cara membuat text effect dengan menggunakan html? Simak aja artikel berikut.

1. Urby 2001 Scifi Text Effect

Urby 2001 Scifi text effect di tulis menggunakan HTML, CSS, dan Javascript. Urby 2001 Scifi ini menampilkan text effect keren seperti di luar angkasa. Untuk source codenya bisa klik di sini.

2. Particles Text Effect Using Tweenmax


Particlesw Text Effect Using Tweenmax juga di tulis dengan HTML, CSS, dan Javascript. Tweenmax ini menggunakan effect kaya buble gitu. Kalian bisa mengubah text nya sesuai dengan keinginnan kalian. Untuk Source codenya bisa cek disini.

3. Zig Zag Text Effect


Nah menurut ane text effect yang satu ini sangat keren. Perpaduan antara black and white nya sangat cool dan elegan. Text effect yang satu ini hanya menggunakan HTML dan CSS. Untuk source codenya cek disini.

4. Watch Dogs Text Effect

Nah kalian pasti sudah pernah membuat text effect yang satu ini. Jika ada yang belum bisa kalian download aja source codenya disini.

5. Glitchy Text Effect
Ini juga ga kalah keren sama text effect lainnya. Text effect ini jika kalian sentuh atau cursor kalian di arahkan ke text tersebut. Maka text tersebut akan bergoyang-goyang. Source code in here.

6. Burning Text Effect


Burning text effect ini lumayan bagus karena text nya bergerak juga dan seperti memancarkan api dari belakang. Source code disini.

7. Star Text Effect

Ini text cocok buat cewe gan. Kalian tambahin ini ke script buat nembak cewe mungkin akan di terima gan. Text effect kali ini hanya menggunakan html dan css. Source code in here.

Segitu aja ya text effect kali ini. Sebenarnya masih banyak gan text effect lainnya. Karena saya sudah capek ngetik dan juga udah mulai abis kuota saya jadi sampai segitu. Lain waktu juga akan saya update text effectnya.

Jangan lupa berkunjung ke artikel lain ya gan. Karena dijamin anda akan makin betah berkunjung di blog ini. Jika ada yang kurang mohon maaf ya gan. See you!

Cara Membuat Jam Digital dan Jam Analog Dengan Javascript

      1 comment   

Assalamualaikum Wr. Wb.

Hallo agan-agan selamat datang di blog saya. Kali ini saya akan menulis tentang cara membuat jam digital dan jam analog dengan javascript. Oh ya btw source code nya di tulis menggunakan html, css, dan js.

Ini source code nya saya ambil dari www.malasngoding.com. Di situ banyak menyediakan tutorial yang sangat bermanfaat. Di website tersebut banyak meyediakan tutorial tentang bahasa program. Ok lah langsung saja kita ke topik yang pertama.

1. Jam Digital


Kurang lebih tampilan jam digitalnya seperti itu. Tampilannya sangat sederhana namun itu semua bisa diubah dengan kreatifitas kalian. Kali ini saya akan menyediakan source code nya. Jadi kalian ubah-ubah sendiri deh. Tapi, jangan ubah author nya gan. Kasian author nya yang buat kalian mah enak ngerecode. Untuk menjalankannya kalian buka notepad >> paste di notepad >> simpan dengan ekstensi .html >> jalankan di browser kalian.

Source code nya

<!DOCTYPE html>
<html>
<head>
<title>Membuat Jam Digital Dengan Javascript - www.malasngoding.com</title>
</head>
<body>
<style>
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam-digital-malasngoding {
overflow: hidden;
width: 330px;
margin: 20px auto;
border: 5px solid #efefef;
}
.kotak{
float: left;
width: 110px;
height: 100px;
background-color: #189fff;
}
.jam-digital-malasngoding p {
color: #fff;
font-size: 36px;
text-align: center;
margin-top: 30px;
}
</style>
<center>
<h1>Tutorial Membuat Jam Digital Dengan Javascript</h1>
<h2>www.malasngoding.com</h2>
</center>
<div class="jam-digital-malasngoding">
<div class="kotak">
<p id="jam"></p>
</div>
<div class="kotak">
<p id="menit"></p>
</div>
<div class="kotak">
<p id="detik"></p>
</div>
</div>
<center>
<a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript">TUTORIAL</a>
</center>
<script>
window.setTimeout("waktu()", 1000);
function waktu() {
var waktu = new Date();
setTimeout("waktu()", 1000);
document.getElementById("jam").innerHTML = waktu.getHours();
document.getElementById("menit").innerHTML = waktu.getMinutes();
document.getElementById("detik").innerHTML = waktu.getSeconds();
}
</script>
</body>
</html>
2. Jam Analog
Tampilannya juga sama seperti jam digital. Simpel dan sangat sederhana. Tapi belum ada angkanya. Kalian bisa menambahkan angkanya sendiri gan. Jangan manja terus yaa. Cara menjalankan nya cukup mudah kalian copy source code di bawah. Kemudian paste di notepad kalian. Terus save dengan ekstensi .html. kemudian buka dengan browser kalian.

Source code nya

<!DOCTYPE html>
<html>
<head>
<title>Membuat Jam Digital Dengan Javascript - www.malasngoding.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam_analog_malasngoding {
background: #e7f2f7;
position: relative;
width: 240px;
height: 240px;
border: 16px solid #52b6f0;
border-radius: 50%;
padding: 20px;
margin:20px auto;
}
.xxx {
height: 100%;
width: 100%;
position: relative;
}
.jarum {
position: absolute;
width: 50%;
background: #232323;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
}
.lingkaran_tengah {
width: 24px;
height: 24px;
background: #232323;
border: 4px solid #52b6f0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -14px;
margin-top: -14px;
border-radius: 50%;
}
.jarum_detik {
height: 2px;
border-radius: 1px;
background: #F0C952;
}
.jarum_menit {
height: 4px;
border-radius: 4px;
}
.jarum_jam {
height: 8px;
border-radius: 4px;
width: 35%;
left: 15%;
}
</style>

<center>
<h1>Tutorial Membuat Jam Digital Dengan Javascript</h1>
<h2>www.malasngoding.com</h2>
</center>
<div class="jam_analog_malasngoding">
<div class="xxx">
<div class="jarum jarum_detik"></div>
<div class="jarum jarum_menit"></div>
<div class="jarum jarum_jam"></div>
<div class="lingkaran_tengah"></div>
</div>
</div>
<center>
<a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript">TUTORIAL</a>
</center>



<script type="text/javascript">
const secondHand = document.querySelector('.jarum_detik');
const minuteHand = document.querySelector('.jarum_menit');
const jarum_jam = document.querySelector('.jarum_jam');
function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
if (secondsDegrees === 90) {
secondHand.style.transition = 'none';
} else if (secondsDegrees >= 91) {
secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'
}
const minutes = now.getMinutes();
const minutesDegrees = ((minutes / 60) * 360) + 90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = ((hours / 12) * 360) + 90;
jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000)
</script>
</body>
</html>

Nah gimana? mudah kan. Semoga artikel kali ini bermanfaat bagi kalian. Jika ada yang masih kurang mohon maaf. Karena saya juga kurang ide ini. Jadi segini aja artikel kali ini. Jangan lupa berkunjung ke artikel yang lain ya gan.