# 012: Menggunakan CSS pada Header / Logo - Trik CSS

Anonim

Sejauh ini situs web yang sebenarnya sama sekali tidak terlihat seperti desain Photoshop kami. Dalam screencast ini kami menggali untuk melakukan hal itu, mulai dari atas dengan area header dan logo kami. Rasanya menyenangkan memiliki sedikit awal yang "nyata" untuk membangun situs secara visual.

Kami menggunakan Frank DeLoupe sebagai pemilih warna, yang terintegrasi dengan baik dengan Photoshop (ini membuat warna Anda memilih warna aktif di Photoshop, serta disalin ke clipboard Anda).

Pada satu titik kami mengubah konfigurasi Sass / Compass untuk mengkompilasi CSS sebagai :expanded ganti :compresseduntuk melihat CSS sebenarnya yang dibuat untuk alasan debugging.

Kita harus menggunakan otak kita sedikit tentang bagaimana sesuatu akan ditempatkan dan bereaksi terhadap sifat cair dari jendela browser. Misalnya, log harus selalu menyentuh sudut kiri atas.

Kami melakukan banyak dorongan di sekitar nilai untuk mendapatkan semuanya dengan benar, serta menambahkan sedikit detail di sana-sini untuk membuat segalanya terlihat lebih baik, seperti menambahkan sedikit bayangan ke efek tumpukan kertas.