Sekarang akan kita isi #konten kita:
1. Mari kita tambahkan code berikut di dalam <section id="konten">
<h2>Pada Suatu Hari</h2>
<p style="text-align:justify">
Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e <a href="#">cak kentir iku kakean pola</a>, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. </p>
<section class="duaKolom">
<p style="text-align:justify">
Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres.
</p>
<ul id="tombolShare">
<li class="tbFb"><a href="#">Facebook</a></li>
<li class="tbTw"><a href="#">Twitter</a></li>
</ul>
</section>
<p>
Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres. Lorem ipsum dulur e cak kentir iku kakean pola, jeneng ae atek Lorem Ipsum, sok enggres.
</p>
<aside id="kotakKomen">
<form action="" method="get">
<input type="text" class="textbox" placeholder="Nama"><br>
<input type="text" class="textbox" placeholder="E-mail"><br>
<textarea class="textarea" placeholder="Masukkan komentar Anda" rows="4"></textarea>
<p align="center">
<input type="submit" class="tombol">
</p>
</form>
</aside>
Penjelasan:
- untuk membuat tulisan ber-kolom ganda, kita masukkan paragraf ( <p> ) kedalam suatu tag. Karena ini di HTML5, maka kita masukkan ke dalam tag <section class="duaKolom">
- untuk tombol Facebook dan Twitter, kita buat Unordered List ( <ul> ) yang nantinya akan kita manipulasi di CSS nya.
- untuk kotak komentar, kita masukkan ke dalam tag HTML5 bernama <aside>. Aside adalah tag untuk memuat sesuatu yang berhubungan dengan konten kita, bisa diisi Rangkuman, dll.
- untuk inputan form, kita beri Placeholder. ini berfungsi untuk memberi Label dan menghemat tempat.
Hasilnya:
2.mari kita tambahkan CSS3 nya:
#tengah{
width: 900px;
margin: 0 auto;
padding-top: 33px;
}
kita setting dulu #tengah nya agar width nya 900px.
#tengah section#konten{
float:left;
width:400px;
}
section id=konten menjadi lengket di kiri (float:left) dan lebar 400px.
#tengah section#konten h2{
font-family: Segoe UI;
font-size: 33px;
letter-spacing: -4px;
margin-bottom: 20px;
color: rgb(20, 172, 14);
}
ini untuk judul konten (Heading 2)
#tengah section#konten p{
margin-bottom:15px;
}
untuk memberi jarak setiap paragraf. kita harus beri code lagi, karena sudah ter-reset oleh reset.css.
3. Membuat 2 kolom:
#tengah section#konten section.duaKolom{
-webkit-column-count: 2;
-webkit-column-gap: 50px;
margin-bottom:15px;
}
nah ini untuk membuat dua kolom, dengan jarak 50px antara kolom.
4. Membuat list horizontal:
#tengah section#konten ul#tombolShare{
border-top: 2px dotted rgb(156, 156, 156);
padding-top: 10px;
}
untuk membuat titik-titik di atas tombol share.
#tengah section#konten ul#tombolShare li,
#tengah section#konten ul#tombolShare li a{
float:left;
height:60px;
width:60px;
text-indent:-9999px;
}
agar item dari Unordered List kita tadi. ini harus mengenai <li> dan <a> -nya. kita beri Float:left agar list menjadi horizontal.
5. Properti yang diberi transition (animasi)
#tengah section#konten ul#tombolShare li.tbFb a{
background-image:url(images/social-hijau.png);
background-position:0px 0px;
-webkit-transition: background-position 0.3s ease-out;
}
transition digunakan agar tidak kaku ketika hover (ada animasi), meng-animasi-kan properti background-position, berdurasi 0.3 detik, dan ease-out (dari cepat ke lambat).
#tengah section#konten ul#tombolShare li.tbFb a:hover{
background-position:0px -60px;
}
ini adalah background position ketika di hover. Y -60px, bergerak 60 piksel ke atas.
#tengah section#konten ul#tombolShare li.tbTw a{
background-image:url(images/social-hijau.png);
background-position:-60px 0px;
-webkit-transition: background-position 0.3s ease-out;
}
#tengah section#konten ul#tombolShare li.tbTw a:hover{
background-position:-60px -60px;
}
ini adalah code CSS untuk Twitter -nya, sama dengan yang Facebook, hanya beda posisi X nya saja.
6. Manipulasi form
#tengah section#konten .textbox,
#tengah section#konten .textarea{
padding: 10px;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25);
border-radius: 5px;
border: 1px solid rgb(0, 170, 20);
margin-bottom: 13px;
width: 380px;
-webkit-transition: -webkit-transform 0.2s ease-in;
}
- bayangan kotak di dalam (inset), posisi X=2px Y=2px blur=5px, dan berwarna hitam ber-opacity 0.25 (tembus pandang)
- border radius, agar sudut kotak menjadi lengkung.
- memberi animasi (transition) untuk -transform ketika di hover, ease-in berarti bergerak dari lambat ke cepat.
#tengah section#konten .textbox:hover,
#tengah section#konten .textarea:hover,
#tengah section#konten .textbox:focus,
#tengah section#konten .textarea:focus{
-webkit-transform: scale(1.1);
}
ketika di-hover (dan focus), ukuran menjadi 110% (1 koma 1). transform termasuk properti CSS3 juga.
#tengah section#konten .tombol{
padding: 9px;
border: 1px solid rgb(26, 160, 0);
background-color: rgb(169, 236, 163);
border-radius: 5px;
box-shadow: inset 1px 1px 5px white;
-webkit-transition: -webkit-transform 0.2s ease-in, background-color 0.2s ease-in;
}
untuk animasi (transition) lebih dari satu, beri tanda koma, dan tulis lagi nama propertinya, beserta durasi dan ease nya.
#tengah section#konten .tombol:hover{
cursor:pointer;
-webkit-transform: translate(0px,-5px);
background-color:#0F3;
}
ini ketika tombol di hover. background berubah warna dan translate (bergeser) Y = -5px (ke atas 5px).
Nah sekarang kita sudah membuat sisi konten nya.
- silakan dicek apakah sudah menjadi 2 kolom di paragraf ke-dua,
- silakan coba cursor arahkan ke logo Facebook dan Twitter, apakah sudah bisa bergeser dengan halus,
- arahkan cursor lagi ke form-form nya, apakah sudah bisa menjadi besar dengan halus,
- juga arahkan cursor ke tombol Submit, apakah tombolnya sudah bisa bergerak ke atas dan berubah warna dengan halus.
Mengapa kolom-ganda dan animasi (transition) tidak berjalan di browser saya?
code-code CSS di atas, saya menggunakan awalan -webkit-blablabla pada code CSS3. -webkit di sini hanya berjalan di Google Chrome. agar bisa berjalan di Mozilla Firefox, ganti menjadi -moz-blablabla.
agar code CSS3 kita berjalan di semua browser, kita harus tulis code nya untuk setiap browser.
misal tadi di atas kita tulis:
-webkit-transform: translate(0px,-5px);
maka sekarang kita harus tulis seperti ini:
-webkit-transform: translate(0px,-5px); <-- google chrome
-moz-transform: translate(0px,-5px); <-- mozilla
-o-transform: translate(0px,-5px); <-- opera
-ms-transform: translate(0px,-5px); <-- internet explorer versi 9
tentu cara ini sangat memakan waktu, makanya kita lakukan ini ketika web sudah terdesain secara menyeluruh.
Bagian 2 sampai di sini dulu, semoga bermanfaat, terima kasih, wassalam..
0 Komentar untuk "Tutorial HTML5 CSS3 - Bagian 2"