5 användbara CSS-tricks


Dags att presentera fem användbara CSS-tricks och tekniker som varje person som bygger webbplatser bör ha koll på. Perfekt för dig som håller på och lär dig hur utnyttjar CSS på bästa sätt.

1. Vertikal centrering

Ett sätt för att åstadkomma vertikal centrering med CSS är genom line-height. Detta kräver dock att du har en fast höjd på det element som centreringen sker kring.

Markup
[sourcecode language=’html’]

Vertikalt centrerad text.

[/sourcecode]

CSS
[sourcecode language=’css’]
div{
height:100px;
}

div p{
line-height:100px;
margin: 0
}
[/sourcecode]
Vertikal centrering med CSS


2. Horisontell centrering

Genom att sätta margin till 0 auto på ett element får du en horisontell centrering mot det omkringliggande elementet.

Markup
[sourcecode language=’html’]

CSS
[sourcecode language=’css’]
.box{
margin: 0 auto;
}
[/sourcecode]
Horisontell centrering med CSS


3. Markera första tecknet

Ett enkelt sätt att fånga uppmärksamheten för en text är att genom pseudoklassen first:letter ge den första bokstaven eller tecknet i en text en speciell formatering.

Markup
[sourcecode language=’html’]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam nec urna. In hac habitasse platea dictumst. Proin mauris
lorem, congue in, suscipit eu, interdum vel, nibh.

[/sourcecode]

CSS
[sourcecode language=’css’]
p:first-letter{
display: block;
float: left;
background: #73b1c6;
margin-right: 6px;
padding: 12px;
font-weight: bold;
font-size: 1.6em;
color: #fff;
}
[/sourcecode]
First-letter


4. Göm text i ett element

Använder du en bild som logotyp på din webbplats, men vill fortfarande ha kvar en text och en H1-tagg för sökmotoroptimeringen? Genom text-indent kan du få texten att försvinna från besökarens webbläsare, men fortfarande ligga kvar för Google och andra sökmotorer att upptäcka.

Markup
[sourcecode language=’html’]

Andreas Karman bloggar

[/sourcecode]

CSS
[sourcecode language=’css’]
h1 a{
display:block;
background: url(logo.png) no-repeat;
width: 360px; height: 45px;
text-indent: -9000px;}
[/sourcecode]


5. Använd text-transform

Text-transform hjälper dig att på ett enkelt sätt formatera text med CSS. Används till exempel med fördel om du till exempel ska ha stora bokstäver på varje nytt ord i en rubrik överallt på en webbplats.

Markup
[sourcecode language=’html’]

Gränsnittsutvecklare på Mogul, WordPress-entuasist och Johnny Cash-fantast.

Gränsnittsutvecklare på Mogul, WordPress-entuasist och Johnny Cash-fantast.

Gränsnittsutvecklare på Mogul, WordPress-entuasist och Johnny Cash-fantast.

Gränsnittsutvecklare på Mogul, WordPress-entuasist och Johnny Cash-fantast.

[/sourcecode]

CSS
[sourcecode language=’css’]
p {}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
[/sourcecode]