Menambahkan Font dengan CSS

Selamat pagi... Jika kita sudah pernah belajar css, pasti kita sudah mengetahui bagaimana menambah atau menggunakan font yang tidak ada pada komputer ke halaman web kita. Kali ini kita akan belajar hal tersebut.

Tapi... kenapa kita harus menambahkan font secara eksternal? Karena tidak semua komputer memiliki font-font yang sama, dan ada kalanya kita ingin menggunakan font yang lebih sesuai dengan tema halaman web kita namun font tersebut tidak terinstall pada komputer. Kalaupun sudah terinstall pada komputer kita, belum tentu font tersebut terinstall pada komputer lain bukan?

Sa~ Bagaimana kita menambahkan font dengan css?

Contohnya, saya memiliki  sebuah folder dengan nama font. Di dalam folder tersebut ada sebuah file index.html, folder css dan folder fonts. Pada folder fonts terdapat sebuah file font dengan nama DinosaursAreAlive.ttf dan pada folder css terdapat sebuah file css dengan nama style.css. Sekarang, bagaimana agar index.html bisa menggunakan font DinosaursAreAlive.ttf?

1. Kita deklarasikan fons tersebut, caranya tulis script berikut pada fiile style.css :

@font-face{
    font-family: 'Dino';
    src: url('../fonts/DinosaursAreAlive.ttf');
}

font-family: 'Dino'; berarti kita membuat sebuah font dengan nama Dino. Sedangkan src: url('../fonts/DinosaursAreAlive.ttf'); adalah alamat font berdasarkan file css. Meskipun nantinya file style.css akan di embed oleh index.html, akan tetapi alamat url-nya tetap berdasarkan file css. Kecuali scrip css tersebut ditulis langsung dari index.html.

2. Pada index.html, buat seperti ini:

<!doctype html>
<html>
<head>
    <title>Font</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
        body{
            font-family: Dino;
            font-size: 46px;
        }
    </style>
</head>
<body>
    <p>Congratulation! You are Alive!</p>
</body>
</html>


3. Dan hasilnya adalah:

Begitulah... Semoga berguna bagi kita semua. Bila ada pertanyaan, silahkan berkomentar.

Mengenal, Memasang dan Menggunakan Font Awesome

Pernahkah kita kebingungan mencari icon-icon untuk blog atau website?  Entah yang kita cari itu icon user, icon menu, atau icon sosial media. Pokoknya, icon itu berperan cukup penting dalam mempercantik tampilan sebuah web. Jika kita mencari icon di google.com, maka kita perlu mendownload satu per satu gambar yang akan digunakan. Kalau cuma beberapa icon sih tidak masalah, tapi bagaimana kalau kita akan menggunakan puluhan icon?

Untuk itu, kali ini saya ingin mengenalkan pada kalian yang belum kenal dengan "Font Awesome". Pernah dengar tentang Font Awesome?

Singkat saja, Font Awesome adalah font icon yang dapat dipanggil menggunakan css. Font Awesome dibuat oleh Dave Gandy dalam GitHub Project. Kita dapat mengunjungi halaman resminya di http://fortawesome.github.io/Font-Awesome/

Timbul, pertanyaan. Apa aja sih yang ia bisa?

Baik-baik, kemampuan Font Awesome meliputi :

• 1. Satu font, tapi berisi banyak icon. Icon yang adapun saya rasa sudah cukup lengkap.
• 2. Tidak memerlukan sintaks JavaScript dalam pengaplikasiannya.
• 3. Icon menggunakan gambar Scalable Vector Graphics (SVG) sehingga kualitas gambar tetap terjaga dalam berbagai ukuran.
• 4. Gratis. Yang paling penting adalah... Font Awesome itu gratis.
• 5. Style dapat dimodifikasi menggunakan css. Seperti mengganti warna, ukuran, shadow dan apapun yang mungkin menggunakan css.
• 6. Cocok digunakan pada tampilan resolusi tinggi.
• 7. Meskipun pada awalnya dibuat untuk Bootstrap, namun tetap bisa digunakan pada semua framework.
• 8. Dapat digunakan pada dekstop.
• 9. Mudah dideteksi pada layar.

