Gem DIV som billed

Tags:    html php jquery

Er det muligt at få en div lavet om til et billed?
- Håber i forstår?




7 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 5 karma
Sorter efter stemmer Sorter efter dato
Jo, du kan tage et screenshot? :) Dog er det ikke den helt optimale metode.

Normalt vil man bruge fallbacks til browsere der ikke understøtter det man gerne vil lave.

Enten fallbacks i form af billeder, som med lidt god vilje er det du er inde på - hvor man fx. ved en gradient laver den både som CSS3 og et billede - og så bruger man det som browseren kan vise (evt ved brug af modernizr)

Den anden metode er at bruge mantraet graceful degradation eller progressive enhancement - to sider af samme sag. Konceptet er bare, at du altid designer så selvom folk bruger en browser, der i dit tilfælde ikke understøtter CSS3, så får de vist indholdet og de mest basale ting - bare uden det grafiske lir. For eksempel, hvis du har en hvid->grå gradient på en menu-div kan du vælge at den bare skal være hvid hvis browseren ikke kan vise gradients.

CSS har den fantastiske egenskab, at hvis en browser møder en regel den ikke forstår, så bruger den det den ved på forhånd om elementet i stedet, det vil sige:
1) Inherited stylings
2) Styling der er givet tidligere

Så med vores gradient eksempel ville man gøre sådan:
Fold kodeboks ind/udCSS kode 


Med ovenstående kode får du i gamle browsere en hvid baggrund på div.some og i nyere browsere en gradient fra hvid til lys-grå.

Hvis dine besøgene ikke sørger for at have en opdateret browser, kan man godt antage at de ikke er typerne som bliver imponerede af grafik - og derved er progressive enhancement/graceful degradation ok. Det tvinger dig også til at lave bedre gennemtænkte løsninger - og det er måske ikke så skidt endda :-)



Jeg tror ikke jeg forstår dig - og det lyder lidt som om at du har misforstået noget :-)

Du kan sætte et baggrundsbillede på en div og give den samme dimensioner som det billede du ønsker at vise. Det kunne ordnes med CSS.

Fold kodeboks ind/udCSS kode 


Hvis ikke det er målet, så forstår jeg ikke hvad du vil opnå.



Nej altså det er fordi jeg benytter en hel del CSS3. Og det er egentlig kun Chrome der viser det perfekt.
- Så er det ikke muligt at gemme min DIV som et billed
så i stedet for at lave en
<div>Tekst inden i div</div>
så bare vise den via et billed <img src="blabla.jpg">



Det er slet ikke muligt at få browseren / serveren til at gøre dette?
- Eller vil det være muligt at få PHP Imagecreate til det?
Men andre ord, kan PHP Imagecreate tilføje css3?



Nej. Det kan ikke lade sig gøre - og det er slet ikke smart.



@Gustav >> hvordan kan du fraråde jquery i en tråd og anbefale modernizr i en anden ?



@Jokke, Jeg fraråder ikke jQuery som sådan. Jeg siger at jeg synes det er et forkert værktøj til at opnå en layout effekt når man kan gøre det samme med CSS - specielt hvis jQuery ikke allerede er en del af din stak er det spild af ressourcer. Modernizr løser et problem for os; det kan gøre progressive enhancement nemmere - især for begyndere. Jeg bruger det ikke selv, da det i realiteten sjældent er nødvendigt. Og det er ikke god forum stil med offtopic flame :-) Send hellere en pm, eller hold det i den oprindelige diskussion. Glædelig lørdag aften.

@Anders, du kan eventuelt kigge på javascript polyfills for gradients eller lignende css3 effekter hvis det er død-og-pine vigtigt. En god oversigt kan findes her: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Fx CSS3 PIE; Progressive Internet Explorer ( http://css3pie.com/ ) som åbner mulighed for css3 ting som text-shadow, box-shadow og gradients i IE6 til 9. Du skal bare være opmærksom på at det kan risikere at være en performance hog - især på ældre maskiner.



t