Trädvy Permalänk
Medlem
Registrerad
Jun 2005

Runda hörn med css ?

Tjabba !

Jo fixat så jag har fått runda hörn med hjälp av css men skulle vilja att endast bordern 1px skall ha en färg och sedan resten vara transparant hur fixar jag det ?

Min kodning ser ut så här:

css

.r1{margin: 0 16px; height: 1px; overflow: hidden; background: #FF6000;}
.r2{margin: 0 13px; height: 1px; overflow: hidden; background: #FF6000;}
.r3{margin: 0 11px; height: 1px; overflow: hidden; background: #FF6000;}
.r4{margin: 0 9px; height: 1px; overflow: hidden; background: #FF6000;}
.r5{margin: 0 8px; height: 1px; overflow: hidden; background: #FF6000;}
.r6{margin: 0 7px; height: 1px; overflow: hidden; background: #FF6000;}
.r7{margin: 0 6px; height: 1px; overflow: hidden; background: #FF6000;}
.r8{margin: 0 5px; height: 1px; overflow: hidden; background: #FF6000;}
.r9{margin: 0 4px; height: 1px; overflow: hidden; background: #FF6000;}
.r10{margin: 0 3px; height: 2px; overflow: hidden; background: #FF6000;}
.r11{margin: 0 2px; height: 2px; overflow: hidden; background: #FF6000;}
.r12{margin: 0 1px; height: 3px; overflow: hidden; background: #FF6000;}

html

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5"></div>
<div class="r6"></div>
<div class="r7"></div>
<div class="r8"></div>
<div class="r9"></div>
<div class="r10"></div>
<div class="r11"></div>
<div class="r12"></div>

Men som ni ser blir den en bakgrund nu barför att jag har background. Så hur kan jag endast få 1px i en annan färg istället för background ?

/Forcevision

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008

Varför kör du på det där störiga sättet? Ha en bakgrundsbild som har rundade kanter. Dela upp bilden i 3 olika delar, övre kanten, undre kanten och mitten. Se sen till att mitten är den delen som dupliceras om storleken på diven ändras

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Värmlands Nysäter
Registrerad
Dec 2004

Vill du bara ha border men ingen bakgrund?

EDIT: Läste en gång till.

testa

.r1{ margin: 0 16px; height: 1px; overflow: hidden; border-left: 1px solid #000000; border-right: 1px solid #000000; border-width: 1px; }

eller något sådant.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Dec 2008

Counter strike : Source?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2005
Citat:

Ursprungligen inskrivet av Enorus
Counter strike : Source?

u_u

Nej, Custom Style Sheet.

Men om jag ska vara ärlig så trodde jag det själv när jag läste rubriken, vill han veta hur man rundar hörn på bästa sätt i counter strike source?

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av samulen
u_u

Nej, Custom Style Sheet.

Men om jag ska vara ärlig så trodde jag det själv när jag läste rubriken, vill han veta hur man rundar hörn på bästa sätt i counter strike source?

nej, Cascading Style Sheet.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

Måste säga att det där ser hemskt ut – ingen semantik eller logik någonstans. Det finns många artiklar om hur man gör vettiga runda hörn, t.ex. tre slumpmässigt valda artiklar, samt två styckenA List Apart som brukar hålla mycket hög klass på sina artiklar.

Trädvy Permalänk
Medlem
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av dragan_at
Vill du bara ha border men ingen bakgrund?

EDIT: Läste en gång till.

testa

.r1{ margin: 0 16px; height: 1px; overflow: hidden; border-left: 1px solid #000000; border-right: 1px solid #000000; border-width: 1px; }

eller något sådant.

Nope detta fungerade inte heller.

Man kanske skall köra med bilder då kanske ?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av forcevision
Man kanske skall köra med bilder då kanske ?

Ja, det är en mycket vettigare approach.

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av Enorus
Counter strike : Source?

Off-topic.
Hör upp nu Counter-strike nördar
Det går att pyssla med annat en det riktigt tråkiga Counter-strike på en dator.

CSS i webdesign sammanhang står för Cascading Style Sheets och inget annat.

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av BlueEyes
Off-topic.
Hör upp nu Counter-strike nördar
Det går att pyssla med annat en det riktigt tråkiga Counter-strike på en dator.

Counterstrike: Source förkortas väl "CS:S" ändå?

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Marginalborders har sina fördelar faktiskt, bara man håller dom i strama tyglar. Rent semantiskt är det inte så snyggt, men de har fördelen att passa mot alla bakgrunder, oavsett om det rör sig om bakomliggande mönster, gradienter eller fans moster. Bildbaserade hörn kan dessutom bli minst lika semantiskt krångliga under vissa omständigheter.

Om du ska använda marginaler så försök begränsa dom till 5px i radie bara, annars blir det oerhört många divvar som måste in..

.r1, .r2, .r3, .r4 { background-color: #FA0; } .r1, .r2, .r3 { height: 1px; } .r1 { margin: 0 5px; } .r2 { margin: 0 3px; } .r3 { margin: 0 2px; } .r4 { height: 2px; margin: 0 1px; } <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div> <div id="contents"> <p>Lorem ipsum.. ... </p> </div> <div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>

edit: nu såg jag att det var borders du ville ha.. testa detta:

#contents, .r1, .r2, .r3, .r4 { background: #FA0; border: 0 solid #234; } #contents, .r3, .r4 { border-width: 0 1px; } .r2, .r3 { height: 1px; } .r1 { border-top-width: 1px; margin: 0 5px; } .r2 { border-width: 0 2px; margin: 0 3px; } .r3 { margin: 0 2px; } .r4 { height: 2px; margin: 0 1px; }

edit2: hittade en "bug" i exempel två. Det skall nu vara korrekt.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004

Amen snälla! forcevision postade denna tråd i "Programmering och digitalt skapande" o döpte tråden till "Runda hörn med css ?". Inte "Runda hörn i css ?". Och en sak till, sedan när är Counter-Strike, ett världskänt spel, webb-programmering?

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av edgren
Amen snälla! forcevision postade denna tråd i "Programmering och digitalt skapande" o döpte tråden till "Runda hörn med css ?". Inte "Runda hörn i css ?". Och en sak till, sedan när är Counter-Strike, ett världskänt spel, webb-programmering?

Sedan idag 16:29 tydligen...

Trädvy Permalänk
Medlem
Registrerad
Jun 2005

Tackar för hjälpen !!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2009

Jag använder mig aldrig av css för att göra runda hörn, tycker bara att det är otroligt krångligt.
Jag tycker att du gör en komplett design i ett bildbehandlingsprogram, slicar bilden, och kör sedan in den i flera divar.

css kod: background: url('logotyp.png');

Jag tycker att det är smidigare, och det blir mindre kod, .png bilder tar inte så mycket utrymme heller, vilket är grymt då det både blir mindre kod(du slipper använda dig av minst 10 olika divar). Det blir även jobbigt om du skall byta färg på "det runda css-hörnet"..

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Det är ju en baggis att byta färg på ett HTML-element med CSS..

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av karlsuffix
Jag använder mig aldrig av css för att göra runda hörn, tycker bara att det är otroligt krångligt.
Jag tycker att du gör en komplett design i ett bildbehandlingsprogram, slicar bilden, och kör sedan in den i flera divar.

css kod: background: url('logotyp.png');

Jag tycker att det är smidigare, och det blir mindre kod, .png bilder tar inte så mycket utrymme heller, vilket är grymt då det både blir mindre kod(du slipper använda dig av minst 10 olika divar). Det blir även jobbigt om du skall byta färg på "det runda css-hörnet"..

Det är ju lite mindre flexibelt också, rutan måste ha en fix storlek om det ska fungera.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2009

Det är absolut inget krångligt att göra så, har man bestämt sig för en design, så kodar man upp divarna, och placerar sedan in bilderna i divarna, inget knepigt alls, det kräver bara att man förstår koden väl, och kan de flesta css attributen så att man kan få det att gå ihop rätt.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2005
Citat:

Ursprungligen inskrivet av edgren
Amen snälla! forcevision postade denna tråd i "Programmering och digitalt skapande" o döpte tråden till "Runda hörn med css ?". Inte "Runda hörn i css ?". Och en sak till, sedan när är Counter-Strike, ett världskänt spel, webb-programmering?

Vadå 'amen snälla'. Chilla lite, man kan också läsa rubriker i "nytt i forumet" där det tas ur sin kontext och med tanke på hur folk stavar på sweclockers är det inget konstigt att tro fel.. och jag tror mer det var menat som en 'phun' än något annat.

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008
Citat:

Ursprungligen inskrivet av You
Det är ju lite mindre flexibelt också, rutan måste ha en fix storlek om det ska fungera.

Måste den ju inte? Jag har gjort flera som har haft flexibel storlek... Som sagt bestämmer jag vilka divar som stretchas och har contenten där och bakgrunden i den går att stretcha utan att de runda kanterna rör sig...

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av KurreKula
Måste den ju inte? Jag har gjort flera som har haft flexibel storlek... Som sagt bestämmer jag vilka divar som stretchas och har contenten där och bakgrunden i den går att stretcha utan att de runda kanterna rör sig...

Nu vet jag inte riktigt hur du tänker här, om du separerar lådorna helt eller förutsätter att de ligger brevid varandra och därmed kan lägga över/underdel för olika lådor i samma bild, men det blir mindre flexibelt. Du kommer alltid ha minst en komponent du inte kan ändra storlek på. Men det beror väl på hur man jobbar, personligen försöker jag lägga upp en semantisk HTML-struktur innan jag designar med CSS och då kan runda hörn bli lite jobbiga – gör man tvärtom får man lite rörigare HTML.

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Citat:

Ursprungligen inskrivet av samulen
Vadå 'amen snälla'. Chilla lite, man kan också läsa rubriker i "nytt i forumet" där det tas ur sin kontext och med tanke på hur folk stavar på sweclockers är det inget konstigt att tro fel.. och jag tror mer det var menat som en 'phun' än något annat.

Är väldigt trött på alla CS-, WoW- och WC3-nördar som inte vet vad det verkliga livet är för något, så därför skrev jag det inlägget.

Citera mig om du önskar ett snabbare svar.
Min blogg

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008
Citat:

Ursprungligen inskrivet av You
Nu vet jag inte riktigt hur du tänker här, om du separerar lådorna helt eller förutsätter att de ligger brevid varandra och därmed kan lägga över/underdel för olika lådor i samma bild, men det blir mindre flexibelt. Du kommer alltid ha minst en komponent du inte kan ändra storlek på. Men det beror väl på hur man jobbar, personligen försöker jag lägga upp en semantisk HTML-struktur innan jag designar med CSS och då kan runda hörn bli lite jobbiga – gör man tvärtom får man lite rörigare HTML.

Jo, alltid minst en komponent man inte kan ändra storlek på.. Men lyckades få det rätt bra.. Om vi säger att vi har en div som vi vill ha runda kanter på. Delade upp den i main, header och footer... Main har bara en 1 px hög bakgrundsbild som repeteras i y-led... Förutsatt att vi vill att den enbart ska stretchas neråt. Sen footer och header har en fast höjd och bredd med en bakgrundsbild som har rundade kanter..

Men förstår vad du menar, vill man ha en som kan stretchas åt alla håll är det nog bättre att göra som du säger!

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av edgren
Är väldigt trött på alla CS-, WoW- och WC3-nördar som inte vet vad det verkliga livet är för något, så därför skrev jag det inlägget.

Nu låter du lite väl mycket som en pensionär tycker jag.

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
Citat:

Ursprungligen inskrivet av Superb
Nu låter du lite väl mycket som en pensionär tycker jag.

Pensionär? Snarare en mer mogen 23-åring

Citera mig om du önskar ett snabbare svar.
Min blogg