Saya anggap, kita semua sudah mengenal Font Awesome. Nah, sekarang~

Timbul, pertanyaan. Bagaimana kita menginstal atau memasang Font Awesome? 

Ada beberapa cara yang bisa kita gunakan untuk memasang Font Awesome. Tapi, saya akan menjelaskan dua cara saja. Satu untuk online dan satu untuk offline.

1. Menggunakan BootstrapCDN dari MaxCDN

Ini adalah cara yang paling mudah. Tidak perlu mendownload atau menginstall apapun. Cukup menambahkan satu baris kode html di dalam tag <head> pada website kita.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Dengan satu syarat, yaitu harus online.

2. Menggunakan CSS

Kalau ini cara biasa. Di netbook saya, saya bisa menggunakan Font Awesome meskipun offline. Tapi, kadang ada icon tertentu yang tidak mau nampil dan saya kurang tahu mengapa.

Pertama, download Font Awesome di http://fortawesome.github.io/Font-Awesome/. Tekan tombol download, lalu akan muncul sebuah modalbox, tekan tombol download yang ada.

Kemudian ekstrak file zip-nya, dan copy ke dalam folder projek kita.
Lalu tambahkan font-awesome.min.css dalam tag <head> pada projek kita.

<link rel="stylesheet" href="path/font-awesome/css/font-awesome.min.css">

Pastikan path atau alamat benar, dan Font Awesome sudah terpasang.

Bagaimana menggunakan Font Awesome?

Cara menggunakannya tidak sulit kok. Cukup tambahkan class="fa fa-icon" dan atur ukuran dan warna menggunakan css. Contoh :

<!doctype html>
<html>
<head>
  <title>Contoh Font Awesome</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body> 
  <a href="#" class="fa fa-ambulance" style="color:gray;font-size:100px;"></a>
</body>
</html>

Dan hasilnya adalah

Daftar icon yang bisa digunakan bisa kalian lihat pada halaman http://fortawesome.github.io/Font-Awesome/icons/

Cukup sekian yang kita pelajari tentang Font Awesome. Kalau ada pertanyaan, jangan ragu untuk bertanya. Arigatou...

ID dan CLASS pada CSS

Kita akan membahas mengenai id dan class yang ada pada css nih. Saya anggap anda sekalian sudah paham sintaks css dan html.

Pertama, apa itu id dan class di css? Jawabannya simpel, id dan class itu merupakan selector css (saya rasa). Sebagai alternatif, kalau selector menggunakan elemen html dirasa terlalu ribet. Sebagai contoh, kalau ada script html seperti ini

<div>
  <h1>Header1</h1>
  <div>
    <h1>Header2</h1>
  </div>
</div>

Maka, kalau kita hanya ingin mengakses <h1>Header2</h1> maka tidak mungkin kita menggunakan css

div h1{
  ...
}

Karena akan berpengaruh baik pada <h1>Header1</h1> maupun <h1>Header2</h1>. Di sinilah kita bisa menggunakan id ataupun class, dengan catatan: "sesuai kebutuhan".

Selector ID

Selector id digunakan untuk menandai element yang unik. Maksudnya, satu nama id hanya bisa digunakan oleh satu elemen saja. Jika dalam satu halaman web ada elemen yang memiliki nama id sama, maka id hanya akan berpengaruh pada id yang pertama saja. Selector id pada css ditandai dengan "#" (tanpa tanda kutip).
Contoh :

#id1{
  ...Kode CSS... 
}

Sedangkan pada bagian html-nya, misalnya pada header, maka ditulis

<header id="id1">Ini Header</header>

Untuk penulisan nama id, saya sarankan diawali dengan huruf.

Selector Class 

Selector class digunakan untuk menandai elemen-elemen dengan kriteria tertentu pada halaman web. Berbeda dengan selector id yang hanya bisa digunakan oleh sebuah elemen, selector class bisa digunakan oleh elemen manapun. Maksudnya, sebuah selector class bisa dipanggil oleh berbagai elemen pada saat bersamaan. Bahkan, sebuah elemen html bisa memanggil lebih dari satu nama selector class, dengan catatan beberapa class yang dipanggil tidak saling bertentangan style-nya. Selector class ditandai dengan tanda titik "." (tanpa tanda kutip).
Contoh :

