Opera 10.5 mit runden Ecken und Schatteneffekt

Dieter — Tue, 02 Mar 2010 20:30:22 +0000

Hurra! Opera 10.5 für Windows ist da (siehe hierzu die Artikel “Opera 10.50 ist fertig – jedenfalls für Windows” bei heise.de und “Opera 10.50 für Windows: Fertige Version ist da” bei golem.de)!

Über die Update-Funktion des Opera konnte ich meinen Browser nicht automatisch aktualisieren, aber über die Opera-Website ist die Version 10.5 zum Herunterladen (Download) verfügbar.

Diese Möglichkeit habe ich gleich genutzt und auf diese Weise meinen Opera für Windows auf die Version 10.5 aktualisiert.

Und siehe da: Endlich sieht man die CSS3-Eigenschaften

Runde Ecken (rounded corners) mit border-radius und
Schatteneffekt (shadow) für Boxen mit box-shadow

auch im Opera.

Nun ist es lediglich noch der Internet Explorer (IE), der selbst in seiner neuesten Version 8 noch nicht diese CSS3-Eigenschaften beherrscht.

Aber: Man soll die Hoffnung nicht ganz aufgeben. Microsoft hat in Aussicht gestellt, im Internet Explorer 9 ebenfalls die Unterstützung von CSS3 einzubauen. Schau mer mal.

Im neuen Opera 10.5 stellte ich aber auch gleich folgende neuen, für mich ungewohnten Verhaltensweisen des Browsers fest:

Bei der Gestaltung von Checkboxen scheint Opera 10.5 im Gegensatz zu anderen Browsern auch CSS-Eigenschaften von input zu übernehmen. Das erschwert zumindest für mich die Gestaltung von Checkboxen.
Die Hintergrundfarbe eines Containers (div) um die Suche überträgt sich nun auch auf ein sich darin befindliches Suchfeld, wenn man für das dortige input nicht eine eigene Hintergrundfarbe definiert.

Das Ganze deutet für mich darauf hin, dass beim Opera 10.5 CSS-Eigenschaften nun (noch) mehr auf Formularelemente vererbt werden.

Anscheinend kommen damit noch mehr Gestaltungsprobleme mit dem Opera auf mich zu. Über ein bereits mit älteren Versionen des Internet Explorers (IE) und Opera bestehendes Gestaltungsproblem hatte ich bereits in meinem Blogbeitrag “Checkbox-Problem mit IE und Opera” berichtet.

Wie findest Du denn den neuen Opera 10.5?

Kommentare

2. März 2010, Thiemo schreibt: Checkboxen gestaltet Opera schon seit längerem mit, wenn man den Selektor mit input { ... } abkürzt, was ich übrigens als korrektes Verhalten werten würde. Ich empfehle statt dessen input[type=text] { ... }. Etwas schade finde ich, dass die 10.5 so überhastet veröffentlicht wurde. Sie hat noch viele kleine Bugs, die aber sicherlich bald behoben werden.
2. März 2010, Dieter schreibt: @Thiemo Herzlichen Dank für den Tipp mit input[type=text]. :hurra: Vielleicht ist das ja die Lösung meines Gestaltungsproblems. Werde ich mal ausprobieren und dann über das Ergebnis berichten. Im Artikel “Opera 10.50 ist fertig – jedenfalls für Windows” von heise.de wird für mich plausibel erscheinend erklärt, warum die Version 10.5 des Opera etwas überhastet veröffentlicht wurde.

Runde Navigationselemente ohne Grafiken

Dieter — Fri, 19 Feb 2010 00:35:40 +0000

Bei webstandard.kulando.de habe ich ein schönes Tutorial entdeckt, mit dem für moderne Browser runde Links – wie beispielsweise Navigationselemente – ohne Grafiken erstellt werden können.

Lediglich beim Internet Explorer (IE) und Opera werden die Links nicht rund, sondern in eckigen Boxen dargestellt. Allerdings wird die avisierte Version 10.5 von Opera auch border-radius unterstützen, so dass dann nur noch der Internet Explorer (IE) nicht in den Genuss der runden Darstellung kommt.

Der Vorteil: Kein aufgeblähter HTML-Code, der durch Grafiken zudem länger lädt, sondern nur ein paar Zeilen CSS-Code und die CSS3-Eigenschaft border-radius sind dafür erforderlich.

Das lesenswerte Tutorial gibt es unter “CSS3 Tutorial – Website-Navigation – Border-Radius“.

Kommentare

19. Februar 2010, Webstandard-Team schreibt: Freut mich, wenn das kleine Step-by-Step-Tutorial in Sachen CSS3 gut ankommt. So langsam wird's auch Zeit, dass einem die Browser keinen Strich mehr durch die mögliche Nutzung von CSS3 machen.
19. Februar 2010, Dieter schreibt: @Webstandard-Team Ja, es kommt bei mir sehr gut an und ich freue mich auch schon sehr auf die fast avisierte Fortsetzung. :-) Auf Webseiten-Infos.de und dieter-welzel.de setze ich schon CSS3 ein. Jurafernstudium.de soll mit dem in Arbeit befindlichen Relaunch ebenfalls mit CSS3 gestaltet werden. Allerdings hatte ich bisher noch nicht an die Möglichkeit gedacht, dass man mit border-radius nicht nur Ecken von Boxen abrunden, sondern aus einer quadratischen Box sogar einen Kreis machen kann. Schöne Idee!

Webseiten-Infos.de » border-radius

Opera 10.5 mit runden Ecken und Schatteneffekt

Kommentare

Ähnliche Beiträge

Runde Navigationselemente ohne Grafiken

Kommentare

Ähnliche Beiträge