Skip to content

Help improve the web – get Opera!

Beim Lesen von Web development mistakes – einem Artikel den ich in Fehler beim Erstellen von Webseiten bereits zusammengefasst habe – bin ich auf etwas weiteres gestoßen:

Rechts in der Navigationsleiste des Blogs gibt es eine Sektion Help improve the Web, wo ein Link-Button zur Download-Seite von Firefox angezeigt wird.

Sowas wollte ich natürlich für den Opera-Browser und habe mich an eine Kampagne The New Opera Mascot! erinnert. Dort entwirft GreyWyvern ein neues -Logo mit dem Papageientaucher als Maskottchen.

Bei GreyWyvern habe ich dann mal wegen einem solchen Link-Button angefragt. Bisher gab’s noch keine Antwort.

Moose hat inzwischen einen eigenen Set von Buttons veröffentlicht. Die finde ich aber nicht so toll wie die mit dem Papageientaucher – außer dem letzte Button auf der Seite, den Moose selbst entworfen hat…

Also habe ich mir das O-Logo von GreyWyvern geladen und zu einem CSS-Button umgebaut.

<li id="opera">
  Help improve the Web
  <a href="http://www.opera.com/">
    <span class="o">O</span>
    <span>pera</span>
  </a>
</li>

Ich weiss, das ist nicht ganz minimal. Aber so ziemlich. Anders hätte ich es auch nicht hinbekommen, dass es so aussieht, wie’s jetzt aussieht. getOpera CSS-buttonAusserdem ist’s so zugänglich (Ohne Bild und bei Vernachlässigung des Markup steht da ‚Opera‘. Die Information ist also noch erkennbar.)

CSS


#opera a{
  display:block;
  font-size:48px;
  margin-top:10px;
  line-height:50px;
  cursor:pointer /*cursor fuer IE*/}
#opera a:hover{color:#c00}
#opera span{display:block; float:left}
#opera span.o{
  background:url(/facts/i/getOperaPuffin.jpg) no-repeat top left;
  padding-left:60px;padding-top:52px;
  width:0;height:0;
  overflow:hidden}

Tja, und ob das jetzt minimal ist, weiss ich auch nicht sicher.

Das a ist blocklevel, damit im Markup kein br auftauchen muss… 😉

Die spans sind blocklevel und gefloated, damit das FIR funktioniert und damit sie dann (nachdem sie blocklevel sind) nebeneinander dargestellt werden.

Anstelle eine class ‚o‘ einzuführen könnte man auch Selektoren für Pseudo-klassen verwenden. first-child wäre da hilfreich. Aber da der IE das nicht kann, und IE-Benutzer die Zielgruppe dieser Kampagne sind 😉 , wäre das wohl nicht so klug. Deshalb bleibt’s bei dieser ‚überflüssigen‘ Klasse und dem ‚überflüssigen‘ zweiten span.

{ 2 } Comments

  1. Moose | 2004/12/5 at 04:10 | Permalink

    Errr…. as far as online translator did its job properly… here is the answer to the question I understood, which may be different from the question you asked 🙂

    I created only the green button, and the eye button (really, added the eye, and made things transparent). The remainder are Opera’s, only moosified in blue.

    M.

  2. Steffen | 2004/12/5 at 09:55 | Permalink

    Hello Moose,

    your comment made me use Google-Translation for the first time. It’s quite good. Sometimes one can even understand what is talked about 😉

    Thanks for your clarification on the buttons. I like that last ‚moosely button‘ of yours but not as much as I’d like a puffin-button.

Post a Comment

Your email is never published nor shared. Required fields are marked *