Share
Heute werden wir die Merry Christmas Web App-Oberfläche erstellen. ein Photoshop-Layout aus einem früheren Tutorial von Tomas Laurinavicius.
Dies wird ein zweiteiliges Tutorial sein. Wir werden einige grundlegende Reaktionstechniken und progressiv verbesserte Elemente verwenden, die durch die Verwendung von SASS ein wenig einfacher werden. In diesem Tutorial wird nicht erläutert, wie die App mit Twitter funktioniert, sondern es wird die Grundlage dafür schaffen, die Entwicklung weiter voranzutreiben.
Weitere Informationen zu SASS finden Sie in unserer Screencast-Serie Mastering Sass oder auf sass-lang.com. Ich bin auf einem Mac, also verwende ich das ausgezeichnete CodeKit, um mein SASS-Stylesheet anzusehen und zu kompilieren. Es gibt viele Alternativen zu CodeKit wie Koala und Scout. Sie bieten fast alle die gleiche Funktionalität und sind von unschätzbarem Wert, wenn Sie nicht mit der Kommandozeile herumspielen wollen.
Also, ohne weiteres, beginnen wir mit dem Erstellen der Seite?
In einem ersten Schritt müssen Sie alle in unserer PSD benötigten Slices erstellen und in Bilder exportieren.
Für dieses Design benötigen wir nur vier Bilder, die alle im oberen Teil enthalten sind.
Wir haben den großen Hintergrund, den oberen Weihnachtsbaum, den weißen Weihnachtsbaum und den unteren grünen Weihnachtsbaum. Mit dem Slice-Werkzeug in Photoshop können wir jedes Element, das wir exportieren möchten, mit einem Rahmen versehen. Um das Hintergrundbild selbst zu erhalten, müssen Sie die darüber liegenden Ebenen ausblenden, bevor Sie für Web speichern, um zu vermeiden, dass diese Elemente Teil des Bildes sind. Wir können alle Layer mit Ausnahme der gewünschten Ebene schnell verbergen, indem Sie sie halten ALT / Option und klicken Sie auf das Sichtbarkeitssymbol neben der Ebene. Wenn Sie dies in einer Gruppe von Ebenen in Photoshop ausführen, wird nur der Inhalt der Gruppe angezeigt und die bereits ausgeblendeten Ebenen werden nicht beeinflusst.
Sobald wir unsere Slices haben, können wir das "Save for Web" -Dialogfeld von Photoshop verwenden, um unsere Bilder an einem sicheren Ort zu exportieren. Schneller Tipp: Beschleunigen Sie Ihren Workflow mit Photoshop-Aktionen, um weitere Informationen zum Schneiden in Photoshop zu erhalten.
Der nächste Schritt ist das Sortieren unserer Dateien und Ordner.
Um mit der Arbeit an der Webseite beginnen zu können, benötigen wir einige Dateien und Ordner. Wir brauchen hier nur eine Grundausstattung, daher sollte die folgende Struktur dies abdecken.
Wir müssen nun die zuvor exportierten Bilder in den Bilderordner kopieren und eine erstellen style.scss Datei für alle unsere SASS-Erklärungen.
Merken: Wenn Sie eine Begleit-App wie CodeKit verwenden, überprüfen Sie den Ausgabepfad Ihrer kompilierten CSS-Datei, damit Sie sicher sind, dass sie an der richtigen Stelle angezeigt wird.
Wenn Sie Sass und in der Tat einfaches CSS verwenden, haben Sie die Möglichkeit, Ihr Stylesheet in kleinere Blöcke aufzuteilen und alle in eine Datei zu integrieren. Zum Beispiel könnten Sie eine haben _variables.scss "partiell", um alle Variablendeklarationen zu speichern, und a _functions.scss "partiell", um alle von Ihnen erstellten Mixins zu halten. Die Welt ist wirklich deine Auster hier, aber für dieses Projekt ist es einfach genug, nur eine Sass-Datei zu haben, also werden wir das tun.
Ich füge auch gerne eine Kopie von Modernizr.js bei, damit wir bei Bedarf unterschiedliche Browserfunktionen erkennen können. Der hier verwendete Build enthält zahlreiche CSS3- und HTML5-Funktionen.
Wir müssen auch die sechs Benutzeravatare einschließen, die wir in den Tweets sehen können. Diese sind in ihrer ursprünglichen Form bei uifaces.com zu finden, eine großartige Ressource, wenn wir echte Gesichter in einem Design verwenden möchten. Laden Sie die gewünschten sechs Benutzer-Avatare herunter und legen Sie sie in einem Verzeichnis ab Gesichter in der Bilder Verzeichnis.
Die letzte hinzuzufügende Datei ist normalize.css. Dies ist einer der besten CSS-Resets, die heutzutage verfügbar sind, und wird uns in allen Browsern eine gute Basis bieten. Laden Sie das neueste herunter und fügen Sie es dem hinzu css Verzeichnis.
Als nächstes werden wir uns öffnen index.html und fügen Sie das grundlegende HTML-Markup hinzu, das wir benötigen. Das Folgende sollte uns gut anfangen.
Das Wichtigste hierbei ist das Viewport-Meta-Tag, mit dem mobile Browser die korrekte anfängliche Skala von 1,0 verwenden müssen, was praktisch 100% ist. Lesen Sie unbedingt den Schnelltipp: Vergessen Sie nicht das Viewport-Meta-Tag für das Lowdown des Viewport-Meta-Tags.
Eines der besten Dinge an Sass ist meiner Meinung nach, Variablen. Wir werden eine Reihe von Variablen in unserem Sass-Stylesheet verwenden, um Informationen wie Schriftfamilie, Schriftgröße und Farben zu speichern. Überprüfen Sie Folgendes, um genau zu erfahren, was Sie einrichten möchten.
$ black: # 000; $ white: #FFF; $ grau: # e9e9e9; $ dunkelgrau: # 727272; $ red: # cf2f32; $ grün: # 42a747; $ padding: 10px; $ margin: 10px; $ Hauptbreite: 1000px; $ font-size: 14px; $ font-family: 'Open Sans', Serifenlose; $ title-font: 'Josefin Slab', Serife;
Im oberen Abschnitt werden die im Design verwendeten Farben aufgelistet. Diese können einfach aus Photoshop heraus farblich ausgewählt werden. Ich füge immer ein $ weiß und $ schwarz variabel, um Graustufen bei Bedarf einfach zu erstellen und zu steuern. Wir haben auch einige Standardabstände für Auffüllen und Rand, die Breite des Hauptinhaltsbereichs und einige Informationen zur Schriftart. Sie können hier feststellen, dass wir "Josefin Slab" und nicht "Klinic Slab" verwenden. Josefin Slab ist eine nahe Alternative zu Klinic und kann über Google Fonts im Web verwendet werden. Das heißt, wir können es einfach mit einem einfachen hier einfügen @einführen Aussage. Dasselbe gilt für die andere verwendete Schriftart "Open Sans"..
Die nächsten vier Zeilen behandeln die verschiedenen reagierenden Bruchpunkte, für die ich mich entschieden habe. Wir werden a adoptieren zuerst mobil Annäherung hier, so dass unsere Bruchstellen das widerspiegeln. Die tatsächlichen Pixelwerte waren mehr Versuch und Irrtum als alles andere, aber ich habe die harte Arbeit geleistet, damit Sie nicht müssen!
$ break-four: 1050px; $ break-three: 760px; $ break-two: 520px; $ break-one: 360px;
Neben den Google-Schriftartenimporten haben wir noch einen weiteren @einführen um die normalize.css-Datei einzubringen, die wir zuvor heruntergeladen haben.
Accentsconagua
@import url ("http://fonts.googleapis.com/css?family=Open+Sans:300italic.400italic.600italic700italic.400.600.700.300"); @import url ("http://fonts.googleapis.com/css?family=Josefin+Slab:300,400,600,700"); @import url ('normalize.css'); Der nächste Schritt besteht darin, einige eigene Reset-Stile hinzuzufügen.
* position: relativ; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; -ms-box-size: border-box; Box-Dimensionierung: Border-Box; body margin: 0; Polsterung: 0; Schriftfamilie: $ Schriftfamilie; Schriftgröße: $ Schriftgröße; Überlauf-y: scrollen; Überlauf-x: ausgeblendet;
Ich setze gerne die Position von allem auf relativ , Nur um sicher zu sein, also wenn wir absolut positionierte Elemente verwenden, wissen wir, dass sie auf ihren Eltern basieren. Wir können diesen Wert dann zurücksetzen pro Element wenn wir müssen.
Wir sollten auch das einstellen Box-Sizing Eigenschaft für alle Elemente zu Border-Box. Dies ist besonders nützlich, wenn Sie mit responsiven Elementen arbeiten, da für jede prozentuale Breite ein Auffüllsatz enthalten ist. Dies bedeutet, dass Sie zwei Elemente mit jeweils 50% Breite nebeneinander schweben und die Polsterung an beiden Elementen anpassen können, da das Layout nicht beschädigt wird. Das ist eine sehr nützliche CSS-Eigenschaft!
Als nächstes müssen wir nur einige Standardeinstellungen für die Karosserie. Es ist nichts zu aufregend, außer dass wir Sass-Variablen zum ersten Mal verwenden, ja! Ok, wenn alles richtig eingestellt ist, speichern Sie die style.scss Die Datei generiert das eigentliche Stylesheet, zu dem wir einen Link erstellen müssen.
Zurück in unserem index.html Datei sollten wir den Link zu unserer CSS und Modernizr hinzufügen. Es kann auch schön sein, dieser App einen Titel zu geben…
2013 war großartig | Frohe Weihnachten und ein gutes neues Jahr!
Damit können wir unsere retten index.html Datei und betrachten Sie es im Browser. Machen Sie sich keine Sorgen, wenn Sie einen leeren weißen Bildschirm sehen. Genau so sollte es im Moment sein. Die nächste Stufe ist, es mit etwas HTML-Markup zu verfeinern.
Zuerst die Codierung der Kopfzeile. Dafür verwenden wir das HTML5-Element Header. In der index.html finde das Header und fügen Sie unser Header-Hintergrundbild hinzu…
Wir fügen das Hintergrundbild als ein img Element hier, so können wir es leicht skalieren, wenn der Browser die Größe ändert. Dies ist bei CSS-Hintergrundbildern möglich (using Hintergrundgröße) aber diese Methode hat noch nie für jeden Browser zuverlässig funktioniert und kann sich verzögern, da der Browser immer wieder alles neu streichen muss. Geben Sie dem Bild einen Klassennamen, damit wir es in unserer Sass-Datei referenzieren können.
Als nächstes schreiben wir den inneren Abschnitt der Kopfzeile. Hier werden die Weihnachtsbäume, der Text und der Twitter-Connect-Button angezeigt.
Verbinden Sie sich mit Twitter
2013 war großartig. Zeit zu sagen 'Danke dir'
und wünsche deinen Freunden a
Fröhliche Weihnachten!
Hier ist ziemlich viel los. Wir haben…
Header-Inner Titel ElementeBeeindruckend! Auf diese Weise erscheint es in einem kleinen Bereich wie viel. Damit ist aber unsere Header-Codierung abgeschlossen! Wenn Sie die Datei speichern und in einem Browser anzeigen, sieht sie folgendermaßen aus.
Nett! Es sieht jedoch nicht nach viel aus, also ist es unsere nächste Aufgabe, einige Sass-Regeln festzulegen und den Header so aussehen zu lassen, dass er genau wie das Design aussieht. Wechseln Sie zum Stylesheet, um zu beginnen.
Die erste Gruppe von Styles, die Sie hinzufügen möchten, sieht so aus ...
Kopfzeile Breite: 100%; Höhe: 390px; Farbe: $ weiß; Hintergrund: $ grau; @media screen und (min-width: $ break-four) Höhe: 799px; header .header-image position: absolut; oben: 0px; links: 0px; Breite: 100%; Höhe: Auto; Max-Höhe: 799px; min-Höhe: 400px; .header-inner width: 90%; Marge: 0 auto; @media screen und (min-width: $ break-four) width: 60%; .titles padding-top: 40px;
Hier haben wir einige Standardstile für unsere Header. Wir müssen hier auch unser erstes ansprechendes Sass verwenden, um sicherzustellen, dass die Höhe zunimmt, wenn der Browser breiter wird. Ich denke, dass Sass hier wirklich glänzt, da es uns die Möglichkeit gibt, Medienabfragen zu verwenden, die direkt unter dem Element verschachtelt sind, auf das sie wirken sollen. Dies beschleunigt den Zeitaufwand für das Hinzufügen von Responsive-Deklarationen erheblich. Sie werden feststellen, dass wir auch unsere vierte Haltepunktvariable verwenden, die eine Größe der Desktopgröße angibt und dem Browser mitteilt, die Höhe zu ändern, wenn die minimale Breite des Fensters dem Wert entspricht $ Break-Four ist.
Hier müssen wir das Header-Image erstellen absolut positioniert nach oben links. Wir sollten dann sicherstellen, dass dieses Bild mit dem Browser wächst und schrumpft. Wenn Sie also die Breite auf 100% setzen, gilt dies für die Breite. Die nächsten drei Eigenschaften legen fest, wie die Höhe behandelt werden soll. Eine Höhe von Auto ermöglicht es dem Bild, das Seitenverhältnis beizubehalten, wenn sich seine Breite ändert. Wir möchten nicht, dass es über die tatsächliche Höhe hinaus vergrößert wird maximale Höhe Eigenschaft sorgt dafür. Ebenso die min-Höhe Diese Eigenschaft verhindert, dass das Bild kleiner als 400px wird.
Unsere Header-Inner div ist für die Aufbewahrung aller unserer Titel und Weihnachtsbaumbilder verantwortlich. Das heißt, es muss zu jeder Zeit im Fenster zentriert sein. Unser Grundstil ist 90% breit, was sich hervorragend für mobile Geräte und Tablets eignet. Die Medienabfrage weist den Browser an, 60% Breite bei Desktopgrößen zu verwenden.
Schauen wir uns also mal den Browser an ...
Das ist der Desktop links und das Handy rechts. Beide sehen ziemlich ähnlich aus, aber wenn Sie die Browsergröße ändern, wird das angezeigt Innenheader ändert definitiv die Breite. Großartig! Lasst uns weitergehen. Der letzte Schritt im obigen Code besteht darin, dem Pads nur etwas Auffüllen hinzuzufügen .Titel div. Dadurch wird es vom oberen Rand des Fensters etwas nach unten gedrückt.
Unsere nächste Herausforderung ist der Top-Weihnachtsbaum. Wir werden die verwenden :Vor und :nach dem Pseudoelemente zum Erstellen der Sechseckform. Informationen zu Pseudoelementen finden Sie unter Erstellen von Symbolen mit einem einzelnen HTML-Element.
.header-inner .titles .xmas-tree-top position: absolut; Hintergrund: $ weiß; links: 50%; Rand links: -37,5px; oben: 30px; Auffüllen: $ Auffüllen / 2 $ Auffüllen * 2; Breite: 75px; @media screen und (min-width: $ break-four) margin-left: -58px; oben: 80px; Auffüllen: $ Auffüllen $ Auffüllen * 3,5; Breite: Auto; &: before content: ""; Position: absolut; links: 0px; Rand: 38px durchsichtig transparent; Rand unten: 20px festes $ weiß; oben: -58px; @media screen und (min-width: $ break-four) border: 63px solid transparent; Rand unten: 30px festes $ weiß; oben: -93px; &: after content: ""; Rand: 38px durchsichtig transparent; Bordürenoberseite: 20px durchgehend $ weiß; Position: absolut; unten: -58px; links: 0px; @media screen und (min-width: $ break-four) border: 63px solid transparent; Bordüre: 30px durchgehend weiß unten: -93px; img display: block; Breite: 100%; Max-Breite: 56px; Höhe: Auto;
Das sieht ziemlich kompliziert aus, ist aber eigentlich ganz einfach. Es gibt einiges, was Sass hier gebraucht, und viele unserer Variablen kommen zum Spielen. Das Weihnachtsbaum-Spitze element selbst ist absolut positioniert, um jederzeit in der Mitte zu sein. Dies wird erreicht mit…
links: 50%; Rand links: -37,5px; Breite: 75px;
Das Rand links ist die Hälfte der Breite des Elements, sodass das Element genau zentriert wird. Wir verwenden auch wieder eine einfache Medienabfrage für Desktop-Größen, um die Größe anzupassen Polsterung und das oberste Position.
Die nächsten zwei Teile sind die interessanten Teile! An erster Stelle steht der :Vor Element. Was wir mit diesem Element erstellen möchten, ist ein Dreieck, das auf der Weihnachtsbaumkiste sitzt. Wir werden eine Technik nutzen, die im Schnelltipp: Zeichnen und Verwenden von CSS-Dreiecken beschrieben wird. Auf einer einfachen Ebene müssen wir nur ein Element erstellen, dessen Rand die Breite hat, die wir benötigen. Um ehrlich zu sein, brauchte es ein bisschen Ausprobieren, um richtig zu werden, und dies wird wahrscheinlich bei jeder Verwendung dieser Technik der Fall sein, es sei denn, Sie erstellen ein gleichseitiges Dreieck. Die Werte im Code bilden das Dreieck, das wir benötigen, das leicht zusammengedrückt ist. Das oben Die Position wird berechnet, indem die beiden Grenzwerte addiert werden, da dies die tatsächliche Höhe unseres ist Pseudoelement.
Das :nach dem Das Element folgt weitgehend dem gleichen Muster, um das untere Dreieck zu erstellen. Der einzige Unterschied ist Rand oben eher, als Rand unten. Schließlich müssen wir einige Stile für das Weihnachtsbaumbild festlegen. Wir müssen sicherstellen, dass es 100% des übergeordneten Elements bis zu seiner tatsächlichen Breite ist. In diesem Fall sind das 56px. Die Höhe wird automatisch auf der aktuellen Breite basieren.
Puh! Das war viel zu merken. Speichern Sie alle Dateien und sehen Sie die Früchte Ihrer Arbeit im Browser…
Ausgezeichnet. Die Weihnachtsbaumkiste sieht fantastisch aus und skaliert mit dem Browser. Jetzt kümmern wir uns um diese Titel…
.title, .title-small, h1 text-align: center; Schriftgröße: 36px; Marge: 0; Schriftfamilie: $ title-font; Schriftgewicht: 300; Buchstabenabstand: -0,03em; .title margin-top: 60px; Schriftgröße: 200%; span display: block; @media screen und (min-width: $ break-four) margin-top: 200px; Schriftgröße: 300%; .titles .title-small margin: $ margin * 2 auto 0; Breite: 100%; Schriftgröße: 155%; &: before, &: after content: url (… /images/xmas-tree-white.png); Position: absolut; oben: 2px; &: before left: 0px; &: after right: 0px; @media screen und (min-width: $ break-one) Schriftgröße: 200%; Breite: 12em; .titel h1 text-transform: Großbuchstaben; Schriftgröße: 222%; Rand unten: 2px festes $ weiß; Breite: 9em; Marge: 20px Auto 0; span display: block; Rand unten: 3px; Rand unten: 2px festes $ weiß; @media screen und (min-width: $ break-two) Schriftgröße: 300%;
Hier ist nicht zu viel los. Die Medienabfrage nach .Titel stellt sicher, dass die Schriftgröße größer ist und der Abstand von oben bei Desktop-Fenstergrößen größer ist. Wir benutzen :Vor und :nach dem wieder Pseudo-Elemente, um die zwei weißen Weihnachtsbäume auf dem kleineren Titel anzuzeigen.
Eine andere Sache zu beachten ist die Verwendung von Breite: 12em in unserer Medienanfrage nach .Titel klein und auch für die h1. Das heißt, die Breite basiert auf der Schriftgröße dieses Elements und nicht auf der Breite des übergeordneten Elements. Weitere Informationen hierzu finden Sie in der Überschrift "Erm…" aus der Ems.
Speichern wir unsere Sass-Datei erneut und schauen wir uns an, was wir im Browser haben…
Das sieht schon viel besser aus! Die Titel sind alle gut skalierbar und können bei Bedarf verschoben werden. Wir haben zwei Elemente, die noch vor dem Abschluss des Headers stylen müssen. Vorwärts und aufwärts!
.header-inner .connect display: block; Breite: 195px; Höhe: 50px; Zeilenhöhe: 45px; Text ausrichten: Mitte; Grenzradius: 30px; Rand: 2px fest # c52f30; Farbe: $ rot; Marge: 30px auto 0; Textdekoration: keine; -Webkit-Übergang: Hintergrund 0.4s, Farbe 0.4s; -Moz-Übergang: Hintergrund 0.4s Leichtigkeit, Farbe 0.4s Leichtigkeit; -o-Übergang: Hintergrund 0,4s Leichtigkeit, Farbe 0,4s Leichtigkeit; -ms-Übergang: Hintergrund 0.4s Leichtigkeit, Farbe 0.4s Leichtigkeit; Übergang: Hintergrund 0.4s Leichtigkeit, Farbe 0.4s Leichtigkeit; &: hover background: $ red; Farbe: $ weiß; -Webkit-Übergang: Hintergrund 0.4s, Farbe 0.4s; -Moz-Übergang: Hintergrund 0.4s Leichtigkeit, Farbe 0.4s Leichtigkeit; -o-Übergang: Hintergrund 0,4s Leichtigkeit, Farbe 0,4s Leichtigkeit; -ms-Übergang: Hintergrund 0.4s Leichtigkeit, Farbe 0.4s Leichtigkeit; Übergang: Hintergrund 0.4s Leichtigkeit, Farbe 0.4s Leichtigkeit; .xmas-tree-bottom display: none; Marge: 30px auto 0; @media screen und (min-width: $ break-four) display: block;
Das erste, was Sie hier bemerken werden, ist die Verwendung von CSS3-Übergängen. Dies wird uns eine schöne Überblendung geben, wenn wir über den Twitter-Connect-Button fahren. Sie müssen den Übergang sowohl für den normalen als auch für den Hover-Status angeben, damit er ein- und ausgeblendet wird. Die anderen Stile für die Schaltfläche sind recht einfach und wir benötigen keine Medienabfragen, da sie klein genug sind, um in allen Browsergrößen gleich zu bleiben.
Zu guter Letzt ist der unterste Weihnachtsbaum. Ganz einfach, zentrieren Sie es auf dem Bildschirm und zeigen Sie es nur auf Desktop-basierten Größen an. Dies ist nur eine Entscheidung, die ich getroffen habe, ob der Baum auf mobilen Größen belassen oder versteckt werden sollte. Nachdem ich mit verschiedenen Positionen herumgespielt hatte, entschied ich, dass die Benutzererfahrung auf einem kleinen Bildschirm nicht hinzugefügt wurde.
Damit ist unser Header fertig! Speichern Sie alle Dateien und werfen Sie einen Blick darauf, wo wir jetzt sind…
Ah ja, das ist viel mehr so! Es ist ein tolles Gefühl, wenn sich die harte Arbeit auszahlt, nicht wahr? Unser Header sieht großartig aus und alles funktioniert, wie es sollte. Der nächste Abschnitt beginnt mit der Arbeit am Hauptinhalt.
Ok, unser erster Schritt beim Erstellen des Hauptinhalts ist der HTML-Code für die Tweet-Boxen. Es geht ein bisschen so:
22:13 - 28. November 2013
Jonny Livingston
@jonnylvng
Frohes Thanksgiving! Ich bin euch allen so dankbar. Danke für die Liebe und Unterstützung, die Sie mir geben.
Dieser Code sollte rein gehen div.content und wie Sie sehen, besteht es aus einigen Abschnitten. Wir haben das .Terminzeit Absatz außerhalb des .Botschaft div. Dieses Element enthält das Bild und den Nachrichteninhalt selbst. Das .Nachrichteninhalt div enthält die drei Informationsteile in verschiedenen HTML-Elementen. Dies bedeutet, dass keine Klassen erforderlich sind, um sie individuell zu gestalten. Wenn Sie die Datei speichern und im Browser suchen, sehen Sie Folgendes:
Wir brauchen auf jeden Fall ein paar Stile, damit das so aussieht, wie es sollte. Lassen Sie uns jetzt einen Blick darauf werfen.
.haupt hintergrund: $ grau; Inhalt Breite: 100%; Marge: 0 auto; @media screen und (min-width: $ break-four) width: $ main-width; .message-box width: 100%; Auffüllen: $ Auffüllen * 3 $ Auffüllen * 1,5; @media screen und (min-width: $ break-four) float: left; Breite: 50%;
Zunächst benötigen wir einige Basisstile für unsere Main Abschnitt und unsere Inhalt div. Machen Sie einfach den Hintergrund Main die graue Farbe aus unserer Variablen und die Breite von Inhalt bis 100%. Sie werden das sehen Spanne Der Stil wird hier verwendet, um das Element zu zentrieren, das nur dann zum Tragen kommt, wenn die Breite nicht 100% beträgt. Ich möchte es jedoch gerne hier einschließen, damit alle unsere reagierenden Haltepunkte es erben.
Das Nachrichtenbox selbst ist auch sehr einfach für mobile und Tablet-Layouts mit nur 100% Breite und etwas Polsterung. Unsere Medienabfragen werden sowohl bei Desktop-Größen als auch bei den Inhalt zum $ Hauptbreite Variable und die Nachrichtenbox nach links schweben und 50% der Inhalt div statt 100%. Dadurch werden die Boxen wie bei der Gestaltung nebeneinander aufgestellt. Wenn wir sparen und einen Blick darauf werfen, sollten wir sehen:
Es nimmt definitiv Form an und ändert sich bei den richtigen Fenstergrößen, so dass es gut ist!
Ein wichtiges Dienstprogramm, das Sie direkt am Ende der Sass-Datei hinzufügen können, lautet wie folgt:
// Dienstprogramme .group: after content: ""; Anzeige: Tisch; Lösche beide;
Dadurch wird sichergestellt, dass jedes Element mit diesem Klassennamen die untergeordneten Elemente enthält, wenn sie verschoben werden. Mehr darüber, warum diese Arbeiten auf Nicolas Gallaghers Blog zu finden sind.
.Datum-Uhrzeit Schriftgewicht: 400; Farbe: dunkler ($ grau, 30%);
Eine sehr schnelle Erklärung hier für die Terminzeit Element. Es sollte in unserem verschachtelt sein Nachrichtenbox Stile. Ich glaube, dies ist der erste Einsatz einer Sass-Farbfunktion, die insgesamt sehr nützlich ist. Dieses verdunkelt sich das $ grau Farbe um 30%. Das ist fantastisch, wenn Sie bereits eine Farbe haben und schnell eine andere Farbe verwenden möchten.
Lassen Sie uns jetzt auf das Meldungsfeld gehen.
.message padding: $ padding * 2; Höhe: Auto; Grenzradius: 3px; Hintergrund: $ weiß; Text ausrichten: Mitte; @media screen und (min-width: $ break-two) text-align: left; @media screen und (min-width: $ break-four) height: 175px; &: before content: ""; Position: absolut; links: 20px; oben: -20px; Rand: 10px durchsichtig transparent; Rand unten: 10px festes $ weiß; .message-image border-radius: 50%; Breite: Auto; Max-Breite: 99px; Höhe: Auto; Float: keine; @media screen und (min-width: $ break-two) float: left;
Ok, hier gibt es ziemlich viel Code. Auf Mobiltelefonen und Tablets ist es schön, solche Inhalte zentriert zu haben, da nicht viel Platz vorhanden ist. Unsere Basisstile für Botschaft bedecken Sie das, indem Sie das einstellen Textausrichtung Eigenschaft zum Zentrum. Vergewissern Sie sich, dass diese Box auch einen weißen und einen kleinen Hintergrund hat Grenzradius passend zum Design. Wir haben zwei Haltepunkte für dieses Element festgelegt, sodass wir sicher sein können, dass alle Elemente, die sich über Mobile befinden, das Gerät zurücksetzen Textausrichtung Stellen Sie die Höhe der Box so ein, dass sie links nebeneinander ausgerichtet sind. Wenn Sie sich nebeneinander bewegen, wird alles schön aneinandergereiht.
Oh schau! Ein weiterer :Vor Pseudoelement. Dies ist so ziemlich das gleiche wie der obere Weihnachtsbaum, indem wir ein Dreieck erstellen, das über der Box und direkt unterhalb der Box sitzt Terminzeit Element.
Jetzt ist es Zeit, das Bild zu stylen. Für dieses Design ist es wahrscheinlich nicht notwendig, dass das Bild auf und ab skaliert wird, aber wenn ich mit responsivem Layout arbeite, möchte ich, dass Bilder sich immer so verhalten, insbesondere wenn sie in einem Element enthalten sind, das sich bei verschiedenen Elementen ziemlich ändert Größen Um die meisten Szenarien abzudecken, setzen wir einfach das Breite und Höhe zu Auto und stellen Sie sicher, dass es eine gibt maximale Breite Eigenschaft, um die Bildskalierung über die Größe des übergeordneten Elements hinaus zu stoppen.
Bei jeder Fenstergröße über Mobile müssen wir schweben das Bild links neben dem Inhalt der Nachricht sitzen. Es ist wieder an der Zeit, unsere Arbeit zu speichern und zum Browser zurückzukehren:
Nun, das sieht viel besser aus! Nur der Inhalt der Nachricht bleibt übrig.
Wir werden diese festliche App in Teil zwei weiterentwickeln, die sehr bald auf den Weg gebracht wird. Danke fürs Lesen. Ich hoffe, dass meine Erklärungen einen Sinn ergeben und dass Sie gut gefolgt sind. Ich freue mich darauf, Sie beim nächsten Mal zur fertigen Site zu führen!
