Deny Sri Supriyono | xHTML CSS Web Design | Indonesia » Web Design http://blog.denysri.com An xHTML, CSS, Web Designer lives in Jakarta, Indonesia. Tue, 29 Dec 2009 17:10:33 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 displayinline.net http://blog.denysri.com/personal/displayinlinenet/ http://blog.denysri.com/personal/displayinlinenet/#comments Thu, 16 Oct 2008 21:19:23 +0000 deny.sri.supriyono http://blog.denysri.com/?p=129 Screenshot displayinline.net

Screenshot displayinline.net

display:inline adalah tempat untuk berbagi dengan menulis berita terbaru seputar web development — HTML, CSS, Javascript, WordPress themes dan plugin serta lainnya. Semua yang menurut saya menarik, akan saya tulis di sini.

Ide awalnya sih, pengen share informasi mengenai web development dalam Bahasa Indonesia. Beberapa tahun lalu, saya kenal achmadbiz.com — situs yang dikelola oleh kang Achmad Bisri — yang dengan baik hati menulis hal-hal menarik seputar informasi di internet dalam Bahasa Indonesia. Saya banyak dapat informasi lewat situsnya, karena kadang suka repot kalau baca English :d Mudah-mudahan bisa semenarik achmadbiz.com.

Ditujukan untuk rekan-rekan yang sedang belajar atau mencari update web development, free WordPress Themes dan Plugins, free brushes, web templates, javascript dan lain-lainnya — display:inline mungkin punya linknya.

Untuk para pembuat WordPress themes dan plugin dari Indonesia, kalau ngeluarin yang baru — saya tolong dikasih infonya juga ya :d

Meskipun ditujukan untuk yang sedang belajar, you pros are always welcome to subscribe to display:inline feed :d

Related Posts

]]> http://blog.denysri.com/personal/displayinlinenet/feed/ 26 Mempercantik CODE dengan CSS http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/ http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/#comments Tue, 29 Jan 2008 01:34:44 +0000 deny.sri.supriyono http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/ Dalam artikel ini, kita akan coba untuk berkreasi dengan tag code dan mengubah sedikit tampilannya dengan bantuan tag pre dan CSS.

Kita akan menggunakan tag pre dan code untuk menampilkan kode program HTML, CSS dan PHP serta menambahkan background gambar sebagai informasi tambahan untuk tag code sehingga akan memiliki tampilan seperti di bawah ini:

code hasil modifikasi

Hasil akhir dari artikel ini juga akan menampilkan horizontal scrollbar ketika text yang ditampilkan sangat panjang, seperti contoh di bawah ini:

code hasil modifikasi

Hasil dari artikel ini sudah dites dan berjalan dengan baik di Internet Explorer, Mozilla Firefox, Opera dan Safari.

Sedikit mengenai PRE dan CODE

pre adalah sebuah tag yang bisa digunakan untuk menampilkan text sebagai “preformatted” – yang berarti semua spasi dan baris baru akan ditampilkan apa adanya.

code biasanya digunakan untuk mendefinisikan kode, misalnya kode program komputer.

Contoh penggunaan pre dan code:

kode baris satu
kode baris dua
kode baris tiga

Untuk menuliskan source code HTML – supaya tidak dianggap sebagai kode HTML yang harus dieksekusi oleh browser – kita harus mengkonversinya terlebih dahulu. Dalam artikel ini, saya menggunakan HTML Special Character Converter dari website Chris Hardy.

I. Menyiapkan image

Untuk tutorial ini, dibutuhkan 3 image berukuran 40×40 pixel yang bisa dibuat dengan menggunakan aplikasi pengolah gambar. Beri nama file dengan html.gif, css.gif dan php.gif.

Bisa juga menggunakan image yang saya gunakan dalam tutorial ini: html.gif, css.gif dan php.gif.

II. Membuat halaman HTML

Berikut ini halaman HTML yang akan menjadi dasar bahan tutorial kali ini. Bisa dilihat di dalam kode di bawah, setiap tag code memiliki class sendiri-sendiri yang nanti akan berguna di tahap berikutnya.




Mempercantik CODE dengan CSS

Contoh tampilan kode HTML yang di dalamnya terdapat text yang panjang

