By the end of 2011 Facebook introduced timeline to tell the story of your life. Of course not really the entire of your life, just a life that starting from the day you become the member of Facebook. There are people like or dislike this new feature. Some say that they don’t want people to see his whole life story in Facebook , although there is a feature to hide part of your post. In this post I am going to show you how to create your own Facebook timeline using HTML and CSS only. You can use the timeline to show your activity during a year or to tell the story of your life on your personal web page.

Demo Download

The first step, I create the HTML code that consist of list. I use OL and then detect which one is even or odd. Then I use CSS to float one of them to the right. I also use a small blue images as the background of  OL to create the vertical line. Here is the HTML code.

<ol id="timeline">

  <li> 
    <div class="time">Yesterday</div>
    <span class="corner"></span>
    <p>just had a lunch ...<br/>
</p>
  </li>

  <li>
    <div class="time">about an hour ago</div>
    <span class="corner"></span>
    <p>play football</p>
  </li>

  <li>
    <div class="time">Monday</div>
    <span class="corner"></span>
    <p>Have a nice hot chocolate in the morning</p>
  </li>

  <li>
    <div class="time">Yesterday</div>
    <span class="corner"></span>
    <p> learn css
    </p>
  </li>
</ol>

You can add more list if you want, the above code only have four list to make it easier to follow.

Then I create CSS for the OL and put an image as a background to create a vertical line. I put the background on the center and repeat the images on y-axis.

#timeline{
    width:800px; 
    list-style-type: none; 
    background: url(timeline.png) top center repeat-y; 
    margin: 0 auto; 
    padding:20px; 
    margin-bottom:10px;
}

Left and Right Position

Each post on your timeline is displayed to the right and left of the center line. If it odd list, then I float it to the right and put it on the left if it is even. I use nth-of-type to check the list whether it is odd or even. You can read my previous post on checking the odd or even on the list.

#timeline li{
    width:375px; -moz-border-radius:2px; border-radius:2px; webkit-border-radius:2px; border:1px solid #c3ccdf; padding:5px;background-color:#FFF;
}

#timeline li:nth-of-type(odd){
    clear: both;float:right; 
}

#timeline li:nth-of-type(odd), #timeline li:nth-of-type(even){
    margin:-10px 0 20px 0;
}

The Arrow

Actually I don’t know what it is called, something that face to left and facing the vertical line if your post on the right. Let us call it the arrow. If your post on the left, then the arrow should face to the right to show to the timeline that it is your post. I use two images of arrow and use the same method to check the even or odd. If it is odd, then the post will float to the right so I should use the right arrow.

#timeline li:nth-of-type(even) .corner{
	position:absolute; display:block; margin-left:380px;width:20px;	height:15px;background:url(right.png);
}
#timeline li:nth-of-type(odd) .corner{
	position:absolute;display:block;margin-left:-25px;width:20px;height:15px;background:url(left.png);
}

Final Result

By the end of this post, you should get the result like the image below. Of course I add more code to create the header. You can get the header on the download version.

Information inside a table or a list needs to be displayed in such a way so it will be easier to read. Most of us will use the same method when we display information inside table or list. We usually choose two color for example grey and white and put them as background on each row. In the old times I will use PHP to detect between odd and even row, for example I will use grey as a background color for an even row and white for odd. Today we can use CSS3 to detect odd and even row and we can put different style on each one.

We will use nth-of-type(n) to detect odd and even row. This selector is one of new selector in CSS3 that will matches every element that is the nth child. This selector accept one argument, n, which can be an expression, a number or an expression of the form an+b. One of the expression is odd and even.

In this tutorial, we will create a list using ordered list(ol) and we will use nth-of-type(n) to detect the row. It is very simple and you can use your imagination to put the same method on different style.

The Code

First we create our HTML code

<h3>Country In Asia</h3>
<ol id="countrylist">
<li>Indonesia</li>
<li>Singapore</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>China</li>
<li>Japan</li>
</ol>  

