CSS 3 – del 4 – Borders

Att använda borders är ett lätt sätt att förhöja valda delar på sin hemsida. Med CSS3 kan man verkligen skapa många finesser! Vad sägs om rundade hörn, gradient borders och border-images? Ja ni läste faktiskt rätt, det går att använda bilder till sin border. De som för länge sedan kanske använde nästlade tabell-layouter minns säkert att man åtminstone använde 2 eller rent av 3 tabeller förutom själva content i syfte att skapa borders med bilder. Nu fixar CSS3 den saken!

Rundade borders

Inget kan bli enklare, utan bilder och utan javascript kan man skapa rundade borders genom att välja border-radius och background position. Låt oss kika på några exempel (exempelkoder är hämtade hos css3.info.com). Du som använder Mozilla/Firefox och Safari 3 ser en rundad box med snygga rundade hörn. Ni andra kommer just inte se något annat än en vanlig fyrkant. Koden finns inuti boxen.

<div style=" background-color: #d4c99d; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #fff; padding: 20px;">här kommer innehållet i boxen </div>

Vill du hellre lägga in allt i en specificerad class så ser koden ut så här. Exempelkoden hämtad hos http://designshack.co.uk.

.border_rounded {
background-color: #d4c99d;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #fff;
padding: 20px;
width: 310px;
}

Men det är inte nog med detta, du kanske bara vill ha vissa hörn rundade? Då ska du absolut testa detta. Samtliga exempelkoder härunder är hämtade hos css3info.com.

Alternativa rundade hörn

* -moz-border-radius-topleft / -webkit-border-top-left-radius
* -moz-border-radius-topright / -webkit-border-top-right-radius
* -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
* -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Det här är koderna till boxen med det rundade nedre vänstra hörnet

<div style="border: 1px solid #000; border-radius-bottomleft: 10px; -o-border-radius-bottomleft: 10px; -icab-border-radius-bottomleft: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; -icab-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; padding: 5px 5px 5px 15px;">Innehåll här</div>
Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.

Det här är koderna till boxen med det rundade nedre högra hörnet

<div style="border: 1px solid #000; border-radius-bottomright: 10px; -o-border-radius-bottomright: 10px; -icab-border-radius-bottomright: 10px; -khtml-border-radius-bottomright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; -icab-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; padding: 5px 5px 5px 15px;">Innehåll här</div>
Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

Det här är koderna till boxen med det vänstra övre hörnet rundat

<div style="border: 1px solid #000; border-radius-topleft: 10px; -o-border-radius-topleft: 10px; -icab-border-radius-topleft: 10px; -khtml-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px; -webkit-border-radius-topleft: 10px; border-top-left-radius: 20px; -o-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -moz-border-top-left-radius: 20px; -webkit-border-top-left-radius: 20px; border: 1px solid #000; padding: 5px 5px 5px 15px;">Innehåll här </div>
Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.

Det här är koderna till boxen med det högra övre hörnet rundat

<div style="border: 1px solid #000; border-radius-topright: 10px; -o-border-radius-topright: 10px; -icab-border-radius-topright: 10px; -khtml-border-radius-topright: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -icab-border-top-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; padding: 5px 5px 5px 15px;">Innehåll här</div>
Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.

Border-color Gradient

Vad jag har förstått så är det endast Mozilla Firefox som stöder detta än så länge. Men effekten går inte av för hackor! Exempelkoderna är hämtade hos css3.info.com och designshack.co.uk.

Mozilla/Firefox users should see a nice grey fading border on this box…

Koden för border gradient som class

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
width:500px;
}

Eller så här:

<div style="border: 8px solid #000; border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -o-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -icab-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -khtml-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -webkit-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px;">Innehåll här</div>

Border – image

Att använda en bild som border är något helt nytt och revolutionerande. Det här innebär att du faktiskt kan definera en bild som en border. Man använder två egenskaper: border-image och border-corner-image. Exempelkoderna och bilderna är hämtade från css3.info.com.

För border – image

 border-top-image
 border-right-image
 border-bottom-image
 border-left-image

För border – corner – image

 border-top-left-image
 border-top-right-image
 border-bottom-left-image
 border-bottom-right-image

Själva syntaxen för din css-kod ser ut så här och genererar följande:

border-image: url(border.png) 27 27 27 27 round round;

border-image1

Ett annat alternativ är att “sträcka” ut bilden (stretch). Syntaxen ser ut så här och ger följande:

border-image: url(border.png) 27 27 27 27 stretch stretch;

border-image2

Funktionen fungerar vad jag vet endast i Safari från och med version 3 .1 och Firefox.

Liknande poster:

Leave a Reply

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