Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Runda hörn med css ?

1
Skriv svar
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Counter strike : Source?

Redigera
Citera flera Citera
Permalänk
Medlem
●
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?

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Redigera
Citera flera Citera
Permalänk
Medlem
●

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å stycken på A List Apart som brukar hålla mycket hög klass på sina artiklar.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
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 ?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

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

Ja, det är en mycket vettigare approach.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Visa signatur

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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å?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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?

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tackar för hjälpen !!

Redigera
Citera flera Citera
Permalänk
Medlem
●

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"..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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...

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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!

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara