Det er vanskelig å se forskjell på Operas virkelige logo, og denne CSS-versjonen som David DeSandro har utformet kun ved hjelp av stilsett.

Denne er laget i CSS

Se hvordan Opera-logoen kan utformes helt uten bildefiler.

Webutviklere har i årevis tydd til ulike triks for å lage avrundede hjørner, fargegraderinger og skyggeeffekter på HTML-elementer. Men slike metoder krever bruk av bildefiler.

De fleste nettlesere støtter i dag flere funksjoner fra den kommende webstandarden CSS3 (cascading style sheets), eller stilsett som teknologien kalles på norsk.

Det åpner for mer avansert layout og grafikk, utformet kun ved hjelp av HTML og stilsett.

Utvikler David DeSandro har utformet Operas logo på denne måten, helt uten fotofikling og bilder.

Det er vanskelig å se forskjell på Operas virkelige logo, og denne CSS-versjonen som David DeSandro har utformet kun ved hjelp av stilsett.
Det er vanskelig å se forskjell på Operas virkelige logo, og denne CSS-versjonen som David DeSandro har utformet kun ved hjelp av stilsett.

Fordelen ved å lage dette i CSS er blant annet at logoen kan forstørres i nettleseren uten at kvaliteten forringes. Prøv selv ved å øke nettleserens skriftsstørrelse (altså på nettsiden vi lenket til, ikke vedlagte bilde i denne artikkelen).

DeSandro skriver at han blant annet benytter CSS-funksjoner som border-radius, men også Mozilla- og Webkit-spesifikke egenskaper som moz-linear-gradient og webkit-gradient.

Noen av disse funksjonene er proprietære CSS-utvidelser, som ikke følger standarden slik den er nedfelt av W3C (World Wide Web Consortium).

Dermed virker ikke koden på tvers av nettlesere, men eksempelet over fungerer fint både med Firefox 3.6 og Chrome 5.0. I nyeste versjon av Opera (10.50) mangler graderingen, mens logoen fremstår som en firkant i Internet Explorer 6, 7 og 8.

Det er ikke mulig å CSS-kode en logo som fungerer i alle nettlesere. Dette eksempelet fungerer best med nyeste versjon av Firefox og Chrome.
Det er ikke mulig å CSS-kode en logo som fungerer i alle nettlesere. Dette eksempelet fungerer best med nyeste versjon av Firefox og Chrome.

    Les også:

Til toppen