Codepal

Posts Tagged 'CSS'

'Pilih' Masalah Setelah Menggunakan jqTransform dan Solusi nya

Kamis, 18 Februari, 2010

Proyek

Dalam proyek terakhir saya, saya diminta untuk membangun halaman arahan. Dalam halaman arahan, akan ada daftar bahasa dan setelah pengguna memilih bahasa tertentu, homepage situs akan terbuka secara otomatis dalam bahasa yang dipilih masing-masing. Itu juga diperlukan untuk gaya kotak daftar pilih dengan cara itu diberikan dalam desain halaman arahan. Jadi saya memilih untuk jqTransform jQuery plug-in, yang saya digunakan sekali untuk gaya beberapa bentuk. jqTransform sangat bagus plug-in untuk menyesuaikan bentuk dengan cara yang sangat mudah dan produk akhir tidak diragukan lagi indah. Tapi dalam kasus ini, itu menjadi pemutus kecepatan minor untuk kemajuan saya.

Masalah

Drop-down daftar kontrol dari bentuk html berisi 'pilih' tag yang menyertakan 'opsi' berbagai tag. Berikut adalah bentuk yang saya gunakan dalam tutorial ini untuk menjelaskan masalah:

 <form>
	 <h4> Pilih Kotak Tanpa jqTransform </ h4>
	 <div id="box-city" class="select-menus">
		 <label> Kota </ ​​label>
		 <br/>
		 <select name="select-country">
  		         <option> Gotham </ option>
			 <option> New York City </ option>
			 <option> Smallville </ option>
		 </ Select>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Apa jqTransform lakukan adalah, ia memindai seluruh tag 'pilih' dan menciptakan daftar unordered mengandung hiper-link dari pilihan dalam daftar drop-down-. Kemudian menyembunyikan asli 'pilih' tag dan isinya.

 <form class="jqtransform jqtransformdone">
	 <h4> Pilih kotak dengan jqTransform dan metode perubahan normal pilih </ h4>
	 <div class="select-menus" id="box-name">
		 <label style="cursor: pointer;"> Nama </ label>
		 <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			 <div>
				 <span style="color: 119px;"> Batman </ span>
				 <a class="jqTransformSelectOpen" href="#"> </ a>
			 </ Div>
                         <ul style="color: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				 <li> <a href="#" index="0" class="selected"> Batman </ a> </ li>
				 <li> <a href="#"> index="1" Robin </ a> </ li>
				 <li> <a href="#"> index="2" Superman </ a> </ li>
				 <li> <a href="#"> index="3" Spiderman </ a> </ li>
			 </ Ul>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <option> Batman </ option>
					 <option> Robin </ option>
					 <option> Superman </ option>
					 <option> Spiderman </ option>
			 </ Select>
		 </ Div>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Ini tidak menciptakan masalah ketika kita menggunakan 'pilih' tag umumnya untuk memilih nilai tertentu dan kemudian melakukan pengiriman formulir dengan menggunakan tombol submit. Ini menciptakan masalah ketika kita ingin melakukan beberapa fungsi ketika nilai dari daftar drop-down berubah.

Hal ini biasanya dicapai di javascript dengan menggunakan 'perubahan' metode kontrol pilih. 'Perubahan' metode menangkap acara-nilai perubahan dan kita dapat mengakses nilai yang dipilih oleh pengguna dengan cara berikut.

 / / Menangkap peristiwa perubahan Kotak Pilih Non-Transformasi.
 $ ("# Kotak-kota pilih"). Perubahan (function () {
	 var nilai = $ (ini) val ().;
     alert ("Nilai Dipilih =" + nilai);
 });

Tetapi setelah menggunakan jqTransform plugin, yang 'pilih' tag tidak lebih sana untuk menerapkan metode perubahan pada.

Solusi

Solusi untuk ini, adalah satu yang sangat sederhana. Kita dapat mensimulasikan acara perubahan untuk drop down jqTransformed dengan menerapkan fungsi klik untuk elemen hiper-link dalam unordered list. Kemudian kita dapat memiliki nilai yang dipilih dengan mengakses teks tag span mana elemen yang dipilih diatur atau ditampilkan.

 / / Menangkap acara perubahan dari Kotak Pilih Berubah menggunakan metode modifikasi dari menangkap acara perubahan nilai.
 $ ("# Kotak usia div.jqTransformSelectWrapper ul li a"). Klik (function () {
	 var nilai = $ ("# kotak rentang usia div.jqTransformSelectWrapper") teks (.)
	 alert ("Nilai Dipilih =" + nilai);
	 return false; / / mencegah aksi browser default
 });

