kaxigt.com

CSS 3 – del 4: Rundade hörn gradient-borders border-images

Vad sägs om rundade hörn, gradient borders och border-images?

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!

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.

.selector {background-color: #eee; border-radius: 25px; border: 1px solid #999; padding: 20px;}

Men det är inte nog med detta, du kanske bara vill ha vissa hörn rundade? Då ska du absolut testa detta.

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

Koden till det rundade nedre vänstra hörnet

.selector {border: 1px solid #000; border-radius-bottomleft: 10px; border-bottom-left-radius: 10px;}

Koden till det rundade nedre högra hörnet

.selector {border: 1px solid #000; border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}

Koden till det rundade vänstra övre hörnet

.selector {border: 1px solid #000; border-radius-topleft: 10px; border-top-left-radius: 20px;}

Koden till det rundade högra övre hörnet

.selector {border: 1px solid #000; border-radius-topright: 10px; border-top-right-radius: 10px;}

Koden till både vänster och höger hörn rundade

.selector {border:1px solid #000; border-radius: 0 10px 10px 0;}

Koden till alla hörn rundade med olika border-radius

.selector {border:1px solid #000; border-radius: 30px 50px 15px 5px;}

Gradient Border

Koden för gradient border

.border_gradient {
  border: 10px solid;
  border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));
  border-image-slice: 1;
}

Och som shorthand:

.border_gradient {border: 10px solid;border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;}

Koden för gradient border endast på sidorna

.selector{
max-width: 250px;
  padding: 1rem;
  color: #333;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      red, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
}

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.

Värde och egenskaper

border-image-source. Bildens sökväg. Se border-image-source.

border-image-slice. Dimensionerna att skiva upp bildens i olika områden. Det går att specificera upp till fyra stycken. Se border-image-slice.

border-image-width. Vidden på bordens bild. Det går att specificera upp till fyra stycken. Se border-image-width.

border-image-outset. Border-bildens avstånd från elementets ytterkant. Det går att specificera upp till fyra stycken. Se border-image-outset.

border-image-repeat. Definierar hur kantregionerna för källbilden justeras för att passa dimensionerna för kantbilden. Upp till två värden kan anges. Se border-image-repeat.

Formell syntax

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Källa: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

Exempel på bild-border

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/images/bild.jpg);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px; /*ny 35px;*/
border-image-source: url(/images/bild.jpg);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
margin-bottom:15px;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px; /*ny 45px;*/
border-image-source: url(/images/bild.jpg);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
margin-bottom:15px;
}

Som du ser så för varje ökning av bild-bordens vidd så minskar motsvarande utrymme för innehållet trots att samtliga har samma värden border: 10px solid transparent; padding: 15px;.

För att få det mer funktionellt och att se snyggt ut så lade jag till motsvarande pixlar från border-image-width till respektive borders padding. Det blir också bättre på mindre bildskärmar.

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;

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;

Dashed Border Generator

See the Pen
Dashed Border Generator by Amit Sheen (@amit_sheen)
on CodePen.