Ytterligare 5 användbara CSS-tricks

Mitt inlägg 5 användbara CSS-tricks blev snabbt bloggens populäraste inlägg och vad passar inte bättre än ett uppföljande inlägg med ytterligare 5 användbara CSS-tricks för er som vill utveckla era kunskaper inom området.

Numrererad lista med snygg formatering

Jag vet inte om detta platsar som ett trick, men det är ett enkelt sätt att snygga till dina numrerade listor. Genom att lägga den text som ska skrivas ut efter siffran innanför ett element (i exempel en paragraf) kan du skilja dessa åt.

Markup
[sourcecode language='html']

1. Lorem ipsum dolor sit amet, consectetur

   .

2. Lorem ipsum dolor sit amet, consectetur

   .

3. Lorem ipsum dolor sit amet, consectetur

   .

[/sourcecode]

CSS
[sourcecode language='css']
ol {
font-style: italic;
font-size: 1em;
font-family: Georgia;
color: #7dc6ec;
}

ol p {
font-style: normal;
font-size: .8em;
font-family: Arial;
color: #000000;
}
}
[/sourcecode]

Flera klassnamn på ett element

På alla element har du möjlighet att applicera flera klasser, om du seperarar klassnamnen med mellanrum. Detta kan med fördel användas om du till exempel har en textfärg som du vill applicera på flera element och som du sedan enkelt ska kunna ändra genom att bara ändra på ett enda ställe i din CSS-mall.

Markup
[sourcecode language='html']
Text
[/sourcecode]

CSS
[sourcecode language='css']
.bold {
font-weight: bold
}

.red {
color: #ee3f2d;
}
[/sourcecode]

Negativa marginaler

Erik Petterson efterfrågade i det tidigare inlägget information om negativa marginaler – en teknik som kan vara väldigt smidig att använda för att positionera element och som är helt enligt handboken. Här är ett enkelt exempel, i senare inlägg kommer jag att visa fler praktiska användningsområden av negativa marginaler.

Markup
[sourcecode language='html']

[/sourcecode]

CSS
[sourcecode language='css']
.box-1 {
height: 30px;
background: #ececec;
margin-bottom: -15px
}

.box-2 {
height: 30px;
background: #b9b9b9;
margin-left: 15px;
}
[/sourcecode]

Positionering av ett element i förhållande till det omkringliggande elementet

Om du har ett element med position: relative och sedan har ett element innanför med position: absolute kommer detta element att positioneras exakt efter den omkringliggande elementet. Detta är ett utmärkt sätt att få ett element att positioneras precis där du vill ha det.

Markup
[sourcecode language='html']

[/sourcecode]

CSS
[sourcecode language='css']
.relative {
position: relative;
}

.absolute {
position: absolute;
top: 40px;
left: 40px;
}
[/sourcecode]

Genomskinlighet på ett element

Chris Coyier tipsar om denna teknik för att på ett enkelt sätt applicera genomskinlighet på ett element som fungerar i de flesta webbläsare (inklusive Internet Explorer). I exemplet är genomskinligheten satt till 50 %.

Markup
[sourcecode language='html']