.class1{
  ..Kode Css..
}

Sedangkan pada elemen html-nya, misalnya div.

<div class="class1">Ini kotak div</div>

Kalau digunakan pada elemen footer, maka :

<footer class="class1">Ini footer</footer>

Sama seperti id, saya sarankan huruf pertama nama class adalah huruf. Sekalian untuk mempermudah mengingat.

Sekarang, bagaimana caranya satu element html mengakses beberapa class sekaligus?
Pertama, kita bayangkan ada beberapa class pada css seperti berikut :

.latar-hitam{
  background-color: #000;
}
.text-putih{
  color: #fff;
}
.padding16{
  padding: 16px;
}

Kemudian ada sebuah paragraf yang akan menggunakan class .layar-hitam .text-putih dan .padding16
Cara memanggil beberapa class itu cukup dengan menambahkan nama class-nya dan dipisahkan dengan spasi menjadi class="layar-hitam text-putih padding16"

<p class="layar-hitam text-putih padding16">Paragraf</p>

Dengan begitu, paragraf itu akan memiliki background hitam sesuai dengan .layar-hitam, teks berwarna putih sesuai .text-putih dan padding 16px sesuai .padding16

Ada pertanyaan? Silahkan komentarnya.
Semoga Bermanfaat...

Membuat CSS Framework Sendiri

 Pernahkah terpikirkan dalam benak kalian untuk membuat sebuah css framework sendiri? Sayang sekali jika anda tidak pernah berpikir untuk membuatnya, karena saya ketika pertama kali bertemu dengannya langsung ingin membuat versi saya sendiri. Tentu saja itu bukan hal yang mudah untuk dilakukan. Tapi, bukan pula hal yang mustahil untuk anda dan saya lakukan.
Keinginan untuk membuat css framework semakin kuat ketika saya mengenal yang namanya w3.css. Kalau mau buat css framework sekelas bo*tstrap, saya rasa terlalu banyak kodenya (dan mungkin lumayan rumit). Tapi kalau yang mirip-mirip sama w3.css mungkin bisa.

Konsep dari css framework yang akan kita buat ini hanya pemanggilan class, itu saja. Berhubung sebuah elemen html bisa memanggil lebih dari satu class. Silahkan pelajari w3.css atau pahami pemanggilan class di html. Karena di sini, saya tidak akan menjelaskan secara rinci pembuatan css framework akan tetapi hanya memberikan tips dan masukan yang mungkin saja berguna.

Yang anda perlukan untuk membuat css framework adalah :

1. Pemahaman tentang css yang memadahi

    Ini sangat penting, karena jika kalian tidak paham css maka kemungkinan besar css framework yang akan kalian buat tidak akan pernah selesai. Namanya juga css framework, jadi ya harus ngerti css dulu. Mulai dari selector sampai transisi dan animasi css. Tapi yah, kembali lagi kepada diri kalian sendiri.

2. Tentukan apa saja kemampuan css framework yang akan kalian buat

    Kalau mau buat css framework, tentu harus ada kemampuan dari framework tersebut yang bisa memudahkan kita untuk membuat tampilan website bukan? Seperti warna, bentuk, responsif, transisi dan animasi, dll. Penentuan kemampuan framework ini akan menjadi acuan ketika kalian mulai ngoding css framework yang kalian buat. Untuk awal-awal, jangan terlalu WOW dulu. Sesuai kemampuan yang sudah ada saja.

3. Mulai dari yang sederhana

   Ketika membuat css framework, mulailah dari yang paling sederhana. Seperti warna, margin, padding, atau font. Barulah secara bertahap, selesaikan bagian yang sulit.

Itu saja dahulu. Yang paling penting dari "make something" adalah ulet dan tekun plus kerja keras.
Jika ada yang ingin ditanyakan, silahkan komentar ... Jangan malu. Karena saya yakin, ia tertutupi.

