Codepal

Arşiv Ekim, 2009

Spice Up CSS Kullanarak Twitter Besleme Görüntüleme Kutusu

Cuma, 23 Ekim 2009

Artık çok uzun bir süre için, web sitesinin kenar çubuğu, altbilgi veya başlık görüntüleyen tweets bu eğilim olmuştur. Birçok tasarımcı, güzel, göz alıcı oluşturarak bunları içeren çizimler tweets görüntüleme yaratıcı yollar tasarladık. Onları görsel olarak çekici hale temel amacı, ziyaretçilerin ilgi ve site sahibi sağladığını yeni güncellemeler okuyabilirsiniz böylece. Bu eğitimde yapacağız ziyaretçilerinizin vay gidebilirsiniz böylece twitter linki ekran kutusuna etkileşimli yapmanızı sağlayacak! Sitenizi ziyaret veya beslemeleri okuduğumda oldukça serin. Yani burada gidiyor:

1. Adım. Besleme web siteme nasıl eklerim?

Web sitenize twitter hesabı besleme takma zor olabilir. Bu iyi bir şey söz konusu yayınlara kolayca ekleme bilgi size orada pek çok dersler vardır. Burada çok kendi sitesi üzerine twitter beslemeleri almak sağlayacak bazı kaynaklar şunlardır:

1 Kıkırdamak Güncelleştirmeler için Benzersiz Sayfa Tasarımı
2. 10 Başar Yolları Web Sitesi ile Twitter'da entegre
3. Tweet!

WordPress kullanıcılarının kendi sitesinde kendi twitter yem almak için bazı harika eklentileri kullanabilirsiniz:

1. WordPress için 35 Başar Twitter'da Eklentiler
2.. Juitter
3. Twitter için jQuery

2. Adım. Görüntü hareketli grafik oluşturma.

Twitter yem almak için nasıl başarılı bir şekilde öğrendim Şimdi, ekran alanını yapılandırmak için zamanı geldi. Bu eğitim için, ben bu sitenin altbilgi yani tweets bakıyordu twitter kuş kullanıldığı gibi aynı tasarım twitter kutusu için kullanmak için gidiyorum.

Ne birincil amacı, bugüne kadar kullanıcı vurgulu twitter besleme kutusunun üzerinde, bazı eylem gerçekleşecek olmasıdır. Bizim durumumuzda twitter kuş kullanıcı doğru bakacağız.

Bu, işlerini web topluluğu ile paylaşmak için seviyorum harika tasarımcıları tarafından yapılan çeşitli twitter simgeleri kullanarak bu gibi tasarımlar oluşturabilirsiniz. İşte bu simgeleri için eşsiz bir kaynak.

100 + oldukça güzel bir heyecan Simgeler ve Butonlar (bu simgeleri kullanarak önce tasarımcı sormak için her zaman hatırlayın. )
ProductiveDreams.com tarafından belirlenen vektör simge

Productivedreams tarafından yapılan simgeler kullanılır. Photoshop basit bir kutu oluşturduktan sonra. Kuş kutunun içine bakıyor gibi görünen bu tür kutusunun sağ alt tarafında, yani kuş kesit görünümü ile bir normal twitter kuş simgesi yerleştirin. Şimdi diğer twitter kuş simgesi, izleyiciye bakan gibi görünür yapıştırın.

Daha sonra aşağıda gösterildiği gibi iki başlı bir twitter kuş gibi göründüğünü kutusunun sağ alt köşesinde yer alan eski simgesinin üzerinde eğik kuş simgesi itmek

Şimdi eğimli twitter kuş simgesi gizlemek ve düzgün kılavuz çizgileri kullanarak normal twitter kuş içeren bir kare işareti. Eğimli ve normal bir kuş, kurallar tarafından yapılan aynı meydanda düzgün bir şekilde uyduğunu emin olun.

Kılavuzlar boyunca normal twitter kuş simgesi ile Kırpma görüntü ve yeni bir dosya açın ve oraya yapıştırın. Sonra kırpılan görüntüyü yüksekliği kontrol edin ve bu miktarın dikey tuval boyutunu artırmak. Bu görüntü sprite için son rötuşları vermek için aynı tuval üzerinde eğimli twitter kuş sürümü yapıştırmak böylece yapılır.

