2
Tags:
grafik
Skrevet af
Bruger #10113
@ 25.03.2007
Min første artikel
Dette er så den første artikel jeg har skrevet, det er meningen at jeg vil skrive flere og lave en side med det. Men nu skal jeg først lige se hvad folk syntes om denne.
Hvad kommer du til at lære i denne artikel?
I denne artikel kommer du til at lære, hvordan man laver runde hjørner, på en kasse udelukende med CSS. Men du kommer ikke bare til at lære mere end hvordan man laver runde hjørner, du kommer til at lære at lave alle slags hjørner med CSS. Fordelen ved at bruge CSS til dette, frem for grafik er enkel. Grafik fylder meget mere.
Teknikken
Teknikken bag det er faktisk ikke så svær at forstå, med billedet her vil jeg prøve at forklare hvordan det foregår.
Dette billede forestiller en kasse med runde hjørner. Jeg har lavet det så man tydeligt kan se pixelsne.
Men hvordan kan man lave dette med CSS?
Det er faktisk ikke så svært, og når du er færdig med at læse denne artikel tror jeg heller ikke at du syntes at det er svært. Det første vi skal gøre er at lave en div, som indeholder det hele, det gør det en del lettere at styre.
.boks {
width: /* bredden på din boks */;
}
Det næste vi skal lave er den første vandrette streg. Den er en pixel høj og sort.
.r1 {
background: #000000; /* Giver diven en sort bagrundfarve */
height: 1px; /* Højden sættes til én pixel, så det bliver en streg */
}
Men det er ikke nok, som man kan se på billedet, skal stregen ikke fylde de sidste 5 felter, derfor laver vi margin left og right på 5 pixels.
Så kommer det til at se sådan ud:
.r1 {
background: #000000; /* Giver diven en sort bagrundfarve */
height: 1px; /* Højden sættes til én pixel, så det bliver en streg */
margin: 0px 5px; /* Margin sættes til 5 både til højre og venstre, fordi at de første fem fælter ikke skal være farvede */
}
Så har vi lavet den første streg i vores bue. Så skal vi lave den næste. Som man kan se på billedet skal den være 2 pixels bred til venstre, én pixels høj og være 3 pixels inde. Det betyder at koden kommer til at se sådan ud:
.r2 {
border-left: 2px solid #000000; /* Gør stregen to pixels bred */
border-right: 2px solid #000000; /* Gør det samme som overstående, bare i modsatte side */
margin: 0px 3px; /* Margin sætttes til 3 højre og venstre, sådan at det bliver en bue */
height: 1px; /* Den er én pixel høj, som man også kan se på billedet */
}
Nu skal vi lave prikken, for det er vel bare en prik, og ikke nogen streg. Prikken skal fylde en pixel og være 3 pixels inde. Det kommer til at se sådan du:
.r3 {
border-left: 1px solid #000000; /* Burde være let nok at forstå */
border-right: 1px solid #000000; /* Også let */
margin: 0px 2px; /* Laver et indryk på 2 pixel */
height: 1px; /* Stregen skal være én pixel høj */
}
Ok, det var den tredje. Nu skal vi lave den fjerde og anden sidste. Den er 2 pixels høj, én pixel bred og en pixel inde. Det kommer til at se sådan ud (bemærk at jeg ikke sætter kommentare på denne gang, du burde selv kunne regne meningen ud nu):
.r4 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height: 2px;
margin: 0px 1px;
}
Ja. Så mangler vi bare den sidste, det er også den mest simple, det er i den alt indholdet skal være. Den skal være én pixel bred, ikke rykkes ind på nogen måde og højden bestemmes af hvor meget indhold der skal være i den. Så den er nem, og ser sådan ud:
.r5 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: /* du bestemmer selv hvad padding skal være */;
}
Så er vi næsten færdige, nu mangler vi kun HTMLen. Den ser sådan ud:
<div class="boks">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5">
TEKST
</div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
Det færdige resultat
Det færdige resultat kommer så til at se sådan ud:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Runde hjørner - Færdig</title>
<style type="text/css">
.boks {
width: 200px;
}
.r1 {
background: #000000; /* Giver diven en sort bagrundfarve */
height: 1px; /* Højden sættes til én pixel, så det bliver en streg */
margin: 0px 5px; /* Margin sættes til 5 både til højre og venstre, fordi at de første fem fælter ikke skal være farvede */
}
.r2 {
border-left: 2px solid #000000; /* Gør stregen to pixels bred */
border-right: 2px solid #000000; /* Gør det samme som overstående, bare i modsatte side */
margin: 0px 3px; /* Margin sætttes til 3 højre og venstre, sådan at det bliver en bue */
height: 1px; /* Den er én pixel høj, som man også kan se på billedet */
}
.r3 {
border-left: 1px solid #000000; /* Burde være let nok at forstå */
border-right: 1px solid #000000; /* Også let */
margin: 0px 2px; /* Laver et indryk på 2 pixel */
height: 1px; /* Stregen skal være én pixel høj */
}
.r4 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height: 2px;
margin: 0px 1px;
}
.r5 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 5px;
}
</style>
</head>
<body>
<div class="boks">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5">
Så, nu er vores runde hjørner helt færdigt. Det ser da meget godt ud ikke? Det syntes jeg ivertifal.
</div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</body>
</html>
Andre hjørner
Med denne teknik kan man også lave andre hjørne, ikke kun runde. Jeg har selv prøvet at mikse en sammen, som ser sådan ud.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Runde hjørner - Færdig</title>
<style type="text/css">
.outer {
width: 400px;
}
.r1 {
background: #000000;
height: 1px;
margin: 0px;
}
.r2 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height: 1px;
margin: 0px 1px;
}
.r3 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height: 1px;
margin: 0px 2px;
}
.r4 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height: 1px;
margin: 0px 3px;
}
.r5 {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
font-family: Verdana;
margin: 0px 4px;
padding: 5px;
}
</style>
</head>
<body>
<div class="outer">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5">
Her er så en anden variant, af hjørner med CSS.
</div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</body>
</html>
Opgave
Prøv om du kan lave de samme hjørner som jeg har lavet i her over, uden at kigge i min kildekode.
Billedet til hjørnet ser sådan ud:
Finish
Så, nu er denne artikel færdig, de er den første jeg har lavet. Jeg ved ikke rigtig vor god den er, men jeg håber at du nu er fuldt ud fortrolig, med at lave hjørne med CSS.
Vis der er noget du ikke forstår så vil jeg meget gerne høre hvad det er.
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (25)
Det var godt nok en meget besværlig måde at lave runde hjørner på
Nuvel. En sådan artikel skal vel til for at vise hvor langt CSS rækker og til hvad CSS kan bruges til, hvis man bare er ordentlig inde i sagerne.
Hej Simon. Jeg synes,
det var en fin artikel. jeg lærte en del af at læse den; og den er skrevet på en måde, som jeg kan forstå.
Venlig hilsen Karl Kronborg
Hej Simon. Jeg synes,
det var en fin artikel. jeg lærte en del af at læse den; og den er skrevet på en måde, som jeg kan forstå.
Venlig hilsen Karl Kronborg
Fejl post, begge to.
Martin Slot: Hmm, ja måske lidt. Men siden loader hurtigere.
Øhm.. Var du lige inde for at rose din egen artikel men havde glemt at skifte bruger der eller hvordan, Simon?
Kasper: Nej, den af mine venner rodede med min computer. Tror at det var en dårlig joke han prøvede på at lave. Men han glemte at han var logget ind med min bruger. Så det var ike mig der skrev det.
Det endeste jeg har gjort for at rose min egen artikel er at raide den højt;D
Ahh tager på falsk gerning
Hmm. Nej endlig ikke.
Det kan godt være at siden loader hurtigere, men det er nok noget nær den mest besværlige måde at lave runde hjørner på.
En meget lettere måde at gøre ca. det samme han læses på
http://alistapart.com/articles/onionskin. Godt nok tager siden længere tid at hente, men den er meget lettere at vedligeholde - og det skal også med i overvejelserne.
Kristian Kjærgaard: Den artikel du linker til viser hvordan man laver drop shadow, ikke runde hjørner.
Resulatet er i mine øjne, utroligt usemantisk markup - Skal man bruge "nifty corners" som det er en direkte kopi af - bør man bruge "nifty corners" løsning med javascript. Og ungå den forkerte uskalerbare markup.
http://www.html.it/articoli/nifty/index.htmlMvh
Jacob
Simon alias palde pind: Ja, men den samme teknik kan jo bruges til at lave runde hjørner.
Jokke Jensen: Hvad er forskellen ved Nifty Corners?
Simon.. ulempen er usemantisk markup.
<div class="boks">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5">
Så, nu er vores runde hjørner helt færdigt. Det ser da meget godt ud ikke? Det syntes jeg ivertifal.
</div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
Er unødvendigt til alle andre devices end en browser.. Søgemaskiner, mobile enheder og andet har intet at bruge det til..
Præsenter løsningen med javascript - så vil kun enheder der har kapabiliteten til at vise det, benytte dem.
hvordan får man hvide borders?!! min side er sort...
og det virker desværre ikke at ændre på alle de der colors du allerede har skrevet..
Fin artikel, virker ikke i IE hos mig og mine brugere..
www.pro-jekt.dk
Hej.
Fin artikel, det lærte jeg meget ad, men kan man ikke gør kanten, hele vejen rund tykkere??
God jul til alle på denne gode side.
Henrik.. Det kan du sagtens..
Jeg er rigtig glad for den her metode.. Så nævner Jokke at det kun kan bruges i browsere. Ja det er da rigtig nok.. Men det er sådan set også det CSS er lavet til
Og iøvrigt er der væsentligt flere der har slået js fra i deres browser end css.. Det er stort set ikke nogen der vælger at slå css fra.. Og hvis man har gjort det, er man også meget bevidst om det og har nogle bevæggrunde.
Min største indvending mod den metode er at du ikke kan smide din tekst oppe i det felt der bare er fyldt med divs. Teksten kommer altid til at stå under/over de rundede hjørner.
-Andreas
Henrik.. Det kan du sagtens..
Jeg er rigtig glad for den her metode.. Så nævner Jokke at det kun kan bruges i browsere. Ja det er da rigtig nok.. Men det er sådan set også det CSS er lavet til
Og iøvrigt er der væsentligt flere der har slået js fra i deres browser end css.. Det er stort set ikke nogen der vælger at slå css fra.. Og hvis man har gjort det, er man også meget bevidst om det og har nogle bevæggrunde.
Min største indvending mod den metode er at du ikke kan smide din tekst oppe i det felt der bare er fyldt med divs. Teksten kommer altid til at stå under/over de rundede hjørner.
-Andreas
Ups.. Var ikke mieningen at skrive det to gange
-Andreas
Udemærket. Jeg har afprøvet din kode, og det fungere rigtig godt, uden tvivl om det. Siden loader utrolig hurtigt, uden fejl i koden. Rigtig dejligt med noget som virker i både Google Chrome, Mozilla Firefox, Internet Explore og Safari. Jeg har givet dig +1 for det
.
Virkelig god artikel! Nem at forstå og koden er nem at implementere på sit eget site!
Du skal være
logget ind for at skrive en kommentar.