Rammer og kanter i HTML
Det grundliggende ved rammer og kanter
Man kan som udgangspunkt sætte rammer på alle tags. Det er ikke alle det giver mening at sætte rammer på, fordi de ikke kan ses, f.eks. <BR>, men fordi rammer i dag styres med attributten STYLES, kan man sætte rammer på alle tags.
Der findes en attribut der hedder BORDER, som hører til TABLE-tag'en under HTML 4.01. Den er officielt ikke understøttet ved HTML 5, men den fungerer pt. også under HTML 5. Det er ikke en man skal bruge til sin kode, som skal ud til brugerne, men den er god, hvis man arbejder med en tabel uden rammer, og lige skal have vist alle cellerne for at orientere sig.
Rammerne består af tre variabler, som man skal huske at definere, for få samme resultat på tværs af browserne. Disse er:
border-style: Skal det være en fuldt optrukket linje, en stiplet linje, dobbelt linje, 3D effekter etc.
border-width: Hvor bred skal rammen være?
border-color: Hvilken farve skal rammen have?
Man kan samle de tre variabler så man kun skriver border og derefter variablernes værdi, f.eks. STYLE="border: 2px solid #000000" for en sort, fuldt optrukket ramme, men det er generelt en skidt idé, fordi det gør koden sværere at overskue.
Alle tre variabler findes også i en version hvor man kun styrer den ene side/ramme/kant, dvs. skal man specifikt sætte en border-style til toppen, kan man skrive STYLE="border-top-style:". Bemærk positionen er sat ind i midten, ikke i enden som border-style-top. Dette gælder både -style, -width og -color. Farven på højre side bliver således STYLE="border-right-color:" og så fremdeles. Der kan være situationer hvor dette er en fordel, f.eks. CLASS hvor man har defineret rammens stil, men lige i én række eller kolonne skal man på én eller to sider bruge en anden farve, type eller bredde.
border-style
Til border-style har man som udgangspunkt flg. muligheder:
Border-styles kan, ligesom marginer, padding og meget andet kombineres, så man har forskellige rammetyper hele vejen rundt, f.eks. STYLE="border-style: solid double dashed ridge", som kommer til at se således ud:
Det er vigtigt at have i mente, at 3D-effekterne vises forskelligt, afhængig af browserne. Især hvis man har brede rammer, bliver forskellen tydelig. En del af det er at default farver er forskellige for browserne, men den er også gal med at skære kanterne i smig nogle steder og simuleringen af skyggeeffekter på de "skrå flader" slipper browserne heller ikke alt for godt fra. Skal man lave brede rammer med 3D-effekter, kan man i stedet med fordel anvende border-image (gennemgås længere nede).
border-width
Bredden på rammerne defineres på samme måde som bredden på andre elementer dvs. man man selv vælge om man vil arbejde i px, pt, mm eller cm, f.eks. en ramme der er 3 px i bredden: STYLE="border-width:3px". Bredden af de enkelte rammer kan, på samme måde som typerne sættes enkeltvis, f.eks. en fuldt optrukket linje med STYLE="border-width:4px 3px 2px 1px":
border-color
Farver på rammer er simpelt for 2D rammerne. Ligesom bredder og typer, kan man farvelægge de fire rammer individuelt, f.eks. en fuldt optrukket linje med STYLE="border-color:green red black blue":
For 3D effekterne, kan farvelægningen godt blive lidt underlig at se på. Der ligger i browserne en rutine, der fortolker farven på de fire sider ud fra den farve man angiver, så man får genereret en 3D effekt. Siden som lyset kommer fra (øverst venstre) bliver lysere og skyggesiderne bliver mørkere. På de smalle rammer går det nogenlunde godt, f.eks. en outset i grøn (#00FF00) i 5px bredde:
Det er ikke fantastisk, men man får lidt 3D-fornemmelsen. Hvis man gør den bredere, går det helt galt, og man mister dybdevirkningen. Her er den samme ramme i 10px bredde:
En del af det ligger i at farverne er ens to og to, så ved at give de to lyse sider hver sin nuance af grøn og tilsvarende på skyggesiden, kan man godt gøre det lidt bedre ved selektivt at angive de fire farver:
En anden del af problemet ligger i at de forskellige browsere ikke viser farverne ens på de "skrå" sider. Dette er den samme kode som før som den vises på de fem mest almindelige browsere:
Det er ikke god latin, at have stor forskel på hvordan siden ser ud, afhængig af browseren, og selv når det er bedst, er det ikke godt, så her anbefales en anden løsning. Den hedder border-image og er gennemgået længere nede.
Der findes en attribut der hedder BORDER, som hører til TABLE-tag'en under HTML 4.01. Den er officielt ikke understøttet ved HTML 5, men den fungerer pt. også under HTML 5. Det er ikke en man skal bruge til sin kode, som skal ud til brugerne, men den er god, hvis man arbejder med en tabel uden rammer, og lige skal have vist alle cellerne for at orientere sig.
Rammerne består af tre variabler, som man skal huske at definere, for få samme resultat på tværs af browserne. Disse er:
border-style: Skal det være en fuldt optrukket linje, en stiplet linje, dobbelt linje, 3D effekter etc.
border-width: Hvor bred skal rammen være?
border-color: Hvilken farve skal rammen have?
Man kan samle de tre variabler så man kun skriver border og derefter variablernes værdi, f.eks. STYLE="border: 2px solid #000000" for en sort, fuldt optrukket ramme, men det er generelt en skidt idé, fordi det gør koden sværere at overskue.
Alle tre variabler findes også i en version hvor man kun styrer den ene side/ramme/kant, dvs. skal man specifikt sætte en border-style til toppen, kan man skrive STYLE="border-top-style:". Bemærk positionen er sat ind i midten, ikke i enden som border-style-top. Dette gælder både -style, -width og -color. Farven på højre side bliver således STYLE="border-right-color:" og så fremdeles. Der kan være situationer hvor dette er en fordel, f.eks. CLASS hvor man har defineret rammens stil, men lige i én række eller kolonne skal man på én eller to sider bruge en anden farve, type eller bredde.
border-style
Til border-style har man som udgangspunkt flg. muligheder:
| Værdi | Beskrivelse |
| none | Ingen ramme. |
| dotted | Eksempel En række prikker (IE vil vise dette som streger, hvis rammen er én pixel i bredden). |
| dashed | Eksempel En stiplet linje. |
| solid | Eksempel En fuldt optrukket linje. |
| double | Eksempel To fuldt optrukne linjer. Kræver min 3 px i bredde for at kunne ses som to linjer. |
| groove | Eksempel 3D effekt, der skal ligne en udskåret rende. |
| ridge | Eksempel 3D effekt, der skal ligne en forhøjning. |
| inset | Eksempel 3D effekt, der skal ligne en sænkning i niveau. |
| outset | Eksempel 3D effekt, der skal ligne en forhøjning i niveau. |
| hidden | Sammen effekt som 'None', men fungerer kun til tabeller og understøttes ikke af IE, hvorfor det anbefales ikke at bruge den. |
Border-styles kan, ligesom marginer, padding og meget andet kombineres, så man har forskellige rammetyper hele vejen rundt, f.eks. STYLE="border-style: solid double dashed ridge", som kommer til at se således ud:
Det er vigtigt at have i mente, at 3D-effekterne vises forskelligt, afhængig af browserne. Især hvis man har brede rammer, bliver forskellen tydelig. En del af det er at default farver er forskellige for browserne, men den er også gal med at skære kanterne i smig nogle steder og simuleringen af skyggeeffekter på de "skrå flader" slipper browserne heller ikke alt for godt fra. Skal man lave brede rammer med 3D-effekter, kan man i stedet med fordel anvende border-image (gennemgås længere nede).
border-width
Bredden på rammerne defineres på samme måde som bredden på andre elementer dvs. man man selv vælge om man vil arbejde i px, pt, mm eller cm, f.eks. en ramme der er 3 px i bredden: STYLE="border-width:3px". Bredden af de enkelte rammer kan, på samme måde som typerne sættes enkeltvis, f.eks. en fuldt optrukket linje med STYLE="border-width:4px 3px 2px 1px":
border-color
Farver på rammer er simpelt for 2D rammerne. Ligesom bredder og typer, kan man farvelægge de fire rammer individuelt, f.eks. en fuldt optrukket linje med STYLE="border-color:green red black blue":
For 3D effekterne, kan farvelægningen godt blive lidt underlig at se på. Der ligger i browserne en rutine, der fortolker farven på de fire sider ud fra den farve man angiver, så man får genereret en 3D effekt. Siden som lyset kommer fra (øverst venstre) bliver lysere og skyggesiderne bliver mørkere. På de smalle rammer går det nogenlunde godt, f.eks. en outset i grøn (#00FF00) i 5px bredde:
Det er ikke fantastisk, men man får lidt 3D-fornemmelsen. Hvis man gør den bredere, går det helt galt, og man mister dybdevirkningen. Her er den samme ramme i 10px bredde:
En del af det ligger i at farverne er ens to og to, så ved at give de to lyse sider hver sin nuance af grøn og tilsvarende på skyggesiden, kan man godt gøre det lidt bedre ved selektivt at angive de fire farver:
En anden del af problemet ligger i at de forskellige browsere ikke viser farverne ens på de "skrå" sider. Dette er den samme kode som før som den vises på de fem mest almindelige browsere:
| Chrome (Version 38.0.2125.104 m) |  |
| Firefox (Version 33) |  |
| Internet Explorer (Version 11) |  |
| Opera (Version 12.17) |  |
| Safari (Version 5.1.2) |  |
Det er ikke god latin, at have stor forskel på hvordan siden ser ud, afhængig af browseren, og selv når det er bedst, er det ikke godt, så her anbefales en anden løsning. Den hedder border-image og er gennemgået længere nede.
Afrundede hjørner og andre effekter på kanter
Nyere browsere har lidt flere muligheder for at lave effekter på rammer og kanter. Med CSS3 er der pt. flg. muligheder:
border-radius: Afrundede hjørner på rammer og kanter.
box-shadow: Skyggeeffekt på rammer og kanter.
border-image: Rammer dannet ud fra et billede.
Ældre browsere, der ikke kan processere CSS3 vil ignorere koderne.
border-radius
Med border-radius kan man give sine rammer afrundede hjørner, og der er til dette en lang række muligheder for at skabe gode visuelle effekter.
Den helt basale er en diskret afrunding af alle hjørnerne med STYLE="border-radius:5px":
Dette kan man øge til man får runde ender, her STYLE="border-radius:18px", til en ramme som er 30 px høj:
Man skulle forvente at rundingen max kunne være halvdelen af højden på rammen, men dette er ikke tilfældet fordi den vandrette krumning påvirker den lodrette og omvendt, så her må man prøve sig lidt frem. Hvis man kommer over max sker der ikke mere, så man kan ikke komme til at vride rundingen ud af facon på denne måde. Rundingen kan heller ikke være et negativt tal, f.eks. border-radius:-18px. Dette bliver behandlet som border-radius:0px
Border-radius kan, som de andre effekter styres på de enkelte hjørner. Variablerne starter ved øverste venstre hjørne og bevæger sig med uret rundt. En ramme med STYLE="border-radius:18px 10px 5px 0px", kommer til at se således ud:
Hvis man ønsker det, kan man selvfølgelig specificere de enkelte hjørner. Det hedder så:
border-top-left-radius:18px;
border-top-right-radius:10px;
border-bottom-right-radius:5px;
border-bottom-left-radius:0px;
Man kan nu begynde at kombinere, som f.eks. denne tabel med 3 celler hvor enderne er afrundet med 18 px og hjørnerne der støder op mod hinanden er afrundet med 5 px:
Indtil nu har vi behandlet rundingerne på hvert hjørne som symmetriske. Det behøver man ikke, så her er der mulighed for virkelig at bryde de stive rammer, hvis man gerne vil det. Man kan give hvert af hjørnerne 2 radier, så man får en asymmetrisk runding.
For at holde koden på et niveau der er til at overskue, starter vi med at bruge koden for de specifikke hjørner. Det kunne f.eks. se således ud:
border-top-left-radius: 50px 25px;
border-top-right-radius: 50px 25px;
border-bottom-right-radius: 50px 25px;
border-bottom-left-radius: 50px 25px;
Dette er en symmetrisk figur, men med asymmetriske hjørner, som kommer til at se således ud:
Analogt med at vi tidligere har kunnet nøjes med at specificere border-radius og give det én værdi når de alle skal være ens, kan man også gøre det med de asymmetriske hjørner. For at skelne mellem værdier for symmetriske og asymmetriske hjørner bruger man en skråstreg til de asymmetriske værdier, så det bliver til STYLE="border-radius: 50px / 25px;"
Der er stadig nogle begrænsninger i de geometriske figurer, fordi man ikke kan have negative værdier og dermed bue hjørnerne ind ad, men det giver nogle muligheder for at lave nogle mere skæve geometrier til en lidt mere visuelt anderledes side, f.eks.:
border-top-left-radius: 7px 15px;
border-top-right-radius: 20px 40px;
border-bottom-right-radius: 15px 7px;
border-bottom-left-radius: 20px 40px;
Man kan skrive det på én linje som STYLE="border-radius: 7px 20px 15px 20px / 15px 40px 7px 40px;" hvis man bedre kan lide denne løsning. Det er typisk noget jeg vil anbefale man konverterer til, efter man har fundet værdierne for bøjningerne med den hjørnespecifikke notation, men det er en smagssag.
box-shadow
Box-shadow er helt analog til text-shadow til teksten. Man kan frembringe en illusion af at emnet er løftet op og derfor kaster en skygge på den underliggende flade.
I al sin simpelhed ser effekten således ud i grå farve med 5 px forskydning:
Skyggeeffekten følger rammens form, så ved asymmetriske figurer fungerer effekten stadig:
Skyggen kan i sagens natur justeres, så det kommer til at passe til den illusion af 3D man ønsker at frembringe. Til box-shadow er der flg. variabler:
Opbygningen er lidt bøvlet fordi der ikke er en separator på variablerne, så rækkefølgen man anvender variablerne på er:
none | h-shadow v-shadow blur spread color inset | initial | inherit
så hvis man ikke skal bruge blur, men spread, skal der stadig være en værdi for blur så spread står som 4. værdi i rækken.
Forskydningen med h-shadow og v-shadow kan ligesom mange andre størrelser og afstande specificeres som px, mm, cm, pt, em og %. Ved at lege med de to variabler kan man give illusionen af at lyset kommer fra en anden vinkel. Hvis vi tager eksemplet fra før og sætter STYLE="box-shadow: 5px 3px grey", så ser det ud som om lyset kommer mere fra venstre side:
En skygge med så skarpe kanter ser ikke naturlig ud, med mindre en er meget lille, så kan kan lave en udviskning med blur. Man kan ikke bestemme hvor meget den udvisker, men man kan bestemme hvor stort et område. Her sætter vi forskydningen i begge retninger til 5px og blur til 2px, dvs. STYLE="box-shadow: 5px 5px 2px grey":
Blur gør skyggen transparent i det område der er specificeret. Det er ikke til at se på den hvide baggrund, men her er den samme skygge på en rød baggrund, så man tydeligt kan se blur-zonen:
Normal skygge har samme størrelse som objektet, men man kan ændre størrelsen på skyggen for at give nye effekter. Den mest oplagte er større skygger, så objektet ser ud til at ligge højere. Her skal man lige huske at forskyde skyggen med den samme værdi som man øger størrelsen med, så det kommer til at se rigtigt ud. Hvis vi vil øge skyggen med blur fra før med 10 px i størrelse, bliver det nu STYLE="box-shadow: 15px 15px 2px 10px grey":
Der hvor størrelsen på skyggen nok bliver mest interessant er at den kan bruges til at lave en halo-effekt. Ved ikke at forskyde skyggen, men blot gøre den større og lave et bredt blur-område, kan man frembringe en halo-effekt. Her er både blur og spread sat til 10 px og skyggen lavet rød, så STYLE="box-shadow: 0px 0px 10px 10px red"
Man kan ikke direkte styre hvor diffus haloen skal være, men skal man bruge en mere diffus halo, kan man gøre det, at man laver spread mindre end blur. Samme halo som før, blot med spread reduceret til 5 px; STYLE="box-shadow: 0px 0px 10px 5px red"
For at få samme udbredelse på haloen, skal man øge blur for at kompensere, så hvis blur sættes op til 15 px:
En udokumenteret feature (som det hedder) er, at man kan have flere farver samtidig. Her er det en halo, der består af en blå indre halo og en rød ydre halo. Man gør det ved at specificere flere sæt variabler til box-shadow, adskilt af et komma, i dette tilfælde STYLE="box-shadow: 0px 0px 5px 2px blue, 0px 0px 15px 10px red":
Man skal lige være opmærksom på rækkefølgen, for ellers kan man få den ene halo-effekt gemt under den anden. Her er der byttet rundt på de to haloer:
Farven er der ikke så meget at sige til. Man skal sørge for at definere den, så man ser det samme på alle browsere, og så skal man huske at justere skyggefarven efter baggrunden. På en grøn baggrund er skyggen ikke grå, men en mørkere grøn, en rød baggrund skal bruge en mørkere rød, osv. Sådan her:
Hvis man arbejder med noget der skal ligne en fordybning, skal skyggen nødvendigvis sidde nede i fordybningen. Dette er variablen inset, som skal på som sidste led. Hvis vi først prøver at lægge det på en fuldt optrukket ramme, kan man se hvad det er effekten gør. Dette er vores standardramme fra før, blot med inset, dvs. STYLE="box-shadow: 5px 5px 2px grey inset":
Det ser, som man kunne forvente, ikke naturligt ud, så her er samme effekt, hvor rammen er inset, "overfladen" er grøn, bunden af fordybningen er hvid, og skyggen er lige gjort lidt lysere:
border-image
Border-image er en af de nye features, som ikke alle browsere uden videre understøtter. Når man bruger border-image, skal benytte sig af et lille kunstgreb, og selv her er den lidt problematisk idet det først er med IE 11 at border-image er blevet understøttet af IE. Man skal derfor overveje en ekstra gang om man vil anvende den eller ej.
Til border-image er der flg. variabler:
For at få border-image til at fungere bedst muligt, skal man ikke blot sætte den ind som en STYLE="". Man kan godt, men så ryger en stor del af kompatibiliteten bagud. I stedet opretter man en klasse i sit stylesheet. Her kalder vi den ImageBorder og filen vi vil bruge hedder BorderImage1.png og ligger i directoriet Graphics. Billedet i sig selv ser således ud:
Note: I det afsnit der kommer nu, kan man kun se eksemplerne, hvis man har en browser der understøtter border-image!
Det første man skal gøre sig klart, for at få det til at fungere, er rammens type og størrelse, som vi kender det fra før med type, bredde og farve. For browsere der ikke understøtter border-image, er det den ramme der kommer frem i stedet, og parametrene skal være specificeret for at få border-image til at fungere.
Det næste man skal specificere er hvor filen ligger med border-image-source, den diagonale afstand af billedets udsnit der skal anvendes (border-image-slice) og om billedet skal gentages, afrundes eller strækkes.
Forskellene giver kun mening ved at se på nogle eksempler. Hvis vi starter med border-image-repeat, så ser effekterne således ud:
På visse browsere kan man ikke se forskel på round og repeat. Round afrunder og tilpasser den gentagne enhed, så man får et helt antal gentagne enheder, mens repeat blot gentager enheden så mange gange der er plads til, og er der plads til f.eks. en halv enhed, bliver det til en kvart enhed i hver ende, så det bliver symmetrisk at se på.
Udsnittet af billedet der skal bruges, dvs. border-image-slice, er antal af procent, diagonalt over billedet. Her vist med stretch og fire forskellige procenter, hvor 38% er den der rammer den diagonale afstand over de blå firkanter:
Hvis man sætter border-image-slice til mere end 100%, eller bruger en anden enhed, f.eks. px eller pt, så sættes border-image-slice automatisk til 100%.
Som STYLE kommer rammen med de 38% til at se således ud:
STYLE="border-style: solid; border-width: 15px; border-color: transparent; border-image-source: url(../Graphics/BorderImage1.png); border-image-slice: 38%; border-image-repeat: stretch;"
Som en CLASS der hedder ImageBorder kommer det til at se således ud:
.ImageBorder {
border-style: solid;
border-width: 15px;
border-color: transparent;
border-image-source: url(Graphics/BorderImage1.png);
border-image-slice: 38%;
border-image-repeat: stretch;
}
Man behøver ikke at nøjes med en værdi for border-image-slice. Hvis man har en asymmetrisk ramme, eller blot en ramme hvor siderne er ens to og to, skal man tage højde for dette. Hvis vi prøver at sætte border-image-slice: 38% 25% 10% 5%, blot for at demonstrere princippet:
border-image for ældre browsere
Hvis man gerne vil gøre koden bagud kompatibel, i det omfang det lader sig gøre, skal der tilføjes et par linjer. Denne kode har kun -source, -slice og -repeat som lige gennemgået, og hvad der er meget vigtigt, så bruger koden afstanden fra kanten i stedet for hjørnet, så det der er 38% i border-image-slice skal her være 18%. Den fulde kode kommer nu til at se således ud:
.ImageBorder {
-moz-border-image: url(Graphics/BorderImage1.png) 18 stretch; /* Firefox before 3.5*/
-webkit-border-image: url(Graphics/BorderImage1.png) 18 stretch; /* Safari 3.1-5.x Chrome 4-15 */
-o-border-image: url(Graphics/BorderImage1.png) 18 stretch; /* Opera 11-14 */
border-style: solid;
border-width: 15px;
border-color: transparent;
border-image-source: url(Graphics/BorderImage1.png);
border-image-slice: 38%;
border-image-repeat: stretch;
}
Bemærk: Der ikke er en border-image for Internet Explorer. Før IE 11 har browseren ikke på nogen måde understøttet border-image.
Bemærk: Koden for de ældre browsere kommer først. På den måde bliver de kun brugt, hvis browseren ikke kan bruge den nye border-image. Hvis man sætter koderne til slut, vil de nye browsere også bruge denne kode (browsere bruger de sidste koder de har fået indlæst, og de kan stadig læse og forstå den gamle type kode).
Hvis vi tager de tre udgaver af -repeat igen, men denne gang med CLASS="ImageBorder", skulle de nu være synlige for brugere med ældre browsere (undtagen IE):
Tilsvarende med de nye procentsatser på hvor meget af rammen der skal bruges. Bemærk, at fordi der skæres på to forskellige måder, kan man ikke altid få de samme effekter frem med de to måder at definere rammer på. Der er også forskel på hvordan de forskellige browsere fortolker procenterne, så der skal sættes individuelle procenter for de tre inddeling af browsere:
På samme måde som med border-image, kan man selvfølgelig styre procenterne fra alle fire kanter efter behov.
border-radius: Afrundede hjørner på rammer og kanter.
box-shadow: Skyggeeffekt på rammer og kanter.
border-image: Rammer dannet ud fra et billede.
Ældre browsere, der ikke kan processere CSS3 vil ignorere koderne.
border-radius
Med border-radius kan man give sine rammer afrundede hjørner, og der er til dette en lang række muligheder for at skabe gode visuelle effekter.
Den helt basale er en diskret afrunding af alle hjørnerne med STYLE="border-radius:5px":
Dette kan man øge til man får runde ender, her STYLE="border-radius:18px", til en ramme som er 30 px høj:
Man skulle forvente at rundingen max kunne være halvdelen af højden på rammen, men dette er ikke tilfældet fordi den vandrette krumning påvirker den lodrette og omvendt, så her må man prøve sig lidt frem. Hvis man kommer over max sker der ikke mere, så man kan ikke komme til at vride rundingen ud af facon på denne måde. Rundingen kan heller ikke være et negativt tal, f.eks. border-radius:-18px. Dette bliver behandlet som border-radius:0px
Border-radius kan, som de andre effekter styres på de enkelte hjørner. Variablerne starter ved øverste venstre hjørne og bevæger sig med uret rundt. En ramme med STYLE="border-radius:18px 10px 5px 0px", kommer til at se således ud:
Hvis man ønsker det, kan man selvfølgelig specificere de enkelte hjørner. Det hedder så:
border-top-left-radius:18px;
border-top-right-radius:10px;
border-bottom-right-radius:5px;
border-bottom-left-radius:0px;
Man kan nu begynde at kombinere, som f.eks. denne tabel med 3 celler hvor enderne er afrundet med 18 px og hjørnerne der støder op mod hinanden er afrundet med 5 px:
| Celle 1 | Celle 2 | Celle 3 |
Indtil nu har vi behandlet rundingerne på hvert hjørne som symmetriske. Det behøver man ikke, så her er der mulighed for virkelig at bryde de stive rammer, hvis man gerne vil det. Man kan give hvert af hjørnerne 2 radier, så man får en asymmetrisk runding.
For at holde koden på et niveau der er til at overskue, starter vi med at bruge koden for de specifikke hjørner. Det kunne f.eks. se således ud:
border-top-left-radius: 50px 25px;
border-top-right-radius: 50px 25px;
border-bottom-right-radius: 50px 25px;
border-bottom-left-radius: 50px 25px;
Dette er en symmetrisk figur, men med asymmetriske hjørner, som kommer til at se således ud:
Analogt med at vi tidligere har kunnet nøjes med at specificere border-radius og give det én værdi når de alle skal være ens, kan man også gøre det med de asymmetriske hjørner. For at skelne mellem værdier for symmetriske og asymmetriske hjørner bruger man en skråstreg til de asymmetriske værdier, så det bliver til STYLE="border-radius: 50px / 25px;"
Der er stadig nogle begrænsninger i de geometriske figurer, fordi man ikke kan have negative værdier og dermed bue hjørnerne ind ad, men det giver nogle muligheder for at lave nogle mere skæve geometrier til en lidt mere visuelt anderledes side, f.eks.:
border-top-left-radius: 7px 15px;
border-top-right-radius: 20px 40px;
border-bottom-right-radius: 15px 7px;
border-bottom-left-radius: 20px 40px;
Man kan skrive det på én linje som STYLE="border-radius: 7px 20px 15px 20px / 15px 40px 7px 40px;" hvis man bedre kan lide denne løsning. Det er typisk noget jeg vil anbefale man konverterer til, efter man har fundet værdierne for bøjningerne med den hjørnespecifikke notation, men det er en smagssag.
box-shadow
Box-shadow er helt analog til text-shadow til teksten. Man kan frembringe en illusion af at emnet er løftet op og derfor kaster en skygge på den underliggende flade.
I al sin simpelhed ser effekten således ud i grå farve med 5 px forskydning:
Skyggeeffekten følger rammens form, så ved asymmetriske figurer fungerer effekten stadig:
Skyggen kan i sagens natur justeres, så det kommer til at passe til den illusion af 3D man ønsker at frembringe. Til box-shadow er der flg. variabler:
| Værdi | Beskrivelse |
| none | Ingen skygge. Dette er default. |
| h-shadow | Obligatorisk. Placeringen af den horisontale skygge. |
| v-shadow | Required. Placeringen af den vertikale skygge. |
| blur | Valgfri. Afstanden for udviskningen. |
| spread | Valgfri. Skyggens størrelse. |
| color | Principielt valgfri. Farven på skyggen. Browseren Safari skal have en farve defineret, for at kunne vise skyggen. |
| inset | Valgfri. Ændrer skyggen fra en ydre skygge til en indre skygge, f.eks. til forsænkninger (insets). |
| initial | Egenskaberne sættes til default-værdierne. |
| inherit | Egenskaberne nedarves fra forældreelementet. |
Opbygningen er lidt bøvlet fordi der ikke er en separator på variablerne, så rækkefølgen man anvender variablerne på er:
none | h-shadow v-shadow blur spread color inset | initial | inherit
så hvis man ikke skal bruge blur, men spread, skal der stadig være en værdi for blur så spread står som 4. værdi i rækken.
Forskydningen med h-shadow og v-shadow kan ligesom mange andre størrelser og afstande specificeres som px, mm, cm, pt, em og %. Ved at lege med de to variabler kan man give illusionen af at lyset kommer fra en anden vinkel. Hvis vi tager eksemplet fra før og sætter STYLE="box-shadow: 5px 3px grey", så ser det ud som om lyset kommer mere fra venstre side:
En skygge med så skarpe kanter ser ikke naturlig ud, med mindre en er meget lille, så kan kan lave en udviskning med blur. Man kan ikke bestemme hvor meget den udvisker, men man kan bestemme hvor stort et område. Her sætter vi forskydningen i begge retninger til 5px og blur til 2px, dvs. STYLE="box-shadow: 5px 5px 2px grey":
Blur gør skyggen transparent i det område der er specificeret. Det er ikke til at se på den hvide baggrund, men her er den samme skygge på en rød baggrund, så man tydeligt kan se blur-zonen:
Normal skygge har samme størrelse som objektet, men man kan ændre størrelsen på skyggen for at give nye effekter. Den mest oplagte er større skygger, så objektet ser ud til at ligge højere. Her skal man lige huske at forskyde skyggen med den samme værdi som man øger størrelsen med, så det kommer til at se rigtigt ud. Hvis vi vil øge skyggen med blur fra før med 10 px i størrelse, bliver det nu STYLE="box-shadow: 15px 15px 2px 10px grey":
Der hvor størrelsen på skyggen nok bliver mest interessant er at den kan bruges til at lave en halo-effekt. Ved ikke at forskyde skyggen, men blot gøre den større og lave et bredt blur-område, kan man frembringe en halo-effekt. Her er både blur og spread sat til 10 px og skyggen lavet rød, så STYLE="box-shadow: 0px 0px 10px 10px red"
Man kan ikke direkte styre hvor diffus haloen skal være, men skal man bruge en mere diffus halo, kan man gøre det, at man laver spread mindre end blur. Samme halo som før, blot med spread reduceret til 5 px; STYLE="box-shadow: 0px 0px 10px 5px red"
For at få samme udbredelse på haloen, skal man øge blur for at kompensere, så hvis blur sættes op til 15 px:
En udokumenteret feature (som det hedder) er, at man kan have flere farver samtidig. Her er det en halo, der består af en blå indre halo og en rød ydre halo. Man gør det ved at specificere flere sæt variabler til box-shadow, adskilt af et komma, i dette tilfælde STYLE="box-shadow: 0px 0px 5px 2px blue, 0px 0px 15px 10px red":
Man skal lige være opmærksom på rækkefølgen, for ellers kan man få den ene halo-effekt gemt under den anden. Her er der byttet rundt på de to haloer:
Farven er der ikke så meget at sige til. Man skal sørge for at definere den, så man ser det samme på alle browsere, og så skal man huske at justere skyggefarven efter baggrunden. På en grøn baggrund er skyggen ikke grå, men en mørkere grøn, en rød baggrund skal bruge en mørkere rød, osv. Sådan her:
Hvis man arbejder med noget der skal ligne en fordybning, skal skyggen nødvendigvis sidde nede i fordybningen. Dette er variablen inset, som skal på som sidste led. Hvis vi først prøver at lægge det på en fuldt optrukket ramme, kan man se hvad det er effekten gør. Dette er vores standardramme fra før, blot med inset, dvs. STYLE="box-shadow: 5px 5px 2px grey inset":
Det ser, som man kunne forvente, ikke naturligt ud, så her er samme effekt, hvor rammen er inset, "overfladen" er grøn, bunden af fordybningen er hvid, og skyggen er lige gjort lidt lysere:
border-image
Border-image er en af de nye features, som ikke alle browsere uden videre understøtter. Når man bruger border-image, skal benytte sig af et lille kunstgreb, og selv her er den lidt problematisk idet det først er med IE 11 at border-image er blevet understøttet af IE. Man skal derfor overveje en ekstra gang om man vil anvende den eller ej.
Til border-image er der flg. variabler:
| Værdi | Beskrivelse |
| border-image-source | Stien til billedfilen med rammen. |
| border-image-slice | Hvor langt indad fra hjørnerne på billedet (diagonalt) der skal anvendes. Skal opgives i %. |
| border-image-width | Bredderne på billedkanten som den vises. |
| border-image-outset | The amount by which the border image area extends beyond the border box. |
| border-image-repeat | Hvorvidt billedkanten skal gentages (repeat), afrundes (round) eller strækkes (stretch). |
| initial | Egenskaberne sættes til default-værdierne. |
| inherit | Egenskaberne nedarves fra forældreelementet. |
For at få border-image til at fungere bedst muligt, skal man ikke blot sætte den ind som en STYLE="". Man kan godt, men så ryger en stor del af kompatibiliteten bagud. I stedet opretter man en klasse i sit stylesheet. Her kalder vi den ImageBorder og filen vi vil bruge hedder BorderImage1.png og ligger i directoriet Graphics. Billedet i sig selv ser således ud:
Note: I det afsnit der kommer nu, kan man kun se eksemplerne, hvis man har en browser der understøtter border-image!
Det første man skal gøre sig klart, for at få det til at fungere, er rammens type og størrelse, som vi kender det fra før med type, bredde og farve. For browsere der ikke understøtter border-image, er det den ramme der kommer frem i stedet, og parametrene skal være specificeret for at få border-image til at fungere.
Det næste man skal specificere er hvor filen ligger med border-image-source, den diagonale afstand af billedets udsnit der skal anvendes (border-image-slice) og om billedet skal gentages, afrundes eller strækkes.
Forskellene giver kun mening ved at se på nogle eksempler. Hvis vi starter med border-image-repeat, så ser effekterne således ud:
| Stretch | Round | Repeat |
På visse browsere kan man ikke se forskel på round og repeat. Round afrunder og tilpasser den gentagne enhed, så man får et helt antal gentagne enheder, mens repeat blot gentager enheden så mange gange der er plads til, og er der plads til f.eks. en halv enhed, bliver det til en kvart enhed i hver ende, så det bliver symmetrisk at se på.
Udsnittet af billedet der skal bruges, dvs. border-image-slice, er antal af procent, diagonalt over billedet. Her vist med stretch og fire forskellige procenter, hvor 38% er den der rammer den diagonale afstand over de blå firkanter:
| 100% | 50% | 38% | 20% |
Hvis man sætter border-image-slice til mere end 100%, eller bruger en anden enhed, f.eks. px eller pt, så sættes border-image-slice automatisk til 100%.
Som STYLE kommer rammen med de 38% til at se således ud:
STYLE="border-style: solid; border-width: 15px; border-color: transparent; border-image-source: url(../Graphics/BorderImage1.png); border-image-slice: 38%; border-image-repeat: stretch;"
Som en CLASS der hedder ImageBorder kommer det til at se således ud:
.ImageBorder {
border-style: solid;
border-width: 15px;
border-color: transparent;
border-image-source: url(Graphics/BorderImage1.png);
border-image-slice: 38%;
border-image-repeat: stretch;
}
Man behøver ikke at nøjes med en værdi for border-image-slice. Hvis man har en asymmetrisk ramme, eller blot en ramme hvor siderne er ens to og to, skal man tage højde for dette. Hvis vi prøver at sætte border-image-slice: 38% 25% 10% 5%, blot for at demonstrere princippet:
border-image for ældre browsere
Hvis man gerne vil gøre koden bagud kompatibel, i det omfang det lader sig gøre, skal der tilføjes et par linjer. Denne kode har kun -source, -slice og -repeat som lige gennemgået, og hvad der er meget vigtigt, så bruger koden afstanden fra kanten i stedet for hjørnet, så det der er 38% i border-image-slice skal her være 18%. Den fulde kode kommer nu til at se således ud:
.ImageBorder {
-moz-border-image: url(Graphics/BorderImage1.png) 18 stretch; /* Firefox before 3.5*/
-webkit-border-image: url(Graphics/BorderImage1.png) 18 stretch; /* Safari 3.1-5.x Chrome 4-15 */
-o-border-image: url(Graphics/BorderImage1.png) 18 stretch; /* Opera 11-14 */
border-style: solid;
border-width: 15px;
border-color: transparent;
border-image-source: url(Graphics/BorderImage1.png);
border-image-slice: 38%;
border-image-repeat: stretch;
}
Bemærk: Der ikke er en border-image for Internet Explorer. Før IE 11 har browseren ikke på nogen måde understøttet border-image.
Bemærk: Koden for de ældre browsere kommer først. På den måde bliver de kun brugt, hvis browseren ikke kan bruge den nye border-image. Hvis man sætter koderne til slut, vil de nye browsere også bruge denne kode (browsere bruger de sidste koder de har fået indlæst, og de kan stadig læse og forstå den gamle type kode).
Hvis vi tager de tre udgaver af -repeat igen, men denne gang med CLASS="ImageBorder", skulle de nu være synlige for brugere med ældre browsere (undtagen IE):
| Stretch | Round | Repeat |
Tilsvarende med de nye procentsatser på hvor meget af rammen der skal bruges. Bemærk, at fordi der skæres på to forskellige måder, kan man ikke altid få de samme effekter frem med de to måder at definere rammer på. Der er også forskel på hvordan de forskellige browsere fortolker procenterne, så der skal sættes individuelle procenter for de tre inddeling af browsere:
| 100% | 32% | 18% | 10% |
På samme måde som med border-image, kan man selvfølgelig styre procenterne fra alle fire kanter efter behov.