Idag ska vi ta några PSD-prissättningstabeller från Design Curate och försöka konvertera dem till ren CSS så att du enkelt kan släppa dem in på din webbplats.
Det kommer att bli en super grundläggande men rolig träning för att få en statisk design på webben och du lär dig massor av roliga saker längs vägen, som hur man utformar hr taggar, skapar en superscript-effekt.
Original Design
Utformningen av våra prissättningstabeller är super minimal. De är i grunden bara en rundad hörnrektangel med lite text och knappar. Ladda ner original PSD här för en närmare titt (vi skrapar bäst värde bannern).
Som du kan se kommer den primära uppgiften här bara att blanda element på plats. Översta fältet kan tyckas att det blir svårt, men i verkligheten är det en film. Mer intressant ur mitt perspektiv är hur man stilar den tunna delningslinjen och drar av en överskrift i texten.
Också av intresse är det faktum att mittenpengarbordet är lite större än de andra och överlappar dem. Det kan innebära att du styler två unika versioner av bordet, men vi använder ett trevligt litet knep som tar all insats ut ur detta. Låt oss hoppa in och komma igång.
Grundläggande form
För att börja, fokuserar vi på att skapa en prissättningstabell. När vi har byggt den, kan vi expandera den till tre ganska enkelt. Vårt första steg är att skapa den grundläggande formen av ett enda bord: en vertikal rektangel med rundade hörn.
Vi börjar med en div som håller hela koden för ett prissättningstabell. Tilldela klassen? Pricingtable? så att vi lätt kan återanvända detta element igen senare.
Låt oss nu lägga till lite stil. Våra prissättningstabeller blir vita så jag ställer in en grå bakgrundsfärg för att hjälpa dem att sticka ut. Sedan tillämpade jag en viss storlek på vår klass, rundade hörnen och lade till en skugga.
Progress Update
Detta steg ska ge dig en enkel vit låda. Se till att dina mått är korrekta och att din skugga och avrundade hörn fungerar korrekt.
Top Bar
Nu när vi har vår grundläggande form på plats, börjar vi på toppen och jobba ner. Det första som vi behöver är uppenbarligen den färgade stapeln överst som håller namnet på vart och ett av våra prisplaner: Basic, Pro och Premium. För att dra av det här skapar du en annan div med klassen "top". Oroa dig inte, vi går inte div galen, det här blir den sista som vi behöver för vår basprissättningstabellmall.
Inne i div, placera en h2 (vi använder h1 senare) med namnet på prissättningstabellen. Vi kan helt enkelt använda denna h2 utan div för att skapa den övre fältet, men strukturera det på så sätt gör det lättare att lägga till en underrubrik eller annat innehåll här senare.
Att vrida den diven i vår toppfält är ganska enkel. Till att börja med ger vi en bredd på 250px, en höjd på 50px och provar PSD för att få en bakgrundsfärg på # 2F2E35. Sedan tillämpar vi samma gränserad radie som vi använde tidigare (10px), bara den här gången applicerar vi den till endast de två översta hörnen och lämnar de nedre hörnen.
Nästa är det dags att rikta sig till h2 och ge det lite styling. Jag ändrade helt enkelt färgen till vit, justerade texten till mitten och använde en del fina teckensnitt för att ställa in vikt, storlek, linjehöjd och fontfamilj för vår rubrik.
Progress Update
Vår vanliga vita lådan börjar redan se ut som prisbordet vi ska ha. Nu fyller vi bara in innehållet och vi är redo att gå.
Funktioner
När vi flyttar ner bordet hittar vi en lista med funktioner. Omedelbart ska den meningen ge dig en ledtråd om hur vi kan markera det här avsnittet: med en lista. Ordern är inte något specifikt här så vi använder en oorderad lista.
Observera att i vår ursprungliga design är det första ordet i varje funktion fetstil. Vi slänger i några starka taggar för att hjälpa oss att dra av det här i vår design.
Att utforma listan är ganska lätt. För att starta vill vi krossa punktpunkterna, så sätt liststypstypen till? Ingen ?. Efter det använder jag samma teckensnitt som ovan men den här gången med en annan storlek och linjehöjd.
Observera att linjens höjd är inställd utan en måttenhet (2, inte 2px). Detta är en enkel multiplikator som tar hänsyn till typsnittstorleken (18px * 2 = 36px linjehöjd). Du kan läsa mer om denna teknik här.
För att avsluta detta block av stilar, rikta in de starka taggarna och se till att de är inställda på fetstil.
Progress Update
Vår funktionslista ser perfekt ut! De djärvaste stilarna hjälper dig verkligen att fokusera på viktiga delar av informationen.
Skiljelinje
I den ursprungliga designen är det en subtil linje som skiljer funktionslistan från priset.Detta kan åstadkommas med en enkel horisontell regel tagg:
Standardinställningen för den horisontella linjen är stänga till vad vi vill, men inte riktigt där. Lägg märke till att den sträcker sig hela vägen över prissättningstabellen. Vi vill faktiskt att den är smalare och centrerad.
Styling en hr kan vara knepigt och frustrerande om du inte vet vad du gör. Du skulle tro att allt vi skulle behöva är att ställa in bredd och färg och vi skulle vara bra att gå, men det är inte så.
Som standard använder vissa webbläsare några konstiga format som du måste rensa. För att vi ska få det utseende vi vill, måste vi rensa gränserna, deklarera både en höjd och en bredd och ange en bakgrundsfärg. Sedan centrerar vi den med hjälp av grundläggande matte: Om vårt bord är 250px bredt och vår linje är 190px, lämnar det 60px bredd kvar. Med hjälp av marginaler skär vi det värdet i halva och tilldelar trettio bildpunkter till vänster på linjen.
Progress Update
Med den där stilen ser vår lilla linje ut exakt som vi vill ha den. Känn dig fri att experimentera med din hr för att se vilka slags snygga stilar du kan göra. CSS-Tricks har några bra exempel för inspiration.
Pris
Nästa upp är prislappen. Detta kommer i två delar, det stora priset och den lilla texten under som säger? Per månad.? Den knepiga delen är att i den ursprungliga konstruktionen är dollarns tecken uppskriven.
Jag ville vara semantisk om detta så jag gick vidare och använde? Sup? märka. Vissa källor verkar tro att det här är en avstängd tagg, men så långt jag kan säga är det inte så. Både sub och sup verkar vara giltiga i HTML5 och har gott om webbläsarstöd över hela linjen. Jag är öppen för motsatta argument här, så låt mig veta i kommentarerna om du inte håller med om det.
En annan potentiell punkt för ett stort semantiskt argument här är min användning av h1. Vissa skulle utan tvekan reservera h1 för planens titel överst, men prissättningen här tycktes vara den viktigaste informationen (betydelse trumps order), så jag tyckte det var bäst att utnyttja det här. Än en gång, var så orolig att du är oense och gå på egen väg.
Nu för vår CSS har vi tre olika saker att rikta: h1, h1 sup och stycket. Det finns inget fancy här, bara lite mer typsnitt och lite marginaler för att scoot saker på plats. Observera att allt vi behöver göra för sup-taggen är att minska teckensnittstorleken.
Progress Update
Vårt prissättningstabell är nästan färdig! Hittills har vi erövrat de fyra svåraste pusselbitarna, allt som finns kvar är att skapa en knapp längst ner.
Knappen
För att avsluta vårt prissättningstabell, låt oss lägga in en anmälningsknapp längst ner. För att uppnå detta, bara kasta en ankare tagg i din HTML. Detta avslutar vår återanvändbara prissättningstabell div.
För att vrida den här enkla textlänken till en knapp, ställ in skärmen för att blockera och definiera bredd och höjd. Också se till att fixa standard länk styling genom att ställa in färg och text dekoration. Jag förvandlade texten till stora bokstäver för att matcha den ursprungliga designen. Tillämpa slutligen samma gränserad radius som tidigare.
För att avsluta knappen kan du använda en solid färg för att hålla saker enkelt, men jag valde en grundläggande gradient som blir lättare när du svävar över den. Det är en stor, skrämmande bit av CSS men oroa dig inte, det är allt ganska grundläggande. Använd ett gratis verktyg som den här för att spara dig lite problem om du skapar din egen lutning.
Progress Update
Med det är vårt första prisbord komplett! Om vi ville gå vidare, kunde vi ta tag i ett seriell webbflik för att få det att se ut som PSD, men jag gillar Helvetica bara bra här. Nu måste vi ta det här objektet och omvandla det till tre!
Göra tre tabeller
Om du vill expandera detta i tre unika tabeller, kopiera och klistra in HTML-filen som du just skapat så att du har tre prissättningsdelar och placera dem alla inuti en container div. Anpassa sedan texten på varje så att funktionerna och prispunkten är korrekta. Slutligen lägg till en? Featured? klass till andra bordet. Vi får oss att dra av den förstorade effekten.
För att prissättningstabellerna ska visas bredvid varandra, gå tillbaka till din prissättningstabellklass och flytta den till vänster. Applicera också en bredd på 780px till din behållare och centrera den på sidan med automatisk vänster och höger marginal.
Nu har vi tre prissättningstabeller i rad, vilket är exakt vad vi vill ha. Men kom ihåg att centrumet ska vara större än de andra två, det är inte så.
I stället för att manuellt gå igenom och justera varje liten uppsättning dimensioner i hela prissättningstabellen, kan vi rikta oss mot den unika klassen som vi gav den och tillämpa en CSS-omvandling för att förstora den. Eftersom allt innehåll är ren kod (inga bilder), ska den uppskalade versionen se bra ut.
Allt klart!
Därmed är våra CSS-prissättningstabeller komplett. Den sista omvandlingen gav oss exakt den effekt som vi ville ha med mittbordet större och flytande över de andra två. Kolla in live demoversionerna nedan.
demo: Klicka här för att starta demo
Koda: Se och tweak källkoden på Dabblet
Slutsats
Jag hoppas att du trivdes med att bygga dessa prissättningstabeller och kommer att få bra användning av dem. Använd dem dock du vill och var noga med att ladda ner PSD och vektorversionerna från Design Curate.