Tag: CSS

CSS Generator dalam Dunia Web Design

4th December 2015 — cizkah

Ini sebenarnya buat catatan aku sendiri. Karena kerjaannya lompat-lompat, dari illustrator ke photoshop, dari photoshop terus ke dashboard, dari dashboard ke text wrangler (text editor) dst. Nah..karena aku gak pake software WYSIWYG web editor (what you see is what you get semacam dreamweaver, alias cuma pake semacam notepad gitu), makanya generator-generator yang bertebaran di web ni bermanfaat banget. Apalagi kaitannya sama kode-kode CSS.

  • Border-radius: http://border-radius.com/. Sebelum tahu ada generator ini, suka mikir dan searching dulu  (karena gak hafal kodenya kalo udah mesti beda-beda tiap sudut). Alhamdulillah mudahin banget kalo pake ini.
  • Warna: http://www.0to255.com/ ini juga enak banget karena kita bisa milih warna dan akan terpampanglah berpuluh gradasi dari warna yang kita pilih.
  • Gradasi. Aku biasanya pakai ini http://www.colorzilla.com/gradient-editor/. Tapi pas tugas terakhir ternyata aku malah ngerasa lebih cocok sama yang ini  http://www.cssmatic.com/gradient-generator. Dan di sini malah ternyata udah tersedia juga untuk border-radius, box-shadow dan baru tahu kalo ada noise texture :D.
  • Text-shadow (kalo ini baru searching sih hihihi…karena prinsip text-shadow sama kaya box shadow).  Jadi, terdiri dari: [nilai shadow horisontal ] [nilai shadow vertikal] [nilai kebluran shadownya]. Tapi kalo mo coba-coba bisa ke http://www.cssportal.com/css3-text-shadow-generator/. Nah kalo lihat menu di samping kanan tuh malah banyaak lagi generator lainnya. Tapi mari kita fokus ke yang biasanya sering (aku) butuhkan :D. Alternatifnya pakai ini http://www.css3generator.in/text-shadow.html. Ada langsung pilihan yang mungkin mau dicoba-coba. Tapi aku biasanya pake standar aja.

JQuery Masonry untuk Layouting Semisal Pinterest

25th June 2013 — cizkah@yufid.org

Buat catatan pribadi. Udah pernah dicatat -di twitter! 😀 -, dipraktek sedikit. Pas ketemu pekerjaan semisal lupa, pake script apa ya kemarin namanya hehe.

Pinterest itu kan layoutnya semacam float: left berkelanjutan atau mungkin display: inline ( gak lihat sourcenya), tapi kalo cuma diterapin secara CSS ngefloat gitu, gak mungkin hasilnya bisa bertumpuk rapi, padahal heightnya beda-beda. Pada umumnya kolom berjejer float left gini bakal dibikin height rata atau semacam itu.

Nah, kuncinya di jQuery Masonry ini.

Dari diskusi yang ada di sini, ada yang ngasih saran bisa juga sebenarnya pake CSS3. Tapi ada kekurangannya.

Kode CSS-nya:

.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}

Tutorialnya ada di sini.

Ada juga yang ngasih saran pake kode ini

div.tile {
    display: inline-block;
    vertical-align: top;
}

Contoh penerapannya bisa dilihat di sini. Lumayan ya kayanya. Belum nyoba. Baru sekedar nyatet ni sekarang.

Yang lagi belajar, yuk belajar sama-sama :).