Jonatan Blog: HTML

Home Posts filed under HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Senin, 18 Desember 2017

Cara Membuat Logo Android Dengan HTML Dan CSS 3

✔ Admin Desember 18, 2017

Cara Membuat Logo Android Dengan HTML Dan CSS 3 - Membuat logo dengan Photoshop atau dengan Corel Draw sudah biasa. Tetapi Dalam tutorial kali ini kita akan membuat Logo Android dengan CSS3.

Biasanya kita cuman memakai CSS untuk desain Website tetapi dalam tutorial ini kita memakainya untuk mendesain Logo.

Penasaran ???

Bagi yang penasaran silahkan simak baik-baik ^__^

Pertama buat file phpnya kemudian tulis source codenya sesuai seperti ini :

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="android">
 <div class="head">
  <div class="l_ant"></div>
  <div class="r_ant"></div>
  <div class="l_eye"></div>
  <div class="r_eye"></div>
 </div>
 <div class="body">
  <div class="l_arm"></div>
  <div class="r_arm"></div>
  <div class="l_leg"></div>
  <div class="r_leg"></div>
 </div>
</div>
</body>
</html>

kedua buat file cssnya ::

 
   div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
 height: 404px; width: 334px;
 margin: 100px auto;
 
}
.head{
 width: 220px; height: 100px;
 top: 32px;
 
 border-radius: 110px 110px 0 0;
 -moz-border-radius: 110px 110px 0 0;
 -webkit-border-radius: 110px 110px 0 0;
 
 -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
 background: #fff;
 width: 20px; height: 20px;
 position: absolute; top: 42px;
 
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
 width: 6px; height: 50px;
 position: absolute; top: -34px;
 
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.l_ant {
 left: 50px;
 transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
}
.r_ant {
 right: 50px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
}

.body{
 width: 220px; height: 184px;
 top: 40px;
 
 border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
 width: 50px; position: absolute;
 -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
 height: 150px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
 height: 80px; top: 182px;
 border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
 -webkit-transform: rotate(-5deg) translate(-4px, -8px);
 -transform: rotate(-5deg) translate(-4px, -8px);
 -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
 -webkit-transform: rotate(15deg) translate(-14px, 0);
 -transform: rotate(15deg) translate(-14px, 0);
 -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
 -webkit-transform: rotate(-30deg) translate(30px, 0);
 -transform: rotate(-30deg) translate(30px, 0);
 -moz-transform: rotate(-30deg) translate(30px, 0);
}

Selesai.
Untuk priviewnya bisa kalian coba sendiri.
Semoga artikel ini bermanfaat buat kalian

HTML Pemrograman

Cara Membuat Stopwatch Sederhana Dengan HTML Dan CSS 3

✔ Admin Desember 18, 2017

Cara Membuat Stopwatch Sederhana Dengan HTML Dan CSS 3 - Sekarang ini hanya dengan menggunakan HTML dan CSS kita sudah bisa membuat beragam animasi dasar yang bisa menggantikan dokumen lain seperti gambar, flash ataupun Javascript.

cara membuat stopwatch, tutorial membuat stopwatch

Dalam tutorial kali ini saya akan membuat Stopwatch dengan menggunakan CSS3. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini:

Buat file index.html dan copi paste script dibawah ini

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
<div class="container">
 <!-- time to add the controls -->
 <input id="start" name="controls" type="radio" />
 <input id="stop" name="controls" type="radio" />
 <input id="reset" name="controls" type="radio" />
 <div class="timer">
  <div class="cell">
   <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
  </div>
  <div class="cell">
   <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
  </div>
  <div class="cell">
   <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
 </div>
 <!-- Lables for the controls -->
 <div id="timer_controls">
  <label for="start">Start</label>
  <label for="stop">Stop</label>
  <label for="reset">Reset</label>
 </div>
</div>
</body>
</html>

Selanjutnya tahap kedua kita membuat file css dan simpan sebagai css.css

 
* {margin: 0; padding: 0;}

body{
 background: #96ef9a; repeat;
}

.container {
 padding: 200px;
 text-align: center;
}

.timer {
 padding: 10px;
 background: linear-gradient(top, #222, #444);
 overflow: hidden;
 display: inline-block;
 border: 7px solid #efefef;
 border-radius: 5px;
 position: relative;
 
 box-shadow: 
  inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
  0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
 width: 0.60em;
 height: 40px;
 font-size: 50px;
 overflow: hidden;
 position: relative;
 float: left;
}

.numbers {
 width: 0.6em;
 line-height: 40px;
 font-family: digital, arial, verdana;
 text-align: center;
 color: #fff;
 
 position: absolute;
 top: 0;
 left: 0;
 
 text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

#timer_controls {
 margin-top: -5px;
}
#timer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: #efefef;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
 animation: moveten 1s steps(10, end) infinite;
 animation-play-state: paused;
}
.movesix {
 animation: movesix 1s steps(6, end) infinite;
 animation-play-state: paused;
}

.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;}

.milisecond {animation-duration: 1s;}
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;}
.tenminute {animation-duration: 3600s;}

.hour {animation-duration: 36000s;}
.tenhour {animation-duration: 360000s;} 

@keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 
}

@keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 
}



@font-face {
 font-family: 'digital';
 src: url('DS-DIGI.TTF');
 
}

yang terakhir kalian harus Download fontsnya untuk downloadnya bisa klik disini.

Selesai, kalian tinggal save dan jalankan dikomputer, Sekian dulu tutorial dari saya.

HTML Pemrograman

Cara Membuat Efect Screen Saver Dengan HTML 5

✔ Admin Desember 18, 2017

Cara Membuat Efect Screen Saver Dengan HTML 5 - HTML 5 sedang booming rata-rata semuanya juga sudah mendukung teknologi ini. Agar di blog ini tidak ketinggalan, maka saya juga akan membuat tutorial dengan menggunakan HTML 5.

Tutorial html5, tips html5, belajar html5

Dalam tutorial ini kita akan menggunakan canvas. Bagi yang tidak tahu canvas, saya akan jelaskan sedikit tentang canvas.

Apa sich elemen <canvas> itu ?

Canvas Mewakili grafik sederhana atau diagram, user interface yang menarik, animasi sederhana, grafik dan gambar grafik. Dan fitur yang disempurnakan dari keterbatasan CSS.

Fitur apa saja yang ada di elemen <canvas> ?

- Alat bantu menggambar : Rectangles, Arc, Jalan dan menggambar Line, Bezier dan Kurva Kuadratik.

- Efek: Fill dan Strokes, Shadows, Linear, gradien radial, Alpha transparansi dan Komposisi.

- Transformasi : Scaling, Rotasi, Translation, Transformasi matriks.

- Data dalam dan keluar : Membuka gambar eksternal oleh link atau URL, URI data atau kanvas lain, mengambil sebuah representasi PNG sebuah kanvas sebagai data URL.

Bagaimana ? sudah paham tentang canvas ???

Jika sudah paham kita lanjut ke tutorial cara pembuatan Efect Screen Saver menggunakan HTML5.

Langkah pertama buat file html nya dan ikuti source code dibawah ini ::

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="efect.js"></script>
</head>

<body>
<canvas id="canvas"></canvas>
</body>
</html>

file HTML nya singkat sajakan ??? karena yang kita perlukan cuman elemen canvasnya saja.

Kemudian kita buat file CSS dan ikuti source code dibawah ini :

 
* { margin: 0; padding: 0;}
#canvas {
 display: block;
 /*Fill canvas with black by default*/
 background: #000;
}

File CSSnya juga simple sekali karena hanya untuk mewarnai backgroung saja.

