Här på Design Shack tycker vi om att ha ett komplett utbud av handledning, från expert PHP-projekt till mycket enkla CSS-tips. Dagens handledning riktar sig till de som fortfarande är i CSSs nybörjare.
En av de vanligaste frågorna jag får från CSS-nybörjare är, hur skapar jag en knapp ?? Det är en enkel fråga med ett komplicerat svar. Det finns en hel del sätt att gå om det och det finns tyvärr också några sätt att gå fel. När jag först började i CSS, var det en av de mest ihållande problemen jag mötte, att hitta ut alla knappsyntaxerna, det verkade som om jag alltid gjorde det fel. Idag ska vi gå igenom en mycket enkel och flexibel process som du kan tillämpa på vilken knapp du skapar. Viktigare än slutresultatet är en fördjupad förklaring vid varje punkt som beskriver varför vi gör det på så sätt.
Steg 1: HTML
Tro det eller inte, det här är en av de svåraste delarna. Till en erfaren kodare verkar det så enkelt. För en nybörjare är det dock ganska svårt att veta var man ska börja med en knapp. Ska du använda knappen? HTML-tagg? Eller kanske en stycke-tagg? Vilka delar ska länken lindas runt?
Det visar sig att den enklaste och mest använda syntaksen bara är för att implementera en vanlig gammal ankare-tagg (formulärknappar använder ofta? Inmatning?). Från en funktionell synvinkel är allt vi verkligen försöker skapa en länk som, när den klickas, tar oss någonstans ny, vilket är exakt vad en grundläggande HTML-länk gör. Ofta i webbdesign är valet att vända något till en knapp bara en estetisk och indikerar inte nödvändigtvis någon speciell funktionalitet.
Här är ett vanligt HTML-utdrag som gör jobbet perfekt, samtidigt som du bor snyggt och kortfattat:
Om du inte behöver en div, använd inte en
Ett problem som jag brukade stöta på när jag började kodning är att jag ofta skulle tro att jag behövde en div för att skapa något. Genom att använda denna felaktiga logik skulle jag lägga mitt ankare i en div och sedan tillämpa det mesta av stylingen på div.
Det här är helt onödigt men kan skapa problem med både klick och svängare. I ovanstående exempel kommer hela vårt element att vara länken. Om vi förpackade det här i en div och formaterade det, skulle endast textdelen av knappen vara en länk, vilket innebär att användaren kunde tänkbart klicka på knappen utan resultat.
Varför använda en klass?
Kanske är det viktigaste att märka om detta kodavsnitt att vi har lagt till en klass, som jag har generellt märkt? -Knappen.? Det finns ett par skäl till detta.
Först och främst behöver vi ett sätt att rikta in och utforma den här knappen i vår CSS utan att nödvändigtvis rikta in alla ankarkoder på sidan. Det är nästan aldrig så att du vill att varje enskild länk ska vara en identisk knapp. Det är dock möjligt och ganska sannolikt att du faktiskt vill återanvända knappstilen vid någon tidpunkt. Av denna anledning tillämpar vi en klass istället för ett ID. På det sättet, när vi vill konvertera en vanlig textlänk till en bra knapp, tillämpar vi helt enkelt vår? -Knapp? klass och vi är klara!
Steg 1 Förhandsgranskning
Vid denna punkt bör du bara ha en vanlig textlänk med standard styling.
Steg 2: Grundläggande knappstilar
Nu när vi har vår HTML redo att gå, är det dags att hoppa över till CSS. Kom ihåg att vi satt upp en? -Knapp? klass för det uttryckliga syftet med CSS-inriktning så var noga med att använda den för det här steget:
Det första vi vill göra i vår CSS är att definiera den grundläggande rutan som kommer att utgöra vår knappform. Här är de stilar jag använde. Observera att mina färgval och dimensioner är helt frivilliga, använd gärna vad du vill.
Det viktigaste jag gjorde här var att ställa in? Display? att blockera?. Detta gör det möjligt för oss att vända vår textlänk till en större låda med en definierad bredd och höjd. Därefter satte jag helt enkelt min storlek och bakgrundsfärg och lade sedan till en kant. Jag använder? Rgba? ganska, om du vill göra detta lite mer vänligt till äldre webbläsare, kolla in den här artikeln om att förklara rgba fallbacks.
Steg 2 Förhandsgranskning
Efter steg två borde du ha en ganska tråkig utseende med några omöjliga att läsa text inuti.
Steg 3: Textstilar
Därefter är det dags att attackera den fula texten. För att du ska kunna följa varje steg, fortsätter jag helt enkelt med vad vi tidigare byggt med kommentarer för att hjälpa dig att se varje steg:
Här ser vi att jag har lagt till i en textfärg som i huvudsak är en mörkare nyans av knappfärgen. Detta knep uppnås genom att ställa in textfärgen till svart och minska opaciteten via rgba. Därefter centrerar jag mitt inriktning på texten och deklarerar en massa saker med hjälp av teckensnittet.
Teckensnitt stenografi
CSS stenografi är ett snyggt sätt att deklarera en massa CSS egenskaper och stilar i en rad. Först förklarade jag vikten (fetstil), sedan typsnittstorlek / linjehöjd och slutligen typsnittfamiljen. Observera att linjens höjd är inställd exakt på knapphöjden. Det här är ett enkelt sätt att se till att texten är centrerad vertikalt.
För mer information om CSS Shorthand, kolla in 6 CSS Shorthand Tricks Varje utvecklare borde veta.
Steg 3 Förhandsgranskning
Efter steg tre bör din knapp faktiskt börja se ut som en knapp!
Steg 4: Fancy CSS3 Styles
Det föregående steget får oss till en fin fungerande knapp som inte ser ut som halv dålig. Tyvärr är det ganska tråkigt. Den viktiga delen är dock att den här knappen ska se perfekt ut i de flesta webbläsare, så vi kan nu fortsätta lägga till lite nyare CSS-godhet utan att oroa dig för mycket om att lämna gamla webbläsare bakom. I slutändan bryr jag mig inte riktigt om IE beslutar att dölja dessa nästa stilar eftersom min knapp borde fungera bra för de användare i sitt nuvarande tillstånd.
Vi kan enkelt få bäras och skriva femtio linjer CSS för att göra vår knapp lysande och vacker, men jag kommer att hålla det väldigt enkelt för dagens ändamål:
Var och en av dessa kan vara knepig att läsa så låt oss gå igenom dem en efter en. Först lägger jag till en gradient som använder den färg vi redan hade på plats och bleknar till något som är en liten av mörkare. Jag lämnade i min tidigare bakgrundsfärg ovanför den sektionen för att fungera som en återgång.
Nästa är gränsen radie. Jag bestämde mig för att gå med ett riktigt tungt rundat hörn som kommer att ge knappen en pillerform. Eftersom jag vill att alla mina hörn ska vara densamma, förklarar jag bara ett värde och det tillämpas jämnt.
Slutligen kastade jag i några skuggor. Både lådan och den textskugga jag använde är lite märklig. För lådskuggan gav a den en vertikal offset men ingen horisontell och lämnade också fjädern vid 0. Detta ger en fin liten faux 3D-effekt som inte kräver för mycket arbete eller kod. För textskuggan applicerade jag också en vertikal offset och satt färgen till vit med 20% opacitet. Det här är ett super enkelt sätt att skapa en bokstäverad effekt och få texten att se ut som om den sänker in i knappen.
Använd Prefixr för webbläsarprefix
Observera att koden ovan inte alls är kompatibel med alla webbläsare. I de inledande faserna av experimentet hatar jag att mucka upp min kod med ett halvt dussin webbläsarprefix och glömmer ofta om en viss webbläsare har en unik syntax eller ej.
När jag har fått saker som jag vill ha i Espresso (min IDE valfri) med grundläggande syntax kan jag kasta all den koden i ett litet gratis verktyg som heter Prefixr, som kommer att bearbeta det och spita ut min kod med alla De korrekta tillgängliga webbläsarspecifika versionerna läggs till automatiskt.
Steg 4 Förhandsgranska
Efter steg fyra ska din knapp se ut mycket skarpare än tidigare. Nästan färdig!
Steg 5: Hover Styles
Det sista steget i vår knappprocess är att definiera svängningsbeteendet. När användaren svänger över knappen är det alltid trevligt att få en liten visuell återkoppling som är mer än standardmarkörändringen. Återigen kan vi gå ut med detta men jag kommer att hålla det enkelt och bara lätta upp lutningen lite:
Nu när du svävar över knappen kommer dess färg / ljusstyrka att växla. Det är en subtil effekt men är definitivt stark nog för att någon användare ska märka, även om de är colorblind.
Färdiga!
Efter steg fem är du klar! Du borde nu ha en vacker knapp helt skapad med CSS och HTML. Ännu viktigare bör du ha en stark känsla för det grundläggande arbetsflödet att följa för att skapa en knapp som använder CSS.
demo: För att se knappen i åtgärd, klicka här eller på bilden ovan.
jsFiddle: För att fiska med koden, klicka här.
Slutsats
Vi lärde oss många mycket viktiga saker idag. Först såg vi att vi kan använda en grundläggande HTML-ankaremärke som utgångspunkt för vår knapp och att det är bra att stilknappar med återanvändbara klasser. Vi lärde oss också att börja med att ställa in en grundläggande knapp som fungerar bra över alla webbläsare och att kasta i tillagt stil senare än att basera hela strukturen på knappen på tekniker som inte kommer att vara allmänt tillgängliga. Slutligen såg vi hur vi behåller det enkla genom att koda med grundläggande CSS3-egenskaper tills vi får allt just rätt och följ sedan upp med en resa till Prefixr, vilket utökar vår kod till något som är kompatibelt med webbläsaren.
Lämna en kommentar nedan och låt oss veta vad du tycker. Om du är nybörjare, var det till hjälp för dig? Om du är en erfaren proff, vad skulle du göra annorlunda?