Senin, Agustus 16, 2010

Membuat sebuah fungsi yang kompatibel di semua browser merupakan harapan dan keinginan semua blogger. Apa yang terposting atau desain blog terlihat tampil tanpa perbedaan di semua browser adalah kepuasan. Salah satunya adalah text shadow. Memang, untuk membuat sebuah teks shadow dapat kita lakukan dengan menggunakan kode css saja, akan tetapi untuk membuatnya bisa tertampilkan di Internet Explorer maka sebuah kode khusus harus disertakan. Hal seperti ini terkadang terasa "ribet" dan merepotkan dan cenderung membuat kode yang dipergunakan semakin bertambah banyak, dan susahnya untuk menuliskannyapun acap kali terlupa. Untuk mengatasi persoalan seperti ini, kita dapat memanfaatkan jQuery text shadow. Scriptnya tidak terlalu banyak dan setelah terpasang maka text shadow dapat langsung dibuat hanya dengan satu kode yang sekaligus juga berfungsi dengan baik di IE. Cara untuk membuatnyapun teamat sederhana, karena kita hanya perlu menggunakan jQuery-1.2.6.js, jQuery-1.3.2.js atau jquery-1.3.2.js dan jquery-textshadow.js. Dengan pertimbangan banyaknya blogger yang menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, maka kita akan sesuaikan saja dengan memanfaatkan jquery ini.

Cara membuat text shadow menggunakan jquery-textshadow

  1. Copy paste jquery-textshadow di bawah ini kemudian upload di file hosting/javascript hosting :
  2. /* jquery-textshadow.js */
    (function($){
    $.fn.textShadow = function(useroptions) {
    return this.each(function() {
    var obj = $(this);
    obj.removeTextShadow();
    var shadowarray = obj.css("text-shadow").split(" ");
    var sradi = parseInt(shadowarray[3], 10);
    var text = "" + obj.html() + "";
    var padding = {
    left:parseInt(obj.css("padding-left"), 10),
    top:parseInt(obj.css("padding-top"), 10)
    };
    var defaults = {
    color: shadowarray[0],
    radius: sradi,
    xoffset: parseInt(shadowarray[1], 10)-1+(padding.left-sradi) + "px",
    yoffset: parseInt(shadowarray[2], 10)-1+(padding.top-sradi) + "px",
    opacity: 50
    };
    var options = $.extend(defaults, useroptions);
    options.color = (options.color.length == 4) ? options.color.replace(/#([0-9A-f])([0-9A-f])([0-9A-f])/i, '#$1$1$2$2$3$3') : options.color;
    var filtertext = "progid:DXImageTransform.Microsoft.Glow(Color="+options.color+",Strength="+(options.radius/6)+") progid:DXImageTransform.Microsoft.Blur(pixelradius="+options.radius+", enabled='true') progid:DXImageTransform.Microsoft.Alpha(opacity="+options.opacity+")";
    if($.browser.msie && options != "") {
    obj.css({"position":"relative","zoom":"1"}).append(text);
    if($.browser.version >= 8) {
    obj.css({"z-index":"1"});
    }
    obj.children("span.jQshad").css({
    "position":"absolute",
    "z-index":"-1",
    "zoom":"1",
    "left":options.xoffset,
    "top":options.yoffset,
    "color":options.color,
    "filter":filtertext,
    "-ms-filter":filtertext
    });
    }
    });
    };
    $.fn.removeTextShadow = function() {
    return this.each(function() {
    $(this).children("span.jQshad").remove();
    });
    };
    })(jQuery);
  3. Setelah jquery-textshadow.js ter-upload, simpan link-nya bersamaan dengan jquery-1.3.2.min.js dan sedikit script tambahan yang lain di atas <head>
  4. Contoh kode yang digunakan untuk membuat text shadow menggunakan jquery.
  5. h2.shadow {
    color: #222;
    text-shadow: 0px 1px 1px #fff;
    background: #888;
    }
  6. Dengan kode di atas maka hanya akan berfungsi di luar IE. Supaya di IE-pun dapat berkerja dengan baik, maka kita harus tambahkan sedikit script seperti di bawah ini:
    <script type="text/javascript">
    $(document).ready(function(){
    $('h1.shadow').textShadow();
    });
    </script>
    Di atas script inilah baru kita letakkan jQuery-1.3.2.min.js dan jQuery-textshadow, sehingga bentuknya seperti terlihat di bawah :
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://..../jquery-textshadow.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('h1.shadow').textShadow();
    });
    </script>
    Karena dua javascript terbawah hanya akan kita fungsikan di IE, maka kita akan tambahkan kode lain supaya javascriptnya juga hanya bekerja ketika blog dibuka di IE. Bentuknya menjadi seperti di bawah ini :
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <!--[if !IE]>
    <script src="http://..../jquery-textshadow.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('h1.shadow').textShadow();
    });
    </script>
    <![endif]-->

    <head>
  7. Apabila beberapa fungsi text shadow ingin kita tambahkan, maka kita tinggal rubah script terakhir menjadi seperti ini :
  8. <script type="text/javascript">
    $(document).ready(function(){
    $('h1.shadow, h2.tshad, h3.tshad-2, p.textsd').textShadow();
    });
    </script>
  9. Setelah script baru seperti di atas dibuat, maka hanya tinggal kita siapkan kode css untuk text shadow dan semua akan berfungsi dengan baik di semua browser.

