Webbplatser har blivit ett medium för att dela information med hela världen. Detta har övergått till att inkludera media som foton och videoklipp. Men text på en webbsida är fortfarande det övervägande valet för webbpublicering. Detta skulle innebära att hur du strukturerar punkter, meningar och text på sidan kan ha stor inverkan om en besökare väljer att hålla sig fast och läsa vad du måste säga.
I den här handledningen vill jag dela några CSS-tips för att skapa kreativa stycken eller textdesigner. Läsbarthet och typsnitt val är ofta direkt relaterade till själva designen. Men att inkorporera texteffekter som drop caps, highlights och igenkänliga hyperlänkar skiljer sig från annat innehåll på sidan. Ta en titt på min live-demo för att se vad vi försöker bygga.
Live Demo - Hämta källkod
Allmän sidinställning
Jag har skapat en typisk HTML5-doktyp tillsammans med ett fast centerinnehåll. Styckformat är tänkt att visas tillsammans med andra sidelement, till exempel ett meddelandefält eller blockquote. Du kan säga mycket skriftligt utan att använda några sekundära rubriker på sidan.
Mitt stylesheet är ganska grundläggande med ett antal CSS återställningar och positionering. Varje styckeelement är utformat med ems med en extra marginal längst ner. Du kan också se hur jag har skapat h1-taggen med horisontella gränser placerade jämnt i mitten.
Jag har valt att använda? Helvetica Neue? som den primära teckensnittet över hela sidan. Detta är ett sans-serif-alternativ till Helvetica, men det bör inte begränsa typografival för speciella sidobjekt.
Innan vi hoppar in i effekterna är det värt att glätta över HTML-koden. Titta på några av klassnamnen och de olika elementen jag har använt för olika ändamål inom varje stycke.
Avsnitt Dropplockar
Det första du förmodligen kommer att märka är det stora fallet brev i första stycket. Detta styckeelement använder en klass av .först som är direkt bunden till droppehattseffekten. Författare inkluderar ofta detta tappade kapital inom böcker och utskriftsarbete - men det är också bra för artiklar på webben.
Du kommer märka att det finns två selektörer tillämpade på denna tappade kapitaleffekt. CSS har en pseudoklass som heter :första bokstaven som riktar sig till den allra första bokstaven i något element. Observera att detta inte fungerar om din paragraf innehåller ett annat element som föregår texten (till exempel en miniatyrbild). Om du behöver en bild i avsnittet om drop-cap, använd en CSS-bakgrund istället för HTML-img-taggen. Med detta :första bokstaven väljare kan vi applicera dropplocket på något stycke med klassen .först.
Men med en annan klass .dropcap Vi skulle kunna tillämpa effekten genom att specifikt sätta in brevet i ett spänningselement. Detta verkar som L i HTML-dokumentet. För CMS-motorer som WordPress är det enklaste att skapa ett tema som stöder .först klass bifogas varje första stycke i dina inlägg eller sidor (eller båda).
Jag har också utformat en alternativ drop-cap-effekt som skapar en mörkare bakgrund som omger brevet självt. Observera det här alternativa dropplocket använder familjen Helvetica Neue medan den ursprungliga droppehuven ändras till Georgia eller en annan serif font. Detta tar den dialekt vi ofta hittar i tryckta böcker och kopierar den till den digitala skärmen.
Nu använder 2: a stycket på sidan en klass av .större vilket helt enkelt ökar teckensnittstorleken och linjehöjden för hela stycket. Vissa webbplatser föredrar att göra första stycket större för att skilja från resten av sidan. Men du kan också försöka kombinera drop caps tillsammans med större text för att verkligen fånga människors uppmärksamhet.
Interna citat
Artiklar som har citat från en annan person använder ofta blockquotes och andra liknande element. Pull citat är lite annorlunda eftersom de använder text direkt från själva artikeln. Detta görs ofta för att betona en punkt eller fras som är avgörande för innehållets övergripande tema.
Min pull quote design liknar mycket vad du hittar här på Design Shack. Den använder en lite mörkare bakgrund tillsammans med CSS3-boxskuggor för att bli mer avancerad. Den interna citattexten är också större för att skilja sig från de många andra styckena. Det är viktigt att flyta dessa dragkvoter över till vänster eller höger sida av sidan så att de inte visas som vanliga blockkvoter.
När vi använder elementet HTML5 blockquote kan vi ofta inkludera andra interna element. Vissa blockquotes kommer att innehålla flera stycken och till och med en citat för citatet. Designstilen använder massor av vadderingar och marginaler för att skapa utrymme mellan de vanliga styckena. Den vänstra gränsen är som en markör för att hjälpa läsare genast att känna igen blockquote skiljer sig från de andra omgivande styckena.
Anpassa symboler
Även om detta är en liten speciell effekt, uppmärksammar besökarna när de läser igenom innehållssidor. HTML-enheter används för att visa symboler i din text. Dessa enheter kan använda något som Font Awesome för att visa anpassade ikoner, eller du kan använda dem för att visa typiska HTML-symboler.
I mitt exempel har jag skapat ampersand med ett inslagspanel. Detta kommer att ändra typsnittet till Gabriela som använder mer av en serifdesign. Ett generiskt spanelement med klassen .fancyamp kan tillämpa denna typsnittfamilj på enheten utan att påverka någon annan text. Jag har också ändrat det lite större för att hjälpa dig att sticka ut från de omgivande bokstäverna.
Men tro inte att den här effekten bara kan användas för ampersands. Upphovsrättssymboler, fraktioner och andra HTML-enheter kan alla dra nytta av denna stiliserade design. Du kan till och med överväga andra texteffekter som fet kursiv eller uppdatera textfärgen.
Länkar och utmärkta toner
I de första styckena hittar du lite markerad text tillsammans med en spiffy ankarlänk. De har båda lite extra vadderar, eftersom de båda använder bakgrundsfärger.
För ankarlänkarna har jag valt en grön färgpalett, även om du kan arbeta med en blandning av färger som bäst passar din layout. Den extra bakgrundseffekten när du sveper varje länk hjälper besökare att genast känna igen när de har svängt på något. Länktexten mörknar faktiskt så det sticker ut från den ljusare grön bakgrunden.
Eftersom jag har lagt in vaddering på vänster och höger sida, används de negativa marginalerna för att motverka några konstiga utrymmen när du svänger på och av varje länk. Det finns också vaddering på .markera klass men eftersom det inte behöver en :sväva design, det extra utrymmet kommer aldrig att märkas.
Om en markerad texteffekt inte räcker till kan du alltid skapa sekundära klasser för punktanmälningar. Min klass .lägga märke till ändrar drastiskt textfärgen för att matcha den ljusare nyansen av gul i bakgrunden. Använda CSS3 text-shadow egendom hjälper till med läsbarhet. Du kan också göra dubbla klasser för meddelandefält i andra färgscheman som grönt eller blått.
Live Demo - Hämta källkod
Stängning
Jag skulle inte rekommendera att integrera alla dessa effekter på varje sida på din webbplats. Men det är klokt att planera ut dessa stilar i förväg och testa allt innan du lägger till kod i ditt stilark.
Besökare är så vana vid traditionella effekter som du verkligen kan fånga en publik med dessa undertoner. Du kan ladda ner en kopia av min självstudiekod och se vilka andra idéer du kan lägga till i dessa styckeffekter.