<html>
   <head>
   </head>
   <body>
      <p>The <pre> tag is used to display pre-formatted text. The output will mimic exactly how the text is rendered inside the pre element including white space, tabs, and line breaks. This allows you to maintain the appearance of data in rows and columns, or have extra white spaces in text such as poems. Perhaps one of the most common uses of this tag is to display computer code and output.</p>

   </body>
</html>

Contoh tampilan kode CSS

.contoh{
  width:200px;
  line-height:17px;
  text-transform:uppercase;
  background-color:#f4f4f4;
  background-image:url("contoh.gif");
  background-repeat:no-repeat;
  background-position:top right
}

Contoh tampilan kode PHP yang hanya memiliki satu baris kode

if ( $file_name =="") { echo "error"; }

Hasilnya bisa dilihat di halaman mempercantik-code-1.html. Terlihat di halaman itu, text ditampilkan dengan font monospace. Text yang sangat panjang ditampilkan apa adanya sehingga keluar dari container (yang berwarna biru muda) dan menghasilkan horizontal scrollbar di bagian bawah browser.

III. Mengatur tag CODE

Untuk tag code yang ada di antara tag pre, kita tentukan lebarnya sebesar 355px, mengubahnya menjadi block level element, memberikan padding sebesar 20px dan border 1px dengan warna abu-abu di semua sisi. Tidak lupa menambahkan overflow:auto, sehingga ketika text yang ditampilkan sangat panjang dan melebihi lebar dari tag code yang sudah kita tentukan – kita akan mendapatkan scrollbar.

pre code{
width:355px;
display:block;
padding:20px;
border:1px solid #ddd;
overflow:auto
}

Hasilnya bisa dilihat di halaman mempercantik-code-2.html. Tampilan di browser Mozilla Firefox, Opera dan Safari sudah seperti yang kita inginkan, tapi tidak dengan browser Internet Explorer. Untuk sementara, kita biarkan dulu masalah dengan IE.

IV. Memberi background image

Sekarang, kita akan memberikan background image yang berbeda untuk tag code yang memiliki class html, css dan php dengan kode CSS di bawah ini:

.html
{
background:#f4f4f4 url(“html.gif”) no-repeat top right
}

.css
{
background:#f4f4f4 url(“css.gif”) no-repeat top right
}

.php
{
background:#f4f4f4 url(“php.gif”) no-repeat top right
}

Hasilnya bisa dilihat di halaman mempercantik-code-3.html. Tag code sudah memiliki warna background abu-abu dengan background image di pojok kanan atas. Kalau nggak ada browser yang namanya IE, artikel ini sudah selesai sampai di tahap ini.

Di tahap selanjutnya, kita akan coba untuk memperbaiki tampilan di browser IE.

V. Memperbaiki tampilan di browser IE

Kita akan memanfaatkan conditional comment – sehingga hanya browser IE saja yang mengeksekusi kode di dalamnya.

Beginilah kode lengkap conditional comment-nya yang akan kita tambahkan di bawah baris kode </style>:

Jadi, apa gunanya style yang ada di dalam conditional comment di atas?

Sekarang kita perhatikan halaman yang sudah kita buat sejauh ini dengan menggunakan browser IE. Seperti terlihat, text ditampilkan tanpa menghiraukan spasi yang sudah dibuat dan text panjang tidak ditampilkan memanjang ke samping, tapi ditampilkan di baris baru ketika sudah memenuhi lebar dari tag code.

Untuk memperbaikinya, kita tambahkan style white-space:pre untuk tag code, supaya kode yang kita tulis tetap ditampilkan seperti apa adanya.

Dengan menambahkan style di atas, tampilan di browser IE sudah hampir seperti tampilan di browser lainnya – hanya saja sekarang dengan tambahan vertical scrollbar yang sebenarnya tidak diperlukan. (Lihat hasil)

Untuk menghilangkan vertical scrollbar ini, kita tambahkan lagi untuk tag code style overflow-y:hidden yang hanya dimengerti oleh browser IE. (Lihat hasil)

Satu lagi, posisi background image untuk tag code yang memiliki text panjang tidak berada di tempat yang semestinya. Seharusnya, posisi background image ada di pojok kanan atas dan tetap berada di posisinya meskipun kita scroll.

Untuk memperbaikinya, kita perlu tambahkan background-attachment:fixed untuk class html, css dan php.

Hasil akhir

Building a wall, one brick at a time – inilah hasil akhirnya.