Untuk melakukan penyimpanan script lakukan langkah berikut

  1. Login ke Blogger
  2. Buka Edit HTML
  3. Cari Kode <head>
  4. Simpan seluruh script di atas kode <head> seperti yang terlihat di atas.
  5. Lanjutkan dengan mencari kode ]]></b:skin>, kemudian kode css textshadow letakkan di atasnya.
  6. Contohnya seperti berikut:
    h2.shadow {
    color: #222;
    text-shadow: 0px 1px 1px #fff;
    background: #888;
    }

    ]]></b:skin>
  7. Apabila kode text shadow yang lain akan di tambahkan, silahkan letakkan mengikuti yang sebelumnya dengan posisi tetap di atas ]]></b:skin>
  8. Untuk menggunakannya dalam posting atau widget, silahkan gunakan kode html seperti di bawah ini :
  9. <h1 class="shadow">Tuliskan teks di sini</h1>

D E M O jQuery Text Shadow

Anda dapat melihat demo text shadow dan kode css yang digunakan dengan membuka link di bawah ini:

D E M O

Sabtu, Agustus 14, 2010

Penggunaan text shadow bisa menjadi satu cara untuk membuat tampilan sebuah teks terlihat berbeda dan semakin menarik. Teks dengan efek bayangan atau lebih dikenal dengan text-shadow, sebenarnya hanyalah sebuah penambahan kode css yang amat sederhana namun mampu menciptakan berbagai variasi bentuk teks. Efek bayangan yang tercipta bisa merupakan sebuah bayangan tunggal, bayangan ganda atau bahkan bayangan yang bertumpuk/berulang (multiple). Kode css teks shadow kompatibel untuk semua browser dan kode yang digunakannya pun sama, terkecuali di Internet Explorer (IE). Perbedaan kode di IE ini, sekali lagi menjadi pertanyaan besar bagi semua blogger. Mengapa di IE segalanya serba berbeda dan bahkan beberapa kode css3 sama sekali tidak dapat difungsikan? Kondisi yang seperti ini bahkan membuat beberapa rekan blogger mengatakan, "Buat apa memikirkan IE? Biar matipun kita tak akan merasa prihatin!". Beberapa yang lain juga bilang, "Ngapain mesti menggunakan IE, toh masih banyak browser lain yang jauh lebih bagus dan sangat akomodatif sekaligus mempunyai tingkat kompabilitas tinggi terhadap kode html yang baru, terutama css 3!".

Apa yang tersampaikan tersebut di atas sebenarnya ada benarnya, sekalipun kejadian seperti ini (kompabilitas IE) terkadang juga menjadi pemikiran tersendiri. Apapun juga, masih cukup banyak pengguna IE dan tidak boleh tidak apa yang kita tuangkan di blog, sebagian pengunjung akan membukanya juga dengan IE. Dus ..., apabila kita tidak menggunakan kode yang kompatibel di IE, maka apa yang terposting juga hanya akan dapat dinikmati secara sempurna di luar IE, sementara ketika dibuka lewat IE apa yang sudah kita buat dengan susah payah tak akan termunculkan sesuai harapan. Yah .. itulah yang akhirnya membuat kita semua jadi pusing dan merasa prihatin. Ah ... seandainya saja IE seperti yang lain ...

Bagaimana menciptakan teks shadow yang kompatibel di semua browser termasuk di IE? Beberapa cara dapat kita lakukan :
  1. Menggunakan kode css text-shadow dan menambahkan kode css yang khusus dipergunakan untuk menciptakan text shadow di IE.
  2. Menggunakan jQuery text-shadow.
  3. Menggunakan file .htc
