Codepal

Arsip untuk Oktober, 2009

Spice Up Feed Anda kericau Kotak Tampilan Menggunakan CSS

Jumat, 23 Oktober 2009

Untuk waktu yang sangat lama sekarang sudah ada tren ini menampilkan tweets pada sidebar situs web, footer atau header. Banyak desainer telah merancang cara cerdik dari menampilkan tweets dengan menciptakan ilustrasi yang menarik indah mengandung mereka. Tujuan utama membuat mereka secara visual menarik adalah agar para pengunjung bisa mendapatkan tertarik dan membaca update segar bahwa pemilik situs menyediakan. Apa tutorial ini akan lakukan adalah memungkinkan Anda untuk membuat kotak kericau feed Anda menampilkan interaktif sehingga pengunjung Anda dapat pergi 'wow! That's pretty cool 'ketika mereka mengunjungi situs Anda atau membaca feed Anda. Jadi di sini ia pergi

Langkah 1. Bagaimana saya menyisipkan pakan di website saya?

Memasukkan pakan twitter account anda dalam situs web Anda mungkin menjadi rumit. Ini merupakan hal yang baik ada begitu banyak tutorial di luar sana yang menyediakan Anda dengan pengetahuan untuk memasukkan feed ini dengan mudah. Berikut ini beberapa sumber yang akan memungkinkan Anda untuk mendapatkan feed dari twitter ke situs Anda sendiri:

1. Merancang Halaman Unik untuk Pembaharuan kericau
2. 10 Awesome Cara Mengintegrasikan kericau Dengan Website Anda
3. Menciak!

pengguna Wordpress dapat menggunakan beberapa plugin untuk mendapatkan pakan awesome kericau mereka di situs mereka:

1. 35 Plugin untuk Wordpress Awesome kericau
2. Juitter
3. jQuery Plugin Untuk kericau

Langkah 2. Menciptakan sprite gambar.

Sekarang bahwa Anda telah berhasil belajar bagaimana untuk mengimpor pakan berkicau, saatnya untuk mengkonfigurasi area layar. Untuk tutorial ini, saya akan menggunakan desain yang sama untuk kotak kericau seperti yang saya gunakan dalam footer yakni situs ini burung berkicau menatap tweets.

Apa Tujuan utama kami adalah bahwa ketika pernah di hover pengguna atas kotak pakan berkicau, beberapa tindakan akan berlangsung. Dalam kasus kami burung berkicau akan melihat ke arah pengguna.

Anda dapat membuat desain seperti ini dengan menggunakan ikon berbagai kericau dibuat oleh beberapa desainer yang luar biasa yang suka berbagi pekerjaan mereka dengan komunitas web. Berikut adalah sumber utama untuk ikon ini.

100 + Hebatnya Indah kericau Ikon Dan Buttons (Selalu ingat untuk meminta desainer yang pertama sebelum menggunakan ikon ini.)
icon vektor Gratis ditetapkan oleh ProductiveDreams.com

Saya telah menggunakan ikon yang dibuat oleh ProductiveDreams. Setelah membuat kotak sederhana di photoshop. Tempatkan ikon burung berkicau normal yaitu satu dengan pandangan penampang burung, di sisi kanan bawah kotak sehingga burung tampak mencari di dalam kotak. Sekarang sisipkan icon twitter burung lain, satu yang tampaknya akan melihat ke arah penonton.

Kemudian tekan ikon burung dimiringkan di atas ikon yang lebih tua yang ditempatkan di sudut kanan bawah kotak sedemikian rupa sehingga tampak seperti burung berkicau dua menuju seperti yang ditunjukkan di bawah ini

Sekarang menyembunyikan icon burung berkicau miring dan benar menandai kotak berisi burung berkicau normal dengan menggunakan garis panduan. Pastikan bahwa baik miring dan cocok burung normal dengan benar di lapangan yang sama dibuat oleh pedoman.

Memotong foto dengan ikon burung berkicau normal sepanjang pedoman dan membuka file baru dan paste di sana. Kemudian periksa ketinggian foto yang dipotong dan meningkatkan ukuran kanvas dengan jumlah yang vertikal. Hal ini dilakukan agar Anda dapat menyisipkan versi burung berkicau miring pada kanvas yang sama untuk memberikan sentuhan akhir ke gambar sprite.