Kesimpulan

Ini adalah salah satu cara simulasi fungsi perubahan untuk drop-down-list kotak setelah menggunakan jqTransform untuk menyesuaikan mereka. Pilihan lainnya adalah untuk memodifikasi plugin jqTransform sendiri untuk benar mengakses acara onChange dari 'Pilih' kotak. Saya berharap plug-in jqTransform pengembang dapat memperbaiki masalah ini dalam rilis berikutnya dari plug-in. Meskipun ini bukan bug yang sangat penting atau umum tapi saya berharap bahwa ini adalah beberapa bantuan.

Tags: CSS , bentuk , jqTransform , jQuery
Posted in Tutorial | 71 Comments »

Solusi Proaktif Inggris

Sabtu, 19 Desember, 2009

Buck Desain Ltd menginginkan halaman situs yang dikembangkan untuk klien baru mereka, Solusi Proaktif. Website ini halaman akan bertindak sebagai kartu bisnis online yang hanya akan berisi rincian kontak tentang perusahaan.

Tantangan

Secara keseluruhan proyek ini adalah sebuah situs sederhana statis tunggal paged tetapi tim desain memiliki spesifikasi khusus tentang desain. Mereka ingin kotak abstrak biru di desain untuk menjadi persis pada jarak tertentu dari logo ketika beban halaman dan mereka ingin menyentuh tepi kanan dari browser pada semua waktu.

Solusi

Desain halaman web itu dibuat untuk resolusi tertentu. Tapi halaman web dapat dilihat dalam berbagai resolusi layar. Sekarang jika resolusi layar komputer lebih tinggi dari yang dirancang untuk, maka jelas kotak biru abstrak akan bergerak menjauh dari logo sebagai itu harus melekat pada tepi kanan browser.

Setelah mendiskusikan dengan tim desain, kami sampai pada kesimpulan bahwa kesan pertama dari situs harus seperti itu, kotak pada jarak yang jauh dari logo seperti di desain. Satu-satunya cara yang mungkin untuk mencapai ini adalah untuk mengatur ulang jendela browser ke ukuran yang akan membawa kotak abstrak biru lebih dekat dengan logo. Ini memenuhi permintaan pertama mereka dari kotak abstrak biru berada di dekat logo ketika pengguna pertama kali membuka situs. Jika pengguna meningkatkan ukuran browser web, kotak abstrak biru selalu melekat pada tepi kanan browser yang memenuhi kebutuhan kedua mereka.

Tags: CSS , PSD ke XHTML / CSS
Posted in Portofolio | No Comments »

O 'Brien dan Carr Situs

Selasa, 1 Desember, 2009

O 'Brien dan website Carr adalah situs brosur bersih profesional yang juga terdiri dari sebuah galeri berbasis PHP. BuckDesign Studios ingin desain mereka untuk diubah menjadi sebuah situs penuh kerja yang akan memuat cukup cepat dan user friendly akan ketika datang ke gambar upload di galeri. Kami mencapai target dengan banyak waktu luang dan klien sangat puas.

Tags: CSS , PSD ke XHTML / CSS
Posted in Portofolio | No Comments »

Spice Up Display Pakan Kotak Anda Twitter Menggunakan CSS

Jumat, 23 Oktober, 2009

Untuk waktu yang sangat lama sekarang sudah ada tren ini tweets ditampilkan di sidebar website, footer atau header. Banyak desainer telah merancang cara-cara cerdik menampilkan tweets dengan menciptakan mata-penangkapan yang indah ilustrasi mengandung mereka. Tujuan utama membuat mereka menarik secara visual adalah agar para pengunjung bisa mendapatkan tertarik dan membaca update terbaru bahwa pemilik situs adalah menyediakan. Apakah tutorial ini akan lakukan adalah memungkinkan untuk Anda untuk membuat Anda kotak menampilkan twitter pakan interaktif sehingga pengunjung Anda dapat pergi 'wow! Itu cukup keren 'ketika mereka mengunjungi situs Anda atau membaca feed Anda. Jadi, di sini ia pergi:

Langkah 1. Bagaimana saya menyisipkan feed di website saya?

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

1. Merancang Halaman Unik untuk Twitter Updates
2. 10 Cara biasa untuk Mengintegrasikan Twitter Dengan Website Anda
3. Tweet!

Pengguna WordPress dapat menggunakan beberapa plugin luar biasa untuk mendapatkan mereka makan twitter di situs mereka:

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

Langkah 2. Menciptakan gambar sprite.

Sekarang bahwa Anda telah berhasil belajar bagaimana untuk mengimpor feed twitter, saatnya untuk mengkonfigurasi area layar. Untuk tutorial ini, saya akan menggunakan desain yang sama untuk kotak twitter seperti yang saya telah digunakan dalam yaitu footer situs ini burung twitter menatap tweets.

Apa tujuan utama kita adalah bahwa ketika pernah hover pengguna atas kotak pakan twitter, beberapa tindakan akan terjadi. Dalam kasus kami burung twitter akan melihat ke arah pengguna.

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

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

Saya telah menggunakan ikon yang dibuat oleh ProductiveDreams. Setelah membuat kotak sederhana di photoshop. Tempatkan burung twitter ikon yang normal yaitu satu dengan pandangan penampang burung, di sisi kanan bawah dari kotak tersebut bahwa burung tampaknya akan mencari di dalam kotak. Sekarang paste twitter lainnya burung ikon, salah satu yang tampaknya akan melihat ke arah penonton.

Kemudian dorong ikon burung miring di atas ikon yang lebih tua yang Anda ditempatkan di sudut kanan bawah kotak sedemikian rupa sehingga tampak seperti seekor burung berkepala dua twitter seperti yang ditunjukkan di bawah ini

Sekarang menyembunyikan ikon twitter burung miring dan benar menandai persegi yang mengandung burung twitter normal menggunakan garis panduan. Pastikan bahwa baik miring dan burung yang normal cocok dengan benar di lapangan yang sama dibuat oleh pedoman.

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

Sembunyikan ikon twitter burung normal dan membuat burung lain yang tampak miring. Kemudian memotong gambar lagi sepanjang garis panduan seperti yang Anda lakukan untuk gambar sebelumnya. Salin dan sisipkan gambar pada 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 harus terlihat seperti ini:

Langkah 3. Coding burung hidup!

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

 < div id = " " > twitter
	 < a href = " http://twitter.com/SumeetChawla"! id = " " twitter-link > < Follow Me / a & gt ;
	 < div id = " " twitter-burung > < / div >
	 < - Anda Pakan Twitter Hadir di Sini - >!
 < / p >

CSS untuk div wadah '# twitter' sangat sederhana. Div "# twitter-burung 'akan berisi burung. Ini harus memiliki setengah tinggi sprite asli kita dibuat karena hanya satu dari dua gambar dalam sprite akan ditampilkan. Menggunakan CSS sprite adalah praktik yang baik karena mengurangi permintaan server, sehingga mengurangi beban waktu dan mencegah berkedip tiba-tiba gambar ketika melayang-layang di atas untuk pertama kalinya.

Div burung twitter harus melayang ke kanan dan margin negatif harus ditugaskan untuk itu sehingga burung tampaknya ada beberapa apa yang di luar div kontainer. Membuat 'atas' posisi latar belakang sehingga burung twitter normal ditampilkan. Untuk memberikan sentuhan akhir ke kotak twitter feed kita, hanya mengubah posisi gambar latar belakang dari div 'twitter-burung' ke 'bawah' ketika pernah pengguna melayang di atas div kontainer.

 # Twitter {
	 color: # 658097;
	 position: relative;
	 width: 332px;
	 tinggi: 122px;
	 background-color: # 1f1f1f;
	 border: 1px solid # 414040;
	 background-position: kiri bawah;
	 background-repeat: no-repeat;
	 padding-left: 10px;
	 padding-top: 10px;
 }
 # Twitter-burung {
	 background-image: url ('images / twitter.jpg');
	 background-position: top;
	 position: relative;
	 float: right;
	 margin-top: 32px;
	 margin-right: 75px-;
	 width: 101px;
	 tinggi: 100px;
	 background-repeat: no-repeat;
 }
 # Twitter: hover # twitter-burung {
	 background-position: bawah;
 }

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

Contoh

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

Sebelum Hovering:

Setelah Hover:

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

Tags: CSS , tampilan pakan , pakan , cara , sprite , Twitter
Posted in Blog , Tutorial | 15 Comments »

Bagaimana Kode yang Tumpang Tindih menu Utama Tabbed

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 berbohong atas yang lain dan karenanya memberikan menu keseluruhan merasa sangat realistis. Sementara merancang situs saya, saya pergi melalui banyak inspirasi dan tutorial. Salah satunya adalah tutorial ini disebut Photoshop Tekstur Kertas dari Gores kemudian Buat Desain Web kumuh 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 saya sendiri yang mengatakannya tab ini terlihat mengagumkan, dan alasan yang mereka lakukan adalah karena mereka tumpang tindih. Sayangnya ini juga membuat mereka sulit untuk bekerja dengan dalam HTML. Namun Anda dapat melakukan berbagai hal dengan PNGs transparan, atau bergantian hanya membuat warna teks perubahan dalam rollovers dan tidak khawatir tentang mengubah warna tab. Bagaimanapun semua ini sedikit di luar cakupan tutorial ini. Cukuplah untuk mengatakan menu mungkin sedikit rumit untuk membangun. "

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

Langkah 1.Gearing Up

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

Sekarang mari saya menentukan bahwa ada tiga negara dari keadaan tidak aktif tab.The adalah dalam warna keabu-abuan, negara aktif biru dan negara hover adalah baja warna cahaya biru. Karenanya, daripada mengiris tiga gambar untuk setiap tab, kita dapat mengiris keluar sprite gambar.

Langkah 2. Mengiris Tabs Dari PSD

Sejajarkan tab vertikal menggunakan grid seperti yang ditunjukkan pada gambar di atas. Anda juga dapat menyelaraskan tab horizontal bukan vertikal tetapi kemudian latar belakang CSS posisi gambar akan diakses dengan cara yang berbeda. Pilihan tergantung pada orang ke orang tetapi keduanya bekerja dengan sempurna. Sementara cropping gambar mengikuti pedoman 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 yang PNG24. Satu hal lagi yang perlu diperhatikan saat mengiris sampai gambar adalah bahwa tab pertama yaitu tab 'Home' seharusnya tidak memiliki bayangan apapun pada tepi kiri dalam keadaan tidak aktif. Oleh karena itu, untuk itu tab spesifik kita harus membuat sprite lain tanpa bayangan di dalamnya.

Langkah 3. Kode Jauh

Sekarang kita selesai mengiris dan kami memiliki semua gambar yang diperlukan kita dapat memulai bar coding navigasi kami. Hanya untuk membuat contoh tampilan yang baik, saya telah membangun fitur tata letak sampel area konten dengan bar navigasi tumpang tindih. Tata letak keseluruhan terlihat 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 rel="stylesheet" type="text/css" /> href="css/styles.css"
 </ Head>

 <body>
	 <div id="page-wrap">
		 <ul id="main-nav">
			 <li class="current"> <a href="index.html"> Depan </ 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>
		 <div class="clear"> </ div>
		 <div id="featured">
			 <div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

Mari kita lihat di menu navigasi utama kami. Saya telah menggunakan daftar unordered sederhana seperti setiap 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"> Depan </ 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 # main-nav li {
	 float: left;
	 position: relative;
	 display: inline;
 }

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

 ul # main-nav li a {
	 position: relative;
	 width: 110px;
	 tinggi: 29px;
	 display: block;
	 background-image: url ('../ gambar / tabs.png ');
	 background-position: center center;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: kiri;
	 padding-left: 30px;
	 font-weight: bold;
 }
 ul # main-nav li.home suatu {
	 background-image: url ('../ gambar / tab-home.png ');
 }
 ul # main-nav li.current suatu {
	 background-position: top;
	 color: # ffffff;
 }
 ul # main-nav li a: hover {
	 background-position: bawah;
	 color: # ffffff;
 }
 ul # main-nav li.current a: hover {
	 background-position: top; / * Untuk Mencegah tab saat ini dari perubahan warna di hover * /
	 color: # ffffff;
 }

Anda akan melihat bahwa Aku telah memberikan kelas yang relevan untuk setiap elemen list dan kelas bernama 'saat ini' ke tab yang untuk halaman saat ini. Hal ini dilakukan sehingga saya dapat menetapkan berbeda z-index nilai-nilai untuk setiap tab dalam urutan menaik sehingga setiap tab terletak pada sumbu z-lebih tinggi dari tab berikut ini. Tab dengan 'sekarang' kelas akan berada di urutan tertinggi dari sumbu z-karena merupakan halaman saat ini dan akan selalu tetap di atas terlepas dari posisi itu dalam daftar. Sebelum menerapkan nilai-nilai z-indeks, pastikan bahwa atribut posisi 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 berbagai z-index nilai ke tab, mereka masih tidak muncul di dibelitkan 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-index dalam urutan dari kiri ke kanan. Oleh karena itu, kami hanya akan mendorong setiap tab dimulai dari kanan ke sekitar 20px ke kiri dengan menambahkan 'margin-left' negatif properti untuk 'ul # main-nav li' dan mendorong bar navigasi seluruh daftar unordered ke kiri oleh menambahkan "margin-left 'sebuah 20px positif untuk meniadakan gerakan bangsal kiri bar.

 ul # main-nav {
	 margin-left: 20px;
 }
 ul # main-nav li {
	 float: left;
	 position: relative;
	 margin-left: 20px-;
	 display: inline;
 }

Misi Capai

Setelah perakitan semua css dan xhtml bersama-sama, kita akan memiliki menu navigasi tumpang tindih tab utama kami siap untuk digunakan. Ini adalah mengambil saya tentang cara untuk membuat jenis menu 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 ini atau hanya membahas beberapa perbaikan prosedur ini sendiri.
Berikut adalah beberapa situs yang menggunakan lebih dari menjilat tab sebagai menu navigasi utama mereka:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS , bagaimana , menu , navigasi , selama dibelitkan
Posted in Blog , Tutorial | 47 Comments »

Jeruk

Selasa, 6 Oktober, 2009

PSDTemplate.com adalah situs besar yang menyediakan beberapa template situs yang sangat keren yang dibuat di photoshop. Mereka memiliki bagian layout PSD premi di mana mereka merilis sebuah layout setiap hari. Mereka juga memiliki bagian tata letak gratis PSD di mana mereka merilis layout kualitas yang baik tersedia bebas biaya. Mereka merilis Orange sebagai salah satu template PSD gratis dan kami telah dikodekan sehingga orang yang ingin memiliki versi xHTML / CSS dari template ini mengagumkan bisa memilikinya juga!

Tags: CSS , gratis , PSD , Template , xHTML
Posted in Blog , Downloads , Portofolio | 4 Comments »

Summer of Love

Senin, 28 September, 2009

SloDive baru-baru ini diposting sebuah artikel berjudul 40 Template Free Website PSD . Ini adalah sumber yang bagus untuk desainer yang tidak ingin memulai dari awal dengan proses mereka merancang atau untuk pengembang yang tidak terlalu baik pada merancang. Template ini xHTML / CSS yang kita miliki kode untuk kalian dengan mudah dapat diintegrasikan dengan sistem manajemen konten. Ini adalah murni meja-kurang dan semantik benar untuk tujuan SEO. Silakan, download dan memulai band sendiri atau mengatur sebuah acara musik!

Tags: CSS , gratis , PSD , Template , xHTML
Posted in Blog , Downloads , Portofolio | 7 Comments »

Bisnis Template

Selasa, 1 September, 2009

Template Bisnis adalah Template PSD gratis yang dirancang oleh Dellustrations dan tersedia untuk di-download di DelliBlog . Kami mengubah template PSD ke XHTML yang valid / CSS kode untuk orang yang ingin men-download kode bersama dengan template PSD.

Tags: CSS , gratis , PSD , Template , xHTML
Posted in Blog , Downloads , Portofolio | 16 Comments »