Sekarang kita bisa menuliskan kode menggunakan tag code dengan tampilan yang cantik dan saya yakin hasil akhirnya masih bisa dikembangkan sehingga tampil lebih cantik.

Selamat bereksperimen dengan tag code! Semoga bermanfaat – dan seperti biasa, ditunggu saran serta kritiknya demi perbaikan.

Belajar CSS? Yuuuk!

Related Posts

]]> http://blog.denysri.com/belajar-css/mempercantik-code-dengan-css/feed/ 33 Mempercantik Blockquote dengan CSS http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/ http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/#comments Tue, 08 Jan 2008 16:38:56 +0000 deny.sri.supriyono http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/ Kenapa harus dipercantik? Apa tidak cukup dengan tampilan text yang agak masuk ke dalam paragraph?

Untuk yang ingin berkreasi, sebenarnya tampilan blockquote bisa dieksplorasi dengan bantuan CSS.

Misalnya, diberi background warna atau gambar, diubah bentuk font serta warnanya atau diberi border – sehingga bisa tampil lebih cantik, manis ataupun macho – terserah yang anda suka.

Dalam artikel ini, kita akan mencoba untuk mempercantik tampilan blockquote – dengan memberi background gambar dan mengubah jenis fontnya sehingga akan memiliki tampilan seperti di bawah ini:

blockquote hasil modifikasi

Serta yang paling utama adalah tampil bagus di Internet Explorer, Mozilla Firefox, Opera dan Safari.

Sedikit mengenai blockquote

Blockquote adalah sebuah tag HTML biasanya digunakan untuk menampilkan quote/kutipan. Misalnya, kita menemukan kalimat menarik dari seseorang dan ingin menampilkannya di blog/website – maka digunakanlah blockquote.

Contoh code blockquote:

Kalimat yang di-quote.

I. Menyiapkan image

Untuk tutorial ini, dibutuhkan 2 image berukuran 40×40 pixel yang bisa dibuat dengan menggunakan aplikasi pengolah gambar. Beri nama file start-quote.gif untuk tanda awal quote dan end-quote.gif untuk tanda akhir quote.

Bisa juga menggunakan image yang saya gunakan dalam tutorial ini: start-quote.gif, end-quote.gif

II. Membuat halaman HTML

Berikut ini halaman HTML yang akan menjadi bahan tutorial.




Belajar dari Steven Gerrard

Football is all about winning things as a team but it’s also important pick up individual awards along the way. (Steven Gerrard)

Final FA Cup 2006 antara Liverpool vs Westham United. Liverpool tampil tidak baik di awal-awal pertandingan. Ketinggalan 2 gol akibat blunder yang dilakukan oleh pemainnya, tidak membuat semangat para pemain Liverpool menurun.

Beruntung Liverpool memiliki seorang Steven Gerrard. Satu assist dan satu golnya mampu menjadikan keadaan imbang dan membuat pertandingan semakin menarik. Pertandingan tersisa 3 menit dan Liverpool masih tertinggal 1 gol. Pemain Liverpool kelihatan mulai frustasi ketika serangan-serangan yang mereka lakukan selalu gagal untuk menjadikan skor imbang.

Pendukung Westham United mulai menyanyikan lagu kebangsaannya dan merayakan kemenangan yang mereka kira sudah dekat. Sampai kemudian sebuah tendangan keras dari luar kotak penalti oleh Steven Gerrard membuat para pendukung Westham United terdiam dan membuat pendukung Liverpool bersorak. Liverpool akhirnya menjuarai FA Cup melalui adu penalti.

Steven Gerrard, seorang kapten yang mempunyai peranan sangat penting bagi timnya. Selalu 100% dalam bermain, tahu apa yang dibutuhkan oleh timnya dan tetap berusaha memberikan yang terbaik sebelum peluit akhir dibunyikan.

Hasil dari kode HTML di atas bisa dilihat di halaman ini. Terlihat ada sebuah paragraph dengan isi kalimat dari Steven Gerrard tampil agak masuk ke dalam hasil dari kode blockquote.

III. Menyisipkan tanda awal quote

Sekarang kita coba sisipkan gambar tanda awal quote yang sudah kita siapkan sebelumnya. Kode di bawah ini akan menghasilkan warna background putih, start-quote.gif sebagai background image yang tidak di ulang-ulang, dengan posisi background di sebelah atas kiri.

blockquote
{
background-color:#fff;
background-image:url(“start-quote.gif”);
background-repeat:no-repeat;
background-position:top left
}

Hasil dari penambahan kode di atas bisa dilihat di halaman ini. Sekarang kita melihat tanda awal quote sudah menjadi background blockquote, tapi posisinya belum tepat. Text masih berada di atas background gambar yang membuatnya susah dibaca.

IV. Memperbaiki jarak text dengan tanda awal quote

Dengan mengatur padding untuk tag <p>, kita bisa mendapatkan jarak text yang diinginkan. Kita berikan padding atas dan bawah 10px, padding kanan 0px dan padding kiri 50px yang akan membuat text menjauh dari background gambar.

Berikut code CSS-nya:

blockquote p
{
padding-top:10px;
padding-right:0;
padding-bottom:10px;
padding-left:50px
}

Bisa terlihat di halaman ini, text sudah berada di posisi yang membuatnya lebih enak di baca.

Sampai pada tahap ini, beberapa dari kita mungkin sudah merasa cukup puas dengan hasil yang di dapat. But the best is yet to come, kita lanjut lagi ke tahap berikutnya.

V. Menyisipkan tanda akhir quote

Di tahap ini, kita akan menambahkan sebuah <div> dengan class “blokkuot” ke dalam blockquote supaya kita bisa menyisipkan image tanda akhir quote.

Baris kode HTML, khusus untuk blockquote berubah menjadi:

Football is all about winning things as a team but it’s also important pick up individual awards along the way. (Steven Gerrard)

Setelah itu, kita tambahkan di bagian style beberapa baris di bawah ini yang akan menghasilkan warna background transparan, end-quote.gif sebagai background image yang tidak di ulang-ulang, dengan posisi background di sebelah bawah kanan.

.blokkuot
{
background-color:transparent;
background-image:url(“end-quote.gif”);
background-repeat:no-repeat;
background-position:bottom right
}

Di halaman ini, kita lihat tanda akhir quote sudah berada di posisinya, tapi posisi text yang berada di atas gambar membuatnya agak susah di baca.

VI. Memperbaiki jarak text dengan tanda akhir quote

Untuk memperbaikinya, kita modifikasi sedikit style untuk tag <p> yang sudah kita buat pada tahap IV. Kita ubah nilai padding kanan menjadi 50px sehingga sama dengan nilai padding kiri.

blockquote p
{
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:50px
}

Hasilnya bisa dilihat di sini. Sekarang kita sudah mendapatkan sebuah blockquote yang memiliki tampilan menarik, dengan text yang diapit oleh tanda awal dan akhir quote.

Cukup sampai di sini? Bagi yang sudah merasa cukup boleh stop sampai di tahap ini. Blockquote sudah terlihat cukup bagus untuk digunakan. Tapi saya masih ingin memberikan beberapa sentuhan akhir untuk membuatnya lebih menarik.

VII. Sentuhan akhir

Untuk memperoleh hasil seperti tujuan awal artikel ini, kita perlu sedikit memodifikasi kode CSS untuk blockquote yang sudah dibuat.

Pertama, menghilangkan margin dan padding disekitar blockquote yang dihasilkan secara otomatis.

Kedua, mengubah tampilan huruf dengan bentuk italic, ukuran 13px, font Georgia dan jarak antara baris 21px.

blockquote
{
background-color:#fff;
background-image:url(“start-quote.gif”);
background-repeat:no-repeat;
background-position:top left;
margin:0;
padding:0;
font-style:italic;
font-size:13px;
font-family:Georgia, “Times New Roman”, Times, serif;
line-height:21px
}

Building a wall, one brick at a time – akhirnya selesai juga. Hasil akhir bisa dilihat di sini. Sebuah blockquote dengan tambahan 2 image yang enak dilihat dan tampil baik di semua browser.

Tambahan

Pada tahap 5, ada penambahan sebuah <div> yang disisipkan ke dalam blockquote.

Untuk sebagian dari anda mungkin menganggap penambahan <div> seharusnya tidak dilakukan. Tapi, dalam kebutuhannya untuk mendapatkan hasil akhir yang diinginkan – diperlukan sebuah <div> tambahan.

Jadi, digunakan atau tidak – keputusannya ada di tangan anda sendiri.