Membuat segitiga dengan css

Kali ini kita akan membuat segitiga dengan css. Membuat segitiga dengan css tidak sulit, hanya perlu sedikit pemahaman mengenai css border. Langsung saja, pertama kita akan membuat segitiga sama kaki berdiri.

html-nya.

<div class="atas"></div>

sedangkan css-nya.

.atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 30px solid tranparent;
  border-right: 30px solid tranparent;
}

Hasilnya:

Dengan div yang sama, kalau kita ingin membuat segitiga terbalik tinggal ganti css

border-bottom: 50px solid black;

Menjadi...

border-top: 50px solid black;

Dan hasilnya.

Intinya, kalau ingin membuat segitiga ke atas jangan kasih border-top, tapi kasih border-bottom. Sedangkan kalau ingin membuat segitiga ke bawah jangan kasih border-bottom, tapi border-top. Begitu juga kalau mau membuat segitiga yang mengarah ke samping kiri ataupun kanan.
Contoh :

<div class="kiri"></div>

<div class="kanan"></div>

css-nya

.kiri{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-right: 50px solid black;
}

.kanan{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-left: 50px solid black;
}

Hasilnya...

Bisa kita lihat baik width ataupun height-nya nol. Jadi, besar kecilnya ukuran segitiga ditentukan oleh seberapa besar atau tebal border yang digunakan.

Bagaimana kalau mau membuat segitiga yang arahnya ke sudut?

<div class="kiri-atas"></div>
<div class="kanan-atas"></div>

.kiri-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-left: 50px solid tranparent;
}

Yang sudut bawah

<div class="kiri-bawah"></div>
<div class="kanan-bawah"></div>

.kiri-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 50px solid tranparent;
}

Silahkan download source codenya di sini.

CSS Combinators

Css combinators adalah sesuatu yang menjelaskan hubungan antar selector.

div{
  background-color: red;
}

Div dalam sintaks css di atas merupakan selector. Sebuah selector dapat memiliki sebih dari satu selector sederhana. Kita dapat memasukkan combinator pada selector yang sederhana.

Terdapat 4 combinators berbeda dalam css, khususnya css3 :

• descendant selector (selector berdasarkan keturunan)
• child selector (selector berdasarkan anak)
• adjacent sibling selector (selector berdasarkan saudara yang berdekatan)
• general sibling selector (selector berdasarkan saudara secara umum)

Jika kalian pernah belajar css, kalian pasti sudah pernah menggunakan descendant selector. Karena, descendant selector merupakan combinators yang paling sering digunakan (menurut saya).

Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari elemen tertentu.
Contoh:

div p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Css di atas akan membuat semua <p> atau paragraf yang merupakan keturunan dari div memiliki background berwarna merah, termasuk yang berada di dalam tag <span>. Karena tag <span> juga masih berada di dalam div.

Jadi, paragraf pertama, kedua dan ketiga akan memilik background berwarna merah karena berada di dalam div. Sedangkan paragraf keempat dan kelima tidak, karena berada di luar div.

Child Selector 

Child selector akan memilih semua elemen yang merupakan anak langsung dari elemen teretentu.

div > p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf pertama dan ketiga saja yang memiliki background berwarna merah. Paragraf kedua tidak memiliki background berwarna merah karena paragraf kedua bukan keturunan langsung dari div. Akan tetapi keturunan langsung dari <span> atau bisa dibilang cucu dari div.

Adjacent Sibling Selector

 Adjacent sibling selector akan memilih semua elemen yang  merupakan saudara kandung (atau setingkat) dan berdekatan dengan elemen tertentu.

div + p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf keempat yang memiliki background berwarna merah. Paragraf pertama, kedua dan ketiga berada di dalam div, sehingga tidak satingkat dengan div dan merupakan turunan dari div. Sedangkan paragraf kelima, meskipun saudara (atau setingkat) dengan div namun tidak berdekatan dengan div. hanya paragraf keempat yang merupakan saudara dari div, dan letaknya berdekatan dengan div.

General Sibling Selector

