Codepal

Posts Tagged 'Wie'

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 nutzten @-webkit-Keyframes welchen Browsern 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 »

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 | 2 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 Schaukarton interaktive, 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 Ressourcen, 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"> Startseite </ 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 für jede 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 »