---

Jeg har lånt Birgers Sørensens bil i CSS3 til at lave lidt styling. Det
er egentlig for at se, hvor langt man kan nå alene ved helt enkle
CSS3-deklarationer, box-shadow, border-radius, text-shadow og så noget
alm. :hover forskellige dele af bilen.

Læg mærke til, jeg har ikke ændret i Birgers HTML, hvilket viser styrken
ved CSS. Jeg har udnyttet muligheden for :before og :after i stedet.

Den kan kun ses korrekt i Opera, da jeg ikke gad sidde og lave alle de
ekstra deklarationer. Så hvis du har en anden browser, får du sikkert
noget, som ikke virker. Opera er foreløbig den eneste, som forstår alle
de brugte deklarationer via native CSS3.

http://www.webdesigngruppen.dk/temp/css3_bil.asp

Det er en opfølgning på Jopas spørgsmål, om man kan tegne en bil i HTML
uden brug af billeder, iøvrigt.


MVH
Rune Jense

---

Rune Jensen forklarede den 28-05-2010:

> http://www.webdesigngruppen.dk/temp/css3_bil.asp
>
> Det er en opfølgning på Jopas spørgsmål, om man kan tegne en bil i HTML uden
> brug af billeder, iøvrigt.

Jo det er da meget sjovt at man kan lave en primitiv øse med CSS, men
savner egentlig en fornuftig ide med det B-)

--
Mvh John
www.johns-web.dk
www.wordpresstema.dk

---

Den 28-05-2010 19:32, Jopa skrev:
> Rune Jensen forklarede den 28-05-2010:
>
>> http://www.webdesigngruppen.dk/temp/css3_bil.asp
>>
>> Det er en opfølgning på Jopas spørgsmål, om man kan tegne en bil i
>> HTML uden brug af billeder, iøvrigt.
>
> Jo det er da meget sjovt at man kan lave en primitiv øse med CSS,

Du sagde ikke noget om, den skulle være avanceret.

Du spurgte om det kunne lade sig gøre, og det kan det.

Hvis man benytter alle mulighederne i CSS3, så kan man få en fuldstændig
perfekt model som den ser ud hvis den er lavet i photoshop, så ja, det
kan også lade sig gøre i CSS3, og uden brug af billeder.

Du har alle de samme muligheder med CSS3, så det er ikke et problem. Men
det var ikke idéen her, hvor jeg kun er interesseret i de egenskaber,
som flest browserfabrikanter er enige om.

Hvis du vil have en perfekt bil i 3D og med photoshop effekter, må du
selv rode med transform og gradient og skewing osv.


> men
> savner egentlig en fornuftig ide med det B-)

Med CSS3?

Den burde ellers være oplagt. Man sparer en masse HTML, og man kan ændre
hele skidtet fra CSSen.


MVH
Rune Jensen

---

Rune Jensen formulerede fredag:

>
> Den burde ellers være oplagt. Man sparer en masse HTML, og man kan ændre hele
> skidtet fra CSSen.
Jeg kan godt se fordele ved CSS3 men kan ikke se den som afløser af alm
billedbehandling overhovedet

--
Mvh John
www.johns-web.dk
www.wordpresstema.dk

---

Den 28-05-2010 20:24, Jopa skrev:
> Rune Jensen formulerede fredag:
>
>>
>> Den burde ellers være oplagt. Man sparer en masse HTML, og man kan
>> ændre hele skidtet fra CSSen.
> Jeg kan godt se fordele ved CSS3 men kan ikke se den som afløser af alm
> billedbehandling overhovedet

Det har jeg så heller ikke sagt at det skal.

Du spurgte om det kunne lade sig gøre, og det kan det.

Hvis du følger lidt med i CSS3-udviklingen, så går den i øjeblikket
meget på eksperimenter udi hvad man kan med teknikken, hvis man udnytter
den fuldstændigt, ikke så meget om det i sig selv er brugbart til lige
det der testes på.

Det kan ses af rigtig mange tests, men prøv f.eks. at se her, hvor
social icons er lavet med ren CSS3:
http://blog.insicdesigns.com/2010/03/create-social-media-icons-in-pure-css/

Det kan ikke bruges til særligt meget i sig selv (ikonerne kan ikke),
men det man lærer ved at forsøge om hvor begrænsningerne er, er meget
værdifuld viden senere hen.