General sibling selector akan memilih semua elemen yang merupakan saudara kandung dari elemen tertentu.

div ~ p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>

    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>

  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, paragraf keempat dan kelima memiliki background berwarna merah. Karena paragraf keempat dan kelima merupakan saudara dari div.

Itulah yang bisa saya sampaikan hari ini. Semoga bermanfaat dan jangan sungkan untuk komentar kalau timbul pertanyaan dalam benak kalian saat membaca postingan ini.

Navigasi Fixed Ketika di Scrool

Kali ini kita akan membuat menu navigasi yang akan otomatis fixed ketika di scrool. Tidak terlalu rumit kok. Cuma beberapa baris JavaScript menggunakan jQuery. Baiklah, mari kita mulai.

Pertama, kita buat halamannya.

<!doctype html>
<html>
<head>
 <title>nav-fixed-scrool</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
 <header id="menu1">
  <h1>Ini Header</h1>
 </header>
 <nav>
  <ul>
   <a href="#menu1"><li>Home</li></a>
   <a href="#menu2"><li>Portofolio</li></a>
   <a href="#menu3"><li>Tentang Kami</li></a>
   <a href="#menu4"><li>Hubungi Kami</li></a>
  </ul>
 </nav>
 <section>
  <article id="menu2">
   <h1>Portofolio</h1>
  </article>
  <article id="menu3">
   <h1>Tentang Kami</h1>
  </article>
  <article id="menu4">
   <h1>Hubungi Kami</h1>
  </article>
 </section>
</body>
</html>

Untuk jQuery-nya bisa di download di sini. Nanti muncul halaman, terus di-SaveAs.

Lalu buat file css di folder yang sama dengan html tadi. Nama file css-nya style.css

body *{margin:0px;}
header{
 width: 100%;
 height: 250px;
 background-color: orange;
}
nav{
 position: absolute;
 width: 100%;
 height: 50px;
 background-color: #333;
}
nav a{
 display: inline-block;
 padding-right: 20px;
 text-decoration: none;
 font-size: 14pt;
 cursor: pointer;
 color: #fff;
}
nav a:hover{
 color:  orange;
}
article{
 padding-top: 50px;
 width: 100%;
 height: 500px;
 background-color: orange;
 border-top: 5px solid #333;
}

Yang terakhir, tambahkan script berikut di atas tag </head>.

<script type="text/javascript">
 $(document).ready(function(){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if (y>=250){
     $("nav").css({
      "position":"fixed",
      "top":"0px"
     });
    }else{
     $("nav").css({
      "position":"absolute",
      "top":"250px"
     });
    };
  });
 });
 </script>

Selesai...

Untuk yang butuh source code-nya, bisa di download

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part2)

Melanjutkan permasalahan yang kemarin. Kok kalau gambarnya didrag n drop ke gambar lain, gambar yang didrag ngilang? Kuncinya ada di javascript.

Ubah bagian function JavaScript

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Menjadi

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var u = ev.target.id;
    var i = u.substr(0,1);
    if (i!="g") {
     ev.target.appendChild(document.getElementById(data));
    };
}

Penjelasan :

Di sini, gambar harus mempunyai id yang berawalan huruf "g". Jika konten yang didrag diletakkan di konten yang memiliki id yang berawalan "g", maka tidak dilakukan pertukaran data seperti seharusnya. Jadi, gambar tidak bisa diletakkan ke dalam gambar karena gambar memiliki id yang berawalan "g".

Untuk lebih jelasnya, silahkan download contohnya di sini.

Silahkan diobrak-abrik codenya biar paham. Atau silahkan kunjungi Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1).

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1)

Kali ini kita akan membuat semacam game puzzle gambar dengan memanfaatkan css clip yang pernah saya posting sebelumnya di sini, dan juga sedikit javascript yang saya dapatkan dari w3shcools.com di sini.

Kenapa kita memerlukan css clip? Ada yang bertanya seperti itu? Kalau ada, maka jawaban saya adalah tentu saja untuk memotong gambar. Agar cukup satu gambar saja yang kita gunakan pada game ini. Tapi, jika kalian tidak menggunakan css clip juga tidak masalah. Asalkan mau memotong gambar yang akan kalian gunakan menjadi beberapa bagian.