Selamat bereksperimen dengan blockquote! Saran dan kritiknya sangat dinanti demi perbaikan.

Belajar CSS? Yuuuk!

Related Posts

]]> http://blog.denysri.com/belajar-css/mempercantik-blockquote-dengan-css/feed/ 40 Safari 3 di Windows http://blog.denysri.com/web-design/safari-3-di-windows/ http://blog.denysri.com/web-design/safari-3-di-windows/#comments Tue, 12 Jun 2007 04:26:01 +0000 deny.sri.supriyono http://blog.denysri.com/web-design/safari-3-di-windows/ safari for windows screenshotSudah coba Safari 3 Beta Windows version? Safari ini sebelumnya hanya bisa digunakan di lingkungan MacOS. Sebagai orang yang belum diberi kesempatan untuk memiliki Mac, mencoba salah satu program yang berjalan di atasnya menjadi hal yang menarik.

Instalasi Safari di Windows berjalan normal. Browsing juga tidak ada masalah. Sampai waktunya saya ingin memberikan komentar di salah satu blog dan harus mengisi nama. Safari crash ketika saya mengetik huruf pertama di input text, begitu juga ketika saya mencoba mem-paste nama saya ke input text.

Beberapa percobaan mengisi input text juga membuat crash Safari. Hanya mengisi input text di Google Analytics yang tidak membuat Safari crash. Iya, ini masih versi Beta.

Mudah-mudahan layout yang dihasilkan oleh browser Safari untuk Windows ini persis sama dengan Safari untuk Mac, sehingga web designer yang bekerja di lingkungan Windows menjadi lebih mudah untuk melihat apakah layout yang dibuat tampil dengan baik atau tidak di Safari versi Mac tanpa harus memiliki Mac.

Tidak hanya sekedar menambah jumlah browser yang harus dipergunakan pada saat test tampilan web yang baru dibuat – yang berarti menambah kerjaan.

UPDATE (28/06/2007): Dengan Safari v.3.0.2 (522.13.1), saya tidak mengalami masalah lagi pada saat mengisi form.

Related Posts

]]> http://blog.denysri.com/web-design/safari-3-di-windows/feed/ 25 Bedah denysri.com http://blog.denysri.com/web-design/bedah-denysricom/ http://blog.denysri.com/web-design/bedah-denysricom/#comments Mon, 21 May 2007 06:26:13 +0000 deny.sri.supriyono http://blog.denysri.com/bedah-web/bedah-denysricom/ Bedah web kali ini menampilkan web portfolio saya yang baru saja dipublish pada 1 Mei 2007. Sebuah web 1 halaman dengan tema museum yang mempunyai ukuran kurang dari 400KB serta memanfaatkan kelebihan dari transparansi PNG yang sangat baik.

denysri.com header

OK, enough chit-chat here – let’s get it on.

LATAR BELAKANG

Sebenarnya sudah lama saya ingin membuat sebuah web portfolio di domain name ini, tapi baru terlaksana beberapa waktu yang lalu bersamaan dengan event CSSReboot.

Setelah janjian dengan beberapa teman untuk mengikuti event tersebut, ternyata waktu untuk pengerjaan yang tersisa kurang dari 2 minggu.

PEMILIHAN TEMA

Memilih tema merupakan proses yang penting dalam pembuatan website. Sebuah tema akan menentukan elemen-elemen grafis yang akan digunakan dalam website.

Pemilihan tema museum (lukisan) dengan kesan klasik untuk web portfolio saya tidak melalui proses yang rumit – karena web ini memang dibuat untuk kesenangan saya pribadi. Syukur-syukur bisa memperkenalkan saya ke dunia yang lebih luas dan juga bisa dinikmati oleh orang lain.

Seperti diketahui, sebuah museum merupakan tempat untuk memajang hasil karya para pekerja seni. Karena sangat besar kemungkinannya, hasil karya saya dalam bidang web design tidak akan pernah sampai masuk ke museum, maka saya memilih untuk membuat museum untuk karya saya sendiri – that simple.

MENCARI INSPIRASI

Saya banyak melihat-lihat web portfolio milik orang lain untuk mengetahui cara mereka menampilkan informasi project yang mereka kerjakan.

Diantara sekian banyak web yang bisa dilihat, web portfolio milik Cameron Moll dan Kevin Davis merupakan 2 contoh yang sangat menarik. Design website mereka memiliki sesuatu yang berbeda dari web-web portfolio lainnya – dan itu membuatnya sangat menarik bagi saya.

