Runda hörn utan bilder – enbart css

Att runda till hörnen på boxarna är snyggt – men tyvärr kan det ibland också vara lite knepigt att få det snyggt om man vill använda små bilder. Varför inte helt strunta i bilderna och istället lösa det med css?

Vi ska nu gå igenom hur man gör en div box med rundade hörn utan bilder. Det är inga stora koder, men viktigt att veta vilka lagren är och hur de placeras i förhållande till varandra. Totalt är det sju stycken med själva boxen. Vi börjar med csskoden

  1. .corner { background: #B7C2C8; width:500px; margin-left:auto;margin-right:auto;margin-top:50px;margin-bottom:50px;}
  2. .topcorner { background: #ffffff; }
  3. .botcorner { background: #ffffff; }

Vi döper vårt första lager till .corner. Det är denna kod som gör själva boxen, det vill säga lager 1. Bakgrundsfärgen till denna är färgen som kommer att utgöra h e l a boxen med samtliga hörn. I mitt fall valde jag #B7C2C8.

Lager nummer två är .topcorner. Som ni ser är bakgrundsfärgen ställd till vit för att jag har vit bakgrund på sidan. Här ändrar du till din egen färg. Funktionen för lagret .topcorner är att det fyller och jämnar ut bakgrundfärgen på kanterna i hörnen längst upp på boxen så dessa överrensstämmer med din valda bakgrundsfärg. Det är över detta lager vi sedan skapar våra hörn.

Lagret .botcorner har samma funktion som föregående lager genom att den jämnar ut kanterna på hörnen längst ned i boxen.

HTML-Koden så här långt

  1. <div class="corner">
  2. <div class="topcorner">

Vi gör en box och öppnar lager .topcorner. ovanpå boxen. Som Ni säker förstår så lägger jag inte in lager .botcorner förrän i slutet. Nu kliver vi vidare i vår csskod och granskar hur lagren för våra fyra hörn är konstruerade.


.c1{ margin: 0 5px; height: 1px; overflow: hidden; background: #B7C2C8; }/* lagret längst ut från boxen*/
.c2{ margin: 0 3px; height: 1px; overflow: hidden; background: #B7C2C8; }
.c3{ margin: 0 2px; height: 1px; overflow: hidden; background: #B7C2C8; }
.c4{ margin: 0 1px; height: 2px; overflow: hidden; background: #B7C2C8; }/* lagret längst in mot boxen*/

Koden margin: 0 5px; height: 1px; berättar detta:
margin 0 betyder att det ska vara 0 pixlar i top-bottom, medan margin 5px betyder att det ska vara ett indrag på 5px i left-right, det vill säga på var sida oavsett om det är hörnen högst upp eller ej. Höjden på lagret är ställt till 1 pixel och .c1 är det yttersta lagret på boxen. Totala höjden på dessa fyra hörnlager är tillsammans 5px. Overflow: hidden; anger att detta lagrets bakgrund ska döljas med lika många pixlar som vi har angett så bakgrunden i boxen .corner kommer fram.

Vi fyller på med lite mer HTML-koder var bara aktsam för den inbördes ordningen.

  1. <div class="c1"></div>
  2. <div class="c2"></div>
  3. <div class="c3"></div>
  4. <div class="c4"></div>

Nu måste vi också ha ett lager som höjdledes anpassar sig efter hur mycket text vi vill använda i boxen. Här har jag döpt det till .fluid eftersom det inte har en statisk storlek.

  1. fluid
  2. { padding: 10px;
  3. text-align:left;
  4. font:10pt/170% arial,verdana,"Trebuchet MS",Sans-serif;
  5. color:#222;
  6. }

Cssmärkningen för detta lager ger oss inte bara utseende på lagret utan även lagrets innehåll.

HTML-koden

  1. <div class="fluid">
  2. Här skriver du texten i boxen
  3. </div>

Så där – nu har vi kommit halvvägs.
Eftersom vi inte vill ha en halv box måste vi återigen infoga html-koden för hörnen fast nu i omvänd ordning, det vill säga inifrån boxen och utåt. Därför måste vi först infoga lagret .botcorner.

  1. <div class="botcorner">
  2. <div class="c4"></div>
  3. <div class="c3"></div>
  4. <div class="c2"></div>
  5. <div class="c1"></div>
  6. </div>
  7. </div>

Alla koder kan du kopiera från boxen här under. Lycka till!

CSS

.corner { background: #B7C2C8; width:500px; margin-left:auto;margin-right:auto;margin-top:50px;margin-bottom:50px;}
.topcorner { background: #ffffff; }
.botcorner { background: #ffffff; }
.c1{ margin: 0 5px; height: 1px; overflow: hidden; background: #B7C2C8; }/* lagret längst ut från boxen*/
.c2{ margin: 0 3px; height: 1px; overflow: hidden; background: #B7C2C8; }
.c3{ margin: 0 2px; height: 1px; overflow: hidden; background: #B7C2C8; }
.c4{ margin: 0 1px; height: 2px; overflow: hidden; background: #B7C2C8; }/* lagret längst in mot boxen*/
.fluid
{ padding: 10px;
text-align:left;
font:10pt/170% arial,verdana,”Trebuchet MS”,Sans-serif;
color:#222;
}

HTML

<div class="corner">
<div class="topcorner">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="fluid">
Här skriver du texten i boxen
</div>
<div class="botcorner">
<div class="c4"></div>
<div class="c3"></div>
<div class="c2"></div>
<div class="c1"></div>
</div>
</div>

Du kan läsa mer om detta fenomen hos Stu Nicholls på css play.

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *