CSS Boxar Med Rundade Hörn, Toning Och Skugga
Published Thursday, May 24, 2007 in (X)HTML, CSS, Design
I denna korta artikel tänkte jag beskriva ett sätt att bygga boxar med rundade hörn, skuggor och toning med enbart en div och ett rubrik-element.
Boxen kommer såklart vara flexibel i höjd, men däremot ha en fast bredd. Krävs flexibel bredd så krävs fler än 2 bakgrundsbilder, vilket då (i nuläget) kräver fler än 2 element.
Om några år (förhoppningsvis) så kommer browsers ha stöd för flera bakgrundsbilder i ett element, och då kan vi bygga hur avancerade boxar vi vill med en enda div, men i dagsläget får vi antingen nästa div:ar, eller nöja oss med fast bredd.
Boxen i exemplet kommer att se ut såhär:
Men kan som vanligt enkelt ändras genom att pilla lite i CSS:n och ändra bilderna.
Boxen kommer bestå av två bilder, den ena placerar vi i div:en, och den andra i rubrik-elementet.
HTML-Koden
Jag förutsätter att alla boxar har någon form av rubrik, och då kan vi alltid använda det -första- enda (IE har inte stöd för :first-child tyvärr) rubrik-elementet för att placera den övre bakgrundsbilden i.
<div class="box">
<h2>Nyheter!</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
Väldigt simpel HTML som de flesta borde känna till.
P:n och ul:en är bara där för att fylla ut boxen, de krävs inte för att den ska se ut som den gör.
Jag ger diven en klass så vi enkelt kommer åt den från CSSn.
CSS-Koden
div.box {
background: url(box-bottom.gif) no-repeat left bottom;
width: 380px;
padding: 0 17px 18px 12px;
margin: 10px 0;
}
div.box h2 {
background: url(box-top.gif) no-repeat left top;
margin: 0 -17px 15px -12px;
padding: 15px 40px 0 55px;
height: 27px;
font: bold 16px/1.2 Arial;
color: #fff;
}
Jag placerar som sagt den nedre bakgrundsbilden för boxen i själva diven, jag ger dessutom diven lite margin (för att separera den från andra element) och padding (för att inte innehållet i boxen ska ligga mot kanten).
Paddingen diffar lite från fall till fall, i detta fall är det mer skuggning på höger sida och i botten, det är därför det är mer padding-right/bottom än left/top.
Bredden är som jag nämde tyvärr nödvändig, men bygger man inte en design i relativa enheter (som % eller em) så borde det inte spela någon större roll.
I rubrik-elementet placerar jag sedan den övre delen av boxen.
Jag måste använda negativ marginal i h2:an för att dra ut den till boxens absoluta kanter. Som du ser reflekterar den negativa marginalen precis boxens padding, så h2:ans bakgrundsbild hamnar rätt.
Jag ger den positiv margin-bottom för att inte texten i boxen ska ligga direkt under rubriken.
Tyvärr krävdes höjd i h2:an i just det här exemplet, men bygger du en box där bilden kan flyta ut till enbart en färg så kan du ta bort höjden och justera paddingen litegrann.
So there you have it, en snygg(?) box som bara har ett enda osemantiskt element.
Tänk alltid på att alla element kan stylas lika innan du börjar fylla din kod med spans och divar.
Comments
4 comments so far, why don't you post one too?
Saturday, June 09, 2007 | View all comments by Erik
Då har man lärt sig att använda negativa marginaler, väääldigt användbart. Tack för den!
Sunday, June 10, 2007 | View all comments by Ante
Absolut, negativa marginaler kan vara riktigt användbart ibland.
Fan vad trött jag är på att ÅÄÖ fuckas upp i alla ajax-anrop... Ska fixa det dock, direkt jag får lite tid över.
Monday, April 21, 2008 | View all comments by Joachim
Hej!
Finns det nån möjlighet att överföra detta på en bloggs tables i en css-mall? T.ex. i dessa:
#side {margin-right:0;
padding: 24px 12px 0px;
float: right;
width: 150px;
}
#content {
overflow: hidden;
width: 605px;
float: left;
background: url(http://youngmanhood.blogg.se/images/images3c_1208097752.jpg);
padding: 20px;
voice-family:"\"}\"";
voice-family:inherit;
text-align: left;
vertical-align: top;
margin: 5px 0px 0px;
}
Vänligen,
Joachim
Monday, April 21, 2008 | View all comments by Ante
Nej. Det finns inget sätt att ta denna CSS och applicera på en tabell iom att en tabell inte innehåller samma HTML som denna CSS stylar.
Använd istället HTMLen som jag föreslår ovan. Är det verkligen tabulär data du märker upp så ska du självklart använda en tabell men då måste du styla på ett annat sätt (då en tabell består av table, tr, td och th-element och inte div och h2).