Rudy Azhar

Blogazinekah ?

rudy — Tue, 03 Jan 2012 16:27:10 +0000

Blogazine
Membuatku
Berfikir
“OUT OF THE BOX”
Bagaimana denganmu ?

Hanya bisa dinikmati di webkit… Sorot dan klik untuk melihat efek.

Tulisan Terkait

Lagu Favorit

rudy — Sun, 04 Dec 2011 10:14:55 +0000

Lagu-lagu Favoritku

Top 20 Tangga Lagu Indonesia bulan Oktober 2011

© 2011, Rudy Azhar. Semua Foto album © punya pemiliknya langsung. Dibuat dengan HTML5 dan CSS3, bekerja dengan baik di modern browser (seperti Chrome, Firefox atau Safari). Postingan ini 100% terinspirasi dari situs Thorsten Beeck. Anda bisa melihat inspirasi postingan yang saya buat dan telah mengalami beberapa modifikasi disini.

Tulisan Terkait

Gelap

rudy — Sun, 27 Nov 2011 08:07:19 +0000

Inilah keadaan tempat tinggalku jika mati lampu, kita tidak bisa berbuat banyak karena pemasok litrik di negeri tercinta ini hanya satu – PLN -

Sungguh, sumber daya listrik kita dimonopoli oleh satu Instansi saja yang terkadang bertindak semena-mena terhadap rakyat jelata.

Pertanyaannya….. Sampai kapankah hal ini harus kita tanggung???

Tulisan Terkait

Indonesiaku?

rudy — Sat, 26 Nov 2011 17:11:19 +0000

Random Posts

Sudut Lipat dengan Border

rudy — Mon, 21 Nov 2011 14:49:31 +0000

Trik ini sebenarnya sudah agak basi karena sudah banyak diketahui tentang cara membuat ‘folded corner’, yang mana pertama-tama dibahas oleh Nicolas Gallegher dengan topik ‘Pure CSS folded-corner effect‘ hampir setahun yang lalu.

Di Optimasi Blog juga pernah dibahas dengan judul Folding Angle (Melipat Sudut), tapi trik kali ini kita menambahkan border (bingkai) pada sudutnya.

Contoh bisa dilihat pada area postingan ini.

HTML

 .... ISI POSTINGAN ....

CSS

.post {
border: 5px solid #e6675e;
    margin: 50px;
    padding: 10px;
    position: relative;
    background: #eee;
/* Menambah sedikit efek gradient pada sudutnya */
    background: -webkit-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)), hsla(0,0%,95%,1);
    background: -moz-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)), hsla(0,0%,95%,1);
    background: -ms-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)), hsla(0,0%,95%,1);
    background: -o-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)), hsla(0,0%,95%,1);
    background: linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.02)), hsla(0,0%,95%,1);
/* Menambah sedikit efek box-shadow dibagian dalam sudut. */
    -webkit-box-shadow: inset 0 0 25px hsla(0,0%,0%,.1), 2px 2px 2px hsla(0,0%,0%,.15);
       -moz-box-shadow: inset 0 0 25px hsla(0,0%,0%,.1), 2px 2px 2px hsla(0,0%,0%,.15);
            box-shadow: inset 0 0 25px hsla(0,0%,0%,.1), 2px 2px 2px hsla(0,0%,0%,.15);
}
.post:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 0;
    height: 0;
/* Border pada bagian lipatan */
    border-top: 30px solid #f6f6f6 ;
    border-left: 30px solid #f6f6f6 ;
    border-bottom: 30px solid #c4453c;
    border-right: 30px solid #c4453c;
    -webkit-box-shadow: 1px -1px 1px hsla(0,0%,0%,.25);
       -moz-box-shadow: 1px -1px 1px hsla(0,0%,0%,.25);
            box-shadow: 1px 1px 1px hsla(0,0%,0%,.25);
}
.post:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
/* Membentuk lipatan */
    border-top: 25px solid #f6f6f6;
    border-left: 25px solid #f6f6f6;
    border-bottom: 25px solid #c6c6c6;
    border-right: 25px solid #c6c6c6;
}

Catatan :

Kode warna hsl(0, 0%, 0%) sama dengan warna hitam, sedangkan kode hsl(0, 0%, 95%) mendekati putih atau sama juga dengan #f3f3f3 atau rgb(243,243,243).

