Codepal

Archiv für Oktober, 2009

Spice Up Your Twitter-Feed anzeigen Box mit CSS

Freitag, 23. Oktober, 2009

Für eine sehr lange Zeit gibt es diesen Trend zum Anzeigen Tweets auf der Website der Seitenleiste, Fußzeile oder die Kopfzeile worden. Viele Designer haben geniale Art und Weise der Anzeige der Tweets indem sie schöne Blickfang Illustrationen mit ihnen entwickelt. Der Hauptzweck so dass sie optisch ansprechend ist, so dass die Besucher können sich interessierte und lesen Sie die frische Updates der Website Eigentümer ist die Bereitstellung. Was dieses Tutorial ist zu tun ist, um Ihnen zu ermöglichen, um Ihren twitter feed Display Box Interactive, so dass Ihre Besucher gehen kann "wow! Das ist ziemlich cool ", wenn sie Ihre Website besuchen oder lesen Sie Ihre Feeds. So, hier geht es:

Schritt 1. Wie füge ich die Feeds in meine Website?

Einsetzen Ihres Twitter-Account des Feeds in Ihre Website kann kompliziert werden. Es ist eine gute Sache, es gibt so viele Tutorials gibt, die, die Sie mit dem Wissen um die Aufnahme dieser Feeds bequem. Hier sind einige Ressourcen, die Ihnen ermöglichen, um die Feeds von Twitter erhalten auf Ihre ganz eigenen Website:

1. Designing ein Unique-Seite für Twitter Updates
2. 10 ehrfürchtige Ways to Integrieren Twitter mit Ihrer Website
3. Tweet!

WordPress Nutzer können einige tolle Plugins auf ihre Twitter-Feed auf ihrer Website zu erhalten:

1. 35 Super Twitter Plugins für WordPress
2. Juitter
3. jQuery Plugin für Twitter

Schritt 2. Erstellen des Bildes Sprite.

Jetzt haben Sie erfolgreich gelernt, wie man die Twitter-Feeds importieren, ist es Zeit, den Anzeigebereich zu konfigurieren. Für dieses Tutorial werde ich das gleiche Design für die twitter-Box verwenden, wie ich in dieser Site footer dh twitter Vogel starrte auf die Tweets verwendet haben.

Was unser primäres Ziel ist, dass, wann immer der Benutzer den Mauszeiger über den Twitter-Feed Box, eine Aktion wird stattfinden. In unserem Fall ist die twitter Vogel wird in Richtung des Benutzers zu suchen.

Sie können Entwürfe wie dieser mit verschiedenen twitter icons durch einige wunderbare Designer, die ihre Arbeit mit der Web-Community Liebe teilen entstehen lassen. Hier ist eine ultimative Quelle für diese Symbole.

100 + bemerkenswert schönen Twitter Icons und Buttons (Denken Sie daran, der Designer zuerst fragen, bevor Sie diese Symbole.)
Vector-Symbol von ProductiveDreams.com gesetzt

Ich habe die Icons von ProductiveDreams gemacht werden. Nach dem Erstellen einer einfachen Box in photoshop. Setzen Sie den normalen twitter Vogel-Symbol, dh der mit dem Querschnitt des Vogels, in der unteren rechten Seite der Box, so dass der Vogel in der Box zu suchen scheint. Jetzt fügen Sie die anderen twitter Vogel Symbol, derjenige, der auf den Betrachter zu suchen scheint.

Dann drücken Sie den gekippten Vogel-Symbol über dem älteren Symbol, das Sie in der unteren rechten Ecke der Box, so dass es wie eine zweiköpfige twitter Vogel erscheint, wie unten gezeigt platziert

Jetzt blenden Sie die gekippten twitter Vogel-Symbol und ordnungsgemäß kennzeichnen ein Quadrat mit den normalen twitter Vogel mit Hilfslinien. Stellen Sie sicher, dass sowohl die gekippt und die normalen Vogel richtig fit in den gleichen Platz, der von den Richtlinien hergestellt.