Lalu gunanya javascript itu buat apa? Ya buat nge-drag and nge-drop gambarlah. Ini adalah bagian pentingnya. Tanpa javasript ini, gambar tidak akan bisa di-drag maupun di-drop. Tenang saja, javascript-nya gak banyak kok. Cuma se-di-kit aja.

Baiklah, mari kita buat puzzle-nya!

Pertama, kita akan memilih gambar yang akan kita gunakan. Di sini, saya akan menggunakan gambar di bawah.

Kedua, buat tiga buah file kosong dengan nama game.html, game.css dan game.js. Pada game.html, kita tulis :

<!doctype html>
<html>
<head>
  <title>puzzle</title>
  <link rel="stylesheet" type="text/css" href="game.css">
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

</body>
</html>

Setelah itu, buat tiga buah div di dalam body dengan class all dan gbr. Jangan lupa masukkan gambar kita ke dalam div yang class-nya gbr.

<div class="all"></div>
<div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
</div>

Kemudian buat sebuah tabel dengan 5 kolom dan 2 baris di bawah kedua div sebelumnya. Pastikan cellspacing dan cellpadding bernilai nol. Biar kelihatan, nilai border dibuat menjadi 1.

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Lalu kita buka game.css dan tulis : 

.all{
  position: absolute;
  width: 100%;
  height: 100%;
}
.gbr{
  float: left;
}
.gbr img{
  width: 400px;
  height: 400px;
  border: 2px solid black;
  opacity: .5;
}
table{
  float: left;
  position: absolute;
}

Kali ini kita akan menyusutkan gambarnya sehinggal panjang dan lebar gambar menjadi 400px (lihat yang di-mark di atas). Jadi, akan lebih baik jika kalian menggunakan gambar yang nilai panjang dan lebarnya sama. Agar gambar tetap kelihatan bagus.

Masukkan div dengan class box dan juga id mulai d1 sampai d4 ke dalam cell atau td, kecuali td urutan yang ketiga. Sekalian drag event dan drop event juga. Nanti hasilnya akan seperti ini :

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td>
      <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td>
      <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="box" id="d5" ondrop="drop(event)" ondragover="allowDrop(event)"&  gt;</div>
    </td>
    <td>
      <div class="box" id="d6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d7" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d8" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
</table>

Kemudian masukkan gambar pada 2 div terakhir masing-masing tr. Lihat script atas.

<img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">

Pastikan gambar mempunyai class mulai dari k11, k12, k21 dan k22. Gambar yang mempunyai class k11 akan kelihatan pojok kiri atas, k12 pojok kanan atas, k21 pojok kiri bawah dan k22 pojok kanan bawah. Jadi, jangan sampai ada gambar dengan class yang sama ataupun double. kalau sampai ada, nanti gambarnya gak bisa diselesaikan.

Di game.css tambahkan script css ini dibawahnya.

.box{
  width: 200px;
  height: 200px;
}
.box img{
  position: absolute;
  width: 400px;
  height: 400px;
}
.k11{
  clip: rect(0px, 200px, 200px, 0px);
}
.k12{
  clip: rect(0px, 400px, 200px, 200px);
  margin-left: -200px;
}

.k21{
  clip: rect(200px, 200px, 400px, 0px);
  margin-top: -200px;
}
.k22{
  clip: rect(200px, 400px, 400px, 200px);
  margin-top: -200px;
  margin-left: -200px;
}

Script css di ataslah yang berperan penting dalam pemotongan gambar.
Buka gambar.js dan tulis.

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Hasilnya :

Lho? Kok gak bisa digerakin sih? Ada yang tahu penyebabnya? Kita lupa menambahkan id pada gambar. Ok, kita tambahkan id. Id gak boleh ada yang sama ya! Kita kasih id g1 sampai g4 aja.

Jadi...

<!doctype html>
<html>
<head>
 <title>puzzle</title>
 <link rel="stylesheet" type="text/css" href="game.css">
 <script type="text/javascript" src="game.js"></script>
