Gusdwi dot Info » CSS 3 http://gusdwi.info HTML - CSS - WEB DESIGN - SHARING ABOUT LIVES Mon, 26 Jul 2010 07:36:13 +0000 en hourly 1 http://wordpress.org/?v=3.0 Membuat kolom paragraf dengan css 3 http://gusdwi.info/membuat-kolom-paragraf-dengan-css-3.html http://gusdwi.info/membuat-kolom-paragraf-dengan-css-3.html#comments Thu, 24 Dec 2009 00:09:43 +0000 Gusdwi http://www.gusdwi.info/?p=1488 kolom paragrafSaya yakin yang membaca Tulisan ini tahu bentuk artikel dalam surat kabar (koran).
Pada umumnya, paragraf dalam suatu artikel di surat kabar dibagi menjadi beberapa kolom, biasanya 3 sampai 4 kolom. Menurut Saya, Tujuannya adalah untuk memudahkan para pembaca melihat semua isi yang ditampilkan dalam sebuah koran.
Jika anda ingin membuat hal yang sama seperti pada surat kabar didalam sebuah halaman website, saya akan memberikan Tips untuk anda.
syaratnya, Anda harus harus mengetahui cara membuat html dan belajar css, dalam hal ini adalah css 3.

Lihatlah tampilan contoh paragraf pada artikel dibawah ini…!
Jika anda tertarik untuk membuatnya, silahkan ambil contoh kode html dan css sintak-nya dibawah ini……..

Membuat Ogoh-ogoh

Sebulan sebelum hari raya NYEPI, biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.
Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh, saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka, sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.

Kalau dilihat dari bentuk ogoh ogoh saat itu, kebanyakan berbentuk raksasa dan binatang dan thema nya kurang bervariasi.
Seiring dengan perkembangan jaman, Ogoh ogoh telah ber-Evolusi, baik dari segi material, bentuk dan tema yang dibuat telah mengalami perubahan.
Kalau dulu Bambu sebagai kerangka utama, sekarang berubah menjadi Besi yang di las agar lebih kokoh dan dapat membuat bentuk yang lebih dinamis. Pada saat ogoh ogoh diarak pun sudah mengalami perubahan, sekarang banyak yang memanfaatkan teknologi electronik untuk menciptakan suatu efek yang berkesan lebih hidup, seperti penataan cahaya dan sound-nya.

Nah, dari apa yang saya paparkan tidak bisa dipungkiri lagi bahwa perkembangan jaman telah memberikan inspirasi bagi kita dalam berkreasi, dan jika ini terus berlanjut dari tahun ke tahun akan selalu ada perubahan sesuai jamannya.

Bila saya bayangkan kedepannya nanti, ketika sesuatu bisa didapat dengan mudah, dan melihat kreativitas anak muda di Bali yang tiada henti…

mungkinkah Ogoh ogoh akan seperti robot?

Jika mungkin…, adakah perdebatan publik pro dan kontra ?

Bila ada…, siapakah yang harus disalahkan ?

Caranya adalah sebagai berikut:

  • Pertama, buatlah sebuah dokumen baru pada Notepad, lalu ketikan <div class=”kolom-wrap></div>.
  • Ketik <h1>JUDUL ARTIKEL</h1><hr/>diantara tag <div class=”kolom-wrap></div>.
  • Dibawah tag </hr/>, ketik lagi sebuah tag <div class=”kolom”></div>.
  • Diantara tag <div class=”kolom”></div> adalah isi paragraf dari sebuah artikel yang diawali dengan tag <p> dan ditutup dengan tag </p>.

Contoh kode HTML nya seperti ini:

<div class=”kolom-wrap>
<h1>JUDUL ARTIKEL</h1>
<hr/>
<div class=”kolom”>
<p>Sebulan sebelum hari raya NYEPI,
biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.</p>
<p>Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh,
saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka,
sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.</p>
</div>
</div>

Setelah selesai membuat file HTML nya, sekarang kita buat style untuk mengatur tampilan nya agar seperti artikel di surat kabar, dengan menggunakan CSS seperti dibawah ini:

div.kolom-wrap {
border:1px solid #333333;
background: #ccc;
margin:0;
box-shadow: 3px 3px 3px #333333;
-moz-box-shadow: 3px 3px 3px #333333;
-webkit-box-shadow: 3px 3px 3px #333333;}

div.kolom-wrap h1 {
text-align:center;
color:#999999;
text-shadow: 2px 2px 0 #000;}

div.kolom-wrap hr {
border:3px solid #666666;
margin:0 2em;}

div.kolom {
-moz-column-count: 2;
-webkit-column-count: 2;
padding:5px 10px 0 10px;}

Langkah selanjutnya adalah melakukan test pada Browser anda…!
Catatan: Tampilan ini hanya berlaku pada Browser Mozilla versi 3.5.3 ke-atas, Google Chrome, Safari versi terbaru. Tidak berlaku untuk Intrenet Explorer.

]]> http://gusdwi.info/membuat-kolom-paragraf-dengan-css-3.html/feed 1 Belajar CSS 3 http://gusdwi.info/belajar-css-3.html http://gusdwi.info/belajar-css-3.html#comments Fri, 06 Nov 2009 04:41:00 +0000 Gusdwi http://www.gusdwi.info/?p=1248 css-3

Apa itu CSS 3 ?

Sambutlah Jaman Baru dengan teknik baru. Ketika jaman terus berkembang maka mau tidak mau kita harus mengikutinya jika kita tidak mau disebut ketinggalan jaman.
Sekarang kita seharus sudah mulai belajar teknik baru tentang CSS.  CSS 3 telah memberikan kita cara-cara yang mudah untuk membuat efek / style pada sebuah elemen HTML dengan meninggalkan cara lama yang dibantu oleh Javascript dan JQuery.
Saya yakin Anda pernah mendengar tentang CSS pada umumnya. CSS3 tidak jauh berbeda, dalam hal sintaksis, namun kekuatan CSS3 jauh lebih besar. Seperti yang akan Anda lihat dalam teknik berikut ini,  dengan CSS 3 anda dapat membuat sudut membulat (rounded corners), bayangan pada tulisan (Text Shadow), latar belakang bening (Transparency Background) dan masih banyak lagi.

CSS3 adalah anak baru di keluarga stylesheet. Menawarkan kemungkinan-kemungkinan baru yang menarik untuk menciptakan efek pada desain situs anda, memungkinkan Anda untuk menggunakan style sheet lebih beragam untuk berbagai kesempatan dan banyak lagi.

Pembahasan

Berikut ini adalah 11 teknik yang akan saya tunjukkan kepada Anda bagaimana menciptakan efek di CSS 3 tanpa JavaScript ataupun JQuery.
Ingat – efek ini hanya akan bekerja di browser modern yang mengimplementasikan fitur CSS3 ini.
Pilihan terbaik Anda adalah menggunakan browser: Safari 4, firefox 3.5.3 keatas, Google Chrome.

  1. CSS 3 Rounded Corners
  2. CSS 3 Box Shadow
  3. CSS 3 Text Shadow
  4. CSS 3 Fancy Font
  5. CSS 3 Opacity
  6. CSS 3 RGBA/ CSS 3 background
  7. CSS 3 Background Size
  8. CSS 3 Multiple Backgrounds
  9. CSS 3 Columns
  10. CSS 3 Border Image
  11. CSS 3 Animations
]]> http://gusdwi.info/belajar-css-3.html/feed 5