Det finns en allmän trend mot mindre? Kolumnförteckningar? i hemsida layouter. Speciellt startar tekniska startsidor och målsidor denna effekt för att främja funktioner i sina produkter. Men det är en snygg liten design layout stil för något ändamål, och med hjälp av ikoner i din design kommer att bryta sig bort från de vanliga malldesignerna för en spännande listavisning.
I denna handledning vill jag visa hur vi kan använda anpassade CSS3 webbfonter som en ikon i HTML. Vi kommer att skapa en mycket grundläggande startwebbplats med hjälp av listan med två kolumner. Alla CSS är mycket enkla, även om du kanske behöver göra lite forskning på några av fastigheterna. Denna effekt är inbyggd i alla standardkompatibla webbläsare och fungerar perfekt på OS X eller Windows.
Live Demo - Hämta källkod
Nedladdning av teckensnitt
Jag rekommenderar alltid designers att kolla in Entypo-typsnittet som är öppen källkod och gratis att hämta. Paketet innehåller teckensnitt i alla de 4 stora filtyperna, och har också skrivbordsversioner för installation på Mac eller PC. Den har också en separat ikonpaket för sociala medier knappar. Vi behöver bara Entypo-webbfontfamiljen kopieras till en ny katalog med namngivna teckensnitt. Här är listan över filer som jag har inkluderat:
- entypo.eot
- entypo.svg
- entypo.ttf
- entypo.woff
Jag kommer att visa hur man kan inkludera detta med CSS lite senare. Var noga med att allt är ordentligt ordnat och redo att inkludera på sidan. Även min demo har en liten bildmapp för BG-effekterna, men de är inte relevanta för hela layouten. Hämta enkelt en kopia av min demo om du vill ha alla resurser tillsammans.
Först bör vi titta på hur sidan är strukturerad och planen för att anpassa allt perfekt.
Planerar HTML
Vi behöver inte täcka alla HTML-sidor på sidan, men bara de viktiga bitarna. Först upp är mitt rubrikavsnitt som innehåller en länk till den relativa CSS-filen, plus några unika Google Webfonts. Observera att vår lokala CSS3 @ Font-face Deklarationen kommer inte att påverka dessa tredjepartsfonter alls.
Det är inte så mycket vanligt här, så vi kan gå direkt in i kroppssektionen. Jag använder en yttre wrapper div med en intern #innehåll behållare. Detta rymmer hela inre sidavsnittet tillsammans med listorna med 2 kolumner. Hela föremålet är faktiskt inne i en oorderad lista med ID #funktioner.
Jag har lagt till en .clearfix klassen på det yttre UL-elementet så att behållaren trycker ner resten av innehållet på sidan. Eftersom alla interna listposter är flytande behöver vi en metod för att hålla boxmodellen i kontroll. På samma sätt varje listobjekt .funktion innehåller både ett spänn och en mindre rubrik.
Spänningen använder våra ikonikoner för att visa en specifik design intill texten. Vi har möjlighet att lägga till fler klasser så att en listobjekt kan spänna över hela sidan. Funktionsobjekt är bara det mest grundläggande behållarobjektet där vi har 2 listor per rad. Du kommer också att märka att ikonpanelen har både en klass för specialfontsfamiljen och en klass för den typ av ikon som vi visar.
Denna sekundära klass är till hjälp om ikonen är placerad på ett konstigt ställe. Om något är för stort eller för litet eller obehagligt placerat så är den här direkta klassen lättare att manipulera. Och det gör också skimming via HTML-koden en enkel process. Den sista biten av koder finns i mina styles.css fil och det är verkligen inte alltför alltför komplicerat.
Kolumnformat med CSS
Den första intressanta biten du kommer att märka ligger längst upp i min fil. Här använder vi en ny CSS3 font-face-deklaration för att installera ikonens teckensnitt. Genom att använda ett enda efternamn kan vi importera alla 4 olika filtyper samtidigt.
Den extra font-weight och typsnitt Egenskaper är inte nödvändiga - men definitivt värt att hålla. Det gör inte ont för att ange att vår nya typsnitt inte är fet eller kursiv som standard. Det är också en bra mall värt att spara om du planerar att använda många CSS3 webbfonter.
Detta är en annan intressant bit kod som jag inte visade i HTML. I grund och botten ställer jag in ett stycke introtext som bryts i två kolumner med de nyare CSS3-egenskaperna och de relaterade leverantörs prefixen. Observera att detta inte har något att göra med ikonlistan, men det är en annan metod för att skapa kolumnerat innehåll på dina sidor.
Nu har jag alla koder som är angivna mot huvudpiktogramlistan.Inuti min piktogramklass använder vi den nya familjen "EntypoRegular" till en standardstorlek på 8em. Ikonerna är ursprungligen väldigt små, så vi måste se till att de är tillräckligt stora för att placeras bredvid ett block med underrubrikstext.
Var och en av .funktion objekt är begränsad till en bredd på 420px tillsammans med en del intern padding. Mellanrummen mellan varje kolumn ger en fullständig 100% bredd till den oordnade listan. Och inom listobjekten har vi piktogrammen flytande kvar med relativ positionering. Du kan bli förvånad över hur lätt det är att behålla varje ikon på rätt plats med några mindre tillägg.
Det sista kvarteret är en samling av alla de olika ikonklasserna ihop. Jag har individuellt format varje på 12em eftersom vissa ikoner visas större eller mindre än andra. Med det här systemet kan du ange varje enskild uppsättning ikoner för att ändra hur de visas. Och eftersom de är placerade i förhållande till behållaren kan du också använda vänster / höger / topp / botten egenskaper för en enkel justering.
Live Demo - Hämta källkod
Slutgiltiga tankar
Även om detta inte är en särskilt svår handledning, kan de olika stegen för att bygga en kolumnlista vara tidskrävande. Du måste bestämma det perfekta ikonfonet och planera din skrivna text så det passar precis rätt.
Denna demo bör ge en bra utgångspunkt för att få bollen att rulla. Spendera lite tid på att brainstorma dina egna idéer och hur du kan tillämpa denna design i liknande layouter. Dessutom om du har några kommentarer eller frågor kan du dela med dig i kommentarfältet nedan!