Pages

Indonesian Blogger

Banner iskaruji dot com

Kamis, 16 Februari 2012

Web Design Tips: Menggunakan CSS Reset

Web Design Tips: Menggunakan CSS Reset web desain grafisPada tutorial css kali ini saya akan membahas Tips Desain Web. Sudah menjadi pengetahuan yang umum jika masing-masing browser Internet memiliki style bawaan tersendiri, sebagai contohnya margin default atau padding default pada Internet Explorer itu memiliki nilai ?yang berbeda dengan Mozilla Firefox ataupun Chrome, contoh yang lain, unordered list default milik Internet Explorer memiliki style berbeda dengan style pada firefox. Sehingga seorang web designer seringkali direpotkan oleh hal ini, biasanya seorang web designer menggunakan javascript untuk mendeteksi user menggunakan browser apa, kemudian jika user menggunakan browser internet maka?javascript mencocokkan stylenya dengan file berisi style khusus untuk internet explorer, begitu juga dengan mozilla firefox dan browser lain, file stylenya juga berbeda. Benar-benar merepotkan karena kita harus membuat style yang berbeda untuk browser yang berbeda. Tapi hasilnya sangat baik.
Penulis sendiri awalnya memang seperti itu, memang merepotkan. Tapi belakangan penggunaanCSS Reseter semakin populer digunakan, karena fungsinya sama baiknya dengan menggunakan file file yang berisi style yang berbeda menyesuaikan dengan browsernya. Dalam teknik pencocokan style, ketika user menggunakan internet explorer maka style yang digunakan pun biasanya dinamakan dengan ie.css, jika user menggunakan firefox maka style yang digunakan biasanya dinamakan dengan default.css, dan lain-lain sebagainya, dalam teknik css reset, kita cukup menggunakan satu buah file css saja, ?namun di tambahkan dengan barisan kode yang dapat mereset kondisi css, sehingga browser tidak memiliki nilai default dari style-style yang ada. Alias 0 (null).
Berikut adalah css reset yang biasa saya gunakan :
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
height: auto;
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
body {background-color: white;background-position: center center;}
/* RESET */
Sebenarnya ada beberapa teknik reset yang digunakan, tapi penulis sendiri cenderung menggunakan css reset yang di atas. Anda tidak lagi direpotkan oleh perbedaan tampilan layout antara Internet Explorer dengan Mozilla Firefox atau yang lainnya. Sehingga hasilnya nanti tampilan css di firefox juga mirip dengan tampilan menggunakan browser internet yang lain. ?Selamat Mencoba.
Read More..

Pengenalan CSS3

