Share
In diesem Lernprogramm werden wir das Front-End unserer Web-App beenden, damit alles perfekt aussieht und auf allen Bildschirmgrößen gut funktioniert. Das letzte Mal haben wir abgerundet, indem wir die Meldungsfelder gestylt haben und nur noch den Inhalt übrig haben. Sollen wir gleich eintauchen? OK!
Möglicherweise müssen Sie die vorherigen Teile dieses Tutorials nachholen. In diesem Fall gilt Folgendes:
.Nachrichteninhalt Breite: 100%; Farbe: dunkler ($ grau, 30%); @media screen und (min-width: $ break-two) width: 75%; schweben rechts; @media screen und (min-width: $ break-three) width: 85%; @media screen und (min-width: $ break-four) width: 75%;
Die Erklärungen für Nachrichteninhalt Stellen Sie sicher, dass sich die Breite bei der Größenänderung des Browsers verhält. Für kleine Bildschirme muss er 100% breit sein, damit er sich gut unter dem Bild befindet. Sobald wir unsere getroffen haben $ Break-Two width müssen wir dann den Inhalt nach rechts verschieben und die Breite ein wenig ziehen, um dies auszugleichen.
Die anderen Unterbrechungspunkte hier stellen nur sicher, dass die Breite im Verhältnis zur Browserbreite gut skaliert wird, also auf einer tabletähnlichen Auflösung Nachrichtenbox ist aber immer noch vertikal gestapelt Nachrichteninhalt schwimmt in ihm, was bedeutet, dass die Breite von 75% wahrscheinlich nicht breit genug ist. Wir ziehen es wieder auf 75% zurück, sobald wir auf Desktop-basierte Größen zurückgreifen Nachrichtenbox schwebend und schmaler.
a color: $ green; &: hover color: $ red; h3, p, div margin: 0; h3 font-family: $ title-font; Schriftgröße: 200%; Schriftgewicht: 400; Buchstabenabstand: -0,02em; Farbe: $ schwarz; p color: $ red; Schriftgewicht: 600; div margin-top: $ margin; Überlauf versteckt; -ms-text-overflow: Auslassungspunkte; -o-Text-Überlauf: Ellipsen; Textüberlauf: Ellipsen;
Die nächsten Styles hier sind sehr einfach. Wir geben nur irgendwelche Links ein $ grün Farbe mit einem $ rot hover-Status und überschreibt alle Ränder, die in den darin enthaltenen Elementen h3, p und div festgelegt sind Nachrichteninhalt. Etwas ausgefallener sind die einzelnen Styles für die Elemente h3, p und div. Das h3 ist eingestellt $ title-font und hat einige Buchstaben-Abstand Stellen Sie den Abstand so ein, dass er etwas näher an das Design passt. Das div Bei Tagstilen wird der Inhalt beibehalten. Wir stellen also sicher, dass Überlauf ist versteckt und wenn es einen Überlauf gibt, zeigen wir ein Ellipse um anzuzeigen, dass es mehr Text gibt. Diese Art von Dingen kann mit serverseitigem Code ausgeführt werden (und würde es wahrscheinlich auch sein), aber es ist schön, sie hier für die Zwecke dieses Tutorials in CSS aufzunehmen.
Speichern Sie Ihre Arbeit und gehen Sie weiter zum Browser…
Das sieht toll aus! Wir haben drei unterschiedliche Layouts, die alle von den oben genannten einfachen Stilen gesteuert werden. Damit ist das CSS für die Nachrichtenbox Jetzt müssen wir nur noch fünfmal das Markup kopieren und den Inhalt basierend auf dem Design ändern. Wenn diese App wirklich funktionieren würde, müssten wir dies nicht tun, aber für dieses Tutorial muss das! Nehmen Sie sich fünf Minuten Zeit, um den Code für jede Box zu kopieren, einzufügen und zu ändern.
Werfen wir einen kurzen Blick in den Browser, um zu überprüfen, ob unsere Stile perfekt funktionieren, wenn wir mehr als einen haben Nachrichtenbox…
Wunderschönen! Unsere Web-App nimmt jetzt definitiv Gestalt an und unsere Message-Boxen funktionieren bei allen Browsergrößen wie vorgesehen.
Wir haben jetzt den Großteil unserer Web-App erobert, aber es gibt noch einen wichtigen Abschnitt: die Fußzeile. Dieser Teil unserer App ist wichtig, da er die Stelle enthält, an der ein Benutzer seine Nachricht eingeben oder posten kann. Es gibt einige ziemlich knifflige Teile, also fangen wir an!
Zuerst schreiben wir das folgende Markup in unsere index.html-Datei:
Diese Fußzeile enthält einige Abschnitte. Der Hauptschwerpunkt ist das Formular in der Mitte, das, obwohl es hier nicht unbedingt erforderlich ist, es dem Benutzer ermöglicht, seine Nachricht zu posten. Das social-btns erfordert einige Layoutänderungen, und der gesamte Inhalt der Fußzeile muss auf dem Bildschirm zentriert sein. Fangen wir oben an und gehen Sie direkt in das CSS…
Fußzeile Auffüllen: $ Auffüllen * 4; Text ausrichten: Mitte; Hintergrund: $ weiß; h4 Margin-Top: 0px; Schriftfamilie: $ title-font; Schriftgröße: 26px; Schriftgewicht: 400; Farbe: $ dunkelgrau;
Zuerst sollten wir ein paar setzen Polsterung auf der Fußzeile alles schön von den kanten wegdrücken. Damit alles auf dem Bildschirm zentriert ist, setzen wir einfach die Textausrichtung Eigenschaft zum Zentrum. Die Stile für die Tagline / Überschrift hier sind ziemlich einfach und ähneln sehr stark dem, was wir zuvor für einen Titel gemacht haben. Lass uns das im Browser überprüfen!
Es ist ein guter Anfang, aber wir haben noch einen Weg vor uns! Lassen Sie uns in unserer Sass-Datei weitermachen.
.Verbindungsbox Breite: 100%; Marge: 0 auto; @media screen und (min-width: $ break-three) width: 525px; .connected-as, .connect-message background: aufhellen ($ grey, 4%);
Wie viele unserer Elemente, die Verbindungsbox sollte für kleinere Bildschirme 100% breit sein. Es sollte dann bei uns wechseln $ Break-Three Punkt auf die Breite, die in der Zeichnung zu sehen ist 525px. Wir legen dann die Hintergrundfarbe des fest verbunden als und Verbindungsnachricht zu einer hellgrauen Farbe.
.verbunden als Rand oben links Radius: 5px; Rand oben rechts Radius: 5px; Rand unten: 1px festes $ weiß; Text ausrichten: links; Auffüllen: $ Auffüllen / 2 $ Auffüllen * 2; .connected-image width: 30px; Höhe: 30px; Grenzradius: 50%; Schwimmer: links; Margin-Right: $ Marge / 2; span float: left; Höhe: 30px; Zeilenhöhe: 30px; Farbe: $ dunkelgrau; .disconnect position: absolut; oben: -10px; rechts: -10px; Auffüllen: $ Auffüllen / 2 $ Auffüllen; Rand oben: 3px; Grenzradius: 20px; Hintergrund: $ weiß; Textdekoration: keine; Farbe: $ dunkelgrau; Text-Transformation: Großbuchstaben; Schriftgröße: 80%; &: hover background: $ red; Farbe: $ weiß; @media screen und (min-width: $ break-two) position: static; schweben rechts;
Dieser faire Teil von CSS ist für den oberen Bereich von Verbindungsbox. Der erste Schritt ist die Abrundung der oberen rechten und linken Seite verbunden als. Wir möchten auch eine leichte Trennung zwischen dieser Box und dem folgenden Abschnitt, also einfach 1px festes $ weiß Grenze wird den Trick gut machen. Zum Schluss brauchen wir noch etwas Polsterung, aber links und rechts brauchen wir mehr als oben und unten, damit wir die Dinge schön und ordentlich halten $ Auffüllen variabel und für oben und unten durch zwei dividieren und für links und rechts mit zwei multiplizieren. Dies ist ein großartiges Beispiel dafür, wo die Veränderung unseres variablen Wertes alles in einem guten Verhältnis hält.
Die nächsten beiden Deklarationen steuern das Twitter-Profilbild der verbundenen Benutzer und ihren @Benutzernamen. Um den Standard zu halten, stellen wir die Breite und Höhe des Bildes im CSS so ein, dass wir wissen, dass es immer ein Quadrat der richtigen Größe sein wird. Damit es als Kreis erscheint, wenden Sie einfach ein an Grenzradius von 50% dazu. Sowohl das Profilbild als auch @Benutzername sollten links verschoben werden, und wir sollten dem @Benutzern einen Spielraum geben, um ihn vom Profilbild wegzuschieben.
Das trennen Button hat ein paar verschiedene Dinge. Bei Auflösungen mit kleinem Bildschirm benötigen wir diese Schaltfläche, um den anderen Text innerhalb dieses Feldes zu umgehen. Ich entschied mich daher für eine gute Option, sie direkt über dem Container zu positionieren. Eine Position von -10px für oben und rechts ist gut. Vielleicht möchten Sie damit herumspielen, wenn Sie der Meinung sind, dass es besser platziert werden könnte. Die anderen Stile hier steuern den Look mit einem einfachen schweben Zustand hinzufügen ein schönes Fett $ rot Farbe, um die Trennungsaktion zu betonen. Das eine bisschen Reaktionsschnelle hier wird den Knopf einfach in den Dokumentenfluss zurückwerfen und nach rechts schweben lassen, so dass er sich gegenüber den Twitter-Details befindet. Dies wird für alles bei und über uns geschehen $ Break-Two Punkt.
Speichern, Speichern, Speichern! Es ist Zeit, noch einmal einen Blick darauf zu werfen:
Gut aussehen! Wir stehen kurz davor, dies zu beenden. Als nächstes ist der Meldungsbereich.
.Verbindungsnachricht Rand unten links Radius: 5px; rechts unten rechts: 5px; Textfeld border: none; Hintergrund: transparent; Breite: 100%; Höhe: 130px; Auffüllen: $ Auffüllen * 2; -webkit-Übergang: Box-Schatten 0.4s Leichtigkeit; -Moz-Übergang: Box-Schatten 0.4s Leichtigkeit; -o-Übergang: Box-Schatten 0.4s Leichtigkeit; -ms-Übergang: Box-Schatten 0.4s Leichtigkeit; Übergang: Box-Schatten 0.4s Leichtigkeit; &: Fokus Gliederung: keine; -webkit-box-shadow: Einfügung von 0px 0px 20px dunkler ($ grau, 10%); Box-Schatten: Einfügung 0px 0px 20px dunkler ($ grau, 10%); -webkit-Übergang: Box-Schatten 0.4s Leichtigkeit; -Moz-Übergang: Box-Schatten 0.4s Leichtigkeit; -o-Übergang: Box-Schatten 0.4s Leichtigkeit; -ms-Übergang: Box-Schatten 0.4s Leichtigkeit; Übergang: Box-Schatten 0.4s Leichtigkeit;
Dieser Block sollte nach dem verbunden als Block, aber immer noch im Gesamtbild Fußzeile Erklärungen.
Das Verbindungsnachricht Die Box hat abgerundete Ecken links und rechts, um das Erscheinungsbild des Fensters zu vervollständigen Gesamtbehälter abgerundete Ecken haben. Der Textbereich selbst muss definitiv etwas gestaltet werden, da die Browser-Standardeinstellungen ziemlich hässlich sind. Diese Stile sind ziemlich einfach, aber Sie können sehen, dass wir eine CSS-Transition für hinzufügen Box Schatten. Das Design zeigte nicht was für ein Fokus state sollte so aussehen, also entschied ich mich, einen subtilen Schatten in das Innere der Box einblenden zu lassen. Sie erlischt dann, wenn der Fokus verloren geht.
Lassen Sie uns es in Aktion sehen, sollen wir?
Ich finde das sieht gut aus! Der Box-Schatten ist möglicherweise nicht nach Ihrem Geschmack, also spielen Sie damit herum, um etwas zu bekommen, von dem Sie glauben, dass es richtig ist.
.post-btn Breite: 100%; Text ausrichten: Mitte; Auffüllen: $ Auffüllen * 2; Margin-Top: $ Marge * 2; Hintergrund: $ grün; Farbe: $ weiß; Schriftgewicht: 500; Grenze: keine; Grenzradius: 5px; -webkit-Übergang: alle 0.4s Leichtigkeit; -Moz-Übergang: alle 0.4s Leichtigkeit; -o-Übergang: alle 0.4s Leichtigkeit; -ms-Übergang: alle 0.4s Leichtigkeit; Übergang: alle 0.4s Leichtigkeit; &: hover hintergrund: aufhellen ($ grün, 10%); -webkit-Übergang: alle 0.4s Leichtigkeit; -Moz-Übergang: alle 0.4s Leichtigkeit; -o-Übergang: alle 0.4s Leichtigkeit; -ms-Übergang: alle 0.4s Leichtigkeit; Übergang: alle 0.4s Leichtigkeit;
Das alles wichtig Post 'Danke' Taste! Ganz einfache Stile hier. Die Schaltfläche sollte immer nur die Breite des Containers ausfüllen. Es sollte auch etwas aus dem Nachrichtenbereich weggedrückt werden, so manche Rand oben hilft uns hier Wir haben eine andere Übergangsdeklaration, aber diesmal ist es eingestellt alles um jede Eigenschaft mit einer Wertänderung zu animieren, um alles glatt zu halten. Dies bedeutet auch, dass wir in Zukunft weitere Stile hinzufügen können, z Farbe Änderung beim Schweben und alles wird noch animiert.
Speichern Sie die Datei und schauen Sie noch einmal nach:
Schön. Genau das wollen wir. Zeit, diese Social Media-Links zu gestalten.
.Social-Buttons padding-left: 0px; Margin-Top: $ Marge * 2; @media screen und (min-width: $ break-three) padding: $ padding * 3 0 $ padding * 3 117px; Rand oben: 0px; .social-btn padding: $ padding / 2 14px; Breite: 100%; Bildschirmsperre; Marge: $ Marge / 2 0; Grenzradius: 20px; Text ausrichten: Mitte; Farbe: $ weiß; Textdekoration: keine; Text-Transformation: Großbuchstaben; Schriftgröße: 70%; @media screen und (min-width: $ break-three) float: left; Marge: $ Marge / 2; Auffüllen: $ Auffüllen / 2 $ Auffüllen * 2; Breite: Auto; .twitter background: # 00acee; &: hover Hintergrund: Aufhellen (# 00acee, 10%); .facebook background: # 3b5998; &: hover Hintergrund: Aufhellen (# 3b5998, 10%);
Dieser Code sollte in die Fußzeile Block in unserer Sass-Datei. Die Idee mit diesen Schaltflächen ist, dass sie zu 100% breit und bei mobilen / Tablet-Auflösungen vertikal gestapelt sind. Wenn Sie dann die Skala zum Desktop hochschieben, sollten sie zum Design passen. Die Medienabfrage für die soziale Knöpfe Um ein "zentriertes" Betrachten der Desktop-Größen zu erreichen, waren einige Versuche erforderlich. Der Wert von 117px Für die linke Polsterung war der Punkt, an dem ich das gewünschte Ergebnis gefunden habe.
Jeder social-btn hat einige einfache Stile, um das Erscheinungsbild der Basis festzulegen. Wir legen dann die Stile für jede Schaltfläche fest. In dieser App ist es nur ein Hintergrundfarbe Unterschied. Beachten Sie hier, dass ich den Hex-Wert und keine Sass-Variable verwendet habe. Es gibt keinen wirklichen Grund dafür, denn dies ist der einzige Ort, an dem diese Farben verwendet werden. Daher wäre das Ändern dieser Farben kein großes Problem. Wenn wir die sozialen Verbindungen an anderer Stelle hätten, hätte ich sie definitiv als Variablen eingerichtet. Beide Buttons haben eine etwas hellere Version ihres Hintergrunds schweben.
Bevor wir einen Blick darauf werfen, können wir unseren finalen Style-Block genauso gut einsetzen:
.Copyright Schriftgröße: 90%; Farbe: $ dunkelgrau; @media screen und (min-width: $ break-three) Schriftgröße: 100%
Wie der Name schon sagt, kontrolliert dieser Block unser kleines Copyright-Tag in der Fußzeile. Die Schriftgröße reagiert hier auf Änderungen der Browsergröße und zeigt 100% um $ Break-Three.
Speichern Sie und sehen Sie sich unser Meisterwerk an!
Nett! Alles sieht großartig aus und das rundet unser Christmas Web App Interface ab!
Dies ist ein stark saisonales Thema, basierend auf einem Weihnachts- und Neujahrskonzept. Mit ein paar kleinen Änderungen können Sie es leicht an Ihre Bedürfnisse anpassen, zum Beispiel:
Ich hoffe wirklich, dass es Ihnen Spaß gemacht hat, mit mir diese Web-App durchzuarbeiten. Es war ein lustiges Projekt zu bauen und ich bin froh, dass ich meine Techniken beim Bau teilen konnte. Der Quellcode ist immer über die Download-Links verfügbar. Zögern Sie also nicht, in den Kommentaren Ihre Gedanken zu lesen oder zu erfahren, ob jemand von Ihnen etwas verbessern könnte.
Danke an Tomas für das erste Design und danke fürs Lesen und Mitmachen.
Accentsconagua