[LØST] CSS Runde hjørner og svart topp.

3 innlegg i emnet

Skrevet

Heisann!

Jeg har alt designet noe jeg ser for meg i photoshop, men klarer virkelig ikke å få til noe med css.

2wnssba.png

Som sagt, klarer virkelig ikke å få til dette med css.. Runde hjørner: OK. Runde hjørner med border: Får ikke til. Runde hjørner med border og toppen svart: Har virkelig ikke sjans.

Noen tips? Har sitti hele kvelden og googlet her! :)

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Prøv ut generatoren på denne nettsiden: 

http://www.roundedcornr.com/ 

Du bør klare å oppnå det du ønsker med den. 

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Foreslår:

1) Du lager en png som har hele det sorte øverste området, med runde hjørner.

2) Setter border-left og border-right til det du ønsker på tekstfeltet

Bunnen er det flere løsninger på, du kan.

3a) Lage en png for *hele* bunnen (anbefales), eller

3b) lage en png for hvert hjørne, og border-bottom for linja på bunnen.

HTML-en blir i grove trekk slik

<div id='top-black'></div>

<div id='textfield'></div>

<div id='bottom'></div>
og CSS-en slik
#top-black {

background:url('path/til/bilde') no-repeat;

width:"antall pixler"px;

height:"antall pixler"px;

}

#textfield {

border:0;

border-left:"antall pixler"px solid #000;

border-right:"antall pixler"px solid #000;

}

#bottom {

background:url('path/til/bilde') no-repeat;

width:"antall pixler"px;

height:"antall pixler"px;

}

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!


Start en konto

Logg inn

Har du allerede en konto? Logg inn her.


Logg inn nå

  • Hvem er aktive   0 medlemmer

    Ingen innloggede medlemmer aktive