Rabu, 19 Agustus 2015

Source Code Pre-loader Rainbow - CSS3

/
/
Tidak ada komentar
Hai, kali ini gue bakalan share Source Code Preloader Rainbow dengan CSS 3 Animation. CEKIDOT!!!!

index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>loader</title>
</head>
<body>
<div class="loader">
 <div class="loader-inner">
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
 </div>
</div>
</body>
</html>

File style.css


.loader {
    background: #000;
    background: radial-gradient(#222, #000);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.loader-line-wrap {
    animation: 
  spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
 ;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}

@keyframes spin {
    0%, 15% {
  transform: rotate(0);
 }
 100% {
  transform: rotate(360deg);
 }
}
/
/
Tidak ada komentar , ,
Unknown Front-End Developer

Holla. I'm Ahmad Maulana a Indonesian-based web and graphic designer who creates clean and modern design for the world of web.

Belajar HTML Dasar : Pengertian Tag pada HTML

/
/
Tidak ada komentar

 Pengertian Tag

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. 

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.
Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

  • <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
  • </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda backslash(/)
 Jika kita lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun hal ini memudahkan kita, namun tidak disarankan.

Contohnya lainnya, jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:

<p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>.
Paragraf ini terdiri dari <b>3 kalimat</b></p>.


Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi: “Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.”

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan dari bold).
/
/
Tidak ada komentar , , , ,
Unknown Front-End Developer

Holla. I'm Ahmad Maulana a Indonesian-based web and graphic designer who creates clean and modern design for the world of web.

Tutorial Menampilkan Gambar di HTML

/
/
Tidak ada komentar

Dalam era informasi sekarang ini, semua website pasti mempunyai / memasukkan gambar pada web. Nah, pada tutorial kali ini kita akan mempelajari cara memasukkan gambar di HTML. Dengan menggunakan tag <img> , kita dapat memasukkan image ke html.

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
Buat folder bernama latihan. Lalu, pindahkan image yang akan dipakai untuk latihan. Pada contoh dibawah ini saya menggunakan sebuah gambar dinda.jpg (pacar saya hihi) yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html



<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menampilkan Gambar</title>
</head>
<body>
 <h2>Menampilkan Gambar</h2>
 <img src="dinda.jpg" >
</body>
</html>



Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />



Hati-hati dengan penulisan atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.


Nah, jika kalian sudah bisa / berhasil menampilkan gambar di html (ngga copas ya, biar pinter :* ), sekarang kita akan mempelajarai tag ALT. Tag image juga memiliki atribut penting lainnya, yaitu alt
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web browser telah disetting untuk tidak menampilkan gambar.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menampilkan Gambar</title>
</head>
<body>
 <h2>Menampilkan Gambar</h2>
 <img src="dinda.jpg" alt="Dinda Cantik">
</body>
</html>as


NOTE: JIKA INGIN MENAMPILKAN IMAGE YANG ADA DI LUAR FOLDER FILE HTML, KALIAN CUKUP MENAMBAHKAN ../ CONTOH <img src=”../dinda.jpg”>.
Jika kebingungan bisa komentar di bawah! CMIIW!
/
/
Tidak ada komentar , , , , ,
Unknown Front-End Developer

Holla. I'm Ahmad Maulana a Indonesian-based web and graphic designer who creates clean and modern design for the world of web.

Langganan: Komentar (Atom)