Tulisan Terkait

Privacy

rudy — Sat, 19 Nov 2011 11:13:53 +0000

well hello there

STOP

Copying

DESIGNS

- thanks -

Tulisan Terkait

RudyAzhar-V5 Is Coming

rudy — Thu, 17 Nov 2011 16:06:18 +0000

Untuk kesekian kalinya blog ini melakukan face-off, karena saya orangnya cepat bosan memakai disain dalam waktu yang cukup lama.

Pengantar

Dalam rangka menyongsong Tahun 2012 saya melakukan perombakan tampilan pada blog ini, tetap mengusung HTML-5 dan CSS-3.

Thema ini dinamakan RudyAzhar-V5 adalah kelanjutan dari versi-versi sebelumnya, dalam arti kata saya sudah lebih dari 5 (lima) kali merombak tampilan blog RudyAzhar ini.

Niat awal saya ingin menggunakan CSS semua dalam tampilannya, tapi dikarenakan penggunaan CSS3 repeating-linear-gradient cukup berat diakses oleh Peramban tertentu (terutama FireFox) maka niat tersebut saya urungkan dengan mengganti beberapa bagian dengan gambar.

Ada beberapa bagian pada blog ini yang ditambah tapi ada juga pengurangan pada 1 sampai 2 item.

Berikut pembahasan secara garis besarnya.

Halaman Depan

Pertama kita bahas pada landing page atau home page atau Halaman depan.
Strukturnya masih tetap seperti thema yang terdahulu dengan meniadakan bilah sisi (sidebar), perubahan ada pada top navigasi yang dibuat dengan gaya navigasi Apple tapi berwarna agak putih dengan lambang bintang adalah tautan ke halaman utama.
Pada sisi kanan navigasi ada beberapa tautan yang mengarah ke jejaring sosial tempat saya terdaftar dengan tambahan flickr, serta logo RSS yang saya comot dari lea.verou.me.

Daftar postingan dibuat dengan latar belakang kuning dengan motif garis-garis pada buku yang sebelumnya motif tersebut dibuat dengan CSS3. Selain itu tanggal posting, kategori, komentar dibuat dengan CSS.

Pada bagian footer dibuat agak lebar dengan penambahan 3 kolom dengan beberapa daftar tautan keluar.

Halaman Posting

Halaman postingan saya buat sesederhana mungkin karena biar gampang jika saya ingin membuat sesuatu yang unik seperti unique post/custom post/blogazine.

Area Komentar

Untuk area komentar juga dibuat dengan motif kertas buku yang hampir sama dengan homepage, yang sebelumnya dibuat dengan CSS3 repeating-linear-gradient tapi pas coba dibuka dengan Firefox beratnya minta ampun, jadi demi kenyamanan pengunjung saya menggantinya dengan image saja.

Yang agak kurang serasi mungkin adalah warna dari tombol reply yang biru itu ya, jadi saya minta saran kira-kira warna apa yang cocok.

Halaman Tambahan

Dikarenakan saya tidak/belum memasang kotak pencarian maka saya membuat halaman baru yang dinamakan All Tags page, disitu dibuat daftar tags apa saja serta jumlahnya. Jadi jika pengunjung ingin menelusuri blog ini lebih lanjut bisa kehalaman tags dan mencari mana saja yang diperlukan.

Fonts

Pada disain kali ini saya lebih banyak menggunakan @font-face yang diambil dari Google fonts maupun dari penyedia @font-face lainnya.

Ada 6 (enam) @font-face yang saya gunakan. Saya juga minta pendapat tentang ini apakah nyaman keterbacaannya dengan @font-face yang saya gunakan atau mungkin ada saran penggunaan font yang lebih baik lagi ?

Responsive

Isu responsive web saat ini sedang hangat-hangatnya baik didalam negeri maupun diluar negeri, sampai beberapa pembuat thema juga menjadikan thema-thema mereka lebih responsive.
Untuk disain kali ini sudah cukup saya buat responsive walau masih ada kekurangan disana-sini yang akan saya perbaiki sambil jalan saja….he…he…he….

Penutup

