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

Postad: 09.11.2009 | CSS · Uppdaterad

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!

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

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;}
här kommer innehållet i boxen

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

Innehåll här
.selector {border: 1px solid #000; border-radius-bottomleft: 10px; border-bottom-left-radius: 10px;}

Koden till det rundade nedre högra hörnet

Innehåll här
.selector {border: 1px solid #000; border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}

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

Innehåll här
.selector {border: 1px solid #000; border-radius-topleft: 10px; border-top-left-radius: 20px;}

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

Innehåll här
.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

Innehåll här
.selector {border:1px solid #000; border-radius: 0 10px 10px 0;}

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

Innehåll här
.selector {border:1px solid #000; border-radius: 30px 50px 15px 5px;}

Gradient Border

Innehåll

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

Innehåll Här. Vi behöver lite längre innehåll för syn skull. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. Credits: https://css-tricks.com
.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

Exempel 1: border-image-width: 10px; border: 10px solid transparen; padding: 15px;
#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;
}
Exempel 2: border-image-width: 15px; border: 10px solid transparent; padding: 15px;
#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;
}
Exempel 3: border-image-width: 20px; border: 10px solid transparent; padding: 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.

Exempel 1 – border-image-width: 10px; border: 10px solid transparen; padding: 15px;
Exempel 2 – border-image-width: 15px; border: 10px solid transparent; padding: 35px;
Exempel 3 – border-image-width: 20px; border: 10px solid transparent; padding: 45px;

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


Dashed Border Generator

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

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.