Schneiden Sie das Bild mit dem normalen twitter Vogel-Symbol entlang der Richtlinien und eine neue Datei öffnen und fügen Sie ihn dort. Dann überprüfen Sie die Höhe des zugeschnittenen Bildes und erhöhen die Größe der Leinwand um diesen Betrag vertikal. Dies geschieht so, dass Sie die gekippte twitter Vogel-Version auf der gleichen Leinwand Paste auf den letzten Schliff, um das Bild Sprite zu geben.

Blenden Sie die normale twitter Vogel-Symbol und die andere gekippt Vogel sichtbar. Dann schneiden Sie das Bild erneut entlang der Hilfslinien genau wie für das vorherige Bild hat. Kopieren Sie das Bild und fügen Sie ihn auf das neu erstellte Leinwand, wo Sie das andere Bild eingefügt. Stellen Sie die Bilder so, dass sie richtig passen die gesamte Leinwand. Ihr Bild Sprite ist gebrauchsfertig und sollte wie folgt aussehen:

Schritt 3. Coding der Vogel zum Leben!

Die html Skelett des Twitter-Feed-Box wird eine einfach zu sein. Es wäre eine Haupt-div-Container mit den Twitter-Feed, der Vogel und ein optionales "Follow Me"-Link sein.

 < div id = " " > < twitter a href = " http://twitter.com/SumeetChawla" id = " twitter- Link " > Follow Me! < / a > < div id = " twitter-bird " > < / div > < - Ihr Twitter-Feed kommt hier - > < / div > 

Die CSS für die '# twitter "div-Container ist sehr einfach. Das '# twitter-bird' div wird, um den Vogel enthalten. Es sollte die Hälfte der Höhe des ursprünglichen Sprite wir gemacht, weil nur eines der beiden Bilder in der Sprite angezeigt. Mit CSS Sprites ist eine gute Übung, weil es Server-Anfragen reduziert, somit verringert sich die Ladezeit und verhindert das plötzliche Aufblitzen des Bildes, wenn auf das erste Mal schwebte.

Die twitter Vogel div sollte auf der rechten Seite geschwemmt werden und eine negative Marge soll ihm zugeordnet werden, so dass der Vogel einige, was außerhalb des Behälters div zu sein scheint. Machen Sie den Hintergrund Position 'top', so dass die normale twitter Vogel angezeigt wird. Um den letzten Schliff zu unserem Twitter-Feed-Box, nur das Hintergrundbild ändern Position des "twitter-bird 'div' bottom ', wann immer der Benutzer die Maus über das div-Container.

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

Um zu sehen, wie das Endergebnis aussehen würde, nur nach unten scrollen, um die Fußzeile am unteren Rand dieser Seite.

Beispiele

Gopal Raju aus ProductiveDreams hat seinen twitter feed sehen sehr lebendig und leuchtend. Die twitter Vogel ist interaktiv in einer sehr freundlichen und beiläufig. Es winkt und zeigt die Gesamtzahl der Anhänger, die er hat.

Vor Schweben:

Nach Hover:

Dies war die einzige Seite, die ich finden konnte, die die Twitter-Feed box interaktive gemacht. Wenn euch finden jede andere Website, die sich dieser Trend nur darüber nach in den Kommentar folgt, und ich werde sicherstellen, um es hier hinzuzufügen.

Tags: CSS , Display-Feeds , Feed , wie man , Sprite , Twitter
Posted in Blog , Tutorials | 15 Kommentare »

Wie Kodex eine überlappende Tabbed Hauptmenü

Mittwoch, 14. Oktober, 2009

Es gibt verschiedene Stile und Techniken zur Schaffung eines Tabbed Navigation und einer von ihnen ist das Tabbed überlagern oder überlappen Stil, in dem jedem Tab zu sein scheint liegen über den anderen und damit die der ganzen Menü ein sehr realistisches Gefühl. Bei der Gestaltung meiner Website, ging ich durch viele Inspirationen und Anleitungen. Einer von ihnen war dieses Tutorial namens Photoshop Papierstruktur from Scratch erstellen Sie dann eine Grungy Web Design with it! Geschrieben von Collis aus NetTuts.com Dieser endete als die wichtigste Inspiration für meine Website und während er durch das Tutorial fand ich Collis, dass:

"Nun, wenn ich das so sagen diese Registerkarten sehen super aus, und der Grund, warum sie tun, ist, weil sie sich überschneiden. Leider macht sie auch schwerer zu in HTML zu arbeiten. Sie können jedoch nicht eine Vielzahl von Dingen mit transparenten PNGs, oder alternativ nur um den Text zu ändern Farben in Rollover und sich keine Sorgen über die Änderung Registerkarte Farben. Jedenfalls ist das alles ein wenig über den Rahmen dieses Tutorials. Es genügt zu sagen das Menü könnte ein bisschen schwierig zu bauen. "

Also versuchte ich Codierung man in html und nachdem ich folgenden Gedanken an den Austausch mit euch allen.

Step Up 1.Gearing

So, bevor Sie diese Art von Tabbed Navigation in HTML / CSS-Code Code, müssen Sie zunächst lernen, wie man in photoshop zuerst erstellen. Die oben genannten Tutorial ist sehr detailliert und Collis hat eine große Aufgabe in der Lehre, wie man ein solches Menü in Photoshop zu erstellen. Ich habe eine einfache speziell für dieses Tutorial aufgebaut.

Nun lassen Sie mich angeben, dass es drei Zustände des tab.The inaktiven Zustand ist grau in der Farbe, ist in den aktiven Zustand tiefblau und die Hover-Zustand ist das Licht aus Stahl blaue Farbe. Daher, anstatt Schneiden bis drei Bilder für jede Registerkarte, können wir Scheibe aus einem Bild Sprite.

Schritt 2. Slicing Die Tabs Von der PSD

Richten Sie die Laschen vertikal mit Gitter, wie im Bild oben dargestellt. Sie können auch Richten Sie die Laschen eher horizontal als vertikal, aber dann die CSS Hintergrundbild Position auf eine andere Weise zugegriffen werden kann. Die Wahl hängt von Person zu Person, aber beide funktionieren tadellos. Während beschneiden das Bild an die Richtlinien ordnungsgemäß und beachten Sie, dass ich den Hintergrund transparent gemacht, weil wir brauchen werden, einen transparenten Hintergrund, wenn wir die Tabs überschneiden müssen. Schneiden Sie das Bild und speichern Sie sie für das Web in PNG24 Format. Ein weiterer Punkt zu beachten, während Schneiden Sie die Bilder ist, dass der erste Reiter, dh die "Startseite" sollte nicht mit einer Schatten auf seiner linken Rand in den inaktiven Zustand. Daher ist für die spezifische Register müssen wir ein anderes Sprite, ohne die Schatten in ihr zu schaffen.

Schritt 3. Code Auswärts

Jetzt, da unsere Schneiden abgeschlossen ist und wir haben alle die Bilder mussten wir können mit dem Programmieren beginnen unsere Navigationsleiste. Nur um das Beispiel gut aussehen, habe ich baute eine Probe featured Content-Bereich Layout mit den überlappenden Navigationsleiste. Das gesamte Layout sieht folgendermaßen aus:

 <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"> Home </ a> </ li>
			 <li class="portfolio"> <a href="portfolio.html"> Portfolio </ a> </ li>
			 <li class="services"> <a href="services.html"> Services </ a> </ li>
			 <li class="about"> <a href="about.html"> Über uns </ a> </ li>
			 <li class="contact"> <a href="contact.html"> Kontakt </ a> </ li>
		 </ Ul>
		 <div class="clear"> </ div>
		 <div id="featured">
			 <div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

Schauen wir auf unsere Navigationsmenü. Ich habe eine einfache ungeordnete Liste wie jede andere Navigationsleiste genutzt und gestaltet es mit einem Hintergrundbild auf der Liste der Hyperlink-Tag.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Home </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> Portfolio </ a> </ li>
	 <li class="services"> <a href="services.html"> Services </ a> </ li>
	 <li class="about"> <a href="about.html"> Über uns </ a> </ li>
	 <li class="contact"> <a href="contact.html"> Kontakt </ a> </ li>
 </ Ul>

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