Then we put this style on our document

 #countrylist{
        list-style-type: none; width: 200px; border:1px solid #c4cde0; border-radius:5px; margin: 0; padding: 0px; font-size: 12px;
    }
    #countrylist li{
        padding:5px;
    }
    #countrylist li:nth-of-type(even){
        background-color: #c4cde0;
    }

At the end you should get this result

Browser Support

The nth-of-type selector is supported is major modern browser like IE, Mozilla Firefox, Chrome, Opera etc. Here is the detail:

IE: IE8 and earlier are not supported this selector

Firefox: Firefox 3.5 support this selector

Opera: Opera 9.5 support this selector

Chrome: Chrome 2 support this selector

Single page website become popular today. Most of them are used as personal home page and display their work. Others used by small company. These list provides you with ten best single page web page that you can use as your inspirations. Check them out.

Chleon
Chleon builds platform for cars to keep the driver save and entertained. Their website use yellow as their main color and put navigation on top of their page. When you click one of them, it will scroll down to the area of the link you clicked.

Andy Patrick Design

What I love from Andy’s website is his idea on his web page. When you scroll down the page, there is an image of a plane will follow the page down and there is a line behind the plane as to show you the plane flies from an island to the destination in the bottom of the page.

Tamcai

Thamcai has a great idea by connecting each area with a dotted line. They do not put any single link on top of their page besides their home page link and their social media link. You have to scroll down to see more information about them.

Pixelhub

RubyBots

Launch Factory

Media Point

Arbol Textual

Dylan Jones

Lisher

Incoming search terms:

• andypatrickdesign

HTML5 has become a hit today as its new elements and other new concept. What about the old elements? HTML5 has removed some old elements with some considerations. For example the presentational attribute such as background(for body element), bgcolor, align and border as they are better handled in CSS.

There are other elements that also has removed by HTML5 such as big, center, font, basefont,s,strike,tt and u as they are more effectively represented in CSS. so goodbye to font and its attribute in HTML5. I still remember the old times when I was learning HTML in my college, I wrote lots of font and its attribute on my page. Even one of my friends web based application that still in use right now is using font and its attribute on many of its pages. His application was build around 2000.

One of elements that I don’t like so much is Frame. Thank god its been removed on HTML5 with other elements such as frameset and noframes.

There are elements that rarely been used by user for their page such as acronym,applet,isIndex and dir. To replace these elements HTML5 has object to replace applet, abbr for abbreviations, and the use of UL instead of isIndex or dir.

HTML5 is currently under specification and in the Working Draft stage in W3c, but many its features are stable and can be implemented on most browsers. In this tutorial we will learn to create a very simple layout using HTML5 new elements and style the layout with css.

Most of us usually use the same name for id or class in out layout. For example we use  “header” as the id name for header and “footer” as the id for footer and many more. take a look at the picture below

This is the reason why some of new tag in HTML5 use that name. Ian Hickson has data mined billion of web pages to find the class or id name when he edit the specification and it worth to check his result here.

To create such a layout is very simple in HTML5. We will use some of new tag in HTML5 to replace div and its id name. Checkout the code below

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
 </head>
<body>
<div id="wrapper">
<header></header>
<content>
    <article></article>
</content>
<nav></nav> 
<footer></footer>
</div>  
</body>
</html>

As you can see on the code above, the doctype much simple, shorter and easy to remember. The doctype will specify that your HTML is HTML5 document.

Very simple right? It is quite possible that a question occur, how do we style the new element in CSS? all you need to do is to treat them as the other HTML element. You only need to write its tag like article,nav or content. Put css below between the open tag head and the closing tag of head.

 <style>
 #wrapper{
    height:600px; width:900px; border:1px solid #eeeaf1;
 }
 header,nav,content,footer,article { margin: 5px;}
 header{
    height: 150px; background-color: #027d12;
 }
 nav {
    background-color: #4cad08; width:200px; height: 300px; 
 }
 content{ 
    float: right; width:680px;height: 300px;background-color: #4cad08; 
 }
 article{
    height: 100px; width: 670px; background-color: #8ebe00;
 }
 footer{
       clear: both; background-color: #4cad08;height: 100px; width: 890px;
 }
 </style>

