Alla de nya egenskaperna som kommer från CSS3-specifikationer har varit oerhört hjälpsamma när det gäller att bygga mer avancerade användargränssnitt. Webbsidor har sett en dramatisk översyn i metoderna för att bygga typiska layoutformat. Speciellt typografi och knappar / formelement ser den största makeoveren - och med fler utvecklare som startar open source-projekt verkar det inte finnas något slut i sikte.
För den här handledningen vill jag visa hur vi kan bygga några exempelrubriker till en grundläggande webbsida. Jag använder mestadels CSS3-effekter på den översta navigeringsfältet, tillsammans med typografi på sidan. Alla dessa tekniker bör överföras till de nya webbläsare som är kompatibla med standarder. Dessutom finns det så många olika designtekniker som du kan duplicera och tillämpa i något projekt. Var säker och kolla in min levande demo för att få en uppfattning om vad vi försöker bygga!
Live Demo - Hämta källkod
Komma igång
Jag skapar först en enkel index.html webbsida med hjälp av HTML5-doktypen. Vi behöver bara ett par resurser för styling, nämligen ett unikt stilark styles.css tillsammans med några Google-webbfonter. Många antar att dessa resurser sänker sidhastigheten, och medan vi begär några dokument via HTTP, ska det inte ta mer än ett par hundra millisekunder över en bra anslutning.
Nu är sidans rubrik och kroppsinnehåll delat upp med ett containerklasssystem. Navigationsfältet ska sträcka sig över 100% av sidbredd, men det inre innehållet maximerar vid 1050px. Detta kommer att hålla allt vårt innehåll centrerat på sidan, oavsett hur stor skärmupplösningen är. Vi håller rubriken inne i en HTML5 nav element för fler semantiska stilar.
Det är värt att påpeka hur rubriktexten visas först i HTML-koden, även om den svävar på höger sida av navigeringen. Även om vi kunde formatera det här visas som om rubriken kommer efter navigering, för sökrobotar måste vi se till att sidtiteln kommer först så att den rankas högre på sidan. Också när fönstret blir mindre, ger responsiva stilar upphov till att nav-länkarna faller under rubriken, så i slutändan ska rubriken komma först i hierarkin.
De inre listobjektlänkarna skiljs åt av text med hjälp av em märka. Dessa mindre underrubriker är snygga effekter på en navigering om det finns tillräckligt med utrymme. Du kan ge besökarna en extra känsla av vad som finns på varje sida utan att visa sig alltför konfronterande.
Inre kroppsinnehåll
Jag har inte inkluderat mycket nytt innehåll i kroppen eftersom vi fokuserar på typografi. Men det finns 3 unika rubrikformat som trycker från h1-h3 som rankad av betydelse. Vissa designers kan välja att även inkludera h4 och till och med h5 om det behövs. Copyfitting typografi handlar om att arbeta för en strikt placering av innehåll på sidan. Det handlar om att planera dina skrivna ord och anpassa andra medier kring detta sammanhang (bilder, video etc.).
Jag tror att en av de coolaste effekterna du kan inkludera är en pull-quote eller blockquote-design. Observera att dessa är två väldigt olika idéer och tjänar mycket olika syften. I vårt demo-exempel använder jag CSS-Tricks pull quote-stilar för att visa hur vi kan duplicera innehåll från områden på sidan. Dessa ser utmärkt ut i blogginlägg eller artiklar online där du vill betona vissa fraser eller meningar.
Blockquotes är en annan intressant designmekanism som kan se bra ut på nästan vilken sida som helst. Dessa relaterar inte till innehåll inom posten men citerar vanligtvis någon annan. Citat kan komma från tidigare kunder, kollegor eller verkligen någon att vara ärlig. Codrops publicerade nyligen en artikel om att bygga moderna block citat som täcker en rad bra idéer för webbdesigners.
Manövrering med CSS3
HTML-uppteckningen är mycket standard och typisk för vad du kan förvänta dig på en webbsida. De mer komplexa intressanta områdena finns i CSS stilark där vi kan tillämpa övergångseffekter och massor av andra stora CSS3 egenskaper. Vi bör börja med att titta på dokumentets sidestruktur.
De .omslag klassen ska levereras på en behållare i en annan behållare. Så till exempel utvidgar vår navbar hela sidans hela bredd, men allt innehåll inuti finns inne i en wrapper div. Den yttre #topnav behållaren använder en massa CSS3 egenskaper i kombination med rgba () färgväljaren. Detta är specifikt för webbutvecklare intresserade av att använda alfa-transparens inom färgtoner.
Vi kan se denna effekt inte bara på bakgrunden, men också på boxskuggan också. Denna effekt går bra när du använder en fast statisk navigering som rullar ner sidan och följer besökaren.
Sidhuvudet använder en serie animerade egenskaper medan du sveper över ankarlänken. Detta gäller också för de många navigeringsobjekten som också använder alfa-transparens. Vissa äldre webbläsare stöder inte typiska typleverantörsformat, men det finns lösningar för alla webbläsare.
Header-stilen passar så snyggt eftersom vi kan fixa navigeringsfältet till en viss höjd och använd sedan radavstånd egenskap för att placera text centrerad vertikalt. Så i detta scenario, även när vi ändrar storleken på webbläsarfönstret, flyter alltid vår logotyp över hela mitten. När en gång navigeringen faller ner ändras storleken på linjens höjd så att allt passar ihop. CSS3 animeringseffekter erbjuder bara en mer tilltalande frontendupplevelse för användaren.
Responsive Trends
Mycket av kroppsinnehållet kan redan hantera mobila responsiva innehåll. Under de senaste åren har det skett många artiklar skrivna på lyhörd webbdesign. Kopiering av din typografi för både stationära och mobila plattformar är möjligen en av de bästa idéerna du kan följa. Detta gör det möjligt för någon att få tillgång till din information från vilken enhet som helst med internetåtkomst.
Lägg märke till hur jag har inkluderat övergångseffekter på både listobjekten och ankarlänkarna. Vi väljer också alla egenskaper som ska animera över tid, vilket egentligen inte är nödvändigt, men det ser fantastiskt ut. När naven faller under rubriken kommer alla marginaler och linjeavstånd att justeras igen med hjälp av animerade övergångar! Naturligtvis kan bara besökare som använder moderna webbläsare som stöder CSS3-övergångar se dessa effekter. Men det är värt att hålla med avseende på en framgångsrik användarupplevelse.
Jag har faktiskt ställt in två olika mediafrågor för när skärmen träffar 2 olika områden. Först när vi faller lite under 800px tar navigationslänkarna bort några av sina marginaler. Det här knyter samman länkarna närmare varandra, sparar på rymden och hindrar dem från att falla för snabbt. När vi sedan går under 700px byter navet under rubriken och vi justerar för nya linjens höjdvärden.
Denna responsiva design kan hanteras på ett antal sätt. Du kan välja att helt enkelt dölja navlänkarna och hålla dem bundna på en växelkoppling för mobila användare. Jag tycker att den här metoden är snällare för att hålla alla typografiska stilar på rätt sätt utan att göra sig av med användbarhet. Hela rubrikområdet är moget för unik monterad typografi och kommer säkert att vara en uppmärksamhet för användarna.
Live Demo - Hämta källkod
Slutgiltiga tankar
Jag hoppas att denna handledning kan ge en djupare titt på styling-webbsidor med hjälp av CSS3. Typografi är fortfarande den viktigaste aspekten till någon layout. Internet tillåter människor att skicka digital information över hela världen i mycket korta tidskrifter. Webbdesigners jobbar med budbärare och kurirer med några mer tilltalande estetik.
Om du gillar demosidan kan du ladda ner en kopia av min källkod också. Du kan använda denna kod utan licensiering som offentlig domän. Gärna redigera och kopiera dessa stilar för något projekt, kommersiellt eller på annat sätt. Att lägga till fler resurser på nätet kan ge ytterligare ett steg till nyare designers som flyttar in i fältet. Dessutom om du har några frågor eller kommentarer, snälla dela med oss i det efterdisciplinära området.