Archiv für die 'Blog' Kategorie
Listify, Raw Convert Text To HTML-Elemente
MONTAG, 30 August 2010
Was ist Listify?
Listify ist ein sehr einfaches kostenloser Service für Web-Entwickler und Designer, die Sie von den rohen Text, html's 'Liste' oder 'Option' Elemente, indem Sie verschiedene Optionen wie Trennzeichen umwandeln können, die Art der Listen und ignorieren Ziffern. Ich habe diese Idee, als ich die Arbeit an Clinova Projekt. Ich hatte vorgeschlagen, die Namen aller Länder in der Zielseite der Website. Um das zu tun, musste ich all die Namen einfügen innerhalb einer <select> tag. Sie können sehr gut verstehen, die Art der Zeit, dass vergeudet worden wäre es manuell tun. Also ging ich weiter und schrieb ein kurzes Stück Code in C , die Namen Landes akzeptieren würde eine Textdatei mit den anderen und erzeugen eine Textdatei mit dem <select> Tags angehängt, um die Namen. Es ersparte eine große Menge an Zeit, die ich genutzt, um etwas anderes (ich wahrscheinlich nicht sah eine Episode von How I Met Your Mother). Immerhin, so, wenn ich mit CodeIgniter begann, dachte ich, anstatt meine Zeit verschwende über die Schaffung eines demo-Projekt nutzlos, warum nicht konvertieren, dass C-Programm, um ein Online-Tool. Daher kam Listify .
Dies ist immer noch im Alpha-Stadium und wir würden gerne einige Vorschläge für neue Funktionen, die Sie gerne hören. Schreiben Sie uns ein Feedback hier feedback@code-pal.com oder hinterlasse einen Kommentar hier.
Wie wird es helfen?
Mit listify können Sie die Geschwindigkeit Ihres HTML-Codierung Prozess, wenn Sie große Listen oder Option Elemente in Ihrem Code enthalten müssen. Zum Beispiel, wenn Sie benötigen Option Elemente wie Ländernamen, dann hätten Sie den Tags, die zu 257 Namen, die offensichtlich einige Zeit dauern wird hinzuzufügen. Mit Listify, würde es nur drei Sekunden.
Wie benutzt man es?
Mit Listify ist recht einfach. Alles was Sie tun müssen ist, fügen Sie den Text in die Textbox oben, konfigurieren Sie die Optionen als pro Ihre Anforderungen und mit dem Klick auf die Schaltfläche Erzeugen. Sie können eine beliebige reiner Text und wählen Sie ein Trennzeichen zu teilen es in die Liste / option-Elemente. Grundsätzlich geht es um drei Schritten zur Liste über Listify generete:
- Kopieren Sie Text aus Ihrem gewünschte Quelle und fügen Sie ihn in das Textfeld ein.
- Fügen Sie ihn in das Textfeld ein, konfigurieren Sie die Optionen.
- Kopieren Sie die generierte Liste aus dem Dialogfeld, fügen Sie sie in Ihrem Code
Jetzt können Sie nutzen Ihre Zeit gespart, wie Sie wollen 
Was sind diese Optionen?
List Type
Diese Option ermöglicht es Ihnen, zu wählen, welche Art von Liste, die Sie generiert werden soll. Ob es sich um eine Liste Element für eine ungeordnete / list bestellt oder eine Option Element <option> Element für die <select> tag.
Ignorieren Digits
Viele Male gibt es unerwünschte Ziffern in dem Text, den wir nicht wollen, in die Liste aufgenommen werden /-Option. Diese Option ermöglicht die Erstellung der Liste ignorieren Sie die Ziffern in den Text. Zum Beispiel, wenn Sie eine nummerierte Liste zu einer ungeordneten Liste umwandeln, dann kopieren Sie einfach die Liste möchten, wählen Sie diese Option und die Listenelemente, ohne die Zahlen generiert werden.
Delimiter
Ein Trennzeichen ist eine Folge von einem oder mehreren Zeichen verwendet, um Text angeben, die Grenze zwischen separate, unabhängige Regionen in der Sie konvertiert werden. Es bedeutet, dass, wie Sie möchten Ihren Text in der Liste Elemente unterteilt werden. Zum Beispiel, wenn ein Text a, b, c und das Trennzeichen ist, wird die Liste <li> b <generiert werden als </ li> <li> </ li> <li> c / li> Standardmäßig Wenn kein Trennzeichen, dann wird es "return" oder "new line" als Trennzeichen eingegeben betrachten. Für den Raum als ein Trennzeichen, benötigen Sie den Raum betreten etc.
Lassen Sie mich wissen, ob es sinnvoll und Feedback für Verbesserungen und Bugs wurde sind herzlich willkommen.
Tags: CodeIgniter , konvertieren , li , Listify , Option , tag , Text, HTML-Entitäten , Werkzeug
Posted in Blog , Projekte | 4 Kommentare »
Erstellen einer Neon Blink Effekt für Ihre Formulare mit CSS3 und jQuery
Samstag, 17 Juli 2010
Nun dank der hellen New Kid on the Block, CSS3, mit ein wenig jQuery herausgeputzt, werde ich Ihnen zeigen, wie man eine nette Wirkung aufbauen, um Ihre Formulare zu verbessern.
Bin sicher, dass dieses coole Neon blink Effekte in Form sein werden Zwecke nützlich für viele so verpassen Sie nicht mein Tutorial auf 1stWebDesigner.com .
In diesem Tutorial haben wir Gebrauch gemacht von @-WebKit-Keyframes, welche Browser funktioniert nur bei der Verwendung der Layout-Engine Webkit wie Chrome und Safari. Bei Browsern wie Firefox und Opera, wo es keine Alternative gibt, dann müssen wir abbauen anmutig die Wirkung, die in diesem Fall nur ein box-shadow konzentriert werden. Internet Explorer (bis Version 8) nicht machen das meiste, was wir hier lernen, aber das sind 9 scheint sehr vielversprechend aus, was ich in den letzten Platform Preview gesehen.
Tags: CSS 3 , Entwicklung , Formen , wie man , jQuery
Posted in Tutorials | 2 Kommentare »
Grunge-Vorlage
Freitag 16 Juli 2010
Psdnation.info ist eine Seite gewidmet Tutorials, Artikeln, Ressourcen und Kunstwerke auf Photoshop. Sie bieten viele Freebies, die hohe Qualität PSD Website enthält Vorlagen. Sie machten Grunge als voll editierbar, geschichtete, Grunge PSD Website-Templates. Professionell von ihnen designed und entwickelt von uns ist diese hochwertige Freebie von PSDNation ein jetzt auch als XHTML / CSS-Template für das Web-Entwickler-Community. Es kann als ein Blog-Template verwendet werden oder kann auch als Grundlage für die CMS-Integration.
Tags: CSS 3 , Dark , Free , Grunge , xHTML
Posted in Blog , Downloads | 2 Kommentare »
Wie Erstellen Sie ein Panel Cool Slide Out mit CSS3 nur
Montag, 5 Juli, 2010
Ich schrieb ein Tutorial für 1stwebdesigner.com Es geht darum, wie Sie mit CSS3 auf Mootools Ziele zu erreichen, die nur möglich waren mit Hilfe von JavaScript-Bibliotheken wie jQuery und. In diesem Tutorial erstellen wir eine Folie aus Abonnieren Panel.
Sobald der Betrachter schwebt über der Schaltfläche "Abonnieren" auf der oberen rechten Ecke wird die gesamte versteckte aufleuchten Rutschen mit einer sehr glatten Animationseffekt offenbart die Anmeldung Optionen, um die Besucher. All dies wird nur durch Verwendung CSS3 getan werden.
Verpassen Sie nicht mein Tutorial auf 1stWebDesigner.com, wenn Sie wollen, Bypass-Effekt mit Hilfe von JavaScript Schiebetüren dies zu erreichen, cool.
Tags: Codierung , CSS 3 , Entwicklung , wie sie , Tutorial
Posted in Tutorials | 1 Kommentar »
Neue Web-Host - unsere Erfahrungen während der Transition
Sonntag, 6 Juni 2010
Wir sind glücklich zu verkünden, dass Code-PAL wird nun über eine neue gehostete Web-Host - wpWebHost . Gleichzeitig sind wir auch traurig und sind wirklich leid für die Unannehmlichkeiten bei allen bedanken, die uns besucht Phase während des Übergangs. Obwohl unsere bisherigen Web-Host, 000webhost war sehr gut zu uns, dachten wir, es war Zeit für einen Wechsel zu einer neuen und erweitern Code-pal neue Extents. Etwas zu sagen über unsere bisherigen Wirt, alle können wir sagen, dass 000webhost wurde einfach toll! Auch wenn wir ihren kostenlosen Hosting-Service, der Website verwendet Ausfallzeiten minimal war, fast gleich null und wir erhalten alle Funktionen einer guten Webhost würde uns zur Verfügung stellen. Wir würden Host empfehle sie jedem, der seine sucht zu starten und will einen Blog. Ihre Unterstützung war auch fantastisch und schnell.
Nun könnte man denken, dass wenn wir wirklich liebte sie so sehr, warum gehen wir für wpWebHost tat? Nun, viele unserer Freunde gewesen benutze es und sie waren sehr glücklich mit ihm. Er empfahl es der Tag starteten wir auf der Suche nach einem neuen Wirt. Also dachten wir, der ihm einen Versuch und angesichts der Tatsache, dass es eine Reihe, die speziell darauf ausgerichtet ist, WordPress, könnte es zu einem recht gut sein. In diesem Augenblick bekamen wir die Nachricht von ihrer Super Discount bieten aufgrund ihrer frisch renovierten Website. Diese Entscheidung selbst aus der Bewegung der Website auf einen neuen Host bestätigt.
Während des Übergangs, waren wir wirklich beunruhigt, wie das Ganze ausgehen wird, nachdem es bis alles vorüber ist. Wir kontaktierten die Unterstützung der wpWebHost und ihre Antwort war ziemlich schnell, was beruhigend, denn wenn etwas schief gelaufen war, gäbe es einige Unterstützung, die wir laufen gehen, um sein könnte. Aber die von ihnen übermittelten Informationen war nicht genug. Sie führte mich zu einer Stelle, die, wie man ein Wordpress-Blog aus dem Extras-Panel Export erwähnt. Wir wussten schon, dass etwa (wie die meisten von uns da draußen, die mit Wordpress haben seit geraumer Zeit). Also dachten wir diskutieren unsere Erfahrung für den Abtransport der Website von einem Host zu einem anderen.
Wenn wir von einem Ort zum anderen bewegen, nehmen wir alle unsere Stoffe zusammen mit uns, informieren die zuständigen Behörden über unsere neue Adresse und richten Sie dann unsere verschoben Stoffe in unserem neuen Zuhause. Der Wechsel von einem Server auf einen anderen Server ist genau das gleiche. "Unser Stuff 'der Inhalte unserer Website ist," unsere Adresse' ist der Domain-Name, den richtigen "Behörden" sind die Name-Server in unserem Domain-Manager. Diese sind die wichtigsten Schritte in diesem Prozess beteiligt.
Schritt 1. Sichern von Dateien
Zunächst einmal, wir haben nur unsere Daten gesichert, die speziell die wp-content-Ordner und alle anderen Dateien im Home-Verzeichnis. Also das nächste Mal, wenn Sie eine Sicherungskopie Ihrer WordPress-Website, nicht nur die Sicherung der wp-content-Ordner und auch einen Blick auf die Dateien im Home-Verzeichnis, weil sie möglicherweise enthalten einige Ermittlung html-Dateien für verschiedene Dienste wie Google Analytics etc .
Schritt 2. Das Herunterladen der Datenbank
Der zweite Schritt war sehr wichtig. Dies ist der Schritt, wo Sie eine Sicherungskopie Ihrer Datenbank. Wir nahmen das Backup in allen Formaten zur Verfügung und die Dateien heruntergeladen mindestens zwei Mal nur für den Fall, wenn einer von ihnen erweist sich als korrupt. Ich habe irgendwo gelesen, dass das Herunterladen der SQL-Datei in gz-Format via Firefox kann es manchmal korrupt. Die WordPress Codex's Guide to Sichern von Datenbanken war sehr hilfreich für uns.
Schritt 3. Aktualisieren der DNS
Der nächste Schritt bestand darin, Abschnitt Update der Domain Name Server (DNS) in unserem Domain-Provider-Domain-Verwaltung. Dies war der am meisten irritierenden Teil der Partie, weil die DNS-Aktualisierung dauert seine Zeit. Es dauert in der Regel etwa 2-3 Stunden, aber es könnte noch einen Tag dauern, sie zu aktualisieren. Wir hatten Glück, so dass es innerhalb von 3 Stunden nach dem Wechsel kam es aktualisiert. Dieser Schritt war wichtig, weil wir wieder nicht zugegriffen werden konnte unsere neue Hosts ftp ohne unsere Domains auf sie zeigen.
Schritt 4. Laden der Daten
Sobald unsere Domain wurde an den richtigen Server zeigen, der nur ein Teil übrig geblieben war, um die Site auf dem neuen Rechner hochladen. Zunächst haben wir installiert Wordpress auf sie. Dann auf den phpMyAdmin, restaurierte man die vorherigen Datenbank gelöscht und den neu erstellt. Wieder Wordpress Codex's Guide to Datenbank wiederherzustellen war sehr hilfreich für uns. Sobald das geschehen war, war das letzte, was links, um die wp-content-Ordner hochladen.
Sobald das Thema hochgeladen wurde, gingen wir in das Backend, aktiviert das Thema und alle Plug-in, war inaktiv. Unsere Seite war die gleiche wie vorher, aber auf einem anderen Standort. Dieser Artikel war eine enorme Hilfe für uns während des gesamten Prozesses und die meisten unserer Schritte waren Leitlinie gefolgt wie pro ihre. Der Wechsel von einem Host zu einem anderen klingen mag komplex, aber es ist nicht so hart, dass weder komplex. Das Wichtigste ist, um die ordnungsgemäße Datensicherung, bevor Sie beginnen etwas Geduld.
Ein kleines Problem
Die Site wurde klappen, aber es gab ein Problem, wenn wir eine beliebige Datei zu kopieren versucht. Der Fehler kam, war die "Verzeichnis kann nicht erstellt / home/xxx/public_html/wp-content/uploads/20XX/XX. Ist das übergeordnete Verzeichnis beschreibbar durch den Server? "Das Problem war, dass die Datenbank-Tabelle wp_option enthielt noch einige Werte unserer alten Host-Account-Namen. Diese bis der Pfad zu dem Upload-Verzeichnis durcheinander. Da wir nicht importieren Sie die Website mit dem wordpress 'default Import / Export-Tool, damit dieses Update wurde nicht richtig gemacht. Um dieses Problem zu lösen, gingen wir in das phpMyAdmin, suchten die Datenbank mit diesem 'xxx' Begriff, schaffen das ganze Problem war. Nach all ihren Erscheinungen, wo aufgeführt ist, ersetzten wir jeweils mit dem neuen Begriff. Dieses vollständig das Problem gelöst. Wir empfehlen Ihnen, diese folgen
Leitfaden für richtig bewegen WordPress aus einem Verzeichnis in ein anderes am gleichen Server oder Umzug von einem Server auf einen anderen
Abschluss
Unsere Erfahrung während der gesamten Übergang von einem Host zum anderen war ganz angenehm. Wir hatte keinerlei Schluckauf während des gesamten Prozesses.
Wie waren Ihre Erfahrungen, wenn Sie trat von einem Host auf einen anderen?
Tags: 000webhost , DNS , Umzug , neuer Host , Verlagerung Website WordPress , WordPress-Blog zu übertragen , die Übertragung WordPress-Datenbank , Verzeichnis kann nicht erstellt , wpwebhost
Posted in Artikel , Blog , News | 3 Kommentare »
Die 'Select' Problem nach der Verwendung jqTransform und ihre Lösung
Donnerstag 18 Februar 2010
Das Projekt
In diesem jüngsten Projekt von mir, ich war erforderlich, um eine Zielseite zu konstruieren. In diesem Zielseite, gäbe es eine Liste der Sprachen und nachdem der Benutzer wählt werden keine bestimmte Sprache, würde der Homepage der Website automatisch öffnen in der jeweiligen gewählten Sprache. Es war auch erforderlich, um den Stil wählen Sie im Listenfeld in der Weise in die Gestaltung der Zielseite gegeben wurde. Also entschied ich mich für die jqTransform jQuery-Plug-in, die ich benutzt habe einmal zum ursprünglichen Stil einige Formen. jqTransform ist sehr nett Plug-in anpassen Weise die Formen in einem sehr einfach und das Endprodukt ist zweifellos schön. Aber in diesem Fall wurde nur eine geringe Geschwindigkeit Leistungsschalter um meine Fortschritte.
Das Problem
Die Dropdown-Liste die Kontrolle über das HTML-Formular enthält die 'Select' Tags, welche die verschiedenen 'Option' Tags umschließen. Hier ist eine Form, die ich in diesem Tutorial benutze, um das Problem zu erklären:
<form> <h4> Select Box Ohne jqTransform </ h4> <div id="box-city" class="select-menus"> <label> City </ label> <br/> <select name="select-country"> <option> Gotham </ option> <option> New York City </ option> <option> Smallville </ option> </ Select> <div class="clear"> </ div> </ Div> </ Form>
Was jqTransform tut, ist, scannt er die ganze 'select' Tag und schafft eine ungeordnete Liste mit Hyperlinks für die Optionen in der Drop-down-Liste. Es versteckt sich dann das Original "wählen Sie" Tag und seinen Inhalt.
<form class="jqtransform jqtransformdone"> <h4> Select Box mit jqTransform und normal wählen Sie Change-Methode </ h4> <div class="select-menus" id="box-name"> <label style="cursor: pointer;"> Name </ label> <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;"> <div> <span style="width: 119px;"> Batman </ span> <a class="jqTransformSelectOpen" href="#"> </ a> </ Div> <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;"> <li> <a index="0" href="#" class="selected"> Batman </ a> </ li> <li> <a index="1" href="#"> Robin </ a> </ li> <li> <a index="2" href="#"> Superman </ a> </ li> <li> <a index="3" href="#"> 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>
Das schafft kein Problem, wenn wir die 'Select' Tag verwenden in der Regel für die Auswahl eines bestimmten Wertes und anschließend die Übermittlung eines Formulars mit einem Submit-Button. Es schafft ein Problem, wenn wir eine Funktion, wenn der Wert der Dropdown-Liste geändert wird, durchführen möchten.
Dies ist normalerweise in JavaScript, indem Sie die "Veränderung" Methode des Select-Steuerung erreicht. Die "Veränderung"-Methode erfasst die Value-Change-Ereignis, und wir können den Wert durch den Anwender in folgender Weise Zugang gewählt.
/ / Capturing das Change-Ereignis des nicht-transformierten Select Box. $ ("# Box-City Select"). Wechseln (function () ( var value = $ (this). val (); alert ("Value Selected =" + value); ));
Aber nach der Verwendung des jqTransform Plugin, 'select' ist der Tag nicht mehr da, um über die Änderung Methode.
Die Lösung
Die Lösung für dieses ist ein sehr einfaches. Wir simulieren das Change-Ereignis für die jqTransformed Dropdown-Liste durch die Anwendung eines Klick-Funktion für die Hyper-Link-Element innerhalb der ungeordneten Liste. Dann können wir den ausgewählten Wert durch den Zugriff auf den Text der span-Tag, wenn das ausgewählte Element gesetzt oder angezeigt haben.
/ / Capturing das Change-Ereignis des Transformed Select Box mit der modifizierten Methode der Erfassung der Wertänderung Veranstaltung. $ ("# Box-age div.jqTransformSelectWrapper ul li a"). Klicken Sie (function () ( var value = $ ("# box-age div.jqTransformSelectWrapper span"). text () alert ("Value Selected =" + value); return false; / / Standard-Browser zu verhindern Aktion ));
Abschluss
Dies ist eine Möglichkeit für die Simulation ändern Funktion für Drop-down-Listenfelder nach der Verwendung jqTransform um sie anzupassen. Die andere Option ist die jqTransform Plugin selbst zu ändern, um richtig auf die onChange-Ereignis des "Select"-Boxen. Ich hoffe, die jqTransform Plug-in können Entwickler dieses Problem in ihrem nächsten Release beheben Sie das Plug-in. Obwohl dies nicht eine sehr wichtige oder häufig Fehler, aber ich hoffe, dass dies eine Hilfe war.
Tags: CSS , Formulare , jqTransform , jQuery
Posted in Tutorials | 37 Kommentare »
Spice Up Your Twitter Feed Display Box mit CSS
FREITAG, 23 Oktober, 2009
Für eine sehr lange Zeit jetzt hat es diesen Trend zur Anzeige tweets auf der Website der Seitenleiste, die Fußzeile oder die Kopfzeile worden. Viele Designer haben geniale Art und Weise der Anzeige der Tweets, indem schönen Blickfang Abbildungen enthalten sie bestimmt sind. Der Hauptzweck der macht sie optisch attraktiv ist, so dass die Besucher können sich interessierte und lesen Sie die frische Updates der Website der Besitzer stellt. Was dieses Tutorial wird dazu lediglich das Sie zu Ihrem Twitter-Feed interaktive Display-Karton, so dass Ihre Besucher gehen kann "wow machen! Das ist ziemlich cool ", wenn sie Ihre Website besuchen oder lesen Sie Ihre Feeds. So geht es hier:
Schritt 1. Wie füge ich die Feeds in meine Website?
Einsetzen Ihrer twitter-Account-Feeds in Ihre Website kann sich schwierig. 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 Quellen, die Ihnen ermöglichen, um die Feeds von Twitter auf Ihre ganz eigene Seite bekommen:
1. Entwerfen einer Unique-Seite für Twitter Updates
2. 10 ehrfürchtige Möglichkeiten, um mit Integrieren Sie Ihre Website Twitter
3. Tweet!
Wordpress-Benutzer können einige tolle Plugins, um ihre Twitter-Feed auf ihrer Website zu bekommen:
1. 35 Awesome Twitter Plugins für Wordpress
2. Juitter
3. jQuery-Plugin für Twitter
Schritt 2. Erstellen der Image-Sprite.
Jetzt haben Sie gelernt, wie erfolgreich die Twitter-Feed importieren, ist es Zeit, den Anzeigebereich zu konfigurieren. Für dieses Tutorial, ich werde das gleiche Design für die Twitter-Box verwenden, wie ich in der Fußzeile dieser Seite also ein Vogel zwitschern und starrte auf die tweets verwendet haben.
Was unser primäres Ziel ist, dass, wann immer der Benutzer hover's ü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 Designs wie diese mit verschiedenen Twitter Icons von einigen wunderbaren Designer, die ihre Arbeit mit der Web-Community zu teilen Liebe gemacht zu schaffen. Hier ist eine ultimative Quelle für diese Symbole.
100 + bemerkenswert schöne Twitter Icons und Buttons (Denken Sie immer daran, zuerst zu fragen, bevor Sie den Designer dieser Symbole.)
Kostenlose Vektor-Icon-Set von ProductiveDreams.com
Ich habe die Icons von ProductiveDreams gemacht werden. Nach dem Erstellen einer einfachen Box in Photoshop. Legen Sie die normale Twitter Bird Icon das mit dem Querschnitt des Vogels, in der unteren rechten Seite der Box, so dass der Vogel in der Kiste sein Blick scheint also. Nun fügen Sie den anderen Twitter Vogel-Symbol, auf diejenigen, die 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 Vogel zwitschern, wie unten dargestellt erscheint platziert
Nun blenden Sie die gekippten Twitter Bird Icon markieren und ordnungsgemäß ein Quadrat mit den normalen Twitter Vogel mit Hilfslinien. Stellen Sie sicher, dass sowohl die gekippt und die normale Vogel richtig passen in das gleiche Feld in den Leitlinien vorgenommen.
Crop das Bild mit der normalen Twitter Bird Icon entlang der Leitlinien und öffnen Sie eine neue Datei und fügen Sie ihn dort. Dann überprüfen Sie die Höhe des zugeschnittenen Bildes zu erhöhen und die Leinwandgröße um diesen Betrag vertikal. Dies ist, so dass Sie die gekippte Twitter Bird-Version auf derselben Leinwand Paste auf den letzten Schliff, um das Bild zu geben Sprite getan.
Blenden Sie die normalen Twitter Bird Icon und machen den anderen gekippt Vogel sichtbar. Dann das Bild zuschneiden wieder entlang der Hilfslinien wie Sie für das vorherige Bild haben. Kopieren Sie das Bild und fügen Sie ihn auf das neu erstellte Leinwand geklebt, wo Sie das andere Bild. Passen Sie die Bilder so, dass sie richtig passen die ganze Leinwand. Ihr Image Sprite ist gebrauchsfertig und sollte wie folgt aussehen:
Schritt 3. Coding der Vogel zum Leben!
Das HTML-Gerüst der Twitter-Feed Feld wird ein einfacher werden. Es würde einen wesentlichen div-Container mit den Twitter-Feed, der Vogel und eine optionale "Follow Me"-Link werden.
< div id = " " > Twitter < a href = " http://twitter.com/SumeetChawla" id = " Twitter-Link " > Follow Me! < / a & gt ; < div id = " twitter-bird " > < / div > <! - Ihre Twitter-Feed kommt hier - > < / div >
Das CSS für die '# twitter' container div ist sehr einfach. Die "# twitter-bird 'div wird der 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 werden. Mit CSS Sprites ist eine gute Übung, weil es Server-Anfragen reduziert, somit verringert sich die Ladezeit und verhindert das plötzliche Aufblitzen von dem Bild, wenn auf das erste Mal schwebte.
Die Twitter-Vogel div sollte schwamm auf der rechten Seite und eine negative Marge sollte es zugeordnet werden, so dass der Vogel scheint einigen, was außerhalb des Behälters div werden. Machen Sie den Hintergrund Position 'top', so dass die normale Twitter Bird wird angezeigt. Um den letzten Schliff zu unserem Twitter-Feed-Box, nur das Hintergrundbild Position des "twitter-bird 'div zu' bottom ', wann immer der Benutzer schwebt über den Container div.
# Twitter ( color: # 658097; position: relative; width: 332px; height: 122px; background-color: # 1f1f1f; border: 1px solid # 414040; background-position: left unten; 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 Feeds machte seine Twitter schauen sehr lebhaft und fröhlich. Die Twitter-Vogel ist in einem sehr freundlichen und lässigen Art und Weise interaktiv. Er zwinkert und zeigt die Gesamtzahl der Anhänger, die er hat.
Bevor Schwebeflug:
Nach Hover:
Dies war die einzige Seite, die ich finden konnte, die aus dem Twitter-Feed-Box Interactive. Wenn euch eine andere Seite, die diesem Trend folgt, finden Sie nur darüber nach in den Kommentar und ich werde sicherstellen, um es hier hinzuzufügen.
Tags: CSS , Display-Feeds , Feeds , wie Sie , Sprite , Twitter
Posted in Blog , Tutorials | 14 Kommentare »
Wie Code einer überlappenden Menü Tabbed Main
Mittwoch 14 Oktober 2009
Es gibt verschiedene Stile und Techniken der Schaffung eines Tabbed Navigation im Menü und einer von ihnen ist das Tabbed übermalen oder überlappt Stil, in dem jeder Registerkarte scheint vorbei zu sein liegen die anderen und damit das ganze Menü geben 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 mit ihm! Geschrieben von Collis aus NetTuts.com Diese waren letztlich die wichtigsten Inspirationsquelle für meine Website und während er durch das Tutorial fand ich Collis sagen, dass:
"Nun, wenn ich das so sagen darf diesen Registerkarten sehen super aus, und der Grund, warum sie tun, ist, weil sie sich überschneiden. Leider macht sie auch schwerer Arbeit mit in HTML. Sie können jedoch nicht eine Vielzahl von Dingen mit transparenten PNGs, oder abwechselnd nur um Text zu ändern Farben in Rollover und sich keine Sorgen über das Ändern Registerkarte Farben. Irgendwie 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 habe ich versucht man in HTML-Codierung und nachdem ich folgenden Gedanken an den Austausch mit Ihnen allen.
Step Up 1.Gearing
Also, bevor Sie zu dieser Art von Tabbed Navigation in HTML / CSS code, müssen Sie zuerst lernen, wie man in Photoshop zu erstellen zuerst. Der obige Tutorial ist sehr detailliert und Collis hat einen großartigen Job in der Lehre, wie man ein solches Menü erstellen in Photoshop. Ich habe einen einfachen Ein speziell für dieses Tutorial gebaut.
Lassen Sie mich nun angeben, dass es drei Zustände des tab.The inaktiven Zustand ist grau in der Farbe, ist der aktive Zustand tiefblau und die Hover-Zustand ist das Licht stahlblauen Farbe. Daher, anstatt Aufschneiden bis drei Bilder für jede Registerkarte, wir können ein Bild aus Slice Sprite.
Schritt 2. Aufschneiden des Tabs von der PSD
Richten Sie die Laschen vertikal mit Gittern wie auf dem Bild oben dargestellt. Sie können auch Richten Sie die Laschen horizontal statt vertikal aber dann wird die CSS Hintergrundbild Position wird in einer anderen Weise zugegriffen werden. Die Wahl hängt von Person zu Person, aber beide funktionieren einwandfrei. Während das Bild zuzuschneiden folgen den Vorgaben ordnungsgemäß und beachten Sie, dass ich den Hintergrund transparent gemacht, weil wir brauchen werden, einen transparenten Hintergrund, wenn wir überschneiden sich die Registerkarten müssen. Das Bild zuschneiden und speichern Sie sie für das Web in PNG24 Format. Ein weiterer Punkt zu beachten, während in dünne Scheiben auf den Bildern ist, dass die erste Registerkarte dh die 'Home' tab sollte nicht mit einer Schatten auf seinem linken Rand in den inaktiven Zustand. Daher speziell für diesen Reiter haben wir ein anderes Sprite, ohne die Schatten in ihr zu schaffen.
Schritt 3. Code Away
Jetzt, da unsere Slicing ist abgeschlossen, und wir haben alle die Bilder gewünscht, können wir mit dem Programmieren beginnen unsere Navigationsleiste. Gerade das Beispiel gut aussehen zu lassen, habe ich eine Probe gebaut Featured Content-Bereich Layout mit der Navigationsleiste überschnitten. Das gesamte Layout sieht wie folgt 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>
Lets Blick auf unsere Hauptmenü. Ich habe eine einfache ungeordnete Liste wie jede andere Navigationsleiste verwendet und gestylt es mit einem Hintergrundbild, um die 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 Image Sprites für die Registerkarten, in denen die oberste Registerkarte den aktiven Zustand vertritt, der mitten in den inaktiven Zustand und der Unterseite stellt die hover-Status. Daher werden wir die 'background-position "-Eigenschaft verwenden, um die Bilder richtig Platz, um ihre jeweiligen Stand wie folgt:
ul # main-nav li a ( position: relative; width: 110px; height: 29px; display: block; background-image: url ('../ images / tabs.png '); background-position: center Zentrum; 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; / * Damit die aktuellen Tab aus wechselnden Farben auf schweben * / color: # FFFFFF; )
Sie werden bemerken, dass ich eine entsprechende Klasse zu jedem der Liste Elemente und eine Klasse namens gegeben 'Aktuell' auf die Registerkarte, die für die aktuelle Seite. Dies ist so, dass ich verschiedene z-index Werte auf jeder Registerkarte ordnen in aufsteigender Reihenfolge, so dass jeder Reiter auf einem höheren z-Achse als die folgenden Reiter liegt es getan. Die Registerkarte mit der Klasse 'aktuell' wird bei der höchsten Ordnung der z-Achse liegen, weil es die aktuelle Seite darstellt und wird immer am Anfang unabhängig von It's Position in der Liste bleiben. Vor der Anwendung des z-index Werte, stellen Sie sicher, dass die Position Attribut für das Element, um relative Liste gesetzt ist. Ohne jede 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 # main-nav (li.services z-index: 98; ) ul # main-nav (li.about z-index: 97; ) ul # main-nav (li.contact z-index: 96; )
Obwohl wir verschiedene z-index Werte auf den Registerkarten zugeordnet haben, sie scheinen noch nicht über geläppt und wird wie folgt aussehen:
Um den letzten Schliff zu unserer Navigationsleiste, müssen wir jede Registerkarte auf den anderen zu schieben. Wir haben die z-index-Werte in absteigender Reihenfolge von links nach rechts zugeordnet. Daher werden wir nur Push jede Registerkarte ab das Recht, über seine 20px, indem eine negative "margin-left"-Eigenschaft auf den 'ul # main-nav li "und drücken Sie die ganze Navigationsleiste ungeordnete Liste auf der linken Seite von links Hinzufügen eines positiven 20px 'margin-left' auf der linken Bewegung der Stationen bar auszuschließen.
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 zusammen, wir werden unser überschnitten haben tabbed Hauptmenü einsatzbereit. Dies war mein nehmen, wie diese Art von Menü zu erstellen und bin mir sicher, es gibt viele bessere Möglichkeiten, das Gleiche zu tun. Ich würde mich freuen, wenn Sie irgendwelche anderen Weg, dies zu diskutieren oder einfach nur einige Verbesserungen an diesem Verfahren selbst teilen konnten.
Hier sind einige Seiten, die über Registerkarten wie ihre Läppen Hauptmenü verwenden:
ILove2Design.at
HiddenDepth.ie
HotCards.com
Tags: CSS , wie man , Menü , Navigation , über geläppt
Posted in Blog , Tutorials | 34 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 Teil der Prämie PSD-Layouts, wo sie ein Layout-Version jeden Tag. Sie haben auch eine kostenlose PSD Layout-Abschnitt, wo sie gute Qualität Layouts Release kostenlos zur Verfügung. Sie veröffentlichten Orange als eine der kostenlosen PSD-Vorlagen und wir haben es so, dass codierte Menschen, die XHTML / CSS-Version dieser Vorlage kann awesome haben wollen, dass auch!
Tags: CSS , Free , PSD , Template , xHTML
Posted in Blog , Downloads , Portfolio | 4 Kommentare »
Summer of Love
Montag, 28 September 2009
SloDive kürzlich einen Artikel veröffentlicht, benannt 40 Free Website Templates PSD . Dies ist eine hervorragende Ressource für Designer, die nicht wollen, aus dem Nichts mit ihrem Design-Prozess zu starten oder für Entwickler, die nicht sehr gut in der Gestaltung. Diese XHTML / CSS-Vorlage, die wir haben für euch codierten kann problemlos mit jedem Content Management System integriert werden. Es ist rein Tisch-und semantisch weniger für SEO Zwecke zu korrigieren. Go ahead, download it and start your own band or organize a music event! 
Tags: CSS , Free , PSD , Template , xHTML
Posted in Blog , Downloads , Portfolio | 3 Comments »
Personal Computer Assistant
Sunday, September 27th, 2009
Personal Computer Assistant ist eine sehr einfache Anwendung und hat eine sehr gemeinsame Merkmale. Wer einen Computer sehr viel von ihr profitiert werden verwendet. Diese wurde entwickelt, von mir und ein sehr enger Freund von mir Rakesh . Unten finden Sie eine Demo-graphische Benutzeroberfläche, die wie die Software aussieht und wie der Benutzer kann mit ihr zu interagieren zeigt. Die wichtigsten Tasten in dieser Demo-GUI sind interaktiv und können Sie auf sie klicken, um mehr über die verschiedenen Funktionen kennen.
Einmal installiert die Anwendung minimiert sich die Taskleiste. Wenn Sie darauf klicken, ist das Hauptfenster maximiert und die Notfall-Notizblock im Fokus automatisch. Ich implementiert diese Funktion, weil viele Male habe ich etwas zu kritzeln benötigt und mussten mit dem Notepad. Also dachte ich, das würde schneller und bequemer für mich. Nach dem Schreiben in der Notfall-Editor können Sie es überall sparen wollen. Die Anwendung ist noch in der Beta-Phase. Sie können herunterladen und check it out. Vergessen Sie nicht, einen Kommentar!
Anforderungen:
Microsoft. NET Framework Version 2.0
Unterstützte Betriebssysteme:
Derzeit nur in Microsoft Windows XP und Windows-Betriebssystemen unterstützt vor diesem.
Tags: Anwendung , Manager , PKA
Posted in Blog , Projekte | 8 Kommentare »
Der Launch!
Donnerstag, 24 September, 2009
Code-pal begann als eine Gesellschaft, die PSD zu XHTML / CSS-Dienste bereitstellt. Aber seit unserem ersten Start im Januar 2009 haben wir mit der Zeit gewachsen und erweitert unser Leistungsspektrum. Die vorherige Version des Code-pal war eine sehr dunkle thematische Website und war mehr ein Spaß Website anstatt ein professionelles. Es gab viele Nachteile der früheren Version. Um nur einige zu nennen, es war eine statische Website und unsere Arbeit als Erfahrung wuchs, war es eine sehr zeitaufwendige Aufgabe, unser Portfolio in regelmäßigen Abständen zu aktualisieren. Der größte Nachteil war, dass es keinen Blog. Das Hauptziel hinter Neugestaltung der Website war es, eine Blogging-System innerhalb der Website, wo wir teilen können integriert werden, lernen im Grunde mit der Web-Community zu interagieren.
Dies ist, wie die Homepage unseres vorherigen Seite aussah:
Die wichtigsten Merkmale dieser neuen Website sind wie folgt:
Die Startseite besteht aus einem riesigen Portfolio-Viewer, Bestellformular, ein Futtermittel, was unsere Kunden über uns sagen und eine aktuelle Blog-post-Sektion. Das Portfolio ist eine einfache Seite, der alle Arbeit, die wir bis jetzt einige Details über jedes von ihnen getan haben. Die Service-Seite anwirbt alle Dienstleistungen, die wir gegenwärtig sind.
In dem Teilprojekt werden wir auf alle Projekte und Forschungsarbeiten haben wir nach be-oder Display verfolgen. Die Download-Sektion wird von einer Vielzahl von Werbegeschenken, die Sie herunterladen und gemeinsam nutzen können bestehen. Zurzeit sind wir durch kostenlose XHTML / CSS-Templates und später werden wir erhöhen unsere Bestände mit verschiedenen Stoffen wie WordPress / Joomla Themen zu starten. Wir arbeiten auch auf einem Windows-Desktop-Anwendung zur Zeit und wird bald lanciert eine kostenlose Version der es auch.
Der Blog-Bereich wird über alle Tutorials werden, Artikel, News und stopft. Zunächst werden wir mit dem Schreiben beginnen über Codier-und Web-Entwicklung nur. Es gibt Unmengen von awesome Web-Entwicklung Gemeinden da draußen, und wir wollen in Tonhöhe mit dem, was wir können, um diese Web-Community wachsen und gedeihen zu helfen. Dies kann nur gelingen, wenn wir die gleiche Liebe, Unterstützung und Ermutigung von Ihnen zu erhalten.
Die Homepage der neuen Website sieht wie folgt aus:
Schon vor der offiziellen Lancierung der Website haben wir zwei Vorlagen zum Download bereitgestellt. In den nächsten Tagen finden Sie ständig einige Änderungen hier und da könnten. Wir sind noch im Prozess der Vollendung des gesamten Design-Prozess und zur Festsetzung stopft hier und dort. Bitte zögern Sie auf unserer Website zu überprüfen. Zögern Sie nicht zu kommentieren, wenn Sie wie die Neugestaltung oder sogar, wenn man hasst es. Natürlich lassen Sie uns wissen den Grund dafür zu. Wir heißen Sie herzlich willkommen Vorschläge, wie man es weiter zu verbessern.
-Sumeet Chawla
Ihre freundliche Nachbarschaft Coder.
Tags: Launch , News
Posted in Blog , News | 2 Kommentare »
Business Template
Dienstag, 1 September, 2009
Business-Template ist eine kostenlose PSD Template designed by Dellustrations und steht zum Download unter DelliBlog . Wir verwandeln dieses PSD-Vorlage in valides XHTML / CSS-Code für Leute, die den Code zusammen mit der PSD-Vorlage herunterladen möchten.
Tags: CSS , Free , PSD , Template , xHTML
Posted in Blog , Downloads , Portfolio | 6 Kommentare »
Blättern
- Die 'Select' Problem nach der Verwendung jqTransform und seine Lösung 37 Kommentar (e)
- Wie Code eine Überlappung Tabbed Hauptmenü 34 Kommentar (e)
- Spice Up Your Twitter Feed Display Box mit CSS 14 Kommentar (e)
- Personal Computer Assistant 8 Kommentar (e)
- Business Template 6 Kommentar (e)
- Orange 4 Kommentar (e)
- Listify, Raw Convert Text To HTML Elements 4 Kommentar (e)
