Runde kanter uten bilder, kun CSS!

[dan1el]

Dette har vi (jeg?) venta på!

 

http://www.stunicholls.myby.co.uk/boxes/snazzy.html

 

Metoden er ganske genial.

Endret 4. april 2005 av dan1el

[Krankemot]

ar lurt på dette selv lenge: takker

[ingveh]

Endelig

[haugsand]

Tja, koden er litt for tungvindt for min del, og hjørnene blir er pikslete enn de blir med bilder. Jeg venter fortsatt på at nettlesere støtter CSS-egenskaper som gjør denne jobben enda bedre

[dan1el]

Tja, koden er litt for tungvindt for min del, og hjørnene blir er pikslete enn de blir med bilder. Jeg venter fortsatt på at nettlesere støtter CSS-egenskaper som gjør denne jobben enda bedre

Det gjør de?

 

Smart bruk av :before og :after gir pene, runde, fine kanter med bilder.

 

Edit: Nein det gjør de ikke. Det er egenskaper i CSS3-kladden på W3 da... vi har noe godt i vente.

Endret 4. april 2005 av dan1el

[mikk-]

<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

Er nå dette egentlig "separasjon av innhold og utseende"?

[dan1el]

<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

Er nå dette egentlig "separasjon av innhold og utseende"?

Nei, det kaller vi behov for å få til runde kanter.

[Arve Systad]

<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

Er nå dette egentlig "separasjon av innhold og utseende"?

Sida dette elementet ikkje har noken semantisk betydning ("presentasjonell betydning") blir det vel strengt tatt like feil/riktig som å bruke et lass av div-elementer

[mikk-]

Å gjøre dette med bilde tar meg rundt 350 bytes iregnet CSS'en. Denne metoden gir, hvis jeg teller riktig, 432 bytes. Correct me if I'm terrible wrong, men dette tar da faktisk mer plass, er mye mer tungvindt, og gir rar kode!

 

Jeg mener ikke å være gretten, men jeg ser faktisk ikke en eneste god grunn til dette, annet enn prinsippet med ingen bilder.

 

 

 

EDIT:

Forresten mulig at browseren må sende nye requester for å få laste ned bildene, og at dette kan ta noe tid. Må innrømme at kunnskapene mine ikke er altfor gode på dette området, men jeg skulle tro det dreier seg om få millisekunder. Kanskje nok til å utligne forskjellen?

Endret 4. april 2005 av Mikka

[Arve Systad]

..men selfølgelig, det er ingen god grunn til å gjøre dette med klønete markup framfor bilder. Legg merke til at alt innholdet på den sida er "morro med CSS" og denslags, det er berre for å vise at det er mulig

[mikk-]

..men selfølgelig, det er ingen god grunn til å gjøre dette med klønete markup framfor bilder. Legg merke til at alt innholdet på den sida er "morro med CSS" og denslags, det er berre for å vise at det er mulig

Omtrent som han som laget et helt bilde bestående av en tabell med omtrent 40.000 celler på 1x1 px. =P

 

(bare at det var _komplett_ idioti )

[FuLu]

Morro, men neppe noe jeg vil bruke

[Gjest Slettet-df17e]

Jeg er nok enig i diverse ting over her som att bilder er bedre og bruke!

Men, hadde vert utrolig kult om dette var noe som blei en ordentlig standar i css/browsere

[resol]

Det kommer i css3 vel, så da gjennnstår bare støtta i browsere for css3.

[Kirikiri]

Nice, ihvertfall før jeg titter på koden.

Sambo ble litt snurt i går fordi han ville ha runde hjørner på en webside jeg lager for ham. Han ga seg da jeg forklarte at det er ikke noe som akkurat er innebygd i css, og at det måtte litt mer jobb til. (Dessuten fikk jeg vist ham at den websiden han hadde sett på faktisk hadde brukt bilder til å få det til.)

 

Får prøve det ut nå, så blir han kanskje glad.

 

Kirikiri

[mikk-]

Kirikiri:

Det er vel ikke _så_ mye jobb med bilder, er det? Vil faktisk tro det tar mindre tid enn å bruke denne metoden. Om tegneprogram er et problem, finnes det mange gratis alternativer der ute.

[Equerm]

Dette var jo ganske gøy men det var litt mye unødvendig kode for min del Tror jeg holder meg til å bruke bilder frem til det kommer en god funksjon som gjør dette enklere son satyrium sier

[Cucum(r)]

Er ikke denne metoden like grei? http://pro.html.it/esempio/nifty/nifty2js.html

[Kirikiri]

Kirikiri:

Det er vel ikke _så_ mye jobb med bilder, er det? Vil faktisk tro det tar mindre tid enn å bruke denne metoden. Om tegneprogram er et problem, finnes det mange gratis alternativer der ute.

Det tok meg faktisk kortere tid å finne den websiden, kikke på kildekoden, cut'n paste det inn i den koden jeg jobbet med og fikset farger etc, enn det ville ta meg å slice opp et bilde som skulle flytte seg dynamisk slik som denne koden gjør og legge inn kode for det.

 

Dette funker for meg, selv om det kanksje ikke er en superelegant løsning.

 

Kirikiri

[Jakob K]

Er ikke denne metoden like grei? http://pro.html.it/esempio/nifty/nifty2js.html

Den fungerer fint den, bortsett ifra at metoden er basert på JS. Så fort en som har deaktivert/ikke støtter JS skal inn på siden, blir hjørnene like rette og "fine" igjen..