Heute holen wir uns ein paar PSD-Preistabellen von Design Curate und versuchen, diese in reines CSS zu konvertieren, damit Sie sie einfach auf Ihrer Website ablegen können.
Es wird eine super grundlegende, aber unterhaltsame Übung sein, ein statisches Design in das Web zu bringen, und Sie werden auf dem Weg eine Menge Spaß lernen, wie zum Beispiel, wie Sie hr-Tags gestalten und einen hochgestellten Effekt erzeugen.
Original Design
Das Design unserer Preistabellen ist extrem minimal. Sie sind im Grunde nur ein abgerundetes Rechteck mit Text und Schaltflächen. Laden Sie die Original-PSD hier für einen genaueren Blick herunter (das Banner mit dem besten Preis wird gelöscht).
Wie Sie sehen, besteht die Hauptaufgabe hier lediglich darin, Elemente zusammenzufügen. Die obere Leiste mag kompliziert erscheinen, aber in Wirklichkeit ist es ein Kinderspiel. Aus meiner Sicht ist es interessanter, diese dünne Trennlinie zu gestalten und einen hochgestellten Text in den Text zu ziehen.
Interessant ist auch die Tatsache, dass die Center-Preistabelle etwas größer als die anderen ist und diese überlappt. Dies könnte bedeuten, zwei einzigartige Versionen des Tisches zu gestalten, aber wir werden einen netten kleinen Trick verwenden, der all die Mühe macht. Lass uns rein springen und loslegen.
Grundform
Zu Beginn konzentrieren wir uns auf die Erstellung einer Preistabelle. Wenn wir das einmal gebaut haben, können wir es ziemlich leicht in drei Bereiche erweitern. In einem ersten Schritt erstellen Sie die Grundform eines einzelnen Tisches: ein vertikales Rechteck mit abgerundeten Ecken.
Wir beginnen mit einem div, das den gesamten Code für eine Preistabelle enthält. Weisen Sie die Klasse der Preisliste zu. damit wir dieses Element später problemlos wieder verwenden können.
Nun wollen wir etwas Stil hinzufügen. Unsere Preistabellen werden weiß sein, daher habe ich einen grauen Hintergrund, um sie hervorzuheben. Dann wendete ich einige Größen an unserer Klasse an, rundete die Ecken und fügte einen Schatten hinzu.
Fortschrittsbericht
Dieser Schritt sollte Ihnen eine einfache weiße Box geben. Stellen Sie sicher, dass Ihre Abmessungen korrekt sind und dass Ihre Schatten und abgerundeten Ecken richtig funktionieren.
Top Bar
Jetzt, da wir unsere Grundform haben, beginnen wir oben und arbeiten uns nach unten. Das erste, was wir brauchen, ist offensichtlich der farbige Balken oben, der den Namen aller unserer Preispläne enthält: Basic, Pro und Premium. Erstellen Sie ein weiteres div mit der Klasse "top". Keine Sorge, wir werden nicht verrückt, das ist das letzte, was wir für unsere Vorlage für die Basistabelle benötigen.
Platzieren Sie im Div ein h2 (wir verwenden das h1 später) mit dem Namen der Preistabelle. Wir könnten dieses h2 einfach ohne div verwenden, um die obere Leiste zu erstellen, aber wenn Sie es so strukturieren, können Sie hier später ein Sub-Tag oder anderen Inhalt hinzufügen.
Dieses Div in unsere obere Leiste umzuwandeln ist ziemlich einfach. Zu Beginn geben wir ihm eine Breite von 250 Pixeln, eine Höhe von 50 Pixeln und probieren die PSD aus, um eine Hintergrundfarbe von # 2F2E35 zu erhalten. Dann wenden wir den gleichen Rahmenradius an, den wir zuvor verwendet haben (10px). Diesmal wenden wir ihn nur an den oberen beiden Ecken an, wobei die unteren Ecken quadratisch bleiben.
Als nächstes ist es an der Zeit, das h2 anzuvisieren und etwas zu gestalten. Ich änderte einfach die Farbe in Weiß, richtete den Text auf die Mitte aus und verwendete ein paar ausgefallene Schriften, um Gewicht, Größe, Zeilenhöhe und Schriftfamilie für unsere Überschrift festzulegen.
Fortschrittsbericht
Unsere schlichte weiße Box sieht bereits jetzt wie die Preistabelle aus, die wir uns wünschen. Jetzt füllen wir nur noch den Inhalt der Mitte und wir können loslegen.
Eigenschaften
Wenn Sie die Tabelle nach unten verschieben, finden Sie als nächstes eine Liste mit Funktionen. Der Satz sollte sofort einen Hinweis darauf geben, wie wir diesen Abschnitt markieren können: mit einer Liste. Die Reihenfolge ist hier nicht spezifisch, daher verwenden wir eine ungeordnete Liste.
Beachten Sie, dass in unserem ursprünglichen Entwurf das erste Wort jedes Merkmals fett gedruckt ist. Wir werden einige starke Tags einwerfen, die uns dabei helfen, dies in unserem Design zu erreichen.
Diese Liste zu gestalten ist ziemlich einfach. Um zu beginnen, möchten wir die Aufzählungszeichen abschneiden, setzen Sie also den Typ der Liste auf "none". Danach verwende ich die gleiche Schriftkurzschrift wie oben, diesmal jedoch mit einer anderen Größe und Zeilenhöhe.
Beachten Sie, dass die Zeilenhöhe ohne Maßeinheit (2, nicht 2px) festgelegt wird. Dies ist ein einfacher Multiplikator, der die Schriftgröße berücksichtigt (18px * 2 = 36px Zeilenhöhe). Mehr über diese Technik erfahren Sie hier.
Um diesen Stilblock zu beenden, wählen Sie diese starken Tags aus und stellen Sie sicher, dass sie fett gesetzt sind.
Fortschrittsbericht
Unsere Feature-Liste sieht perfekt aus! Diese mutigeren Stile helfen Ihnen wirklich, sich auf die wichtigen Informationen zu konzentrieren.
Trennlinie
Im ursprünglichen Design gibt es eine subtile Linie, die die Feature-Liste vom Preis trennt.Dies kann mit einem einfachen horizontalen Regel-Tag erreicht werden:
Der Standardstil für die horizontale Linie ist schließen was wir wollen, aber nicht ganz da. Beachten Sie zum Beispiel, dass es sich über die gesamte Kalkulationstabelle erstreckt. Wir wollen es eigentlich enger und zentriert.
Die Gestaltung einer Stunde kann schwierig und frustrierend sein, wenn Sie nicht wissen, was Sie tun. Sie würden denken, dass wir nur die Breite und Farbe einstellen müssten und wir wären gut zu gehen, aber das ist nicht der Fall.
Standardmäßig wenden bestimmte Browser einige seltsame Stile an, die Sie löschen müssen. Um sicher zu sein, dass wir das gewünschte Aussehen erhalten, müssen wir die Umrandungen löschen, sowohl Höhe als auch Breite angeben und eine Hintergrundfarbe festlegen. Dann zentrieren wir es mit der grundlegenden Mathematik: Wenn unser Tisch 250px breit und unsere Linie 190px ist, bleiben 60px Breite übrig. Mit Rändern halbieren wir diesen Wert und ordnen der linken Seite der Linie dreißig Pixel Abstand zu.
Fortschrittsbericht
Mit diesem Styling sieht unsere kleine Linie genau so aus, wie wir es wollen. Fühlen Sie sich frei, mit Ihrer Uhr zu experimentieren, um zu sehen, welche Art von ausgefallenen Stilen Sie gestalten können. CSS-Tricks bietet einige gute Beispiele für Inspiration.
Preis
Als nächstes ist der Preis. Dieser besteht aus zwei Teilen, dem großen Preis und dem kleinen Text darunter: "pro Monat". Das Schwierige daran ist, dass das Dollarzeichen im ursprünglichen Design hochgestellt ist.
Ich wollte diesbezüglich semantisch sein, also ging ich weiter und benutzte die? Sup? Etikett. Einige Quellen scheinen zu glauben, dass dies ein veraltetes Tag ist, aber soweit ich das beurteilen kann, ist das nicht der Fall. Sowohl sub als auch sup scheinen in HTML5 gültig zu sein und haben eine breite Browserunterstützung. Ich bin offen für widersprüchliche Argumente, also lassen Sie es mich in den Kommentaren wissen, wenn Sie anderer Meinung sind.
Ein weiterer möglicher Punkt für ein großes semantisches Argument ist die Verwendung von h1. Einige würden sich zweifellos h1 für den Plan-Titel an der Spitze vorbehalten, aber der Preispunkt schien hier die wichtigste Information zu sein (Wichtigkeit trumps order), daher dachte ich, es wäre am besten, sie hier zu verwenden. Fühlen Sie sich wieder einmal nicht einverstanden und gehen Sie Ihren eigenen Weg.
Nun haben wir für unser CSS drei verschiedene Ziele: das h1, das h1 sup und der Absatz. Hier gibt es nichts Besonderes, nur noch mehr Schriftgröße und ein wenig Rand, um die Dinge in Ordnung zu bringen. Beachten Sie, dass wir für das sup-Tag nur die Schriftgröße reduzieren müssen.
Fortschrittsbericht
Unsere Preistabelle ist fast vollständig! Bis jetzt haben wir die vier schwierigsten Teile des Puzzles erobert. Jetzt müssen Sie nur noch einen Button erstellen.
Die Taste
Lassen Sie uns zum Abschluss unserer Preistabelle unten einen Anmeldeschalter setzen. Um dies zu erreichen, werfen Sie einfach einen Anker-Tag in Ihren HTML-Code. Damit wird unser wiederverwendbarer, preisgünstiger div beendet.
Um diesen einfachen Textlink in eine Schaltfläche zu verwandeln, legen Sie die Anzeige auf Blockieren fest und definieren Sie eine Breite und Höhe. Vergewissern Sie sich auch, dass Sie den Standard-Linkstil festlegen, indem Sie Farbe und Textdekoration festlegen. Ich habe den Text auch in Großbuchstaben umgewandelt, um dem ursprünglichen Design zu entsprechen. Wenden Sie schließlich den gleichen Randradius wie zuvor an.
Zum Abschluss der Schaltfläche können Sie eine durchgehende Farbe verwenden, um die Dinge einfach zu halten. Ich habe mich jedoch für einen einfachen Farbverlauf entschieden, der heller wird, wenn Sie den Mauszeiger darüber bewegen. Es ist ein großes, gruseliges Stück CSS, aber keine Sorge, es ist alles ziemlich einfach. Verwenden Sie ein kostenloses Tool wie dieses, um Ihnen Ärger zu ersparen, wenn Sie Ihren eigenen Farbverlauf erstellen.
Fortschrittsbericht
Damit ist unsere erste Preistabelle komplett! Wenn wir noch weiter gehen wollten, könnten wir uns eine Slab Serif-Webschrift beschaffen, damit sie genau wie die PSD aussieht, aber die Helvetica gefällt mir gut. Jetzt müssen wir diesen einen Gegenstand nehmen und ihn in drei Teile verwandeln!
Drei Tische machen
Um dies in drei eindeutigen Tabellen zu erweitern, kopieren Sie den soeben erstellten HTML-Code, fügen Sie ihn ein, so dass Sie über drei divs mit Preisen verfügen können, und platzieren Sie diese in einem div-Container. Passen Sie dann den Text an, sodass die Features und der Preis korrekt sind. Fügen Sie schließlich ein? Klasse zum zweiten Tisch. Wir werden das hier machen, um den vergrößerten Effekt zu erzielen.
Um die Preistabellen nebeneinander anzeigen zu lassen, kehren Sie zu Ihrer Preisklasse zurück und lassen Sie sie frei. Wenden Sie auch eine Breite von 780px auf Ihren Container an und zentrieren Sie ihn auf der Seite mit automatischen linken und rechten Rändern.
Jetzt haben wir drei Preistabellen hintereinander. Genau das wollen wir. Denken Sie jedoch daran, dass die mittlere größer sein sollte als die beiden anderen. Dies ist jedoch noch nicht der Fall.
Anstatt jeden kleinen Satz von Dimensionen in der mittleren Preistabelle manuell durchzugehen und anzupassen, können wir die eindeutige Klasse ansprechen, die wir ihm gegeben haben, und eine CSS-Umwandlung anwenden, um sie zu vergrößern. Da es sich bei unserem gesamten Inhalt um reinen Code (keine Bilder) handelt, sollte die vergrößerte Version gut aussehen.
Alles beendet!
Damit sind unsere CSS-Preistabellen vollständig. Die letzte Transformation hat uns genau den Effekt gebracht, den wir mit dem Mitteltisch größer und über den anderen beiden haben wollten. Schauen Sie sich die Live-Demoversionen unten an.
Demo: Klicken Sie hier, um die Demo zu starten
Code: Sehen und optimieren Sie den Quellcode bei Dabblet
Fazit
Ich hoffe, Ihnen hat es gefallen, diese Preistabellen zu erstellen und sie gut zu nutzen. Verwenden Sie sie wie gewünscht und laden Sie die PSD- und Vektor-Versionen von Design Curate herunter.