Denken Sie daran, dass wir mit einem Bild Sprite für die Registerkarten, in denen die obersten Register stellt den aktiven Zustand stellt der Mitte in den inaktiven Zustand und die Unterseite stellt die hover-Status. Daher werden wir die 'background-position' Eigenschaft richtig platzieren Sie die Bilder, um ihre jeweiligen Zustand wie folgt:

 ul # main-nav li a {
	 position: relative;
	 width: 110px;
	 height: 29px;
	 display: block;
	 background-image: url ('../ images / tabs.png ');
	 background-position: center center;
	 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 ('../ images / tab-home.png ');
 }
 ul # main-nav a {li.current
	 background-position: top;
	 color: # ffffff;
 }
 ul # main-nav li a: hover {
	 background-position: bottom;
	 color: # ffffff;
 }
 ul # main-nav li.current a: hover {
	 background-position: top; / * auf die aktuelle Registerkarte aus wechselnden Farben zu schweben Prevent * /
	 color: # ffffff;
 }

Sie werden bemerken, dass ich eine entsprechende Klasse zu jedem der Liste Elemente und eine Klasse namens "Strom" auf die Registerkarte, die für die aktuelle Seite gegeben ist. Dies geschieht so, dass ich verschiedene z-index Werte für jede Registerkarte zuweisen in aufsteigender Reihenfolge, so dass jeder Reiter auf einem höheren z-Achse als die Registerkarte folgenden er liegt. Die Registerkarte mit der Klasse 'aktuell' wird an der höchsten Orden der z-Achse liegen, weil es die aktuelle Seite darstellt und immer an der Spitze, unabhängig von seiner Position in der Liste bleiben. Vor dem Auftragen der z-index Werte, stellen Sie sicher, dass die Position Attribut für die Liste Element auf relative gesetzt ist. Ohne Positionierung Wert der z-index-Eigenschaft wird überhaupt nicht funktionieren.

 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 # Haupt-nav li.services {z-index: 98;} ul # main-nav li.about {z-index: 97;} ul # main-nav li.contact {z-index: 96;} 

Auch wenn wir unterschiedliche z-index Werte, um die Registerkarten zugewiesen haben, sie immer noch nicht über geläppt erscheinen und wird wie folgt aussehen:

Um den letzten Schliff zu unserer Navigationsleiste, müssen wir jede Registerkarte auf der anderen zu schieben. Wir haben die z-index Werte in absteigender Reihenfolge von links nach rechts zugeordnet. Daher werden wir nur schieben jedes Register ab dem Recht, über 20px auf der linken Seite durch Hinzufügen eines negativen "margin-left 'Eigenschaft auf den" ul # main-nav li "und drücken Sie die ganze Navigationsleiste ungeordnete Liste auf der linken Seite durch Hinzufügen einer positiven 20px 'margin-left' auf der linken Stationen Bewegung der Stange zu annullieren.

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

Mission erfüllt

Nach der Montage alle css und xhtml Gemeinsam werden wir unsere überlappt tabbed Hauptnavigationsmenü einsatzbereit. Das war mein, wie man diese Art von Menü zu erstellen nehmen und bin mir sicher, es gibt viele bessere Möglichkeiten, das Gleiche zu tun. Ich würde mich freuen, wenn Sie irgendeine andere Weise, dies zu tun koennen oder einfach nur zu diskutieren einige Verbesserungen, um diesen Vorgang selber.
Hier sind einige Seiten, die über Läppen Tabs als ihre Haupt-Navigation zu verwenden:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS , wie man , Menü , Navigation , über geläppt
Posted in Blog , Tutorials | 47 Kommentare »

Orange

Dienstag, 6. Oktober, 2009

PSDTemplate.com ist ein großer Ort bietet einige wirklich coole Website-Templates in Photoshop erstellt. Sie haben einen Abschnitt von Premium-PSD-Layouts, wo sie Freisetzung eines Layouts jeden Tag. Sie haben auch eine freie PSD-Layout, wo sie geben gute Qualität Layouts kostenlos zur Verfügung. Sie veröffentlichten Orange als eine der kostenlosen PSD-Vorlagen und wir haben es codiert, so dass Menschen, die xHTML / CSS-Version dieses tolle Vorlage haben möchte, kann das auch haben!

Tags: CSS , gratis , PSD , Template , xHTML
Posted in Blog , Downloads , Portfolio | 4 Kommentare »