Es ist schon eine Weile her, seit wir unsere HTML- und CSS-Kenntnisse mit einer lustigen kleinen Demo aufpoliert haben. Lassen Sie uns den Strich mit einem Projekt beenden, das sowohl super attraktiv als auch super praktisch ist.
Heute bauen wir einen Kartenstil? Hire Me? Widget, das Sie schnell auf jede Webseite ziehen können. Auf dem Weg werden wir eine Menge großartiger Dinge über CSS-Positionierung und die Verwendung von Pseudoelementen für coole Effekte lernen.
Was wir bauen
Ich habe vor kurzem die fantastische kostenlose PSD-Bibliothek auf unserer Schwestersite PixelsDaily durchsucht und bin auf dieses Juwel vom Designer Marc Gonzales gestoßen.
Ich liebe sowohl die Idee hier als auch die Hinrichtung. Für jedes Portfolio sollte es eine klare Möglichkeit geben, den Designer einzustellen. Dies bietet eine einfache und attraktive Möglichkeit, diese Funktionalität zu integrieren.
Marc hat hier großartige Arbeit geleistet, aber die Datei, die er zur Verfügung stellt, ist eine mehrschichtige PSD. Heute werden wir dies als Inspiration für unser eigenes ähnliches Widget verwenden, das vollständig aus CSS und HTML erstellt wurde. Wir werden auf dem Weg ein paar Dinge ändern und ein paar Freiheiten einnehmen, aber letztendlich wird das letzte Stück sehr ähnlich dem sein, was wir hier sehen.
Schritt 1. HTML-Setup
Das erste, was wir tun werden, ist ein sehr einfaches HTML, das als Struktur für unser Abzeichen dient. Wir verwenden eine Struktur mit zwei Divisionen: Das äußere Div wird die Karte als Ganzes enthalten, und das innere Div ist eine schöne und einfache Möglichkeit, alle unsere Textobjekte zu gruppieren.
Werfen Sie im äußeren Div ein Bild, das als Ihr Avatar dienen soll. Fügen Sie im inneren Div ein h3 mit Ihrem Namen, einen Absatz mit Ihrer Berufsbezeichnung und ein Ankertag mit den Wörtern "Hire Me" ein. Ihr Code sollte in etwa wie folgt aussehen.
Wie Sie sehen, haben wir ihm eine Höhe und eine Breite zugewiesen, die Hintergrundfarbe festgelegt und einen Kantenradius angewendet, um die Ecken abzurunden. Beachten Sie die hier verwendete relative Positionierung, dies wird später relevant, ich plane gerade voraus.
Neben den abgerundeten Ecken verfügt das ursprüngliche Kartendesign über ein paar weitere Funktionen, für die einige CSS3-Codes erforderlich sind. Zunächst einmal ist Box-Shadow die einfach genug und erfordert an dieser Stelle nur ein alternatives Browser-Präfix. Das Hinzufügen eines Farbverlaufs ist jedoch immer noch ein großes Durcheinander. Ich hasse das Kodieren von Gradienten von Hand, daher verwende ich diesen Generator, um Code für den linearen Gradienten zu erstellen, den wir benötigen.
Hier ist der resultierende Code (ich habe auch eine Körperfarbe hinzugefügt):
Schritt 2 Fortschrittsprüfung
Nach dem Hinzufügen dieses Codes können wir die fertige Kartenform deutlich sehen. Das Problem ist jetzt, dass unsere Inhalte außerhalb der Kartengrenzen liegen. Wir werden das bald ansprechen.
Schritt 3. Gestalten Sie den Avatar
Bevor wir uns mit dem hässlichen Textproblem beschäftigen, lassen Sie uns unseren Avatar stilisieren und in Position bringen.
Alles, was wir hier gemacht haben, ist, das Bild mit Rändern anzustoßen. Stellen Sie sicher, dass wir die richtige Größe haben, egal welches Bild Sie verwenden, und fügen Sie einen Randradius hinzu. Beachten Sie, dass hierfür keine Browser-Präfixe mehr erforderlich sind. Hurra!
Schritt 3 Fortschrittsprüfung
Langsam aber sicher machen wir Fortschritte. Jetzt ist unser Avatar mit dem von uns gewünschten Stil ausgestattet. Als nächstes beschäftigen wir uns mit dem Text!
Schritt 4. Gestalten Sie den Text
Die Art und Weise, in der der Text aktuell fließt, ist nicht gut. Wir müssen es rechts vom Avatar abstellen und nicht darunter. Wir könnte schweben Sie es, aber ich denke, die absolute Positionierung wird uns mehr Freiheit und Flexibilität geben, um es genau dort zu platzieren, wo wir es wollen.
Wie Sie sehen, habe ich nach dem Anwenden der absoluten Positionierung den Text nach unten und links verschoben und dann den gesamten Text zentriert. Hier setzt unsere relative Positionierung an, die wir zuvor angewendet haben. Bei dieser Technik wird der Nullpunkt als absolut positioniertes inneres div anstelle des oberen linken Punkts der Zeichenfläche betrachtet.
Formatieren Sie die Kopfzeile und den Absatz
Nun, da wir den Text an seinen Platz gebracht haben, wollen wir ihn neu gestalten. Wir konzentrieren uns zunächst auf die Kopfzeile und den Absatz.Alles, was wir wirklich brauchen, ist etwas Schriftstil und eine Farbe für jede zu verwenden.
Mit diesem bisschen Code sehen wir schon viel besser aus. Wir müssen diesen Link nur in eine Schaltfläche formatieren, und wir sind bereit, in die Pseudo-Elemente einzutauchen.
Gestalten Sie den Link
Der größte Teil des Textes ist einfach zu formatieren, aber für den Link benötigen wir einen viel größeren Code. Dies liegt daran, dass für das ursprüngliche Design ein Link erforderlich ist, der wie eine Schaltfläche aussieht. Um dies zu tun, müssen wir einige Füllungen, Grenzradien und Schatten hinzufügen.
Hier sind einige wichtige Dinge zu beachten. Zuerst entfernte ich das standardmäßige Link-Styling, indem ich die Textdekoration entfernte und eine neue Farbe setzte. Außerdem habe ich am Rand der Schaltfläche eine winzig kleine Umrandung hinzugefügt, um sie etwas hervorzuheben. Zum Schluss habe ich zwei Schatten auf dieses Element gesetzt. Der erste ist ein eingebauter Schatten, der wirklich eher ein innerer Schein ist, und der zweite ist ein eher typischer Schlagschatten.
Schritt 4 Fortschrittsprüfung
Damit haben wir ein schönes kleines Mädchen? Karte. Technisch könnte man hier aufhören, aber ich werde weiterarbeiten und den kleinen gestapelten Karteneffekt aus dem ursprünglichen Design erzeugen.
Schritt 5. Stapeln Sie das Deck
In Marcs ursprünglichem Design sehen wir, dass er die Illusion eines Kartenstapels geschaffen hat, anstatt nur eine einzige Karte im Raum zu zeigen. Es gibt verschiedene Möglichkeiten, dies mit Code zu erreichen. Letztendlich sollten wir jedoch bedenken, dass es besser wäre, unser HTML-Markup nicht mit leeren divs zu überspielen. Eine reine CSS-Lösung wäre sehr zu bevorzugen.
Angesichts dieser Informationen können wir uns dem?: Before? und danach? Pseudo-Elemente für die Lösung, die wir in unserem Beitrag The Lowdown on: Before und: After in CSS eindrucksvoll erklären.
Wir beginnen mit dem: after Pseudo-Element. Um dies zu implementieren, zielen Sie auf das? Hireme? Klasse und verwenden Sie die Ein-Doppelpunkt-Syntax (IE mag die Doppelpunkt-Syntax nicht). Setzen Sie den Inhalt auf leer, die Position auf absolut, den Randradius auf 10px (wie bei der Originalkarte) und verschieben Sie ihn um 4px nach links (der oberste Wert sollte 0 sein). Ich beendete das, indem ich den Z-Index auf -1 setzte, um sicherzustellen, dass er unter der Originalkarte angezeigt wird.
Grundsätzlich wollen wir hier die ursprüngliche Karte umbauen. Wir wollen die gleichen Abmessungen, die gleichen Schatten, den gleichen Farbverlauf usw. Der Hauptunterschied besteht darin, dass wir eine Drehung hinzufügen, um diese Karte gegenüber dem Original zu verschieben.
Jetzt wiederholen wir den gleichen Vorgang mit dem?: Before? Pseudo-Element, so dass wir mit einem Stapel von drei Karten enden. Dadurch wird der Z-Index auf -2 gesetzt und die Rotation verdoppelt.
Reinigen Sie dieses Chaos!
Es ist sehr wichtig, Ihren Code immer in Frage zu stellen und zu prüfen, wie Sie ihn verbessern können. Wenn ich die Stile für die drei verschiedenen Karten durchsehe, sehe ich eine Tonne der Wiederholung. Dies ist ein direkter Verstoß gegen das DRY-Prinzip (Don't Repeat Yourself) der Codierung, wodurch Ihr CSS sauber und effizient bleibt.
Die gleichen Werte für Höhe, Breite, Randradius, Schatten und Farbverlauf werden in unserem Code mindestens dreimal wiederholt. Das ist völlig sinnlos und schlampig. Es ist in Ordnung, so zu programmieren, während Sie skizzieren. und herumspielen, um die Dinge richtig zu machen, aber wenn Sie fertig sind, sollten Sie immer aufräumen.
Wir können dies erreichen, indem wir alle diese wiederholten Werte in einem einzigen Deklarationsblock zusammenfassen, der alle drei Selektoren anspricht. Danach können wir dramatisch Reduzieren Sie den Code, der für jede einzelne Karte erforderlich ist.
Schauen Sie sich die Demo an
Gute Nachricht, wir sind alle fertig! Wir haben jetzt ein tolles kleines? Hire Me? Abzeichen, das einfach auf jede Webseite abgelegt werden kann. Ich habe die CodePen-Demo unten eingebettet, damit Sie sich sowohl den Code als auch das Endergebnis ansehen können. Wenn das für Sie nicht funktioniert, schauen Sie hier nach.
Was denkst du?
Ich hoffe, Ihnen hat dieses kleine Projekt genauso gut gefallen wie mir. Wir haben viel über alles gelernt, vom Stapeln von Objekten mit Z-Index bis zum Organisieren von Code mit DRY-Konzepten. Hinterlasse einen Kommentar und lass mich wissen, was du denkst.
Wenn Sie Verbesserungs- oder Änderungsvorschläge haben, sollten Sie unbedingt meine CodePen-Demo verwenden und einen Link zu Ihrer unten stehenden Version hinterlassen.