Sembunyikan ikon burung berkicau normal dan membuat burung terlihat miring lainnya. Kemudian memotong foto lagi sepanjang garis panduan seperti yang Anda lakukan untuk gambar sebelumnya. Salin dan sisipkan gambar di atas kanvas yang baru dibuat di mana Anda menyisipkan gambar lainnya. Sesuaikan gambar sehingga mereka benar sesuai dengan seluruh kanvas. sprite gambar Anda siap digunakan dan akan terlihat seperti ini:

Langkah 3. Coding burung hidup!

Kerangka html dari kotak pakan kericau akan menjadi orang yang sederhana. Akan ada div wadah utama berisi feed berkicau, burung itu dan opsi "Follow Me" link.

 < div id = " " > < twitter a href = " http://twitter.com/SumeetChawla" id = " twitter- link " > Ikuti saya /! < a > < div id = "-burung berkicau " > < / div > < Feed! kericau Anda - Comes Here - > < / div > 

div kontainer CSS untuk 'kericau #' sangat sederhana. The 'div # twitter-burung' akan berisi burung. Seharusnya setengah ketinggian sprite asli kami buat karena hanya satu dari dua foto dalam sprite akan ditampilkan. Menggunakan CSS sprite adalah praktik yang baik karena mengurangi permintaan server, sehingga mengurangi waktu buka dan mencegah berkedip tiba-tiba dari foto saat melayang-layang di atas untuk pertama kalinya.

Para div burung berkicau harus melayang ke kanan dan margin negatif harus diserahkan kepada sehingga burung tampaknya ada beberapa yang di luar div kontainer. Latar belakang membuat posisi 'atas' sehingga burung berkicau normal ditampilkan. Untuk memberikan sentuhan akhir pada kotak feed kami berkicau, hanya mengubah posisi gambar latar belakang '-burung berkicau' div ke 'bawah' ketika pengguna pernah melayang di atas div kontainer.

 # Twitter (color: # 658097; posisi: relatif; width: 332px; tinggi: 122px; background-color: # 1f1f1f; border: 1px solid # 414040; latar belakang-posisi: kiri bawah; background-ulangi: tidak mengulang-; padding -kiri: 10px; padding-top: 10px;) # twitter-burung (background-image: ('url gambar / twitter.jpg'); latar belakang-posisi: atas; posisi: relatif; float: right; margin-top: 32px; margin-right:-75px; width: 101px; tinggi: 100px; background-ulangi: tidak mengulang-;) # twitter: hover # twitter-burung (background-posisi: bawah;) 

Untuk melihat bagaimana hasil akhir akan terlihat seperti, hanya gulir ke bawah ke catatan kaki di bagian bawah halaman ini.

Contoh

Gopal Raju dari ProductiveDreams telah membuat pakan twitter nya terlihat sangat hidup dan cerah. Burung berkicau adalah interaktif dengan cara yang sangat ramah dan santai. Ini sebentar dan menampilkan jumlah pengikut yang dia miliki.

Sebelum Berkeliaran:

Setelah Hover:

Ini adalah situs saja aku bisa menemukan yang membuat kotak twitter feed interaktif. Jika kalian menemukan situs lain yang mengikuti tren ini hanya posting tentang hal ini di komentar dan aku akan memastikan untuk menambahkannya di sini.

Tag: CSS , pakan layar , pakan , cara , sprite , kericau
Posted in Blog , Tutorial | 13 Komentar »

Bagaimana sebuah Kode Tumpang Tindih Tabbed Menu Utama

Rabu, 14 Oktober 2009

Ada berbagai gaya dan teknik untuk menciptakan menu navigasi tab dan salah satunya adalah overlay tab atau gaya tumpang tindih di mana setiap tab tampaknya berbaring di atas yang lain sehingga memberikan menu keseluruhan merasa sangat realistis. Sementara merancang situs saya, saya melewati banyak inspirasi dan tutorial. Salah satunya adalah ini disebut tutorial Photoshop Kertas Tekstur dari Gores kemudian Buat kumuh Web Desain dengan itu! Ditulis oleh Collis dari NetTuts.com ini akhirnya menjadi inspirasi utama untuk situs saya dan sementara akan melalui tutorial saya menemukan Collis mengatakan bahwa:

"Sekarang jika aku sendiri yang mengatakannya tab ini terlihat mengagumkan, dan alasan yang mereka lakukan adalah karena mereka tumpang tindih. Sayangnya hal ini juga membuat mereka lebih sulit untuk bekerja dengan dalam HTML. Namun Anda dapat melakukan berbagai hal dengan PNGs transparan, atau bergantian hanya membuat teks berubah warna dalam rollovers dan tidak khawatir tentang mengubah warna tab. Bagaimanapun semua ini sedikit di luar cakupan tutorial ini. Cukuplah untuk mengatakan menu mungkin agak sulit untuk membangun. "

Jadi aku mencoba salah satu coding ke html dan setelah saya berhasil berbagi pemikiran dengan Anda semua.

Langkah 1.Gearing Up

Jadi sebelum mulai kode ini semacam navigasi tab ke html / kode css, pertama-tama Anda harus belajar bagaimana untuk membuat satu di photoshop pertama. Tutorial di atas sangat terperinci dan Collis melakukan pekerjaan yang besar dalam mengajar bagaimana membangun menu seperti di photoshop. Aku telah membangun satu satu sederhana khusus untuk tutorial ini.

Sekarang biarkan aku menentukan bahwa ada tiga negara bagian dari negara yang tidak aktif tab.The adalah berwarna keabu-abuan, negara yang aktif adalah biru tua dan negara hover adalah baja warna biru terang. Oleh karena itu, daripada mengiris tiga gambar untuk setiap tab, kita dapat memilah dari sebuah sprite gambar.

Langkah 2. Mengiris The Tab Dari PSD

Sejajarkan tab secara vertikal dengan grid seperti yang ditunjukkan pada gambar di atas. Anda juga dapat menyesuaikan tab horizontal daripada vertikal tetapi kemudian latar belakang CSS posisi gambar akan diakses dengan cara yang berbeda. Pilihan tergantung pada orang ke orang namun keduanya bekerja dengan sempurna. Sementara cropping gambar mengikuti panduan dengan benar dan perhatikan bahwa saya telah membuat latar belakang transparan karena kita akan membutuhkan latar belakang transparan jika kita butuh untuk di overlap tab. Memotong gambar dan menyimpannya untuk web dalam format PNG24. Satu hal lagi yang perlu diperhatikan saat mengiris sampai gambar adalah bahwa tab pertama yaitu tab 'Home' tidak boleh memiliki apapun bayangan di tepi kiri dalam keadaan tidak aktif. Oleh karena itu, untuk itu tab tertentu kita harus membuat sprite lain tanpa bayangan di dalamnya.

Langkah 3. Kode Away

Sekarang kita mengiris secara lengkap dan kita memiliki semua gambar yang diperlukan kita bisa mulai coding bar navigasi kami. Hanya untuk membuat contoh tampilan yang baik, aku telah membangun sebuah fitur tata letak sampel wilayah puas dengan bar navigasi tumpang tindih. Tata letak itu tampak seperti ini:

 <-! DOCTYPE html PUBLIC "/ / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : / / www.w3.org/1999/xhtml "> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href =" css / styles.css "rel =" stylesheet "type =" text / css "/> </ head> <div <body> id="page-wrap"> <ul id="main-nav"> <li class =" saat ini "> <a href="index.html"> Home </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> Portofolio </ a> </ li> < li class = "layanan"> <a href="services.html"> Layanan </ a> </ li> <li class="about"> <a href="about.html"> Tentang Kami </ a> </ li> <li class="contact"> <a href="contact.html"> Kontak </ a> </ li> </ ul> <div class="clear"> </ div div> id = "fitur"> <div id="featured-content"> </ div> </ div> </ div> </ body> </ html> 

Mari kita melihat menu navigasi utama kami. Saya telah menggunakan daftar unordered sederhana seperti halnya bar navigasi lainnya dan ditata dengan menggunakan gambar latar belakang untuk tag hyperlink daftar itu.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Home </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> Portofolio </ a> </ li>
	 <li class="services"> <a href="services.html"> Layanan </ a> </ li>
	 <li class="about"> <a href="about.html"> Tentang Kami </ a> <li>
	 <li class="contact"> <a href="contact.html"> Kontak </ a> </ li>
 </ Ul>

 ul # nav utama-li (
	 float: left;
	 posisi: relatif;
	 display: inline;
 )

