Pure CSS3 Windows7 Start Menus - A CSS3 Experiment by Taufik Nurrohman
Guess it! Is the picture above original Windows Operating System or just an imitation made using CSS3?
The answer is CSS3. For some reason, maybe this is the funniest of the first things I did in my life. Because, for what I create Windows with CSS? It was a waste of time!
Well, maybe that's the way of art. No one knows until you feel the satisfaction. And I always like the moment:
Penulisan gradien radial secara umum untuk masing-masing peramban dapat dituliskan seperti ini:
div {
/* Chrome & Safari 4+ */
background-image:-webkit-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);
/* Firefox 3.6+ */
background-image:-moz-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);
/* Internet Explorer 10+ (Setahu Saya Masih Draft) */
background-image:-ms-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);
/* Opera 12 (Setahu Saya Masih Draft) */
background-image:-o-radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);
/* W3C */
background-image:radial-gradient(posisi, ukuran dan sifat, color stop/baris warna);
}
BAB 2: Perkenalan Nilai Pembangun
1. Posisi
Posisi adalah tentang di sebelah mana gradien akan ditampilkan. Berhubung radial gradient adalah gradien berbentuk lingkaran, maka posisi juga wajib untuk ditentukan. Menentukan posisi umumnya dapat dituliskan menggunakan satuan persen atau piksel dengan mengambil sudut pandang sumbu-x dan sumbu-y:
Default / Menerapkan Baris Warna tanpa Mendeklarasikan Posisi
Menerapkan Baris Warna dan Mendeklarasikan Posisi 50% 50%
div {
background:-webkit-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
background:radial-gradient(50% 50%, blue 30px, whitesmoke 100%);
}
Mendeklarasikan Posisi Offset
Di sini Saya tambahkan juga sifat radial gradien. Karena jika tidak, efek offset tidak akan terlalu jelas terlihat dan dikhawatirkan ini akan membingungkan Anda pada bagian ini. Yang penting jangan pedulikan deklarasi sifat gradien untuk saat ini. Fokus saja pada offsetnya dan bangun logikamu sendiri. Sifat gradien akan dibahas lebih detail setelah ini:
div {
background:-webkit-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
background:radial-gradient(30% 100%, circle closest-corner, blue 30px, whitesmoke 100%);
}
Koordinat Posisi
2. Sifat-Sifat dan Penentuan Bentuk
Mulai dari sini penjelasannya akan semakin rumit. Bersiaplah!!! WARRRGGHH!!!!
closest-side / contain
Mendeklarasikan closest-side akan membuat dimensi gradien menyesuaikan diri berdasarkan batas area (sisi-sisi area). Saat gradien menyebar dari pusat, maka akhirnya akan berhenti pada sisi area terdekat. Nilai closest-side memiliki arti yang sama dengan contain.
div {
background:-webkit-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
background:radial-gradient(50% 50%, closest-side, blue 30px, whitesmoke 100%);
}
closest-corner
Mendeklarasikan closest-corner akan membuat dimensi gradien menyesuaikan diri berdasarkan sudut terdekat area. Saat gradien menyebar dari pusat, maka gradien akan terus menembus melewati sisi-sisi area hingga salah satu sisi diagonal radialnya menyentuh ujung area terdekat, pada saat itu penyebaran akan berhenti.
div {
background:-webkit-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
background:radial-gradient(50% 50%, closest-corner, blue 30px, whitesmoke 100%);
}
Sifat closest-side dan closest-corner
closest-side dan closest-corner
farthest-side
Mendeklarasikan farthest-side akan membuat dimensi gradien menyesuaikan diri berdasarkan sisi terjauh area. Saat gradien menyebar dari pusat, maka akhirnya akan berhenti pada sisi area terjauh. Sisi area terdekat diabaikan dan akan terus dilewati. Akan sangat mudah mengetahui sifatnya jika kita terapkan gradien menyudut dengan bentuk elips (elips di sini maksudnya adalah bentuk radial menyesuaikan diri berdasarkan ukuran area dengan lebar dan tinggi yang tidak sama:
div {
background:-webkit-radial-gradient(10% 50% ,farthest-side, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
background:radial-gradient(10% 50%, farthest-side, blue 30px, whitesmoke 100%);
}
farthest-corner / cover
Mendeklarasikan farthest-corner akan membuat dimensi gradien menyesuaikan diri berdasarkan sudut terjauh area. Saat gradien menyebar dari pusat, maka gradien akan terus menembus melewati sisi-sisi dan ujung-ujung area terdekat hingga salah satu sisi diagonal radialnya menyentuh ujung area terjauh, pada saat itu penyebaran akan berhenti. farthest-corner bersinonim dengan cover:
div {
background:-webkit-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
background:radial-gradient(10% 50%, farthest-corner, blue 30px, whitesmoke 100%);
}
Sifat farthest-side dan farthest-corner
farthest-side dan farthest-corner
Konstan
Deskripsi
closest-side / contain
Akhir gradien akan berhenti pada batas area paling dekat dengan pusat (untuk circle) atau memenuhi kedua sisi vertikal dan horizontal terdekat dari pusat gradien (untuk elips).
farthest-side
Berlawanan dengan closest-side. Akhir gradien akan berhenti pada sudut terjauh dari pusat gradien (akan terlihat jelas perbedaannya jika letak gradien tidak berada tepat di tengah).
closest-corner
Akhir gradien akan berhenti tepat pada sudut terdekat area dari pusat gradien.
farthest-corner / cover
Akhir gradien akan bernenti pada sudut terjauh dari pusat gradien.
3. Baris Warna & Color Stop
Baris warna dan pengertian color-stop bisa Anda pelajari pada artikel sebelumya.
BAB 3: Duplikasi Gradien
Seperti halnya CSS3 Linear Gradient, duplikasi gradien dapat dibuat dengan cara menambahkan imbuhan/affiks repeating pada deklarasi gradien radial:
Selain menggunakan persentase dan piksel, nilai posisi gradien juga bisa dituliskan dengan direksi seperti biasa (top, right, bottom, left, top left, top right, bottom left, bottom right, center):
div {
background:-webkit-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
background:-moz-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
background:-ms-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
background:-o-radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
background:radial-gradient(top left, farthest-corner, blue 30px, whitesmoke 100%);
}
circle dan ellipse bisa ditambahkan sebelum menuliskan sifat untuk sekedar mempertegas bentuk radial dari gradien. Apakah akan tetap mempertahankan bentuknya yang bulat sempurna meski area tidak sama tinggi dan lebar, ataukah memilih untuk membentuk elips, atau membiarkan mereka menyesuaikan diri dengan lingkungannya (ellipse sebenarnya tidak begitu penting):
div {
background:-webkit-radial-gradient(30% 30%, circle closest-corner, white, black);
background:-moz-radial-gradient(30% 30%, circle closest-corner, white, black);
background:-ms-radial-gradient(30% 30%, circle closest-corner, white, black);
background:-o-radial-gradient(30% 30%, circle closest-corner, white, black);
background:radial-gradient(30% 30%, circle closest-corner, white, black);
}
Terinspirasi dari konsep Beautiful Slide Out Navigation dengan efek slidingnya yang sangat menarik, kali ini Saya akan membuat efek tersebut hanya dengan CSS3. Kabar baik bagi Anda yang tidak suka atau belum mengerti tentang JQuery. Instalasi menu ini sangat mudah dilakukan:
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
Pertama kali, sintaks gradien Webkit dimulai dengan awalan -webkit-gradient. Tipe gradien masih dipisahkan. left top dan left bottom adalah start point. Atau Saya lebih suka menyebutnya sebagai kedatangan/awal pertama kali gradien diproduksi. Apakah dari kiri atas, kiri bawah atau yang lainnya.
Sintaks Webkit berikutnya mengalami perubahan dengan menuliskan tipe gradien di depan prefiks itu sendiri. top adalah direksi bahwa gradien akan tumbuh mulai dari atas menuju ke bawah.
Kemampuan CSS Gradient tidak hanya sebatas menerjemahkan dua warna saja sebagai warna dasar gradien, tetapi juga bisa lebih dari itu. Aturannya sangat sederhana: Warna awal dimulai dari kiri begitu seterusnya menuju ke kanan:
Color Stop digunakan untuk mengubah keseimbangan pembagian ruang pada masing-masing warna. Secara normal, jika terdapat dua warna dalam satu area, maka warna pertama akan mendapatkan bagian sebesar 0% dari ruangan sedangkan warna yang ke dua akan mendapatkan 100%. (?)
Dengan color stop, Anda bisa mengatur pembagian ruangan baik dengan persentase maupun piksel:
div {
background:-webkit-linear-gradient(left, red 0%, green 75%, blue 100%);
background:-moz-linear-gradient(left, red 0%, green 75%, blue 100%);
background:-ms-linear-gradient(left, red 0%, green 75%, blue 100%);
background:-o-linear-gradient(left, red 0%, green 75%, blue 100%);
background:linear-gradient(left, red 0%, green 75%, blue 100%);
}
div {
background:-webkit-linear-gradient(left, red 50px, green 90px, blue);
background:-moz-linear-gradient(left, red 50px, green 90px, blue);
background:-ms-linear-gradient(left, red 50px, green 90px, blue);
background:-o-linear-gradient(left, red 50px, green 90px, blue);
background:linear-gradient(left, red 50px, green 90px, blue);
}
BAB 5: Kelebihan Satuan Pengukuran Persentase dan Satuan Mutlak
Coba Anda ubah ukuran <textarea> di bawah ini dan temukan perbedaannya:
Menggunakan Persentase: Gradien Lebih Fleksibel
Menggunakan Piksel/Satuan Mutlak: Gradien Tidak Fleksibel namun Terukur
BAB 6: Duplikasi Gradien
Gradien juga bisa diduplikasi dengan cara menerapkan sintaks duplikasi gradien. Duplikasi gradien idealnya menggunakan satuan piksel, meskipun beberapa ada juga yang menggunakan persentase. Sekedar untuk memastikan bahwa satu baris gradien yang terbentuk tidak akan memenuhi ruangan, melainkan akan diduplikasikan:
div {
background:-webkit-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
background:-moz-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
background:-ms-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
background:-o-repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
background:repeating-linear-gradient(-45deg, black, orangered 10px, forestgreen 10px, antiquewhite 20px);
}
/* Khusus sintaks IE, Saya masih belum yakin karena Saya masih belum menemukan referensi yang tepat */
Mungkin beberapa dari Anda tidak percaya bahwa gambar di atas adalah murni dibuat dengan CSS3. Ya, itu adalah salah satu pemanfaatan CSS Triangle yang menurut Saya paling sempurna:
<div class="rb-wrap">
<p class="ribbon">
<strong class="ribbon-content">Pita Tiga Dimensi</strong>
</p>
</div>
Unsur-Unsur Pembangun
Gambar di bawah ini memang tidak begitu menjelaskan tentang bagaimana efek pita tersebut terbentuk, tapi setidaknya gambar-gambar ini bisa memberikan sedikit petunjuk:
Menciptakan sebuah boks dengan efek rounded corner seperti ini sangat mudah dilakukan dengan cara menerapkan CSS Border Radius. Tapi bagaimana cara Saya menciptakan efek panah kecil di bawah balon kata ini?
Untuk bisa memahami cara membuat efek balon kata seperti ilustrasi di atas, setidaknya Anda harus memahami empat hal di bawah ini:
Kunci pertama terletak pada CSS Pseudo Element :before dan :after. Bentuk segitiga yang Saya buat adalah sebuah elemen palsu yang diciptakan dari CSS Pseudo Element. Di sini Saya tidak mementingkan apakah Anda akan membuat elemen palsu tersebut menggunakan :before atau :after. Saya rasa semuanya akan sama saja, karena di sini kita akan berhadapan dengan posisi absolut. Hanya saja Saya memiliki beberapa saran yang ideal: Jika Anda ingin menciptakan elemen palsu di sebelah kiri atau atas elemen asli gunakanlah :before dan jika Anda ingin menciptakan elemen palsu di sebelah kanan atau bawah elemen asli gunakanlah :after.
CSS Pseudo Element untuk menciptakan efek panah
Kunci ke Dua
Efek segitiga dibuat dengan teknik CSS Triangle. Anda bisa mempelajarinya di sini.
Prinsip Peletakan Posisi
Posisi absolut pada elemen akan membuat elemen berpindah tempat berdasarkan koordinat layar, untuk memindahkan koordinat posisi elemen palsu menjadi berdasarkan pada elemen asli, tambahkanlah position:relative pada elemen asli:
.balon-kata {
position:relative;
}
Nah, kali ini kita akan berhadapan dengan koordinat top, right, bottom dan left seperti halnya CSS Posisi Absolute pada umumnya. Kita mulai dengan syarat pertama: Jika Anda ingin meletakkan elemen palsu tepat di bawah elemen asli, tuliskan nilai top sebesar 100%. Nilai left dan right bisa disesuaikan sendiri:
Nilai top sebesar 100%Kenapa harus 100%? Oke, kita coba ganti nilai top menjadi 50% atau gunakanlah satuan piksel. maka hasilnya kurang lebih akan tampak seperti ini:Nilai top sebesar 50%
Saya yakin sampai di sini Anda sudah mulai mengerti. Gunakanlah imajinasi. Sekarang kita masuki syarat ke dua. Ini hanyalah kesimpulan akhir dari logika di atas:
Jika Anda ingin menempatkan elemen palsu tepat di samping kiri elemen asli, atur nilai right menjadi 100%. Nilai top atau bottom bisa disesuaikan sendiri.
Jika Anda ingin menempatkan elemen palsu tepat di samping kanan elemen asli, atur nilai left menjadi 100%. Nilai top atau bottom bisa disesuaikan sendiri.
Jika Anda ingin menempatkan elemen palsu tepat di atas elemen asli, atur nilai bottom menjadi 100%. Nilai left atau right bisa disesuaikan sendiri.
Jika Anda ingin menempatkan elemen palsu tepat di bawah elemen asli, atur nilai top menjadi 100%. Nilai left atau right bisa disesuaikan sendiri.
Produk Akhir
Di atas Saya hanya memberikan prinsip-prinsip peletakan dan pembuatan efek panahnya saja, di bawah ini Saya akan memberikan kode sumber untuk bisa dipelajari lebih lanjut:
Cobalah untuk mewarnai dua sisi border atau gunakanlah CSS Transformasi skew() untuk membuat efeknya menjadi lebih nyata:
Mewarnai dua sisi border (top dan left)
.balon-kata.bottom:after {
content:"";
width:0px;
height:0px;
position:absolute;
top:100%;
left:20px;
border-width:10px;
border-style:solid;
/* mewarnai dua sisi border top dan left */
border-color:black transparent transparent black;
display:block;
}
Mendistorsi dimensi elemen palsu .balon-kata.bottom:after dengan CSS Transformasi skew()
CSS Triangle, Teknik Pembuatan Dimensi Segitiga dengan Border
Sebelum mempelajari bagian ini, Saya sarankan Anda untuk mempelajari CSS Border terlebih dahulu karena di sini Saya hanya akan berbicara tentang border. Efek segitiga bisa dibuat dengan cara mengambil prinsip sederhana seperti ini:
border-width: 30px;
border-style: solid;
border-color: red green blue yellow;
Jika kita ubah ukuran lebar dan tinggi elemen menjadi 0, maka inilah yang akan Anda dapatkan:
Cukup warnai salah satu sisi/dua sisi border saja maka Anda akan mendapatkan efek segitiga yang Saya maksud:
div {
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:transparent transparent black transparent;
}
div {
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:black black transparent transparent;
}
Setelah ini Saya yakin akan muncul sebuah pertanyaan, “Lalu untuk apa semua ini?”
JQuery adalah sebuah paket fungsi JavaScript. Jadi, JQuery bukanlah bahasa baru dalam dunia web development melainkan hanya sebuah metode baru penulisan JavaScript. Setiap fungsi JQuery membutuhkan sebuah framework JQuery agar semua deklarasi fungsi bisa berjalan:
Kesalahan yang umum terjadi pada para pengguna JQuery pemula adalah memasang lebih dari satu JQuery dalam satu dokumen. JQuery adalah sebuah paket. Jadi, sekali saja Anda telah memasang JQuery, maka sisanya tinggal menuliskan deklarasi-deklarasinya saja. Versi-versi JQuery seperti 1.3.2, 1.4.2, 1.6.2 dan yang terbaru 1.7.0 itu semua hanyalah perbaikan dari versi-versi sebelumnya. Ada dua alasan utama yang umum digunakan untuk mengembangkan JQuery:
Pertama, karena bug pada peramban (semacam kegagalan/tidak berjalannya sebuah fungsi JQuery pada peramban-peramban tertentu), sehingga JQuery harus menjalani perbaikan. Jika Anda pernah menemukan ketidaknormalan seperti: "Harusnya efek/fungsi ini bekerja pada peramban ini, tapi efek/fungsi ini tidak bekerja pada peramban itu" dalam pekerjaan Anda dan Anda merasa bahwa semuanya sudah benar, Anda bisa melaporkan bug tersebut ke http://bugs.jquery.com/newticket?redirectedfrom=.
Ke dua, untuk membuat/menambahkan fungsi baru. Misalnya, efek .fadeToggle() yang hanya ada pada versi JQuery di atas 1.4.3 (Lebih tepatnya dimulai pada versi 1.4.4 » baca di sini). Juga pada fungsi .on(), .off() dan yang lainnya yang telah ditambahkan pada versi 1.7 (selengkapnya di sini).
Versi 1.4.4
BAB 2: Gambaran Mudah JQuery
Menurut Saya, JQuery bisa digambarkan sebagai sebuah mesin mobil yang belum bisa berjalan karena sang sopir belum menyalakan mesinnya. Sedangkan deklarasi-deklarasi yang ada di luar JQuery bisa Saya gambarkan sebagai kemudi, persneling, rem, dan hal-hal lain yang ada di ruang kemudi. Mobil tersebut (JQuery) hanya bisa berjalan jika Anda (sang sopir) menjalankan mesin mobil tersebut (mendeklarasikan fungsinya):
JQuery adalah sekumpulan fungsi JavaScript. Saat Anda telah memasangnya, tugas selanjutnya hanyalah tinggal menjalankan fungsi-fungsi yang sudah dibangun di dalam JQuery.
Membuat Efek Animasi Loading Sederhana dengan CSS3 Animasi
Di sini Saya menggunakan CSS3 translate, transformasi dan transparasi. Yang pertama harus Anda lakukan adalah membangun frame animasi. Kemudian, cukup panggil setiap efek animasi yang Anda buat ke elemen-elemen yang Anda inginkan. Saya pikir metode ini jauh lebih aman dibandingkan dengan metode animasi loading pembukaan halaman menggunakan JavaScript.
Metode 1: Menggunakan Efek Transparasi
/* Declare the element dimension. These are just examples. You can use all elements that already on the website */
#box1 {
width:300px;
height:300px;
background-color:#000;
margin:0 auto;
}
/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
from {opacity:0}
to {opacity:1}
}
@-moz-keyframes aniload {
from {opacity:0}
to {opacity:1}
}
@-ms-keyframes aniload {
from {opacity:0}
to {opacity:1}
}
@-o-keyframes aniload {
from {opacity:0}
to {opacity:1}
}
@keyframes aniload {
from {opacity:0}
to {opacity:1}
}
/* Step 2: Call the Animation */
#box1 {
-webkit-animation:aniload 4s;
-moz-animation:aniload 4s;
-ms-animation:aniload 4s;
-o-animation:aniload 4s;
animation:aniload 4s;
}
Langkah pertama yang harus Anda lakukan adalah membangun sistem animasi, yaitu menuliskan secara detail langkah-langkah dari awal animasi sampai berakhirnya animasi. Manipulasi penampilan dilakukan dangan cara menuliskan properti-properti CSS biasa. Tidak ada keistimewaan.
Langkah berikutnya adalah memanggil animasi. Ini dilakukan dengan cara menuliskan deklarasi -webkit-animation:mamastopik 10s;-moz-animation:mamastopik 10s;-ms-animation:mamastopik 10s;animation:mamastopik 10s; dalam selektor objek yang Anda inginkan (dalam hal ini Saya menerapkannya dalam sebuah elemen #boks).
mamastopik adalah nama animasi. Ini tidak mutlak, Anda bisa menuliskan nama animasi sesuka hati (dengan mengikuti peraturan sintaks CSS tentunya)
10s adalah waktu tempuh sistem animasi yang Anda bangun dalam satuan detik (s). Kalau waktu tempuh film kartun biasanya sekitar 30 menit, sinetron Korea biasanya sekitar 1 - 2 jam. Milidetik juga bisa digunakan (ms), namun tidak untuk menit dan di atasnya.
Efek Animasi Tak Terbatas
Efek animasi tak terbatas maksudnya adalah animasi akan berjalan terus-menerus tanpa henti. Hal ini bisa dilakukan dengan cara menambahkan nilai infinite setelah durasi:
Percepatan animasi/Easing animasi. Anda bisa mempelajari jenis-jenis percepatan animasi pada tutorial CSS Transisi
animation-delay:2s;
Delay animasi. Semacam waktu malas/penambahan waktu ancang-ancang sebelum animasi dijalankan.
animation-direction:alternate;
Menentukan apakah saat animasi selesai dijalankan (mencapai 100%) akan mengambil langkah kembali menuju 0% sebagai animasi lanjutan itu sendiri kemudian memulai animasi itu kembali dari 0% atau langsung menyentakkan diri menuju animasi 0% dan memulainya kembali menuju 100%. Nilainya bisa berupa normal atau alternate » lihat contohnya di sini
animation-fill-mode:forwards;
Nilainya bisa forwards atau backwards. Fungsinya untuk menentukan apakah properti animasi dijalankan dari 0% menuju 100% atau sebaliknya, dari 100% menuju 0% » pelajari di sini
animation-play-state:running;
Menentukan apakah animasi akan berjalan atau berhenti. Nilainya bisa berupa running atau pause. (Tidak terlalu penting)
@-webkit-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-moz-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-ms-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-o-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
CSS3 Button Generator - V2 is the reconstruction of my first application, CSS3 Button Generator. Now, I add some new features that will further expand your imagination: Three options gradients and color-stop gradient to follow the development of CSS3. 'Holding Hover Session' for easy editing, external class modifiers and others:Featured Option
I have two versions of the application language, English and Indonesian. This is a very lightweight application and simple to use. Have fun!
ID kontainer elemen yang nantinya akan digunakan untuk menampung isi widget.
monthNames
Nama-nama bulan dalam satu tahun sesuai dengan penamaan bulan di negaramu.
oldestFirst
Ganti nilainya menjadi true untuk menampilkan arsip dengan tanggal yang lebih tua terlebih dahulu.
maxResults
Jumlah maksimal feed yang ingin dimuat. Abaikan!
activePanel
Urutan panel yang ingin dibuat terbuka secara default. Dalam hal ini, nilai 1 menunjukkan bahwa panel yang akan aktif saat pertama kali widget dimuat adalah panel yang pertama.
slideSpeed
Tentukan kecepatan efek animasi panel baik saat bergeser ke atas maupun saat bergeser ke bawah pada variabel ini.
delayLoading
Waktu tunda pemuatan feed.
Kode yang Saya beri garis bawah adalah jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, Singkirkan kode tersebut!
Tutorial yang sangat sederhana ini hanyalah sebuah teknik penerapan CSS Pseudo Classes, CSS Text Shadow dan CSS Transisi. Jadi, sebenarnya Saya yakin kamu sudah pernah menemukan ide ini sejak dulu. Tapi Saya hanya ingin membagikan teknik ini pada orang-orang yang belum tahu:
Galleria adalah widget daftar isi dengan tema fotografi. Setiap artikel akan ditampilkan sebagai foto-foto dengan judul yang akan tampil saat disentuh. Masonry adalah salah satu kelengkapan utama untuk membangun widget ini. Menjaga agar setiap elemen tampak berjajar dengan rapi dan responsif:
Ganti nilainya menjadi false jika Anda sudah memakai JQuery Masonry di dalam template
false
idMode
true
Jika bernilai true, sistem bulan terbit akan menjadi berbahasa Indonesia. Jika bernilai false sistem bulan terbit akan berubah menjadi berbahasa Inggris.
false
showPostDate
true
Jika bernilai true, bulan terbit akan ditampilkan. Jika bernilai false bulan terbit akan disembunyikan.
false
byLabels
true
Digunakan untuk memfilter posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelName.
false
labelName
"Widget", "JQuery", "CSS", ... (nama label)
Tentukan nama label jika opsi byLabels bernilai true.
pBlank
"image.jpg", ... (URL Gambar)
Gambar cadangan jika posting yang tampil tidak memiliki gambar.
text
"Komentar", "Comments", ... (teks)
Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
numposts
10, 30, 999, ...(numerik)
Digunakan untuk menentukan jumlah posting maksimal yang akan ditampilkan.
Mungkin beberapa dari Anda masih belum mengenal tentang media queries, jadi mari kita mulai dengan sesuatu yang sangat sederhana. Kunjungi halaman di bawah ini lalu perkecil ukuran layar browser sedikit demi sedikit dan perhatikan!
Seperti yang telah Anda lihat bahwa ukuran layar dapat mengubah warna halaman. Itulah fungsi media queries, yaitu untuk memanipulasi CSS sesuai dengan kondisi layar peramban. Namun, bukan itu fungsi utama dari media queries. Media queries tidak hanya dapat mengubah warna halaman, tetapi juga dapat mengubah layout sebuah website. Dan itu artinya, Anda dapat menciptakan tampilan website sesuka hati Anda dengan mempertimbangkan ukuran viewport yang mungkin akan pengunjung gunakan. Hal ini memungkinkan Anda untuk menciptakan tampilan website yang dinamis, yang dapat menyesuaikan diri dengan tempat dimana website tersebut dibuka. Apakah itu dari komputer, smartphone, tablet, apapun itu:
Contoh Nyata Media Queries
Memulai Konsep
Hal pertama yang harus Anda lakukan adalah membuat konsep sebuah website. Tidak perlu terlalu rumit, pastikan saja Anda menciptakan template yang lengkap dan umum, yang terdiri dari sebuah header, navigasi, artikel, sidebar dan footer. Misalnya seperti ini:
h1,h2,h3,h4,h5,h6,ul,ol,li {
margin:0 0 0 0;
padding:0 0 0 0;
border:none;
}
body {
background:#fff;
margin:0;padding:0;
text-align:center;
font:normal normal 70% Arial,Sans-Serif;
}
#outer-wrapper {
width:1030px;
margin:0 auto 0;
text-align:left;
background:#ddd;
}
#header-wrapper {
padding:2%;
margin:0;
display:block;
background:#666;
}
#nav {
background:#999;
font:normal normal 1em Arial,Sans-Serif;
overflow:hidden;
}
#nav ul {
margin:0;
padding:0;
height:auto;
}
#nav ul li {
margin:0;
float:left;
display:inline;
list-style:none;
}
#nav ul li a {
display:block;
padding:5px 10px;
background:#999;
color:#fff;
}
#nav ul li a:hover {
background:#888;
text-decoration:none;
}
#content {
clear:both;
display:block;
}
#main-wrapper {
width:71%;
padding:2%;
word-wrap:break-word;
overflow:hidden;
float:left;
display:inline;
background:#eee;
}
#sidebar-wrapper {
width:21%;
padding:2%;
word-wrap:break-word;
overflow:hidden;
float:right;
display:inline;
background:#ddd;
}
#footer-wrapper {
padding:2%;
clear:both;
display:block;
background:#666;
}
.clear {clear:both}
Di sini saya mengeset lebar #outer-wrapper sebesar 1030px lalu mengeset ukuran #sidebar-wrapper dan #main-wrapper menggunakan persentase. Perhitungan persentase sebuah tampilan website yang ideal dapat Anda pelajari di sini.
Saat ukuran layar telah mencapai 1030 piksel, set lebar #outer-wrapper menjadi 100%. Hal ini akan membuat template menjadi mudah beradaptasi dengan viewport yang lebih sempit dari 1030 piksel.
Saat lebar viewport lebih kecil dari 600 piksel, set posisi #main-wrapper dan #sidebar-wrapper menjadi elemen blok dalam satu kolom.
Menuliskan lebar sebesar 100% akan mempermudah template dalam beradaptasi, karena persentase tidak diukur berdasarkan keadaan elemen, melainkan berdasarkan tempat dimana elemen tersebut berada. Harap diingat pula beberapa deklarasi penting yang harus Anda terapkan saat menciptakan layout satu kolom.
Seperti yang kita tahu, bahwa untuk menciptakan kolom, deklarasi yang umum digunakan adalah float:left atau float:right, display:inline dan width:N. Maka saat Anda ingin menciptakan layout satu kolom dari elemen yang tadinya berupa dua kolom, hal yang terpenting yang harus Anda lakukan pertama kali adalah netralisasi float dan display. Setelah itu set lebar elemen menjadi auto agar lebar elemen bisa menyesuaikan diri. Setelah itu terserah Anda:
Secara normal, perangkat seluler yang canggih akan memperkecil skala halaman website saat dibuka. Dengan menggunakan meta tag ini, perangkat tersebut tidak akan menyesuaikan skala halaman dan akan menerapkan skala seperti apa adanya:
Jika Anda menggunakan tablet atau iPhone maka orientasi dapat berubah secara otomatis dari portrait menjadi landscape atau sebaliknya saat Anda memutarnya. Saya tidak tahu apakah komputer Anda memiliki fasilitas hebat seperti itu atau tidak. Jadi, sekarang coba balik komputer Anda dan lihat apakah orientasinya berubah? :))
@media screen and (orientation:portrait) {
/* Tampilan Portrait Website Anda */
}
@media screen and (orientation:landscape) {
/* Tampilan Landscape Website Anda */
}
Masalah Background Image yang terlalu Besar
Tidak seperti gambar pada umumnya, background-image tidak bisa responsif, karena dia adalah gambar yang hanya dijadikan sebagai background sebuah objek, bukan dijadikan sebagai objek itu sendiri. Untuk membuat background-image menjadi responsif, gunakan CSS background-size. Misalnya, di sini Saya akan mengubah skala background menjadi 80% dari ukuran sesungguhnya saat lebar viewport berada pada 480 piksel:
Bla.. bla.. bla.... Saya yakin Anda sudah mengerti untuk yang satu ini:
<link rel='stylesheet' media='screen and (max-width: 600px)' href='600px-viewport.css'></link>
Max Width, Min Width, Multiple Media Queries
Max Width
Kode di bawah akan mulai mengubah penampilan saat lebar viewport berada pada maksimal 500 piksel dan di bawahnya:
@media screen and (max-width:500px) {
...
...
}
Min Width
Kode di bawah akan mulai mengubah penampilan saat lebar viewport berada pada minimal 500 piksel dan di atasnya:
@media screen and (min-width:500px) {
...
...
}
Multiple Media Queries
Kode di bawah ini akan mengubah penampilan apabila lebar viewport berada di antara 500 piksel dan 900 piksel:
@media screen and (min-width:500px) and (max-width: 900px) {
...
...
}
Device Width
Harap bedakan antara max-width dan max-device-width. max-width dihitung berdasarkan resolusi area, sedangkan max-device-width dihitung berdasarkan resolusi device:
@media screen and (max-device-width:1024px) {
...
...
}
Media Queries untuk Device Standar
/* Smartphone (portrait & landscape) */
@media only screen
and (min-device-width:320px)
and (max-device-width:480px) {
...
...
}
/* Smartphone (landscape) */
@media only screen
and (min-width:321px) {
...
...
}
/* Smartphone (portrait) */
@media only screen
and (max-width:320px) {
...
...
}
/* iPad (portrait & landscape) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px) {
...
...
}
/* iPad (landscape) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:landscape) {
...
...
}
/* iPad (portrait) */
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:portrait) {
...
...
}
/* Desktop & laptop */
@media only screen
and (min-width:1224px) {
...
...
}
/* Large Screen */
@media only screen
and (min-width:1824px) {
...
...
}
/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
...
...
}
