bloggtips

Jag vet inte hur många utav mina läsare som bloggar, men något jag vet är att alla bloggare vill kunna göra allt för att piffa till sina designer så gott man kan. I början hade jag, precis som alla andra, jättesvårt att veta vilka olika funktioner man kunde använda till allting. Det ÄR verkligen en helt ny värld. Jag tyckte fram för allt att rubrikerna med dessa ”vanliga” typsnitt kunde se så himla platta och tråkiga ut. Här ovan har jag visat er några olika CSS-koder som kan hjälpa dig att piffa till din rubrik lite, och idag fokuserar jag på typsnittet Times New Roman.

Jag tycker om att använda dessa vanliga, platta, tråkiga men läsvänliga typsnitt i bloggdesigner jag gör, på grund av funktionalitet. Om man inte vet hur man installerar ett eget typsnitt på sin blogg eller hemsida, så ska man köra på säkra kort och använda ett typsnitt som man vet finns på alla datorer, så att dina läsare ser designen och typsnittet precis som du gör. Att sitta och designa dina rubriker utifrån ett typsnitt som bara du ser, kan se jätteknasigt ut hos någon annan. Just därför, kan det vara bra att ha lite koll på hur du kan designa dina rubriker lite snyggare och lite intressantare.

Självklart ser alla kodmallar och stilmallar helt olika ut, men på blogg.se brukar inläggsrubriken stå för ”h3” i stilmallen. Kanske ”#content h3”, i vissa fall. Se till att ni har koll på var i stilmallen ni ändrar innan ni börjar koda, eller se till att ha en backup på din design ifall något skulle gå snett. Här nedan beskriver jag koden/erna, och på bilden här ovan ser ni resultatet samt hur koden ser ut för att designa rubriken på ett visst sätt.

 

h3 {
color: #000;
font: italic bold 30px/1.8em Times New Roman;
text-align: center;
letter-spacing: 2px;
text-shadow: 0px -0px 2px #646464;
}

 

  • color står, rätt självklart, för vilken färg texten har.
  • font beskriver rubriken
    • italic gör att rubriken blir kursiv
    • bold gör att rubriken blir fet
    • 30px beskriver vilken textstorlek rubriken har
    • 1.8em beskriver radavståndet
    • Times New Roman står för typsnittet
  • text-align positionerar rubriken. Antingen skriver du left/center/right.
  • letter-spacing beskriver avståndet mellan bokstäverna
  • text-shadow anger skuggan bakom texten i rubriken

2 kommentarer till “Snygga till dina blogg-rubriker med enkel CSS

Kommentera

E-postadressen publiceras inte.

Läsvärda inlägg