Secara garis besar thema ini adalah generasi terbaru dari penerapan thema-thema sebelumnya yang pernah saya buat Dimana ada beberapa hal baru yang dimasukkan ke dalam desain ini, seperti penggunaan animasi untuk header (walaupun kurang terasa) serta penggunaan tehnik CSS3 terbaru pada beberapa elemen.

Namun, tetap aja sesuatu itu tidak ada yang sempurna. Masih banyak kekurangan yang saya rasakan dalam membuat thema wordpress karena saya belum bisa membuatnya dari nol, saya masih menggunakan framework untuk itu.

Saran, pendapat serta kritikan yang membangun dari teman-teman sekalian sangat saya harapkan.

Tulisan Terkait

Pemilik Negeri Ini

rudy — Sun, 13 Nov 2011 11:45:20 +0000

Inilah sedikit gambaran mereka yang memiliki Negeri Indonesia yang tercinta ini, yang juga punya hak untuk menentukan nasib bangsa ini.

Random Posts

Galery Gambar dengan CSS3

rudy — Tue, 08 Nov 2011 11:29:53 +0000

Kali ini saya akan membagikan cara membuat galery gambar dengan efek geser bila diklik dengan CSS3 tanpa bantuan javascript sama sekali.

Lihat Demo

Tehnik ini biasa disebut dengan ‘image slider’, dan yang akan kita buat gesernya dari bawah keatas bukan dari samping kiri ke kanan (atau sebaliknya).

HTML

Class “slider” digunakan untuk membentuk serta membuat gambar bergeser saat mouse ditekan. Saya menggunakan 5 (lima) gambar sebagai contoh gallery ini, bisa ditambahkan atau dikurangi.

CSS

Sengaja contoh penerapannya tidak saya tampilkan langsung pada halaman ini dengan alasan agar trik ini lebih maksimal untuk ditampilkan, karena saya membuat juga latar belakang dengan efek linear-gradient.

body {
    background: #a6a6a6;
    background-image: -webkit-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -webkit-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -moz-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -ms-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -o-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image:         linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-position:0 0, 2px 2px;
    background-size:4px 4px;
    padding: 50px 0 0 0;
}

CSS di atas khusus untuk latar belakang pada tag body, tidak digunakan juga tidak apa-apa.

.slider {
    background-color: #444;
    background-color: hsla(0,0%,0%,.5);
    border-radius: 5px;
    box-shadow: 0 1px 2px hsla(0,0%,100%,.25),
        0 -1px 2px hsla(0,0%,0%,.25);
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 400px;
}

Maka hasilnya akan seperti ini :

Langkah selanjutnya kita tambahkan efek tenggelam pada sisi bidang serta garis yang membentang +/- 45 derajat agar ada efek gradasi pada gambarnya dengan bantuan pseudo-element.

.slider:after {
    background-image: -webkit-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:    -moz-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:     -ms-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:      -o-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:         linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    bottom: 0;
    border-radius: 5px;
    box-shadow: inset 0 0 25px hsla(0,0%,0%,.5),
        inset 0 0 5px hsla(0,0%,0%,.5);
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

Efeknya sudah mulai kelihatan.

Selanjutnya kita tambahkan lingkaran kecil dibagian tengah bawah sebanyak lima buah untuk melihat galery dengan cara lingkaran-lingkaran tersebut diklik dengan mouse.

.slider a:after {
    background: #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.25),
        0 -1px 1px hsla(0,0%,0%,.25);
    bottom: 15px;
    content: '';
    height: 10px;
    left: 50%;
    margin-left: -5px;
    opacity: .5;
    position: absolute;
    width: 10px;
    z-index: 40;
}
.slider li:nth-child(1) a:after {
    margin-left: -45px;
}
.slider li:nth-child(2) a:after {
    margin-left: -25px;
}
.slider li:nth-child(4) a:after {
    margin-left: 15px;
}
.slider li:nth-child(5) a:after {
    margin-left: 35px;
}
.slider a:hover:after {
    background: #a6a6a6;
}
.slider:hover a:after {
    opacity: 1;
}

Lingkaran kecil berguna untuk menyorot gambar yang akan ditampilkan.

Langkah terakhir dengan memasukkan kode untuk gambar agar bisa kelihatan saat lingkaran kecil tersebut ditekan dengan gambar menggulung keatas.

.slider img {
    border-radius: 5px;
    height: 300px;
    position: absolute;
    top: 300px;
    width: 400px;
    -webkit-transition: top 1s ease-in-out;
-moz-transition: top 1s ease-in-out;
-o-transition: top 1s ease-in-out;
transition: top 1s ease-in-out;
}
.slider li:target img {
    top: 0;
    z-index: 5;
}
.slider li:target a:after {
    background: #464646;
}

Hasil akhir :

CSS Keseluruhan

body {
    background: #a6a6a6;
    background-image: -webkit-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
    -webkit-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image: -moz-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -moz-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image: -ms-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -ms-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image: -o-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        -o-linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1)),
        linear-gradient(45deg, hsla(0,0%,0%,.1) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.1) 75%, hsla(0,0%,0%,.1));
    background-position:0 0, 2px 2px;
    background-size:4px 4px;
    padding: 50px 0 0 0;
}

/* Image Slider */
.slider {
    background-color: #444;
    background-color: hsla(0,0%,0%,.5);
    border-radius: 5px;
    box-shadow: 0 1px 2px hsla(0,0%,100%,.25),
        0 -1px 2px hsla(0,0%,0%,.25);
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 400px;
}
.slider:after {
    background-image: -webkit-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:    -moz-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:     -ms-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:      -o-linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    background-image:         linear-gradient(-53.4deg, hsla(0,0%,100%,.08), hsla(0,0%,100%,.1) 50%, transparent 50%, transparent);
    bottom: 0;
    border-radius: 5px;
    box-shadow: inset 0 0 25px hsla(0,0%,0%,.5),
        inset 0 0 5px hsla(0,0%,0%,.5);
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}
.slider a:after {
    background: #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.25),
        0 -1px 1px hsla(0,0%,0%,.25);
    bottom: 15px;
    content: '';
    height: 10px;
    left: 50%;
    margin-left: -5px;
    opacity: .5;
    position: absolute;
    width: 10px;
    z-index: 40;
}
.slider li:nth-child(1) a:after {
    margin-left: -45px;
}
.slider li:nth-child(2) a:after {
    margin-left: -25px;
}
.slider li:nth-child(4) a:after {
    margin-left: 15px;
}
.slider li:nth-child(5) a:after {
    margin-left: 35px;
}
.slider a:hover:after {
    background: #a6a6a6;
}
.slider:hover a:after {
    opacity: 1;
}
.slider img {
    border-radius: 5px;
    height: 300px;
    position: absolute;
    top: 300px;
    width: 400px;
    -webkit-transition: top 1s ease-in-out;
-moz-transition: top 1s ease-in-out;
-o-transition: top 1s ease-in-out;
transition: top 1s ease-in-out;
}
.slider li:target img {
    top: 0;
    z-index: 5;
}
.slider li:target a:after {
    background: #464646;
}

Lihat Demo

Tulisan Terkait

Apakah Blog Ini Terasa Berat ?

rudy — Fri, 04 Nov 2011 17:31:08 +0000

Setelah membuat perubahan desain pada thema yang digunakan blog RudyAzhar ini, sebelumnya saya sempat puas karena dibuat 99% tanpa menggunakan gambar.

Tapi ada yang mengganjal dalam pikiran saya karena jika diakses dengan Komputer yang speknya sekelas pentium-4 kebawah akan terasa berat jika tampilan digulung.

Salah satu penyebabnya karena saya memakai CSS3 linear-gradient untuk membuat latar belakang yang berkotak-kotak, serta banyaknya gradient pada navigasi atas maupun footer.

Memang hampir tidak terasa jika kita menggunakan peramban Chrome, tapi jika dibuka melalui Firefox dampak tersebut mulai kelihatan dan bisa-bisa Firefox yang kita gunakan menjadi ‘hang’.

Demi untuk kenyamanan pengunjung maka sebelum redesign dengan thema yang terbaru (masih tahap pengerjaan) saya ingin meminta pendapat bagaimana jalan keluar yang terbaik untuk desain thema ini, apa saya harus mengurangi kode CSS3, menggantinya dengan gambar atau dibiar polos saja ?

Setiap pendapat yang masuk sangat saya hargai, terima kasih.-