Dan yang ketiga kita harus buat file javascript dan ikuti source code dibawah ini :

 
window.onload = function(){
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 //Lets make the canvas occupy the full page
 var W = window.innerWidth, H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 
 //Lets make some particles
 var particles = [];
 for(var i = 0; i < 25; i++)
 {
  particles.push(new particle());
 }
 
 function particle()
 {
  //location on the canvas
  this.location = {x: Math.random()*W, y: Math.random()*H};
  //radius - lets make this 0
  this.radius = 0;
  //speed
  this.speed = 3;
  //steering angle in degrees range = 0 to 360
  this.angle = Math.random()*360;
  //colors
  var r = Math.round(Math.random()*255);
  var g = Math.round(Math.random()*255);
  var b = Math.round(Math.random()*255);
  var a = Math.random();
  this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
 }
 
 //Lets draw the particles
 function draw()
 {
  //re-paint the BG
  //Lets fill the canvas black
  //reduce opacity of bg fill.
  //blending time
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
  ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = "lighter";
  
  for(var i = 0; i < particles.length; i++)
  {
   var p = particles[i];
   ctx.fillStyle = "white";
   ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
   
   //Lets move the particles
   //So we basically created a set of particles moving in random direction
   //at the same speed
   //Time to add ribbon effect
   for(var n = 0; n < particles.length; n++)
   {
    var p2 = particles[n];
    //calculating distance of particle with all other particles
    var yd = p2.location.y - p.location.y;
    var xd = p2.location.x - p.location.x;
    var distance = Math.sqrt(xd*xd + yd*yd);
    //draw a line between both particles if they are in 200px range
    if(distance < 200)
    {
     ctx.beginPath();
     ctx.lineWidth = 1;
     ctx.moveTo(p.location.x, p.location.y);
     ctx.lineTo(p2.location.x, p2.location.y);
     ctx.strokeStyle = p.rgba;
     ctx.stroke();
     //The ribbons appear now.
    }
   }
   
   //We are using simple vectors here
   //New x = old x + speed * cos(angle)
   p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
   //New y = old y + speed * sin(angle)
   p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
   //You can read about vectors here:
   //http://physics.about.com/od/mathematics/a/VectorMath.htm
   
   if(p.location.x < 0) p.location.x = W;
   if(p.location.x > W) p.location.x = 0;
   if(p.location.y < 0) p.location.y = H;
   if(p.location.y > H) p.location.y = 0;
  }
 }
 
 setInterval(draw, 30);
}

Selesai.

untuk priviewnya tidak bisa saya tampilkan karena hasilnya bergerak. Tidak puas kalau cuman melihat imagenya saja ^__^. Jadi kalian bisa mencobanya sendiri ya.

Dan semoga artikel ini bermanfaat buat kalian semua.

Salam Hangat

HTML Pemrograman

Cara Membuat Form Login Sederhana Dengan HTML

✔ Admin Desember 18, 2017

Cara Membuat Form Login Sederhana Dengan HTML - Pada Artikel sebelumnya saya sudah membahas cara membuat table dengan HTML. Kali ini saya akan memberikan tips Cara membuat Login Form dengan HTML

Teknik yang saya gunakan kali ini hanya untuk pemula. Disini saya masih menggunakan teknik cara membuat table. Tapi dengan dimodifikasi sedikit kita bisa merubahnya menjadi sesuatu yang baru.

Coba perhatikan source code dibawah ini :

 
<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">

    <tr bgcolor="#428ef6">
      <td height="37" colspan="2"><div align="center"><strong>PLEASE LOGIN</strong></div></td>
    </tr>
    <tr>
      <td width="95" height="32">Username</td>
      <td width="304"><label>:
          <input name="username" type="text" id="username" />
      </label></td>
    </tr>
    <tr>
      <td height="26">Password</td>
      <td><label>:
          <input name="password" type="password" id="password" />
      </label></td>
    </tr>
    <tr>
      <td height="48"> </td>
      <td><input name="Login" type="submit" id="Login" value="Login" />
          <input name="Batal" type="submit" id="Batal" value="Batal" /></td>
    </tr>
    <tr bgcolor="#428ef6">
      <td height="26" colspan="2"><div align="right"><strong>roypurbo.blogspot.com</strong></div></td>
    </tr>
  </table>

Penjelasannya ::

Di dalam <table>...</table> kita bisa mengasih attribut tinggi dan lebar juga. kita tinggal mengasih nilai pada attribut tersebut (height & width).
<div align="center>... </div> gunanya untuk membuat text rata tengah.
<strong>...</strong> untuk membuat text menjadi cetak tebal.
Tag <input> untuk menentukan sebuah field input, dimana pengguna bisa memasukan data. Sebuah input dapat bervariasi dalam banyak cara, tergantung type attribut.
attribut text pada input untuk membuat text field.
attribut password untuk membuat text field rahasia.
attribut submit untuk button.