Ingat bahwa kita menggunakan sprite gambar untuk tab di mana tab yang paling atas merupakan negara aktif, tengah merupakan keadaan tidak aktif dan bagian bawah merupakan negara hover. Oleh karena itu, kita akan menggunakan 'latar belakang-posisi' properti untuk benar tempat gambar ke negara masing-masing sebagai berikut:

 utama-nav ul li a (#
	 posisi: relatif;
	 width: 110px;
	 tinggi: 29px;
	 display: block;
	 background-image: url ('../ gambar / tabs.png ');
	 posisi-background: pusat pusat;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: left;
	 padding-left: 30px;
	 font-weight: bold;
 )
 ul # main-nav a (li.home
	 background-image: url ('../ gambar / tab-home.png ');
 )
 ul # main-nav a (li.current
	 posisi-background: top;
	 color: # FFFFFF;
 )
 ul # main-nav li a: hover (
	 posisi-background: bottom;
	 color: # FFFFFF;
 )
 li.current utama-ul # nav a: hover (
	 posisi-background: top; / * Untuk Mencegah tab Lancar dari perubahan warna pada hover * /
	 color: # FFFFFF;
 )

Anda akan melihat bahwa saya telah memberikan kelas yang relevan untuk setiap daftar elemen dan kelas bernama 'arus' ke tab yang untuk halaman aktif. Hal ini dilakukan agar saya dapat menetapkan nilai yang berbeda z-indeks untuk setiap tab dalam urutan naik sehingga setiap tab terletak pada sumbu-z lebih tinggi dari tab berikut ini. Tab dengan kelas 'saat ini' akan berada di urutan tertinggi dari sumbu z karena merupakan halaman yang sedang dan akan selalu berada di atas itu terlepas dari posisinya dalam daftar. Sebelum menerapkan nilai-nilai z-indeks, pastikan bahwa posisi atribut untuk elemen daftar diatur ke relatif. Tanpa nilai positioning properti z-indeks tidak akan bekerja sama sekali.

 ul # main-nav (li.current
	 z-index: 100;
 )
 ul # main-nav (li.home
	 z-index: 100;
 )
 ul # main-nav (li.portfolio
	 z-index: 99;
 )
 ul # main-nav (li.services
	 z-index: 98;
 )
 ul # main-nav (li.about
	 z-index: 97;
 )
 ul # main-nav (li.contact
	 z-index: 96;
 )

Meskipun kami telah menetapkan nilai-nilai yang berbeda z-index ke tab, mereka masih belum muncul di tersusun dan akan terlihat seperti ini:

Untuk memberikan sentuhan akhir pada bar navigasi kita, kita harus mendorong setiap tab di atas yang lain. Kami telah diberi nilai z-indeks dalam urutan dari kiri ke kanan. Oleh karena itu, kami hanya akan mendorong setiap tab mulai dari hak untuk sekitar 20px nya kiri dengan menambahkan marjin negatif '-kiri' properti ke 'ul # nav li-utama' dan mendorong seluruh panel navigasi daftar unordered ke kiri oleh menambahkan 20px positif 'margin-left' untuk menghapuskan gerakan bangsal kiri bar.

 ul # utama-nav (
	 margin-left: 20px;
 )
 ul # nav utama-li (
	 float: left;
	 posisi: relatif;
	 margin-left:-20px;
	 display: inline;
 )

Capai Misi

Setelah perakitan semua css dan xhtml bersama-sama, kita akan memiliki tab tumpang tindih kami menu navigasi utama siap untuk digunakan. Ini saya mengambil cara membuat menu seperti ini dan saya yakin ada banyak cara yang lebih baik untuk melakukan hal yang sama. Saya akan senang jika Anda dapat berbagi cara lain untuk melakukan hal ini atau hanya membahas beberapa perbaikan prosedur itu sendiri.
Berikut adalah beberapa situs yang menggunakan lebih dari tab tindih sebagai menu navigasi utama mereka:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tag: CSS , bagaimana , menu , navigasi , lebih tersusun
Posted in Blog , Tutorial | 34 Komentar »

Jeruk

Selasa, 6 Oktober 2009

PSDTemplate.com merupakan situs yang menyediakan beberapa website yang benar-benar keren template dibuat di photoshop. Mereka memiliki bagian layout PSD premi dimana mereka merilis sebuah layout setiap hari. Mereka juga memiliki tata letak bagian PSD bebas di mana mereka merilis layout berkualitas tersedia bebas biaya. Mereka merilis Orange sebagai salah satu PSD template gratis dan kami telah dikodekan sehingga orang yang ingin memiliki versi / xHTML CSS template ini awesome dapat memiliki juga!

Tag: CSS , Gratis , PSD , Template , xHTML
Posted in Blog , Download , Portofolio | 4 Komentar »