Apa yang Baru di CSS4?

CSS merupakan jembatan terbaik antara web designer dan developer, meski mungkin masih banyak masalah browser compatibility, tetapi mengetahui hal baru dari CSS adalah hal yang sangat menyenangkan :mrgreen:.

Nah, di saat saya belum khatam belajar CSS3, ini udah rilis aja CSS4. Ketinggalan banget ya?

Coba langsung kita tengok saja yuk apa yang baru di CSS4 ini ;).

Selectors $E > F

Sintaks selector yang memungkinkan untuk styling dari elemen parents ($ E) berdasarkan elemen anak nya (F).

/* style the LI element */
ul > $li > p { border: 1px solid #ccc; }
$ol > li:only-child {
list-style-type: none;
}

Pada source code ul di atas, yang akan terkena style adalah elemen li bukan elemen p, sedangkan pada ol akan melakukan styling pada elemen child li yang unik. Yang menarik di sini yaitu bagaimana nanti atau berapa sering developer akan menggunakan syntax $ (selector) :D. Continue reading

Evolution of the Web

Evolution Of The Web

The Evolution of the Web is cool, interactive visualization from the Google Chrome team (along with Hyperakt and Vizzuality) that explores the evolution of web browsers over the last 20 years.

Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today’s web is a result of the ongoing efforts of an open web community that helps define these web technologies, like HTML5, CSS3 and WebGL and ensure that they’re supported in all web browsers.

The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.

Clicking on any of the browser icons brings up a cool visual history of the window design for each version.

Google Chrome

Check it here!

*taken from FlowingData

Firefox 8 Now Available!

Indeed there is no anything that stands out in this 8 version. The most important is to improve plugin installation, Twitter search, and customization of current  reopen tabs.

Firefox 8 Features

  • Add-ons installed by third party programs are now disabled by default
  • Added a one-time add-on selection dialog to manage previously installed add-ons
  • Added Twitter to the search bar
  • Added a preference to load tabs on demand, improving start-up time when windows are restored
  • Improved tab animations when moving, reordering, or detaching tabs
  • Improved performance and memory handling
  • Added CORS support for cross-domain textures in WebGL
  • Added support for HTML5 context menus
  • Added support for insertAdjacentHTML
  • Improved CSS hyphen support for many languages
  • Improved WebSocket support
  • Fixed several stability issues

To download it, you can go straight to firefox.com. If you want a portable one, you can go to portableapps.com.

Website untuk Membuat Kombinasi Warna

color combination

Memilih warna yang tepat merupakan hal yang sangat penting saat mendesain suatu proyek web. Sebagai contoh, CSS Juice sebagian besar menggunakan putih dan abu-abu  untuk body dan hitam untuk header dan footer. Terdapat beberapa layanan aplikasi warna online di internet untuk membantu anda menentukan kombinasi warna yang dapat memperindah hasil desain anda.

1. Color Explorer

Satu set perangkat yang termasuk didalamnya warna sepadan dan koleksi warna. Dikembangkan dengan baik dan memiliki antarmuka yang spesial.

2. Software Color Palette dari ColourLovers

Termasuk didalamnya perlengkapan foto untuk mengambil jenis warna dari suatu gambar, color picker yang canggih dan color theory wheel untuk memberikan anda inspirasi, dan anda dapat menyimpan warna-warna yang anda butuhkan.

3. Colour Lovers

Website yang dikembangkan oleh Darius A Monsef IV. Pengunjung dapat mencari, me-rating, memberikan review dan mencintai warna dengan jumlah kombinasi yang sangat luas. Mereka telah menciptakan garis warna yang memikat, dalam warna dasar yang tampil menarik di berbagai ukuran.

4. Contrast-A

Anda dapat bereksperimen dengan berbagai kombinasi warna yang bervariasi, me-review warna anda, mengakse dan menciptakan palet warna sendiri.

5. Daily Colorscheme

Dapat membantuk anda menjelajah kombinasi warna baru yang mungkin belum anda pikirkan, juga merupakan sumber inspirasi warna yang sangat bagus.

6. Adobe Kuler

Aplikasi website gratis untuk themes yang dapat memberikan inspirasi bagi desain anda. Apapun yang anda ciptakan, dengan Kuler anda dapat bereksperimen dengan cepat dengan berbagai variasi warna atau browse dari ribuan koleksinya. Continue reading

CSS 2.1, CSS 3 dan HTML 5 Help Cheat Sheets (PDF)

Sekarang, kita bisa cepat untuk melihat secara keseluruhan properti apa saja yg ada di CSS 2.1, CSS3 dan HTML 5, karena sudah disediakan cheat sheets yg mantap. Jadi bisa belajar secara keseluruhan dan maksimal :D. Selamat Menikmati!!!

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.

css preview
css 3 help sheet preview

10 best #HTML5 Tutorial You Should Visit!

HTML5 (dan CSS3) is the updated version of the long term HTML, used by front-end web developers all over the world.

Versi baru dari markup language ini dibuat untuk memenuhi kebutuhan teknologi RIA (Rich Internet Application), dimana selama ini banyak dilakukan oleh Flash, Silverlight dan Java. Dengan HTML5 kita sudah sangat bisa membuat user interface web yang sangat menarik dengan resource yang cukup ringan.

Terdapat beberapa semantik baru <footer>, <nav>, <article>, <aside>,dll. Dan yang pasti akan menimbulkan masalah pada bagian browser compatibility.

Langsung saja, these are 10 great sites where you can slowly get used to HTML5 :

CSS3 Solutions for Internet Explorer

Mungkin bagi pengembang web, CSS3 adalah tren yg masih hot saat ini. Namun, seperti biasa jika membahas masalah web, pasti akan otomatis berkaitan dengan browser dan biasanya browser yg paling `diistimewakan` adalah IE :mrgreen:. Dengan menggunakan CSS3 pengembang web bisa mengimplementasikan beberapa teknik, diantaranya mengurangi penggunaan gambar², nonsemantic markup, dan javascript yang kompleks. Dan sepertinya versi terbaru dari IE pun belum support/mendukung terhadap fitur CSS3 :(.

Namun, seorang developer web harus bisa menghadapi kondisi seperti ini, termasuk compatibility terhadap berbagai browser.

Di bawah ini beberapa solusi/syntax yg bisa digunakan untuk mengatasi masalah seperti di atas.

Opacity / Transparency

#myElement {

opacity: .4; /* other browsers */

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */

}

Continue reading

Best Practices for Speeding Up Your Web Site

Informasi ini saya dapatkan dari milis CI, semoga bisa menambah khasanah bagi programmer dalam membuat web :mrgreen:.

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network (CDN)
  3. Add Expires or Cache-Control Header
  4. Gzip Components
  5. Put Stylesheets at Top
  6. Put Scripts at Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript and CSS
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable
  15. Flush Buffer Early
  16. Use GET for Ajax Requests
  17. Postload Components
  18. Preload Components
  19. Reduce the Number of DOM Elements
  20. Split Components Across Domains Continue reading

CSS 3, awesome!!!

Anda sudah mencoba CSS3?

Pasti akan terkesan :mrgreen:.

Di postingan ini saya hanya ingin share beberapa resource list bwt css3 :D. And there are very great!!!

Beberapa contohnya yaitu : Spinning Cds, multiple borders, multiple columns, text shadows, all here! So if you want to learn css3 please check my links!

1. CSS Wizardry—CSS3 Examples & Progressive Enhancement

All CSS shown corresponds to the elements directly above. The ID/class names are the same as used and all CSS3/progressive enhancement snippets are shown in bold.

2. Sliding Vinyl with CSS3

We take an image of an album cover, some basic HTML, and a little fancy CSS3 that, on hover, slides out the pure-CSS vinyl record behind it.

3. Polaroid Images with Only CSS3

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures.

4. Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.

5. Super Awesome Buttons with CSS3 and RGBa

Using descriptive class names and CSS3 properties like gradients and box shadows, we create a set of scalable button styles for links and buttons. Continue reading