-->
Tampilkan postingan dengan label CSS3. Tampilkan semua postingan
Tampilkan postingan dengan label CSS3. Tampilkan semua postingan

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.

Selasa, 17 Mei 2011

MEMBUAT BOX SHADOW DENGAN CSS3


Cascading Style Sheet (CSS) adalah salah satu bahasa perograman website untuk mengatur beberapa komponen yang ada dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS3 merupakan pengembangan dari CSS yang membuat sebuah web menjadi lebih menarik.
Salah satunya seperti yang dibawah ini.

Membuat box shadow dengan menggunakan CSS3



CONTOH MEMBUAT BOX SHADOW DENGAN CSS3



Code CSS3:
<style type="text/css">
.bayangan
{
width:330px;
height:100px;
background-color:yellow;
-moz-box-shadow: 10px 10px 5px #999999; /* Firefox 3.6 and earlier */
}
</style>
<div class="bayangan">

<ul>CONTOH MEMBUAT BOX SHADOW DENGAN CSS3</ul>
</div>


Twitter Delicious Facebook Digg Stumbleupon Favorites More

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