Allerede nu kan jeg lave CSS-talebobler, som jo er populære på blogs.
Også ribbons er en populær designteknik, og det kan også laves med ren
CSS. Hvad der så kendetegner begge teknikker er, de er scalable. Det kan
ikke laves med billeder, og slet ikke uden ekstra mark up.

hvis du ikke finder sådanne forsøg interessante, er det nok mest fordi
du ikke interesserer dig for det i det hele taget, og det er jo fair nok.



MVH
Rune Jensen

---

Rune Jensen skrev:

> social icons er lavet med ren CSS3:

En dag kommer der sikkert også et program der
kan omsætte et fotografi til css3-kode - og med
forskellige filtre der kan rette op på kvaliteten.

Der findes uanede muligheder her.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk

---

Den 28-05-2010 21:58, Allan Vebel skrev:
> Rune Jensen skrev:
>
>> social icons er lavet med ren CSS3:
>
> En dag kommer der sikkert også et program der
> kan omsætte et fotografi til css3-kode - og med
> forskellige filtre der kan rette op på kvaliteten.
>
> Der findes uanede muligheder her.

Forhåbentlig ikke... det vil dræne computeren for CPU ;)

Det CSS, jeg bruger, hvis der nu var mere tekst på siden, så man skulle
scolle, så ville den hoppe og danse, når den skulle forbi bilen.

Minimum 6-7 box-shadow med RGBA på samtlige, og jeg skal
give-dig-skal-jeg med rounded corners.

Jeg anbefaler ikke at se det på en bærbar, som ikke er tilsluttet
lysnettet heller, dræner nok batteriet ;)


Men nu var det også mere ment som et proof of concept.

Jeg synes jo så specielt det nedrullede vindue var lidt interessant,
hvordan skulle laves, men OK, jeg indrømmer det er meget CSS3-nørdet, og
nok i virkeligheden kedeligt.

Derimod, så er de teknikker, som bruges her, ganske velegnede til at
lave både ganske pæne ribbons og stylede talebobler, hvis nu man vil
have noget fornuftig anvendelsesmulighed.

http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

Læg mærke til den ekstra mark up. Det kan lade sig gøre at erstatte det
med :before og :after, hvis man er lidt hurtig, og stadig have IE med.

http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

Specielt velegnede til blogs, eller hvor der skal brugerkommenteres
(hvilket er mit næste projekt).


MVH
Rune Jensen

---

Jopa tastede følgende:
> Rune Jensen formulerede fredag:
>
>>
>> Den burde ellers være oplagt. Man sparer en masse HTML, og man kan ændre
>> hele skidtet fra CSSen.
> Jeg kan godt se fordele ved CSS3 men kan ikke se den som afløser af alm
> billedbehandling overhovedet

Kumbel. Piet Hein...
"Den som kun ta'r spøg for spøg
Og alvor kun alvorligt
Han og hun har faktisk fattet
Begge dele dårligt."
Har set et andet, som jeg ikke lige kan huske hvor kommer fra:
"Hvis du hele tiden ved hvad du laver, lærer du ikke noget."

Det er skidt, hvis man skal lære at bruge værtøjerne samtidig med at
man skal bruge dem til at udføre en opgave.
Når jeg kører bilen på værksted, er det ikke til een der ikke ved
hvordan man skal bruge skruetrækker og fastnøgler. Smeden skal kende
den drejebænk og fræser han står ved, og tømmreren helst ramme sømmet
når han svinger hammeren.
På samme måde, skal websmeden kende de værktøjer han skal bruge til at
fremstille et fornuftigt sammensat site. Og det er det vi gør - leger
med værktøjerne for at lære dem at kende.

Hvordan gør du?

Formålet med CSS3 er ikke billedbehandling. Der er ikke noget, der kan
erstatte billedbehandling.
CSS = Cascading Style Sheet. Der er til formatering af HTML elementer.
Prøv at forestille dig, hvad du ellers kan gøre med CSS3, når vi nu
faktisk er i stand til at tegne en bil - hvor stilistisk eller symbolsk
den end måtte være, i forhold til et foto.

I øvrigt flot, og dynamisk, dækkende over en Ferrari - havde nu hellere
set en Lamborghini - med indbyggede overraskelser, børn på bagsædet og
sælgeren i bagagerummet.
Flot Rune!
(Bortset fra den <![endif]> - a blessing of copy'n'paste - der ikke
hører til i koden, men dukker op i IE... Og hvor er det dog godt at vi
har fået rigtige browsere som alternativ..)
Vi er henne hvor ungerne skal gøre sig umage på papiret, for at gøre
det bedre!

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 28-05-2010 22:02, Birger Sørensen skrev:

> Formålet med CSS3 er ikke billedbehandling. Der er ikke noget, der kan
> erstatte billedbehandling.

Nej, absolut ikke.

Der, hvor CSS3 træder ind er i første omgang som erstatning for rounded
corners. Dernæst for skygger, og så for alm. gennemsigtighed. Det er
hvad størstedelen vil bruge det til.

Men egentlig billedbehandlig, nej.. Det er *alt* for ressourcekrævende.

> CSS = Cascading Style Sheet. Der er til formatering af HTML elementer.

Jeps. Én af grundene til, jeg ikke ved med animation...

> Prøv at forestille dig, hvad du ellers kan gøre med CSS3, når vi nu
> faktisk er i stand til at tegne en bil - hvor stilistisk eller symbolsk
> den end måtte være, i forhold til et foto.

Jeg kunne jo så (min skepsis til trods) animere den, som her:
http://www.kollermedia.at/wp-content/themes/kollermedia/specials/caranimation/index.html#

Man kunne også lade den dreje rundt (så ville det blive 2D, ikke 3D) og
forvinde i horisonten ved et eller andet :hover (ved brug af scale og
animation). Som sagt, så ved jeg ikke rigtigt hvad jeg skal mene om
animation, om det er godt eller skidt. Men ressourcer kræver det..

> I øvrigt flot, og dynamisk, dækkende over en Ferrari - havde nu hellere
> set en Lamborghini - med indbyggede overraskelser, børn på bagsædet og
> sælgeren i bagagerummet.

jaaa... Det er bare forbandet svært at tegne mennesker kun i CSS. Altså
uden at røre HTMLen. Selv sådan en Nikolaj-komma-streg...

> Flot Rune!
> (Bortset fra den <![endif]> - a blessing of copy'n'paste - der ikke
> hører til i koden, men dukker op i IE...

OK, jeg fejlfinder, i det mindste skal der ikke være dummefejl ;)

> Og hvor er det dog godt at vi
> har fået rigtige browsere som alternativ..)
> Vi er henne hvor ungerne skal gøre sig umage på papiret, for at gøre det
> bedre!

Ja. Men husk lige de dér :before og :after. Det er life savers, når man
skal have IE8 med på vognen.


MVH
Rune Jensen

---

Jopa wrote:

>>
>> Den burde ellers være oplagt. Man sparer en masse HTML, og man kan ændre
>> hele skidtet fra CSSen.
> Jeg kan godt se fordele ved CSS3 men kan ikke se den som afløser af alm
> billedbehandling overhovedet

Jo, hvis du skelner mellem grafik og 'billedbehandling'.
Forstået på den måde, at grafik er et sæt af objekter, og et billede er et
foto.

På samme måde som gif/png er overlegent til 'grafik' i forhold til jpeg, så
er SVG overlegent til grafik frem for 'billeder'.

Men SVG har(haft) en hård fødsel siden '98, da der i starten kun var Adobes
plugin til IE, og kun sporadisk support fra andre browsere.

Med overgangen fra FF2.x til FF3.x var en af de store statninger netop SVG,
så man kan håbe det vider gehør.

Dog er det nok lidt tungt, da det (muligvis) er baseret på HPGL
(plottergrafik) fra start 80'erne, og hvor MS flækkede det i VML, og
'resten' i SVG.

Google bruger det, men de har 'råd' til at sende VML til 'inderned
exploder', og SVG til 'resten'.

Men til andre indlæg, så prøv at kigge på alle de fancy ting, gradients osv,
som har kunnet laves siden årtusindeskiftet (dog nok kun IE+Adobe).

Men da SVG (tilsyneladende) er en evolution fra HPGL fra den tid hvor en
plotter var koblet op med RS232/1200 baud, er det _meget_ komprimeret
(mange direktiver er på 1 bogstav), men det betyder også at det er særdeles
velegnet til at GZip'e (jeg har typisk 95% compression).

Blot nogle hints, men da SVG først kommer i IE), og ikke understøttes af XP,
går der nok _nogle_ år før det bliver 'brugbart'.

--
Med venlig hilsen
Stig Johansen