</head>
<body>
 <div class="all"></div>
 <div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
 </div>
 <table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td>
    <div class="box" id="b1" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g4" draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b2" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g3" draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td></td>
   <td>
    <div class="box" id="b3" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g2" draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b4" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g1" draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
 </table>
</body>
</html>

Tapi, kalau gambarnya di drag n drop ke gambar kok ngilang?
Kita akan mengatasi masalah itu di part2. Silahkan klik di sini untuk menuju part2. Tunggu besok ya...

w3.css

Sesuai judulnya, hari ini kita akan berkenalan dengan w3.css. Untuk yang sudah kenal, tetep lanjut baca juga boleh.

Apa itu w3.css ?

So, w3.css adalah... framework seperti bootstrap yang berfungsi untuk memudahkan pembuatan website. W3.css ini bisa dibilang baru lahir, karena versi 1.1 baru rilis bulan juni kemarin. Dan saat saya menulis postingan ini, versi terbaru w3.css adalah 1.35. Kalian dapat mengunjungi link ini untuk mengunduh versi terbaru dari w3.css.

Bagi yang gak mau repot buat css untuk desain form ataupun template kalian, bisa mulai belajar menggunakan w3.css di sini. Tidak susah kok. Namun, akan labih baik kalau kalian sudah paham css terlebih dahulu.

Menurut saya kelebihan dari w3.css adalah tidak memerlukan jQuery ataupun JavaScript library. Jadi, w3.css itu murni hanya menggunakan css. Yup! Murni css. Dan w3.css hanyalah satu file css yang berukuran 20kb!

Meski begitu, w3.css tidak menyelesaikan semua permasalah desain ada. Namun sudah cukup bagus untuk desain yang tidak terlalu rumit.

Faster and More Beautiful
Responsive Web Sites
Inspired by Google Material Design

www.w3schools.com

CSS :before dan :after

Pernahkah terpikirkan dalam benak kalian tentang menambahkan suatu kalimat pada sebuah paragraf menggunakan css? Jujur saja, tidak pernah terlintas dalam benak saya tentang hal semacam itu. Tapi, ternyata itu ada dan mungkin untuk dilakukan. Tertarik? Lanjutkan...

Yaitu before dan after. Fungsinya mirip dengan DOM yang innerHTML, tapi beda. Karena before dan after hanya menyisipkan kalimat pada awal atau akhir kalimat di dalam suatu tag. Seperti namanya, before berarti menyisipkan di awal kalmat dan after menyisipkan di akhir kalimat.
Sekarang, kita langsung praktik.

Ini adalah kalimat yang asli.

Kemudian css-nya.

<style type="text/css">
  p:before{
    content:"Ini kalimat dari before. ";
  }
</style>

 Hasilnya :

Ini kalimat before. Ini adalah kalimat yang asli.

Kalau yang after, tinggal ganti aja before menjadi after.

<style type="text/css">
  p:after{
    content:" Ini kalimat dari after.";
  }
</style>

Hasilnya :

Ini adalah kalimat yang asli. Ini kalimat dari after.

Digunakan secara bersamaan juga bisa.

<style type="text/css">
  p:before{
    content:"Ini kalimat dari before. ";
  }
  p:after{
    content:" Ini kalimat dari after.";
  }
</style>

Hasilnya :

Ini kalimat dari before. Ini adalah kalimat yang asli. Ini kalimat dari after.

Baik before ataupun after, kalimat yang akan kita sisipkan terletak pada content. Dan jangan lupa diapit tanda petik dua (""). Bagaimana kalau menyisipkan tag? Saya pernah mencobanya, tapi tidak berhasil. Karena fungsi css kan bukan untuk menyisipkan (mengedit) konten html. Tapi, bisa dilakukan dengan jQuery. Lain kali akan saya jelaskan yng menggunakan jQuery.

Belajar css clip

Pernah mendengar tentang css yang namanya clip? Yup. Menurut saya, clip itu sama seperti masking. Yaitu menampilkan sebagian dari seluruh objek. Css ini biasanya digunakan pada gambar ataupun div. Sintaksnya seperti ini :

