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.
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.
Les også:
- [08.04.2011] Enklere webapp-design med nytt CSS-tillegg
- [16.03.2010] «Kult med Operas logo i CSS»
- [27.01.2010] - Ta i bruk HTML5 allerede nå