Untuk mendapatkan kesan ruangan museum lukisan yang saya inginkan, ternyata agak sulit. Melalui mesin pencari, hasil yang didapatkan tidak seperti yang diharapkan. Mungkin juga karena penggunaan kata kunci yang kurang tepat. Dari sekian banyak hasil yang didapat, sangat jarang sekali website museum yang menampilkan photo ruangan yang mereka miliki.

header website museum Van Gogh

Salah satu website yang memberikan gambaran mengenai ruang pamerannya adalah website museum Van Gogh.

Jadi, modal yang saya punya untuk memulai website ini adalah gambaran ruangan pameran dari museum Van Gogh ditambah sedikit ingatan dari tayangan mengenai museum dari film atau acara TV yang pernah saya tonton.

PROSES PENGERJAAN

logo denysri.comUntuk bagian logo, logo sengaja ditaruh di dalam frame yang sejenis dengan frame thumbnail project – untuk memberikan sedikit gambaran bahwa semua yang ditampilkan di dalam frame yang ada di web ini adalah hasil kerja saya.

Untuk frame setiap web yang akan ditampilkan, saya memilih menggunakan image yang dibeli dari salah satu website stock photo, karena frame photo yang coba saya ambil dengan kamera digital tidak bagus hasilnya – selain bentuk frame yang juga kurang saya sukai.

Untuk informasi project, tadinya saya ingin menampilkan detail informasi mengenai project yang telah dikerjakan di setiap item, tapi setelah dicoba sepertinya kurang bagus – tidak seperti tampilan lukisan dengan informasinya seperti yang saya ingat.

Akhirnya dipilih untuk hanya menampilkan nama project di bagian bawah setiap thumbnail dan informasi lengkapnya ditampilkan dengan popup menggunakan bantuan Thickbox.

lampu klasik denysri.com

Untuk bagian kata-kata sebelum footer, saya menambahkan sebuah image lampu dari koleksi photo pribadi. Dengan modifikasi sedikit, saya mendapatkan sinar lampu yang saya inginkan – yang sesuai dengan tema website.

Saya memilih menggunakan format PNG karena saya membutuhkan transparansi yang jauh lebih baik dibandingkan dengan GIF. Paduan background pattern, efek bayangan dan transparansi di bagian frame, kotak nama project, pendaran cahaya dari lampu klasik sepertinya tidak akan memberikan hasil yang maksimal jika menggunakan GIF transparan.

Penggunaan image yang banyak membuat ukuran dokumen menjadi besar. Untuk mengurangi ukuran file, saya menggunakan tool PNGCrush untuk meng-compress image PNG yang saya gunakan. Hasilnya lumayan.

Ketika ukuran dokumen mencapai lebih dari 400KB, setiap byte yang bisa dikurangi akan sangat berarti.

Hasil akhir bisa dilihat di: http://denysri.com/

TAMBAHAN INFORMASI

Windows IE versi 5.5 dan 6.0 tidak mendukung PNG Alpha Transparency dan akan menampilkan image PNG yang transparan dengan background biru muda. Untuk hal ini, biasanya saya menggunakan solusi PNGFix dari Bob Osola.

Untuk web portfolio saya ini, solusi tersebut tidak bisa digunakan karena tidak mendukung penggunaan PNG sebagai background. Setelah mencoba beberapa solusi lainnya yang bertebaran di internet, akhirnya saya menemukan solusi IE PNG Alpha Fix dari Angus Turnbull. Di versi terakhirnya, kita bisa menggunakan PNG transparan sebagai background yang di tile.

Sangat menyenangkan bermain-main dengan transparansi PNG.

Ada yang punya pengalaman dengan transparan PNG? Atau mungkin tahu tool yang lebih baik untuk meng-compress gambar PNG? Atau ingin sekedar berkomentar? Silahkan berbagi – mungkin komentar anda bisa bermanfaat buat teman-teman lainnya.

Bedah web lainnya? Yuuuk.

 

Untuk saat ini, bedah web hanya membedah web yang saya buat. Terimakasih untuk yang sudah mengirimkan emailnya.

Related Posts

]]> http://blog.denysri.com/web-design/bedah-denysricom/feed/ 25