Pengenalan CSS3 web desain grafisSatu atau dua tahun yang lalu mungkin anda pernah mendengar CSS versi 3 telah keluar, meskipun saat itu masih beta tapi ini menjadi kabar yang menggembirakan, karena CSS3 tidak akan dirilis jika tidak membawa banyak sekali fitur-fitur baru di dalamnya, namun saat itu baru sedikit browser internet yang mendukung CSS3 ini. Browser yang mensupport CSS baru Safari v.3, namun sekarang Firefox pada versi ke 3.6 sudah mendukung CSS3. Bagi anda yang mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.
Baik, disini penulis akan jabarkan fitur apa saja yang baru dalam CSS3,  CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur transparansi, gradien warna pada border, warna pada text yang diseleksi, fitur skala memperkecil atau memperbesar layout, kolom pada text, dan fitur gradien pada background.
Terdapat perbedaan penamaan style antara safari dan chrome dengan firefox, penulis akan jelaskan nanti.
Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris
-moz-box-shadow: #585858 3px 3px 4px;
moz ini digunakan untuk browser firefox
-webkit-box-shadow: #585858 3px 3px 4px;
dan webkit digunakan untuk browser chrome serta safari
contoh penggunaan drop shadow adalah seperti di bawah ini ?
RGBA (Transparency)
background-color: rgba(218, 227, 240, .3);
rgb 218,227,240 menghasilkan warna abu-abu namun lebih keputih, dan .3 ini menjelaskan penggunaan transparansi 30%.
contohnya adalah seperti ini ?
Multiple Border Color
-moz-border-bottom-colors: #0101DF #5858FA #8181F7 #A9A9F5 #CECEF6 #E0E0F8 #EFEFFB #fff;
moz-border memungkinkan satu div memiliki banyak border yang berlapis?
hasilnya adalah seperti ini
Select Text Color
p.selection::-moz-selection {
background: #2E9AFE; /* Firefox */
color: #fff;
}
-moz-selection terjadi ketika textnya di seleksi? anda bisa lihat hasilnya seperti ini, silahkan textnya anda blok dengan menggunakan mouse.
Scale
-moz-transform: scale(1.05);
moz-transform digunakan untuk firefox, dan scale(1.05) menghasilkan perbesaran 1,05 dari ukuran aslinya.
-webkit-transform: scale(1.05);
begitu juga dengan webkit-transform yang digunakan untuk browser safari dan chrome.
Text Column
-moz-column-count:3;
menjadikan text memiliki 3 kolom.
-moz-column-rule: solid 1px black;
dan memiliki garis tengah.
-moz-column-gap: 30px;
gap disini sama seperti padding, atau jarak antar text.
Gradient
background: -moz-linear-gradient(-45deg, #2E9AFE,#0404B4 );
penggunaan moz-linear-gradien dengan 45derajat mulai dari biru tua sampai biru muda, hasilnya adalah seperti ini :
Setelah berkenalan dengan CSS3, [enulis akan jelaskan bagaimana menggunakan CSS lebih lanjut dalam membuat style website maupun layout website, pada Tutorial CSS selanjutnya. Selamat Mencoba.
sumber:
http://www.css3.info
Read More..

Senin, 14 November 2011

~Cara Membuat Tulisan Arab di Blogger~

ا لحمد لله kali ini saya akan membagikan yang tadinya tidak yakin akan berhasil, namun saya jadi penasaran dan kemudian mencobanya di blogger. Eh ternyata alhasil sahabat bisa lihat tulisan Arab di blog saya ini, walau nggak ada tanda bacanya alias masih huruf gundul. Tetapi mungkin sangat penting untuk semua blogger, terutama blogger Muslim yang setiap kali ingin mengupdate artikelnya, tetapi tidak dapat menuliskan huruf Arab ke dalam postingannya.
Tidak usaha bingung sekarang udah bisa asal kita tahu caranya. Saya akan memberikan sedikit tips untuk teman-teman muslim agar dapat membuat tulisan Arab yang bermanfaat dengan memberikan sedikit sentuhan dengan menampilkan ayat-ayat Al-Qur'an atau Hadist dalam bahasa Arab tanpa harus menginstal software, mensetting atau mengedit html blog template kita atau komputer kita.

Nah, sekarang bagaimana caranya ? Mudah kok, sebab cara ini memang sangat sederhana tetapi ا ن شا ا لله memberikan manfaat untuk sahabat muslim.

Untuk menerapkan apa yang telah saya maksud diatas. Silakan kamu salin kodenya dibawah ini !
HURUF ARABKODE
ا& #1575 ;
ب& #1576 ;
ت& #1578 ;
ث& #1579 ;
ج& #1580 ;
ح& #1581 ;
خ& #1582 ;
د& #1583 ;
ذ& #1584 ;
ر& #1585 ;
ز& #1586 ;
س& #1587 ;
ش& #1588 ;
ص& #1589 ;
ض& #1590 ;
ط& #1591 ;
ظ& #1592 ;
ع& #1593 ;
غ& #1594 ;
ف& #1601 ;
ق& #1602 ;
ك& #1603;
ل& #1604;
م& #1605;
ن& #1606 ;
ه& #1607;
و& #1608;
ى& #1609;
ي& #1610;
ة& #1577;
إ& #1573;
ؤ& #1572;
أ& #1571;
آ& #1570;

Perhatian :
Untuk menghasilkan tulisan Arab yang sempurna, jangan pisahkan dengan koma atau Spasi jika membuat huruf Arab bersambung. Contoh Khazanah Islam, maka huruf Arabnya menjadi خز ا نة ا لإ لسلا م. Jadi kalimat yang bersambung, penulisan kodenya tanpa spasi dan pisahkan huruf tersebut jika kalimat atau hurufnya berdiri sendiri.

Demikianlah yang saya dapat sampaikan semoga bermanfaat dan selamat mencoba.
Read More..

Minggu, 13 November 2011

~Cara Mengambil Tampilan / Screenshot Blog Penuh Tanpa Terpotong (Full Screenshot)~

Terkadang sebagai seorang blogger kita memerlukan tampilan atau screenshot dari blog kesayangan kita, misal untuk promosi atau sekedar share tampilan blog kita. Ada banyak cara untuk mengambil sebuah screenshot dari tampilan blog kita , Yang paling simpel ialah dengan cara menekan  tombol prtsc ysrq (print screen) yang ada di papan keyboard, namun cara tersebut memiliki kekurangan , pakai prtsc ysrq itu tampilannya tidak bisa penuh satu halaman , yang muncul hanyalah gambar yang lagi tampil dimonitor.

Pada kondisi tertentu kita memerlukan sebuah screenshoot satu halaman web secara penuh tanpa terpotong , dengan prints screen sepertinya itu tidak memungkinkan jadi kita harus menggunakan cara lain.

Caranya  ialah menggunakan tool online atau Add On, Jadi tidak perlu repot ambil screenshot lalu kopi paste lagi seperti Print Screen karena hanya dengan memasukan link url blog kita yang akan diambil screenshotnya ke web tersebut maka jadilah screenshot blog kita secara full tanpa terpotong ! Namun kekurangannya mengambil screenshot melalui website pihak ketiga ialah loading yang lumayan lama dan juga terkadang erorr.
Kalau sobat ingin mencoba mengambil screenshot blog secara online, bisa menuju salah satu situs penyedia tool untuk mengambil screenshot sebuah halaman di internet seperti :
atau
Caranya : masukan alamat blog sobat kedalam form yang ada di dua alamat website diatas kemudian pilih resolusi /ukuran  hasil gambar  yang diinginkan.

Selain menggunakan tool online , sobat bisa juga menggunakan Add ons dari firefox yang bernama Screengrab!
Setelah menginstal add on screengrab, untuk mengambil screenshoot tinggal klik kanan lalu ada opsi untuk menyimpan halaman web, bisa full satu halaman tanpa terpotong ataupun di pilih (crop) sesuai keinginan sobat bagian mana yang ingin diambil dengan sangat mudah. 

Silahkan sobat gaptek coba download add on screengrab di:
Download AddOns Screengrab : https://addons.mozilla.org/en-US/firefox/addon/1146

keuntungan menggunakan addon screengrab dibanding pakai tool online dari Thumbalizr.com dan Webshotpro.com ialah kita tidak perlu menunggu load yang lama bahkan antri lagi untuk mengambil screenshot full satu halaman.

Menurutku cara terbaik dan termudah mengambil full screenshot halaman web / blog ialah dengan menggunakan cara terakhir yaitu dengan add on.

Update :

Add on untuk mengambil screenshot halaman blog yang lebih keren dari Screengrab dan kompatibel dengan mozilla firefox 4 ada Awesome Screenshot . Add on ini jauh lebih keren daripada semua tool diatas karena memiliki fitur untuk langsung mengedit hasil screenshoot serta untuk langsung menguploadnya di DIIGO serta untuk share ke Facebook dan Twitter.
Tool Editing
Tool Share Screenshot

Untuk menggunakannya sobat bisa menuju ke Addon Awesome Screenshot Membuat Screenshot Full Tanpa Terpotong lalu download addonnya (Firefox dan Chrome)
Semoga bermanfaat
Read More..

Sabtu, 12 November 2011

~Cara membuat Animasi GIF dengan Photoshop cs3~

   Selain digunakan sebagai applikasi untuk mengedit foto, photoshop juga bisa untuk membuat gambar bergerak / animasi dalam format "gif" (graphic interchange format). Dengan bermain frame per frame, kita dapat membuat animasi tulisan ataupun gambar dengan mudah sesuai selera.

Dalam hal ini kreativitas kita sangat dibutuhkan di sini, saya hanya memberikan tutorial dasarnya saja, sobat-sobat tinggal mengembangkannya.

Photoshop yang saya gunakan di sini adalah photoshop CS3, photoshop CS2 juga bisa digunakan.

Cara membuat animasi gambar bergerak :
1. Buka Adobe photoshop

2. Buka tool animasi di photoshop, caranya klik menu “window” di photoshop, lalu pilih “animation”

Sampai muncul window kayak gini:



3. Di photoshop, pilih file » new masukkan ukuran sesuai selera, kalau saya pakai 125 x 125 pixel, lalu oke

4. Selanjutnya, buat 3 buah lingkaran dengan layer yang berbeda. Buat sebuah lingkaran dulu, selanjutnya pada jendela layer, kita klik kanan layer lingkaran tersebut, lalu pilih “duplicate layer…”.

Contoh





Tampilan pada jendela layer seperti ini:





Dan ini tampilan dalam jendela animation:




5. Selanjutnya, buat 3 buah frame dalam jendela animation, dengan mengklik icon “duplicates selected frames” (tanda lingkaran merah pada gambar diatas!) hingga jadi seperti ini: 





6. Untuk menampilkan warna merah dahulu, klik frame pertama pada jendela animation, lalu pada jendela layer, nonaktifkan icon mata (indicates layer visibility) pada layer warna kuning dan hijau, sehingga hanya layer warna merah yang terdapat icon mata, seperti gambar di bawah :

Kemudian kembali lagi ke jendela animation, klik frame kedua, aktifkan icon mata pada layer kuning. Sedangkan pada frame ketiga, aktifkan icon mata pada layer hijau. Oh iya jika ingin animasi kita nanti transparan, tinggal nonaktifkan icon mata pada layer background di semua frame animasi.

Dalam jendela animation akan terlihat seperti berikut:

 7. Klik tombol play untuk memainkan animasi, kita bisa mensetting timming animasi sehingga animasi tidak bergerak terlalu cepat. Setting waktunya dengan meng-klik tanda panah segitiga di samping kanan tulisan 0 sec.



8. Agar animasi bergerak terus tanpa henti, maka animasi harus di setting “forever”, tetapi jika ingin bergerak satu kali, setting dengan “once”, seperti gambar di bawah:


 Kira-kira hasilnya seperti ini…


 9. Kemudian simpan dengan menggunakan “save for web & device” nya photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S

Selamat mencoba !!
Read More..