Normal twitter kuş simgesi gizleme ve diğer eğimli kuş görünür hale getirmek. Sonra önceki görüntü için yaptığı gibi kılavuz çizgileri boyunca tekrar kırpmak. Resim kopyalama ve diğer görüntü yapıştırılan yeni oluşturulan tuval üzerine yapıştırın. Görüntüleri tüm tuvali düzgün uyacak şekilde ayarlayın. Resim sprite kullanıma hazırdır ve bu gibi görünmelidir:

Adım 3. Hayata kuş Kodlama!

Twitter besleme kutusunun basit bir html iskelet olacak. Twitter yem, kuş ve isteğe bağlı bir "Follow Me" bağlantısını içeren bir ana kapsayıcı div var olacaktır.

 < div id = " twitter " >
	 < a href = " http://twitter.com/SumeetChawla" id = " twitter-link " > Follow Me < / a & gt ;
	 < div id = " twitter kuş " > < / span >
	 <! Twitter'da Besleme Here Comes - >
 < / span >

'# Twitter' konteyner div CSS çok basittir. '# Twitter-bird' div kuş oluyor. Bu sadece bir sprite iki resim görünecektir, çünkü yaptığımız orijinal sprite yarım yükseklikte olmalıdır. CSS sprites kullanarak sunucu isteklerini azaltır, çünkü iyi bir uygulama, dolayısıyla yük azalır ve ilk kez üzerinde seyretmiştir zaman görüntünün aniden yanıp söner önler.

Twitter kuş div sağa doğru süzülüyor olmalı ve bir negatif marj kuş bazıları ne kapsayıcı div dışında görünür olacak şekilde tahsis edilmelidir. Normal twitter kuş görünecek şekilde arka plan konumu 'top' olun. Twitter linki kutusuna son rötuşları vermek için, 'alt', 'twitter kuş' div arka plan görüntüsü konumunu değiştirmek hiç kapsayıcı div üzerinden kullanıcı gezinen.

 # Twitter {color: # 658.097; pozisyon: relative; width: 332px; height: 122px; background-color: # 1f1f1f; border: 1px solid # 414.040; background-position: sol alt background-repeat: no-repeat; dolgu -left: 10px; padding-top: 10px;} # twitter-bird {background-image: url ('images / twitter.jpg'); background-position: top; pozisyonu: relative float: right; margin-top: 32px; margin-right: 75px; width: 101px; height: 100px; background-repeat: no-repeat;} # twitter: vurgulu # twitter-bird {background-position: bottom;} 

Nihai sonucu nasıl olur görmek için, sadece bu sayfanın alt kısmında altbilgi için aşağı doğru ilerleyin.

Örnekler

Gopal Raju productivedreams onun twitter linki çok canlı ve parlak görünmesini yaptı. Twitter kuş, çok samimi ve rahat bir şekilde interaktif. Bu göz kırpmalar ve takipçilerinin onun sahip olduğu toplam sayısını gösterir.

Havada Asılı önce:

Sonra Hover:

Bu twitter linki kutusu interaktif bulabildiğim tek site oldu. Siz, bu eğilim, sadece bu konuda yorum yazılan aşağıdaki diğer herhangi bir site bulmak ve buraya eklemek için emin olun.

Etiketler: CSS , ekran yem , yem , nasıl , sprite , Twitter
Tarih blog , Rehberler | 15 Comments »

Nasıl bir Çakışan Sekmeli Ana Menü Kodu

Çarşamba, Ekim 14, 2009

Sekmeli bir navigasyon menüsü oluşturarak çeşitli stilleri ve teknikleri vardır ve bunlardan biri, her sekme diğeri üzerinde yalan ve dolayısıyla tüm menü çok gerçekçi bir his veriyor göründüğü sekmeli kaplanacağı veya çakışan stil. Benim sitesi tasarımı yaparken çok ilham ve öğreticiler ile gitti. Bunlardan biri olarak adlandırılan bu öğretici oldu ! Photoshop Kağıt Dokusu ile Grungy Web Tasarım oluşturun sonra Kazı Kazan Collis tarafından yazıldı NetTuts.com Bu sitemin ana ilham kaynağı olan sona erdi ve öğretici geçerken söyleyerek Collis bulundu:

"Şimdi eğer kendimi bu sekmeleri harika görünüyor ve bunlar üst üste çünkü yaptıkları sebebidir söylüyorlar. Ne yazık ki bu da HTML ile çalışmak zorlaştırır. Ancak şeffaf PNG bir çok şey yapmak, ya da dönüşümlü olarak sadece rollover metni değiştirmek renk ve sekmesinde renk değiştirerek endişe. Zaten bu, bu yazının kapsamı dışındadır biraz . Menü inşa etmek biraz zor olabilir söylemek yeterlidir. "

Bu yüzden html içine bir kodlama çalıştı ve ben başarı sonrası tüm sizinle paylaşmak düşündüm.

Yukarı 1.Gearing Adım

Yani html / css koduna sekmeli gezinti, bu tür kodu başlamadan önce, ilk olarak bir photoshop ilk nasıl oluşturulacağını öğrenmek zorunda. Yukarıdaki öğretici çok ayrıntılı ve Collis öğretim photoshop böyle bir menü oluşturmak için nasıl büyük bir iş yok. Ben bu eğitim için özel bir basit bir inşa var.

Şimdi bana tab.The inaktif devletin üç devlet, grimsi renkte olduğunu belirtmek izin verin, aktif devlet, derin mavi ve vurgulu devlet hafif çelik mavi renk. Bu nedenle, her sekme için üç görüntüleri dilimleme daha ziyade bir görüntü sprite dilim.

2. Adım. PSD From Sekmeler Dilimleme

Yukarıdaki resimde gösterildiği gibi dikey ızgaraları kullanarak tırnakları. Ayrıca sekmeleri yatay yerine dikey olarak daha hizalayabilirsiniz ama sonra CSS arka plan resmi konumu farklı bir şekilde erişilebilir olacaktır. Seçim kişiden kişiye göre değişir ama ikiside mükemmel. Kırpma sırasında görüntünün düzgün yönergeleri izleyin ve sekmeler üst üste gerekiyorsa biz şeffaf bir arka plan ihtiyacı olacak, çünkü ben şeffaf arka plan yaptık. Görüntüyü kırpmak ve PNG24 formatında web kaydedin. Ilk sekme 'Home' sekmesi yani inaktif durumda sol kenarında herhangi bir gölge olması değil gerektiğini görüntüleri dilimleme ise Unutulmaması gereken bir nokta daha. Bu nedenle, bu özel sekme için bu gölgeler olmadan başka bir hareketli grafiği oluşturmak zorunda.

Adım 3. Kod Uzakta

Şimdi bizim dilimleme ve tüm görüntüleri bizim gezinti çubuğu kodlama başlayabilirsiniz ihtiyaç var. Sadece örnek iyi görünmesi için, ben bir örnek özellikli çakışan navigasyon çubuğu ile içerik alanı düzeni inşa ettik. Tüm düzeni aşağıdaki gibidir:

 <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>

 <body>
	 <div id="page-wrap">
		 <ul id="main-nav">
			 <li class="current"> <a href="index.html"> Ana Sayfa </ a> </ li>
			 <li class="portfolio"> <a href="portfolio.html"> Portföy </ a> </ li>
			 <li class="services"> <a href="services.html"> Hizmetleri </ a> </ li>
			 Hakkımızda <li class="about"> <a href="about.html"> </ a> </ li>
			 <li class="contact"> <a href="contact.html"> İletişim </ a> </ li>
		 </ Ul>
		 <div class="clear"> </ div>
		 <div id="featured">
			 <div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

Ana navigasyon menüsü bakalım. Basit bir Sırasız listeyi başka bir gezinti çubuğu olarak kullanılan ve bu listenin köprü etiketi kullanarak bir arka plan resmi tarz var.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Ana Sayfa </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> Portföy </ a> </ li>
	 <li class="services"> <a href="services.html"> Hizmetleri </ a> </ li>
	 Hakkımızda <li class="about"> <a href="about.html"> </ a> </ li>
	 <li class="contact"> <a href="contact.html"> İletişim </ a> </ li>
 </ Ul>

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

Sekmeler için en sekmesi aktif devleti temsil eden bir görüntü sprite kullanarak unutmayın, orta inaktif devleti temsil eder ve alt vurgulu devleti temsil eder. Bu nedenle, biz aşağıdaki gibi düzgün, kendi durumuna görüntüleri yer 'background-position özelliğini kullanabilirsiniz:

 ul # main-nav li bir {
	 position: relative;
	 width: 110px;
	 height: 29px;
	 display: block;
	 background-image: url ('../ images / tabs.png ');
	 background-position: center merkezi;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: sol;
	 padding-left: 30px;
	 font-weight: bold;
 }
 ul # ana-nav li.home a {
	 background-image: url ('../ images / sekme home.png ');
 }
 ul # ana-nav li.current {
	 background-position: top;
	 color: # ffffff;
 }
 ul # li ana-nav a: hover {
	 background-position: alt;
	 color: # ffffff;
 }
 ul # ana nav li.current a: hover {
	 background-position: top; / * hover üzerinde renk değişimi Mevcut sekmesini önlemek için * /
	 color: # ffffff;
 }

Liste elemanlarının her biri için ilgili sınıf ve geçerli sayfa için sekme 'geçerli' adında bir sınıf olduğunu fark edeceksiniz. Bu, her sekme, sekme daha yüksek z-ekseni yattığını artan sırayla her sekme için farklı z-index değerleri atamak, böylece yapılır. Geçerli sayfayı temsil eder ve her zaman üst listesinde konumu ne olursa olsun üzerinde kalacaktır, çünkü sınıf mevcut 'sekmesi z ekseni yüksek düzenin yalan. Z-index değerleri uygulamadan önce, liste öğesi için pozisyon niteliği göre ayarlanmış olduğundan emin olun. Z-index özelliğini herhangi bir konumlandırma değeri olmayan hiç çalışmıyor.

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

Biz farklı z-index değerleri sekmelere atanmış olsa da, onlar hala gömülmüş üzerinde görünmez ve aşağıdaki gibi görünecektir:

Bizim gezinti çubuğu için son rötuşları vermek için, üst üste her sekme itmek zorunda. Biz soldan sağa doğru azalan sırada z-index değerleri atadınız. Bu nedenle, sadece sol listesi sırasız bir negatif margin-left 'mülkiyet' ul # ana-nav li ekleyerek sağdan başlayarak her sekme, sol hakkında 20px itme ve tüm gezinti çubuğu itmek çubuğunun sol koğuşta hareketi geçersiz olumlu bir 20px margin-left 'ekleyerek.

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

Görev Tamam

Tüm css ve xhtml ile birlikte montaj sonra, çakışan sekmeli ana navigasyon menüsü kullanmak için hazır olacaktır. Bu benim bu tür bir menü oluşturmak için nasıl alabilir ve aynı şeyi çok daha iyi yollar vardır eminim. Bunu yapmanın başka bir şekilde paylaşmak veya sadece bu prosedürü kendisi için bazı iyileştirmeler tartışmak mutluluk duyarız.
İşte ana navigasyon menüsü olarak sekmeleri alıştırma üzerinde kullanan bazı site:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Etiketler: CSS , nasıl , menü , navigasyon , gömülmüş üzerinde
Tarih blog , Rehberler | 47 Comments »

Turuncu

Salı, 6 Ekim, 2009

PSDTemplate.com photoshop oluşturulan bazı gerçekten harika bir web sitesi şablonları sağlayan harika bir site. Onlar, her gün bir düzen serbest prim PSD düzenleri bir bölüm var. Ayrıca ücretsiz olarak kullanılabilir kaliteli düzenleri serbest ücretsiz PSD düzeni bölüm var. Onlar ücretsiz PSD şablonları biri olarak Orange çıktı ve biz Bu harika bir şablon xHTML / CSS versiyonu var isteyen insanlar da olabilir böylece kodlanmış!

Etiketler: CSS , Ücretsiz , PSD , Şablon , xHTML
Posted in Blog , Portföy Yüklemeler | 4 Yorum »