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
<div>
<p>Vertikalt centrerad text.</p>
</div>
CSS
div{
height:100px;
}
div p{
line-height:100px;
margin: 0
}
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
<div class="box"> </div
CSS
.box{
margin: 0 auto;
}
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
<p>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.</p>
CSS
p:first-letter{
display: block;
float: left;
background: #73b1c6;
margin-right: 6px;
padding: 12px;
font-weight: bold;
font-size: 1.6em;
color: #fff;
}
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
<h1><a href="http://www.andreaskarman.se">Andreas Karman bloggar</a></h1>
CSS
h1 a{
display:block;
background: url(logo.png) no-repeat;
width: 360px; height: 45px;
text-indent: -9000px;}
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
<p>Gränsnittsutvecklare på Mogul, Wordpress-entuasist och Johnny Cash-fantast.</p> <p class="uppercase">Gränsnittsutvecklare på Mogul, Wordpress-entuasist och Johnny Cash-fantast.</p> <p class="lowercase">Gränsnittsutvecklare på Mogul, Wordpress-entuasist och Johnny Cash-fantast.</p> <p class="capitalize">Gränsnittsutvecklare på Mogul, Wordpress-entuasist och Johnny Cash-fantast.</p>
CSS
p {}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
