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]
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]
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]
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]
Pingback: CSS-meny med expanderbara knappar | Andreas Karman