clip: rect(top, right, bottom, left);

Sintaks rect di atas berarti kotak. Maksudnya, kita akan me-masking berdasarkan ukuran kotak tersebut.Oh iya, saya sarankan objek yang di-masking position-nya bernilai absolute. Sebagai contoh, kita akan menggunakan gambar di bawah :

Tapi sebelumnya, kita buat div yang akan menampung gambarnya dulu. Kemudian gambarnya.

<div class="kotak">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDe02Peeftg3Bhz7FflQ1UlUtfC6bM0P09Phyphenhyphenv4TKqaLlLPr_KH-d5IM0Y-LGfr9X21Z-4jCMtcH10dapOSA78vCuQZURITkE3AIeXfvhAdyCs7t-OGqIJxcxZKwQO3lqD0l7VQJC-ABp/s1600/xxx.jpg">
</div>

Setelah itu, css-nya.

<style type="text/css">
.kotak{
  width: 500px;
  height: 428px;
  border: solid 2px lime;
  background-color: gray;
}
.kotak img{
  position: absolute;
  clip: rect(50px,250px,210px,75px);
}

Kalau digabungin, lengkapnya menjadi seperti ini :

<!doctype html>
<html>
<head>
  <title>clip</title>
  <style type="text/css">
  .kotak{
    width: 500px;
    height: 428px;
    border: solid 1px lime;
    background-color: gray;
  }
  .kotak img{
    position: absolute;
    clip: rect(50px,250px,210px,75px);
  }
  </style>
</head>
<body>
  <div class="kotak">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDe02Peeftg3Bhz7FflQ1UlUtfC6bM0P09Phyphenhyphenv4TKqaLlLPr_KH-d5IM0Y-LGfr9X21Z-4jCMtcH10dapOSA78vCuQZURITkE3AIeXfvhAdyCs7t-OGqIJxcxZKwQO3lqD0l7VQJC-ABp/s1600/xxx.jpg">
  </div>
</body>
</html>

Bagaimana, menarik bukan?

Ingat! Jangan biarkan right dan atau bottom bernilai nol. Jika salah satu atau keduanya bernilai nol, maka gambar atau div yang di-masking akan menghilang (gak kelihatan). Tentang berapa nilai yang harus digunakan untuk top, right, bottom, dan left, silahkan ber-eksperimen sendiri. Dengan begitu, kalian akan lebih paham.
top-nya bernilai nol.

clip: rect(0px,250px,210px,75px);

left-nya bernilai nol.

clip: rect(50px,250px,210px,0px);

right-nya bernilai nol. Atau bottom-nya bernilai nol.

clip: rect(50px,0px,210px,75px);

clip: rect(50px,250px,0px,75px);

Kalau menurut saya, right harus lebih besar daripada left dan bottom harus lebih besar daripada top. Kalian juga bisa menambahkan efek hover ataupun animasi. Sekarang, kita coba buat efek hover. Cukup menambahkan

transition: all 2s ease-in-out;

.kotak img:hover{
  clip: rect(0px,500px,428px,0px);
}

Hasil penambahannya menjadi seperti ini :

<!doctype html>
<html>
<head>
  <title>clip</title>
  <style type="text/css">
  .kotak{
    width: 500px;
    height: 428px;
    border: solid 1px lime;
    background-color: gray;
  }
  .kotak img{
    position: absolute;
    clip: rect(50px,250px,210px,75px);
  }
  </style>
</head>
<body>
  <div class="kotak">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDe02Peeftg3Bhz7FflQ1UlUtfC6bM0P09Phyphenhyphenv4TKqaLlLPr_KH-d5IM0Y-LGfr9X21Z-4jCMtcH10dapOSA78vCuQZURITkE3AIeXfvhAdyCs7t-OGqIJxcxZKwQO3lqD0l7VQJC-ABp/s1600/xxx.jpg">
  </div>
</body>
</html>

Kalau mau yang lebih bagus, silahkan gunakan imajinasi kalian untuk berkreasi. Selamat berkreasi.... Masih bingung? silahkan download contohnya di sini.