-->

Rabu, 25 Mei 2011

MEMBUAT MULTIPLE COLUMNS DENGAN CSS3


Dengan CSS3, Anda dapat membuat beberapa kolom untuk meletakkan teks - seperti di surat kabar! Ada 3 Parameter yang dapat kita ubah yaitu jumlah kolom, jarak antar kolom dan garis kolom.





Dengan menggunakan CSS3 anda akan mendapatkan hasil seperti ini :



Ubud adalah sebuah desa kelurahan, membawahi 13 (tiga belas) banjar dinas yang terdiri dari 6 (enam) desa adat, termasuk kecamatan Ubud, Kabupaten Gianyar dengan jarak 20 km dari kota Denpasar, Ubud dapat dicapai dalam 1 jam 15 menit dari Kuta, 30 menit dari Denpasar, atau 15 menit dari kota Gianyar.

Dengan ketinggian sekitar 300 meter di atas permukaan laut, Ubud memiliki udara lebih sejuk dari daerah dataran Bali asli selatan. Kelurahan Ubud berpenduduk sekitar 9.800 jiwa. Dengan lingkungan yang masih alami, daerah ini merupakan daerah sumber inspirasi bagi para seniman, termasuk seniman luar negeri, terutama seniman Eropa.

Sebagai daerah tujuan wisata, Ubud memiliki banyak objek yang menarik bagi wisatawan, baik nusantara maupun mancanegara. Beberapa diantara objek tersebut adalah Puri Saren, yang terletak di Puri Ubud, pasar seni tradisional, Monkey Forest (Wenara Wana) dan museum.


Script CSS3 :

<style type="text/css">

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>

<div class="newspaper">
Ubud adalah sebuah desa kelurahan, membawahi 13 (tiga belas) banjar dinas yang terdiri dari 6 (enam) desa adat, termasuk kecamatan Ubud, Kabupaten Gianyar dengan jarak 20 km dari kota Denpasar, Ubud dapat dicapai dalam 1 jam 15 menit dari Kuta, 30 menit dari Denpasar, atau 15 menit dari kota Gianyar.

Dengan ketinggian sekitar 300 meter di atas permukaan laut, Ubud memiliki udara lebih sejuk dari daerah dataran Bali asli selatan. Kelurahan Ubud berpenduduk sekitar 9.800 jiwa. Dengan lingkungan yang masih alami, daerah ini merupakan daerah sumber inspirasi bagi para seniman, termasuk seniman luar negeri, terutama seniman Eropa.

Sebagai daerah tujuan wisata, Ubud memiliki banyak objek yang menarik bagi wisatawan, baik nusantara maupun mancanegara. Beberapa diantara objek tersebut adalah Puri Saren, yang terletak di Puri Ubud, pasar seni tradisional, Monkey Forest (Wenara Wana) dan museum.</div>

Anda dapat mengubah text yang berwarna merah.

MEMBUAT BORDER IMAGE DENGAN CSS3

Dengan menggunakan property Border-Image CSS3, anda dapat menggunakan sebuah image / gambar untuk membuat sebuah border. Berikut adalah cara membuat border image dengan CSS3.



Dengan menggunakan image / gambar di bawah ini,


akan memperoleh hasil seperti :

Ini adalah border image yang diulang (repeat)

atau seperti ini

Ini adalah border image meregang (stretch)

Di bawah ini adalah code script CSS3
<style type="text/css">

div
{
border-width:15px;
width:250px;
padding:10px 20px;
}

.ulang
{
-moz-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;
}
.meregang
{
-moz-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(http://i1234.photobucket.com/albums/ff405/hendrik2011/border.png) 30 30 stretch; /* Safari and Chrome */
border-image:url(border.png) 30 30 stretch;
}
</style>
<div class="ulang">
Ini adalah border image yang diulang (repeat)</div>

Selamat mencoba...

Selasa, 24 Mei 2011

BELAJAR CSS3

Kalau anda ingin belajar CSS3 (Cascading Style Sheets Level 3) untuk membuat web design anda lebih menarik dan keren, anda bisa mendownloadnya di SINI, setelah itu anda bisa belajar CSS3 tanpa harus online berjam-jam. Setelah anda mahir, anda bisa mempraktekkannya langsung dan menggembangkan tampilan web anda dengan CSS3.
Selamat mencoba.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Modern Warfare 3