Dari ketiga cara di atas, sebenarnya yang paling nyaman digunakan adalah cara yang ke-3. Dengan hanya menggunakan file berekstensi htc ini, maka beberapa fungsi sekaligus sudah dapat bekerja secara sempurna di IE, seperti rounded corners, box shadow (drop shadow) dan text shadow. Sayangnya file ini harus diupload terlebih dahulu di blog yang kita gunakan. Keharusan seperti ini tentu saja tak mungkin kita lakukan di blogspot. Sayang ... sekali lagi amat mengecewakan ..... Cara lain yang terasa paling mudah tentunya dengan menggunakan jQuery teks shadow. Hanya dengan menggunakan jQuery-1.3.2.js atau jQuery-1.4.2.js dan jQuery-textshadow.js, maka kode css yang kita tuliskan secara otomatis akan langsung bekerja secara sempurna termasuk di IE. Sangat praktis dan membuat siapapun dengan mudah melakukannya.

Cara mennuliskan kode text shadow


Untuk membuat sebuah teks dalam bentuk teks dengan bayangan (text shadow), secara umum dituliskan sebagai :
.textshadow {
text-shadow: ..px ..px ..px color;
}
, sehingga bentuk lengkap detail kode css-nya seperti contoh berikut :
.textshadow {
text-shadow: 1px 1px 1px #fff;
}
, atau dalam bentuk yang lain seperti berikut :
h1 {
text-shadow: 1px 2px 2px #000;
}
h2 {
text-shadow: 0 1px 8px black;
}
p {
text-shadow: 2px 2px 10px #222;
}
Anda dapat juga menuliskan dalam bentuk yang berbeda seperi ini :
h1.textshadow {
black 1px 1px 6px;
}
, atau juga misalnya seperti :
h1.textshadow {
2px 2px 2px rgba(0,0,0,0.9);
}

Menambahkan kode pelengkap lain pada text-shadow

Apabila menghendaki sebuah syntax lengkap yang diipadu dengan text-shadow, anda dapat menambahkan beberapa kode css yang lain hingga dihasilkan sebuah syntax dengan fungsi tertentu. Di bawah ini adalah sebuah contoh yang bisa digunakan sebagai referensi untuk menciptakan fungsi yang lain melalui sebuah syntax.
h1.tshad {
font: 22px Droid Serif;
font-weight: bold;
color: #000;
text-shadow: 2px 2px 2px #8a4e01;
padding: 5px 10px;
text-align: center;
margin: 20px auto;
}

Text shadow untuk Internet Explorer (IE)

Agar text shadow dapat berfungsi di IE, kita harus menambahkan kode css yang khusus untuk menciptakan efek shadow pada teks. Bentuk kode cssnya sebagai berikut :
filter: progid:DXImageTransform.Microsoft.Shadow(color='#8a4e01',direction='125',strength='2');
Jika kode ini digabungkan dengan syntax di atasnya, maka kode barunya akan terlihat seperti ini.

Text shadow dengan penambahan kode css text shadow di IE

h1.tshad {
font: 22px Droid Serif;
font-weight: bold;
color: #000;
text-shadow: 2px 2px 2px #8a4e01;
padding: 5px 10px;
text-align: center;
margin: 20px auto;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#8a4e01',direction='125',strength='2');
}

Keterangan penggunaan kode text-shadow di IE

  • color='#8a4e01' merupakan warna shadow (bayangan)
  • direction='125' digunakan untuk menciptakan posisi bayangan. Anda dapat menggunakan nilai 0 s/d 360
  • streng='2' digunakan untuk mengatur kekuatan shadow, dimana semakin besar nilainya, maka bayangan akan semakin lebar (luas).

Beberapa contoh text-shadow dan bentuk kode css-nya


Contoh bentuk Text Shadow-1

p.shadow-1 {
font:18px Droid Serif;
font-weight: bold;
text-shadow: 1px 2px 3px #222;
padding:3px 10px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888',direction='145',strength='3');
}

Penulisan kode HTML-nya :

<p class="shadow-1">Tuliskan teks di sini!</p>

Contoh bentuk Text Shadow-2

p.shadow-2 {
color: #FFFFFF;
font: 18px Droid Serif;
text-shadow: 1px 2px 3px #000;
font-weight: bold;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='145',strength='2');
padding: 3px 10px;
}

