Jag har blivit uttråkad på sistone med all körning av bruket, vanliga jane iTunes / Mac App Store-knappar som jag har sett runt på webben, så jag kodade upp några roliga lilla animerade alternativ som jag trodde jag skulle dela med.
Detta projekt är super enkelt, så även om du är en komplett nybörjare bör du kunna följa med. Vi lär oss hur du använder några fancy tekniker som hur man införlivar ikonfonter i en design och hur man infogar objekt med pseudoelement.
Konceptet
För att starta ett projekt är det ofta roligt att ta en penna och skissera några idéer. Vi tenderar att tänka mer fritt när vi ritar med våra händer än en mus. Du behöver inte heller vara bra på att teckna, gärna skryta ner snabba, fula skisser. Så länge de kommunicerar din tankeprocess, jobbar de!
Konceptet här är ganska grundläggande och liknar andra projekt vi har gjort tidigare. Jag vill börja med en cirkel som bara innehåller en ikon. Då, när du sveper över ikonen, expanderar den för att visa ett meddelande om att ladda ner appen i appaffären.
Eftersom Apple har tre primära enhetsarketyper (iPad, iPhone och Mac) måste vi naturligtvis skapa några olika versioner över baserna.
Steg 1: HTML
För att börja, byt ut en div som den som visas nedan. Inuti har jag lagt ett stycke inslaget i en ankare tagg, en del som också är insvept i en liten tagg. Detta hjälper oss att skilja texten lite.
Titta på det här nu, det känns lite uppmärksamt tungt. Du kan noga använda klasserna direkt till ankaret och hoppa över diven helt och hållet, men vi kommer att hålla fast vid det här för tillfället. Observera att jag har tillämpat två separata klasser till div. Jag kunde ha blivit borta med en, men för att skilja mellan olika typer av knappar som vi skapar hjälper det att skilja dem i separata klasser (det här låter dig rikta in varje version individuellt). De upprepade formaten kan sedan grupperas i en? Appstorebutton? klass, en organisationsmetod som kommer att hålla vår CSS snygg och torr.
Observera också att HTML5 tillåter oss att koppla in en länk runt vad som helst vi vill ha, så om det ser lite lite ut, vet du bara att det är helt tillåtet.
Steg 2: Grundläggande knappstilar
Låt oss nu hoppa över till några CSS och ta tag i det? Appstorebutton? krok. Knappens standardtillstånd kommer att vara en cirkel, men det är mycket lättare att ordna allt med knappen i utökat tillstånd, så vi börjar med en bredd på 275px, vilket vi kommer att minska till 80px när vi är allt klart.
Det finns också några andra intressanta saker här. Först och främst tillämpade vi relativ positionering eftersom vi kommer att använda någon absolut positionering på ett element inom den här senare och det kommer att ge oss en utgångspunkt. Om det inte har någon mening, läs den här artikeln.
Vi ställer också överflödet till dolda. Detta beror på att när knappen är i dess cirkulära tillstånd kommer mycket av innehållet att ligga utanför knappens fysiska gränser och vi vill behålla det trevligt och osynligt. Slutligen tillämpade vi en bakgrundsfärg till? Iphone? klass. Senare skapar vi några fler av dessa för de andra versionerna.
Avstämning
Vid denna tidpunkt är vårt föremål grymt, men oroa dig inte, det ser bättre ut på nolltid.
Steg 3: Stil avsnittet
Därefter är det dags att fixa den fula texten. Det här är ganska enkelt och innebär att du gör färgen till vit och definierar olika storlekar för den lilla och vanliga punkttexten. Jag förklarade också en uppsättning bredd, som bryter texten i två linjer, sedan använde marginaler för att trycka på det hela på plats.
Avstämning
Jag lovade inte att allt skulle se bra ut snart? Redan börjar vi se slutresultatet bildas. Det är fantastiskt hur långt en liten stil kan gå!
Steg 4: Lägg till ikonen
I bilden ovan verkar texten olyckligt scooted till höger med ett stort tomt utrymme till vänster. Det är här vår lilla iPhone-ikon kommer att gå. Innan vi lägger in den där måste vi tänka på hur vi ska gå om det.
Den första tanke som dyker upp i mitt sinne är att använda en ikonstyp. Dessa är enkla att implementera och oändligt skalbara och fungerar därför perfekt för en grafisk knapp. Efter lite jakt hittade jag ett fria teckensnitt som heter Modern Pictograms från Font Equirrel som innehåller både en iPhone och en iPad som vi kan använda för det här projektet.
Nu, istället för att röra upp vår markering längre, kan vi infoga den här ikonen med ren CSS genom att använda: före pseudoelementet. Koden för detta tillsammans med implementeringen av ikonens teckensnitt visas nedan.
Som du kan se, berättade vi vår CSS det? Förut? stycket, vi ville infoga brevet? O ?, vilket motsvarar iPhone grafiken i teckensnittet Modern Pictograms. Den @ font-face-kod som jag använde här kopieras och klistras direkt från de awesomely convenient @ font-face-kits som finns på Font Equirrel.
Därefter scooted vi iPhone-grafiken på plats. Genom att använda absolut positionering här, drar vi grafiken ur normalflödet. Det är dock bundet till platsen för vår knapp på grund av det relativa positioneringskontext som vi tillämpade i ett tidigare steg. Härifrån snubblar vi den tio pixlarna från toppen och tjugo från vänster, och då är vi alla klara.
Avstämning
Som du kan se, ser ikonen från teckensnittet perfekt ut på lite knapp. Allt som finns kvar för att vi ska kunna veta är avrundat av våra hörn, minska bredden och ställ in en svängövergång.
Steg 5: Gör cirkeln
Nu när vår knapp ser ungefär ut hur vi vill när den expanderas, är det dags att få kontrakt. För att göra detta, gå tillbaka till vår? Appstorebutton? krok och sätt bredden till 80px, lägg sedan till en kantradio på 40px.
Avstämning
Nu har vår knapp kollapsat i en fin liten cirkel. Eftersom vår överflöde är dolt ser du ingen av texten. I nästa steg ser vi hur man tar allt tillbaka.
Steg 6: Expand på Hover
För att avsluta vår animerade knapp måste vi lägga till en övergång och ett svävarläge. Vår övergång kommer att rikta bredden på .appstorebutton-klassen med en varaktighet på en sekund och en tidsfunktion av? Ease.?
Då, när användaren svänger över knappen, kommer den att expandera till den bredd på 275 px som vi tidigare använde.
Avstämning
Vår knapp är klar! Vid denna tidpunkt borde allt fungera perfekt. Om du har följt efter ska resultatet se ut som nedan.
Steg 7: Lägg till de andra
Nu när vi har en knapp klar att gå, är det dags att expandera denna idé i en uppsättning med tre knappar. Lägg till ytterligare två divs till din HTML och ge dem var och en en unik klass som jag gjorde nedan.
Härifrån följer vi stegen som vi gjorde tidigare för att infoga ikonerna med: före pseudoelementet. IPad-ikonen är? Q? i vår ikon typsnitt, men tyvärr finns det ingen laptop eller iMac som vi kan använda för ikonen för Mac App Store. För detta gick jag över och grep en ikon från det fantastiska Noun-projektet (jag var tvungen att tweak det lite för att göra det närmare de andra).
För att avsluta allt gav jag varje knapp en unik färg med de specialklasser som vi tillämpade i vår HTML. Använd dessa för att tillämpa andra knappspecifika stilar som du vill använda.
Se dem i aktion!
Allt ditt hårda arbete har löpt ut och du har en snygg liten knappsats för att visa för den. Om du inte har följt med och byggt upp knapparna själv klickar du på nedan för att ta resultatet för en provkörning.
demo: Klicka här för att starta demo.
Slutsats
Lite projekt som dessa är bra för att hålla dina CSS-kotletter färskt och din hjärna i ett sätt att ständigt tänka på nya designidéer.
Har du nyligen sett några andra kreativa App Store-knappar? Låt oss veta i kommentarfältet nedan.