Untuk melengkapi kategory CSS3 tutorial Pada kesempatan kali ini saya ingin membahas tentang cara membuat postingan bergaya multi-coloumn dengan menggunakan CSS3 tanpa mengganggu css yang ada di template akan tetapi bisa langsung di masukan ke dalam postingan.
Cara membuat multi-coloumn yang mengunakan css3 ini sebenarnya sudah banyak di bahas saya di sini akan mengkreasikan sedikit dengan transform dan bagaimana menerapkannya di postingan, untuk multi-coloumn css3 ini tergantung dari narablog itu sendiri apakah cocok di tampilkan dalam postingan untuk artikel kita? apakah pembaca merasa nyaman membaca artikel kita dengan multi-coloumn ini? atau hanya sekedar pemanis ruangan artikel yang dapat bernilai seni seperti majalah dan koran? Mungkin!! semua adalah tergantung penilaian dan ketertarikan dari sahabat blogger, multi-coloumn yang akan di berikan di sini kita akan menggunakan sistem css3 yang gambarannya seperi ini:
- Keterangan:
- Langkah awal Kita tidak perlu menambahkan kode CSS3 di atas
- -moz-column-count:2 ini untuk menentukan berapa kolom yang ingin kita berikan ini adalah kode untuk mozila yang di mana bisa suport di browser tersebut sedangkan untuk chrome dan safari menggunakan webkit
- -webkit-column-count: 2 Untuk nilai valuenya juga sama berapa yang ingin kita berikan
- -moz-column-gap: 1em; Coloumn-gap ini berfungsi untuk jarak batas antara kolom yang satu dengan yang lainnya
- -moz-column-rule: 1px solid black; Sedangkan column-rule berfungsi untuk garis batas bisa solid (garis), dotted (Titik), dashed(garis putus-putus) dan bisa di berikan warna pembatasnya misalkan saya memberikan pembatas merah (red) dengan garis 2px putus-putus(dashed) tiga kolom dan gap:1 em maka hasilnya adalah sebagai berikut:
]]> Sobat hanya perlu menaruh di postingan sehingga tidak mengganggu CSS template kita
MULTI KOLOM: Dalam kasus yang paling sederhana elemen multi-coloumn akan berisi hanya satu baris kolom, dan tinggi setiap kolom akan setara dengan tinggi digunakan elemen yang isi kotak multi kolom. kasus paling sederhana berisi satu baris kolom, dan tinggi setiap dengan tinggi digunakan-elemen kolom.Jika kolom-elemen multi paginasi maka tinggi setiap baris dibatasi oleh halaman, dan isi terus di baris baru kotak kolom pada halaman berikutnya, kotak kolom pernah membelah di halaman. Kolom-elemen paginasi, setiap dan isi pada berikutnya, halaman. Efek yang sama terjadi ketika sebuah unsur mencakup membagi elemen multi-coloumn: "kolom sebelum elemen mencakup seimbang dan disingkat untuk menyesuaikan konten mereka". yang sama ketika sebuah multi-kolom: "sebelum untuk menyesuaikan konten mereka". Konten setelah elemen mencakup kemudian mengalir ke dalam baris baru kotak kolom. kemudian mengalir ke dalam baris baru kolom. Hal ini tidak mungkin untuk mengatur properti / nilai pada kotak kolom. Misalnya, latar belakang kotak kolom tertentu tidak dapat diatur dan kotak kolom tidak memiliki konsep padding, margin atau batas.latar belakang tertentu tidak dapat diatur tidak memiliki padding, margin atau batas. So..tinggal sobat yang mengambil keputusan sumber:http://www.w3.org/TR/css3-multicol/
Adapun apabila ingin mengkreasikan CSS3 multi-coloumn ini bisa di tambahkan dengan fungsi transform juga bisa di tambahkan text shadow agar telihat menarik atau pusing..hehehehe,,pliss dech jangan pucing!!
- -webkit-transform: skewY(30deg);-moz-transform: skewY(30deg);
- text-shadow: -1px -2px 0px #000;
Masukan postingan di sini
MULTI-COLOUMN USING CSS3 : Column gaps and rules are placed between columns in the same multicol element.The length of the column gaps and column rules is equal to the length of the columns. Column gaps take up space. That is, column gaps will push apart content in adjacent columns(within the same multicol element). A column rule is drawn in the middle of the column gap with the endpoints at opposing content edges of the multicol element. Column rules do not take up space That is, the presence or thickness of a column rule will not alter the placement of anything else. If a column rule is wider than its gap, the column rule will overlap adjacent column boxes. Column rules are painted just above the background of the multicol element. This allows child elements with ‘z-index’ values to be on top of column rules. Column rules are only drawn between two columns that both have content. When content is laid out in multiple columns, the user agent must determine where column breaks are placed. The problem of breaking content into columns is similar to breaking content into pages. sumber:http://www.w3.org/TR/css3-multicol/
Kita juga dapat memberikan Rotate, skew, translate dan sebagainya agar terlihat lebih atraktif untuk keterangan tentang rotate, skew dan lainnya sobat bisa membacanya di artikel tehnik animasi css3
CSS3 CSS3 multi-column multi column bizarre 3d transform CSS3 CSS3 multi-column multi column using CSS3 CSS3 multi-column multi column crazy weirdness learn to make multi column CSS3 CSS3 multi-column ga outdated IE can use to multi-column in IE is a browser that is the most idiotic CSS3 future multi-column make silly IE CSS3 multi-column is only temporary multi-column 2 column 3 column using CSS3 is not feasible to use IE in the multi-chrome safari opera columns which can support multi-column 3d CSS3 multi-column can not be supported IE berita untuk negri multi coloumn CSS3
Apabila sobat tertarik seperti postingan di atas sobat bisa langsung masukan di postingan edit HTML dan gambarannya seperti ini:Okeh...seperti itu cara membuat multi-coloumn css3 di dalam postingan untuk cocok atau tidak cocoknya itu tergantung dari sang pengelola, akhir kata, Selamat mencoba, semoga berguna dan bermanfaat. Tak lupa juga Salam tiga jari!!!
sumber: Hendro Prayitno
Tidak ada komentar:
Posting Komentar