Penulisan kode HTML-nya :

<p class="shadow-2">Tuliskan teks di sini!</p>

Contoh bentuk Text Shadow-3

p.shadow-3 {
color: #CCCC66;
font: 16px Droid Serif;
text-shadow: 1px 2px 2px #ea8605;
font-weight: bold;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ea8605',direction='145',strength='2');
padding: 3px 10px;
}

Penulisan kode HTML-nya :

<p class="shadow-3">Tuliskan teks di sini!</p>

Contoh bentuk Text Shadow-4

h1.shadow-4 {
color: #666;
text-shadow: 0px 1px 0px #ccc;
font: 22px Droid Serif;
margin:15px auto;
padding:4px 10px;
font-weight: bolder;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc',direction='100',strength='2');
}

Penulisan kode HTML-nya :

<h1 class="shadow-4">Tuliskan teks di sini!</h1>

Contoh bentuk Text Shadow-5

h2.shadow-5 {
font:18px Droid Serif;
font-weight: bold;
color: blue;
text-shadow: 1px 1px 4px #fff;
padding: 5px 10px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ffffff',direction='135',strength='4');
}

Penulisan kode HTML-nya :

<h2 class="shadow-5">Tuliskan teks di sini!</h2>

Contoh bentuk Text Shadow-5

h3.shadow-6 {
color: #444;
font: 18px Times;
font-weight: bold;
text-shadow: -2px -2px 5px yellow, 0px 1px 0px red;
padding: 5px 10px;
background: #888;
}

Text Shadow di atas berfungsi hanya di luar IE. Penulisan kode HTML-nya :

<h3 class="shadow-6">Tuliskan teks di sini!</h3>

Contoh bentuk Text Shadow-7

p.supershadow {
font:18px Droid Serif;
font-weight: bold;
color: #FF0000;
background: #555;
text-shadow: 0 0 5px #ccc, 0 -4px 4px #c8c7c6, 2px 2px 10px #fc0c00, 2px -8px 8px #ffef3f,
-2px -16px 12px #f80, 2px -18px 18px #ff9702;
padding: 20px 20px 0px;
}

Multiple Text Shadow ini akan berfungsi dengan sempurna di luar IE. Penulisan kode HTML-nya :

<p class="supershadow">di sini tek dituliskan</p>

Selasa, Agustus 10, 2010

Perkembangan dan kemajuan pada pemanfaatan kode CSS memungkinkan pengguna untuk membuat beberapa bentuk desain baru yang sebelumnya tak mungkin dilakukan tanpa bantuan javascript atau penggunaan kode css dalam jumlah bertumpuk. Bahkan beberapa animasi gerak, saat ini dapat dibuat hanya dengan memanfaatkan kode css terbaru yang lebih dikenal dengan sebutan css3.

Perkembangan yang terjadi pada css3 direspon dengan luar biasa cepat oleh beberapa browser besar, terutama Google Chrome, Safari, Opera serta Mozzila. Sementara untuk Internet Explorer beberapa kode css3 belum diakomodir dengan baik. Memang beberapa dapat difungsikan , tetapi sayangnya kode yang harus dituliskan juga berbeda sangat jauh dengan browser yang lain. Ketidak seragaman ini tentunya masih dapat dimaklumi karena banyaknya hal yang terkait di dalamnya, namun tentunya apabila perbedaan yang ada tidak terlalu jauh, maka penggunaan kode juga akan semakin mudah.

Menilik dari pesatnya perkembangan yang terjadi, kiranya para pengguna boleh merasa optimis bahwa kode css3 ini akhirnya tidak boleh tidak akan diakomodir secara total oleh semua browser. Browser yang tidak mengikuti perkembangan terbaru diyakini akan tergusur dari peta persaingan yang semakin sengit. Bukankan bukti sudah mulai terlihat, dimana IE yang begitu kuatpun saat ini mulai banyak ditinggalkan penggunannya?!

Cara Penulisan CSS3 Rounded Corners di Safari

.round{
-webkit-border-radius: 10px;
}
, atau dituliskan dalam bentuk :
.round{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius:10px;
}

Cara Penulisan CSS3 Rounded Corners di Opera

.round{
border-radius: 10px;
}
, atau bisa juga anda tuliskan dalam bentuk :
.round{
border-radius: 10px 10px 10px 10px;
}
Penulisan kode seperti di atas mempunyai arti :
.round{
border-radius: (top-left)px (top-right)px (bottom-right)px (bottom-left)px;
}
, atau anda bisa juga menuuliskan dalam bentuk yang berbeda seperti di bawah ini :
.round{
border-top-left-radius: 10px;
border-top-right-radius:10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius:10px;
}

Cara Penulisan CSS3 Rounded Corners di Mozilla

.round{
-moz-border-radius: 10px;
}
, atau bisa juga anda tuliskan dalam bentuk :
.round{
-moz-border-radius: 10px 10px 10px 10px;
}
Penulisan kode seperti di atas mempunyai arti :
.round{
-moz-border-radius: (topleft)px (topright)px (bottomright)px (bottomleft)px;
}
, atau anda bisa juga menuuliskan dalam bentuk yang berbeda seperti di bawah ini :
.round{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft:10px;
}

Menggabungkan kode css rounded corners dari beberapa browser

.round{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
, atau dapat juga dituliskan dalam bentuk :
.round{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}

Merubah nilai rounded corners


Untuk mendapatkan lengkungan sesuai keinginan, silahkan rubah setiap nilai yang disertakan sesuai kebutuhan. Anda bisa melihat bentuk perubahan nilai dan efek yang dihasilkan melalui contoh di bawah ini.

Contoh Border Radius


Border Radius
Opera
Mozzila
Safari


Border Radius
Opera
Mozzila
Safari


Border Radius
Opera
Mozzila
Safari

Rounded Corners dengan background image


Kode CSS yang digunakan untuk 4 contoh di atas


<p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:15px 15px 25px 25px;-moz-border-radius:15px 15px 25px 25px;-webkit-border-radius:15px 15px 25px 25px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p>
<p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius: 15px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p>
<p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:12px 30px;-moz-border-radius:12px 30px;-webkit-border-radius:12px 30px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p>
<style type="text/css">
.box {
height:300px;
width:400px;
margin:15px auto;
background:#999 url(http://1.bp.blogspot.com/_p_R_KAkuh2s/TGJfejHCYHI/AAAAAAAAALo/vx8hkpQp-1A/s400/AmricWorld-2.jpg) center no-repeat;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border:10px solid #fff;
}
</style>

Kode HTML

<div class="box"></div>

Bagaimana Cara Membuat Border Radius di Internet Explorer?


Untuk membuat border radius atau rounded corners di Internet Explorer, diperlukan cara-cara atau teknik sangat khusus yang berbeda dengan apa yang kita lakukan di browser lainnya.
  1. Kita dapat memanfaatkan kode css yang dipadukan dengan sebuah image (gambar) atau beberapa buah image (gambar) yang dipergunakan sebagai background untuk memperoleh bangun dengan sisi lengkung (rounded corners),
  2. atau dapat juga digunakan javascript dan background image pembentuk rounded corners,
  3. serta dapat juga hanya menggunakan javascript tanpa sebuah background image-pun namun mampu menciptakan sisi lengkung.
  4. Beberapa situs memberikan solusi bagaimana membangun sebuah bentuk rounded corners, baik menggunakan kode css ataupun javascript secara gratis. Beberapa alamat di bawah ini bisa anda kunjungi:
  1. Curvy Corners
  2. Nifty Corners
  3. Menggunakan file berekstensi .htc. Anda bisa download file beserta demo-nya di Curved Corner

Menggunakan JQuery untuk membuat effects Rounded Corners yang kompatibel di semua Browser

Selain cara-cara di atas, anda bisa juga menggunakan jquery, yang merupakan javascript paling banyak digunakan di kalangan blogger. Dengan memanfaatkan jQuery-1.3.2.js (jQuery-1.3.2.min.js) atau jQuery-1.4.2.js (jQuery-1.4.2.min.js) dan sedikit javascript tambahan, maka anda akan mendapatkan sebuah jalan keluar untuk membentuk bangun dengan sisi lengkung (rounded corners) yang kompatibel di semua browser. Banyak pilihan yang mungkin kita lakukan, karena banyak sekali yang membahas tentang hal ini. Kita akan coba satu pilihan terbaik dengan script minimal akan tetapi mampu menghasilkan bentuk rounded corners yang fleksibel untuk digabungkan dengan fungsi-fungsi yang lain. Supaya lebih fokus dalam pembahasan dan pemahaman bagaimana menciptakan efek lengkung dengan metoda ini, kita akan bahas secara tuntas di posting berikutnya.
 
Tantytm | Edited by | Tanty Template Modification