There are many other new elements in HTML5 and I hope I can cover up on my next post.

Incoming search terms:

• tutorial html5
• tuttorial wordpress html5

Today HTML5 and CSS3 becomes a hit. The new elements in HTML5 and news styles in CSS3 has encourages us to try it on our website. CSS3 is evolving rapidly and you will find some interesting styles and will realize how easy it is to style something that was so hard before.

One of the new styles is the cursor. In CSS2, we already know some of cursor styles, like: auto, inherit, crosshair, default,help, move, pointer,progress, text, wait, e-resize,n-resize,ne-resize, nw-resize, se-resize, sw-resize,s-resize and w-resize.

In CSS3 we have more cursor styles to choose. here is the list

• cursor: none (not IE, Safari, Opera)
• cursor: context-menu (not Firefox, Chrome)
• cursor: cell (not Safari)
• cursor: vertical-text
• cursor: alias (not Safari)
• cursor: copy (not Safari)
• cursor: no-drop
• cursor: not-allowed
• cursor: ew-resize
• cursor: ns-resize
• cursor: nesw-resize
• cursor: nwse-resize
• cursor: col-resize
• cursor: row-resize
• cursor: all-scroll

These styles works in most latest popular browser like Mozilla, Chrome and Opera. In IE these styles work in IE9.

Incoming search terms:

• new cursor
• cursor:cell;

Dalam rangka Soft Launching Logo dan Hymne PENS, Politeknik Elektronika Negeri Surabaya(PENS) menggelar lomba fotografi yang diadakan sejak tanggal 10-12 Januari 2012. Lomba ini terbagi menjadi 3 kategori yaitu untuk profesional, mahasiswa dan civitas akademik(dosen dan karyawan). Sudah bisa ditebak kangtanto ikut di kategori mana. Tema lomba kali ini adalah PENS – Bridge to the future.

Berbekal senjata Nikon D80 dengan kesaktian fotografi yang masih dasar kangtanto pun ikut-ikutan hunting di sekitar area kampus. Kalau di analogikakan dalam dunia persilatan mungkin kesaktian fotografi kangtanto masih sebatas tahu kuda-kuda. Catat… sebatas tahu kuda-kuda yaitu belum bisa mempraktekan kuda-kuda karena masih sebatas tahu. Ya  kalau gini belum bisa dibilang sakti ya…. Jadi harap maklum melihat hasil jepretannya. Saat pengumuman hasil pemenang lomba yang diselenggarakan berbarengan dengan acara soft launching(18/01), ternyata hasilnya diluar dugaan, yaitu hasil jepretan kangtanto nyantol di peringkat 3. Alhamdulillah, lumayan hadiah uang bisa buat mbeli ban sepeda motor baru.

Nah biar tidak penasaran, ini kangtanto cantumkan hasil para pemenang di ketiga kategori tersebut. Urutan tampilan sengaja saya taruh yang profesional dulu, biar mata-mata para pembaca terhibur dulu. Nah pas nanti di kategori civitas, terutama yang dapat peringkat 3, anda bisa tersenyum, tertawa sepuasnya atau malah kirim sms ke saya ngajak traktiran. Maksudnya kangtanto yang ditraktir.

Kategori Profesional:

Ini juara 1 nya. Karya Ocky Dwi P.. yang di foto Robot Soccer nya PENS. Hadiahnya 2 jeti gan..

Ini juara 2 nya gan. Karya Reza M Fauzan. yang diambil lapangan basket gedung PENS. hadiahnya 1.5 jeti

Ini juara 3, Karya Faizal Johan K. Hadiahnya 1 jeti

Kategori Mahasiswa:

Ini juara 1 nya gan.. oleh: Ida Bagus Made. hadiahnya 750 ribu.

Ini juara 2 nya gan. Karya Rizal Rahardian... hadiahnya 500 rb

Ini juara 3, oleh Puguh Christianto. Hadiahnya 250 ribu

Kategori Civitas:

Ini juara 1, oleh Akhmad Alimudin. Hadiahnya 750 ribu

Ini juara 2, oleh Widi Sarinastiti. Hadiahnya 500 ribu

