• 6

    Sep

    Trick Menampilkan Photo/Image di Header Blog

    Perkembangan yang terjadi di CSS3 membuat berbagai celah bagi blogger untuk menciptakan berbagai inovasi baru yang sebelumnya tak mungkin dilakukan. Yah …, bahkan di blogDETIK sekalipun! Salah satunya adalah menampilkan atau memasang gambar, image, thumbnail atau photo blogger di header blog dengan cara yang amat simple. CSS3 selector menjadi senjata ampuh yang sangat mujarab. :before atau :after atau kedua-duanya digunakan sekaligus maka dalam sekejap apapun gambar yang sampeyan suka bisa nongkrong disalah satu sisi header blogdetik atau blog yang lain. Contoh Kode CSS untuk menampilkan image di header blog <style type="text/css"> body:before{ content:url(http://gubhugreyot.blogdetik.com/files/2011/09/celebrity6.jpg); position:absolute; padding:5px;
  • 6

    Sep

    Perindah Box dg Outline dan CSS3 Outline Offset Property

    Outline-offset Property kini juga sudah terdukung dengan baik oleh Opera, Mozilla Firefox, Safari, Google Chrome dan SeaMonkey. Banyak desain box akan menjadi lebih indah dengan tingkat kompabilitas browser yang semakin baik terhadap CSS3 khususnya outline dan outline offset property. Secara sederhana bisa digambarkan bahwa outline adalah garis terluar sebuah box. Jadi outline ini posisinya di sebelah luar border, sedang outline offset merupakan jarak (bidang) antara border dan garis terluar (outline). Anda bisa melihatnya melalui D E M O yang ada di bawah. Contoh Penulisan Kode CSS Outline dan Outline Offset <style type="text/css"> .box_outline{ width:400px; height:200px; background:#eee; margin:20px auto; padding:10px; border:2px solid #999; border-radius:10px
  • 6

    Sep

    Info Terbaru CSS3 : Deklarasi Tunggal CSS3 Box Shadow Property

    Setelah semua browser mendukung deklarasi tunggal CSS3 border radius property dalam bentuk penggunaan kode CSS yang sama “border-radius“, kini CSS3 box shadow property telah juga didukung dalam satu deklarasi tunggal. Tak perlu lagi tambahan kode berbeda untuk tiap-tiap browser guna menampilkan box shadow. Kode khusus seperti -mox-box-shadow dan -webkit-box-shadow sudah menjadi masa lalu yang tak harus lagi menambah penuhnya kode CSS sebuah desain blog. Cukup tuliskan box-shadow: …px …px …px color; maka box shadow akan dengan cantiknya terlihat di semua browser besar seperti Opera 11.51, Mozilla Firefox 6.1, Safari 5.1, Google Chrome dan bahkan SeaMonkey. Contoh Penulisan Kode Box Shadow Terbaru <style type="text/css"> .box{ width:400px;
  • 13

    Aug

    Info Terbaru dan Tutorial CSS3 border-radius Property

    Membuat rounded corners kini tak lagi harus menggunakan kode berbeda. Semua browsers sudah menggunakan deklarasi yang sama sehingga penulisan property dan value dari CSS3 border-radius property cukup dengan border-radius kemudian diikuti value yang sama juga ! Tak ada lagi -moz-border-radius (Mozilla) ataupun -webkit-border-radius (Safari dan Google Chrome) maupun perbedaan penulisan value (nilai). Kode tunggal untuk semua browsers ini tentu saja banyak memberi keuntungan pada para blogger. Berjejalnya kode CSS di template setidaknya akan cukup terkurangi. O … ya … Bagaimana dengan Internet Explorer? Untuk sementara ini sebaiknya kita lupakan terlebih dahulu hingga mereka menyatukan visi dengan browsers yang lain. Cara Terbaru Menuliskan Kode CSS border Radius Di bawah ini s
- Next

Author

Follow Me