Nah ini dia yang peringkat 3..ssstt... ketawa-nya jangan keras-keras. nih foto diambil pas bang admin jaringan lagi mbenerin Access Point. . Hadiahnya.. ah lupa belum diambil gan..

Untuk para juri sendiri terdiri dari dua orang profesional di bidang fotografi dan satu orang dosen PENS.

Incoming search terms:

• design lapangan basket
• hadiah untuk lomba
• lomba foto couple 2012 di surabaya
• lomba fotografi dan robot
• lomba fotografi pens
• widi sarinastiti

Game ini merupakan sebuah game yang mengambil tema tentang seekor kera yang berburu pisang pada area perkebunan. Kera tersebut harus mengambil pisang dengan jumlah tertentu untuk bisa memenangkan permainan. Proses pengambilan pisang akan menemui beberapa kesulitan mulai dari penempatan pohon pisang, perbedaan tinggi pohon pisang dan halangan-halangan yang lain.

Karakter yang dikontrol pada game ini berupa seekor kera yang memiliki kemampuan untuk berjalan, berlari, melompat dan memukul. Pisang dapat diambil dengan menggunakan empat kemampuan yang dimiliki oleh kera tersebut. Awalnay sih memang ingin seekor kera, akan tetapi karena belum sakti di Blender atau dengan kata lain belum bisa mbikin karakter kera di Blender, maka akhirnya karakternya memakai Lerzp yang merupakan karakter dari contoh proyek game Unity. Kalau diliat bentuknya, yang mirip kera hanya mulutnya saja.

Ide game ini diadopsi dari tema yang sama dari game 2D yang berjalan pada sistem operasi  Android. Pembuatan game dalam bentuk 3D ini dimaksudkan untuk memberikan pengalaman berbeda pada tema game yang sama sekaligus menerapkan beberapa konsep dasar pada game 3D. Game ini dibangun dengan menggunakan game engine Unity 3.4 versi free yang berjalan pada sistem operasi Windows.

Permainan yang dibuat dimainkan dalam sebuah area yang terlihat seperti kebun pisang. Dalam kebun tersebut terdapat pohon-pohon pisang yang buahnya dapat diambil untuk mendapat point dan jika terambil dalam jumlah tertentu, membuka pintu untuk mengakhiri level tersebut.

Penempatan pisang-pisang dalam area dibuat bervariasi agar terdapat tantangan bagi pemain. Selain penempatan yang bervariasi, diberikan pula rintangan yang menghambat pemain untuk mencapai pisang. Variasi penempatan berupa tinggi pohon dan posisi pohon yang memerlukan usaha tambahan untuk mencapainya. Rintangan yang diberikan berupa pohon yang tertutup pagar dan memiliki pintu yang terbuka dan tertutup secara berkala, unit yang menembaki karakter serta jembatan angkat.

Tujuan dari permainan adalah mengumpulkan pisang sejumlah yang telah ditentukan dan keluar dari area bermain sebelum waktu habis. Jumlah pisang yang diberikan lebih banyak dari syarat berakhirnya permainan untuk mempermudah pilihan. Setelah berhasil mengumpulkan pisang, pemain harus mengarahkan karakter ke pintu keluar yang ditentukan. Saat pemain berhasil keluar atau jika waktu telah habis, permainan berakhir.

Incoming search terms:

• membuat game 3d
• membuat game 3d sederhana
• membuat game
• tutorial membuat game 3d
• membuat game dengan unity
• buat game dengan unity
• buat game unity
• membuat game sederhana
• membuat game mudah
• membuat game dengan 3d unity

Kali ini kita akan membuat sebuah form dengan menggunakan beberapa elemen baru pada HTML 5 salah satunya adalah input type berupa email. Input type berupa email akan menolak saat kita memasukkan format email yang tidak tepat pada kotak tersebut. Format yang diminta selalu mengharuskan adanya tanda “@”. Misalnya alamat email harus ditulis dengan lengkap seperti : tanto@kangtanto.com. Form yang akan kita buat nantinya akan tampak seperti gambar berikut ini.

Penulisan input type email seperti berikut ini:

<input type="email" name="email_anda" id="email_anda" />

Selain input type berupa email, kita akan menambahkan jenis input lainnya yaitu url. Seperti pada contoh kode HTML di bawah ini:

<input type="url" id="user_url" name="user_url" />

Input jenis url akan meminta user memasukkan alamat domain atau sub domain. Jenis input terakhir yang juta pakai adalah bertipe required. Contoh penulisannya seperti di bawah ini

<input type="required" id="nama_anda" name="nama_anda" />

Input jenis ini akan mewajibkan user untuk mengisi kotak tersebut. Apabila kotak input masih kosong, maka form pada saat disubmit akan mengeluarkan peringatan. Untuk membuat form HTML 5 ini, silahkan anda ketikkan script di bawah ini pada editor HTML anda.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="pembungkus">
<span id="sembunyikan">Sembunyikan Form</span>
<span id="tampilkan" style="display:none;">Tampilkan Form</span>
<span id="miringkan">Miringkan Form</span>
<span id="zoom">Zoom Form</span>
<div id="formbiodata">
	<h1>Data <span>Biodata</span> Pengguna</h1>
	<form action="#" method="post">
	<input type="text" name="nama" id="nama" value="Nama Anda" />
    <label for="nama">Nama Anda </label>
	<input type="email" name="user_email" id="email" />
	<label for="email">E-mail: </label>
	
   <input type="url" name="user_url" id="url" />
   <label for="url">Web </label>
   
   <input list="browsers" />

   <datalist id="browsers">
  		<option value="Internet Explorer">
  		<option value="Firefox">
  		<option value="Google Chrome">
  		<option value="Opera">
  		<option value="Safari">
  </datalist> 
  <label for="browsers">Browser yang anda gunakan </label>
  
  <input type="text" name="username" required="required" id="username" /> 
  <label for="username">Username * </label>
	<div class="clear"></div>
<input type="submit" class="button" value="Kirim" />
	
</form>
</div>
</div>
</body>
</html>

Selanjutnya agar form anda tampil menarik, silahkan anda ketikkan CSS dibawah ini. CSS yang kita pakai kali ini sebagian merupakan CSS3. Misalnya untuk membuat rounded corner. Akan tetapi beberapa browser versi lama belum mendukung style ini.

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}


input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; } 
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#formbiodata {
    width: 654px;
    height: 450px;
    margin: 20px auto;
    padding: 50px 0;
    border-radius:10px;
    -moz-border-radius:10px;/*untuk firefox versi 3.5 ke bawah*/
    box-shadow:10px 10px 5px #888888;
    border:1px solid #FFF;
    overflow: hidden;
    position: relative;
    
}

#formbiodata input, #formbiodata select {
        background: url('images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;
        
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
}

 #formbiodata input.button {
    background: none repeat scroll 0 0 #A3D62F;
    border: 1px solid #3B6E22;
    border-radius: 8px 8px 8px 8px;
    color: #FFFFFF;
    cursor: pointer;
    width: 85px;
    height: 38px;
    position: relative;
    bottom: 15px;
    left: 575px;
    width: 70px;
}

#formbiodata label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
}

#formbiodata h1, #formbiodata h2 {
        font-size: Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
#formbiodata h1 span { color: #a90329; }

Sementara itu dulu terkait pembuatan form sederhana ini. Tahap selanjutnya kita bisa menambahkan Jquery atau yang lainnya. Ada usul?

Incoming search terms:

• html5 tutorial
• html 5 tutorial
• css3 form
• sembunyikan html h1
• membuat form html menarik
• tutorial html5 lengkap
• membuat form html 5
• membuat desain form text input website menggunakan photoshop
• membuat css3 form input
• membuat button dengan html 5

Today there is a surprise from Google. Just type “let it snow” on your google search and the snow will fall on your browser. It is not a doodle actually, just a winter surprise from Google. Then you can play with your mouse to draw as it is on the window in front of you.

Don’t forget to take a snapshot and clik “Defrost” if you want to clean the snow.

Curios of the technology behind all of this?

Incoming search terms:

• let it snow