Antary

Kategorie: HTML5 & CSS3

Schöne Buttons mit CSS3 erstellen

8. Juni 2011, 17:51 · von · 3 Kommentare

Im Rahmen eines kleinen Webprojekts für mein Studium, habe ich heute ein HTML-Formular erstellt. Da ich unbedingt schöne Buttons wollte, habe ich mich das erste Mal richtig mit CSS3 auseinandergesetzt. Wirklich toll was damit alles möglich ist.

Ich habe mir einen Button mit abgerundeten Ecken, leichtem Farbverlauf und Schatten gebastelt. Der Text hat ebenfalls einen leichten Schattenwurf bekommen und beim drüberfahren wird die Farbe der Buttons gewechselt, mit Animation natürlich. Anzumerken wäre noch, dass alles rein in CSS realisiert wurde und keine Grafiken zum Einsatz kommen. Auch am HTML-Code muss nichts geändert werden. Die Buttons funktionieren im Firefox 4, Opera 11.11 und Chrome 12 einwandfrei. Im IE9 muss man lediglich auf die Animation beim Hovern verzichten.

Hier das Ergebnis. Links im normalen Zustand, rechts wenn man mit der Maus drüberfährt:

(mehr …)

Kategorien: HTML5 & CSS3 Internet Web-Design

Präsentation über CSS3

9. November 2010, 19:55 · von · 0 Kommentare

Gerade bin ich über eine sehr tolle Präsentation zum Thema CSS3 gestolpert.Folgende Themen werden auf insgesamt 103 Seiten behandelt:

  • Everything you ever wanted to know about CSS3 selectors
  • Transparency and new color formats, including RGBA
  • New ways to work with backgrounds, including CSS gradients, multiple background images and natively supported CSS sprites
  • Rounded corners and border images
  • Box and text shadows
  • Transforms, transitions and their potential downsides
  • New values, including calc(), attr() and new units
  • Browser support information and techniques to take advantage of the exciting new stuff with respect to browsers of the past, to create experiences that are enjoyable for everyone

Die Präsentation wurde von Lea Verou erstellt und sollte unbedingt mit der Betaversion von Firefox 4 angeschaut werden. Falls dies nicht möglich ist, kann man auf die Online-Version zurückgreifen.

Kategorien: HTML5 & CSS3 Web-Design

Browser auf HTML5-Kompatibilität testen

14. April 2010, 19:42 · von · 6 Kommentare

Unter html5test.com hat Niels Leenheer einen Test veröffentlich, um Browser auf ihre HTML5-Unterstützung hin zu testen. Ähnlich wie beim Acid3-Test werden Punkte vergeben, um die unterschiedlichen Browser besser vergleichen zu können. Das Ergebnis wird übersichtlich zusammengefasst und zeigt genau auf, welche HTML5-Funktionen bereits unterstützt werden und welche noch nicht.

Allerdings muss man bedenken, dass die Spezifikation von HTML5 noch nicht fertig ist und sich daher noch einiges ändern kann. Zudem räumt der Entwickler ein, dass der Test nur überprüft ob die Funktionen im Browser bereit stehen. Die richtige Implementierung bzw. Umsetzung werden nicht näher geprüft.

Aktuell können maximal 300 Punkte erreicht werden. Hier eine kleine von mir erstellte Übersicht:

Browser Punkte
Firefox 3.6.8 139
Firefox 4.0 beta 2 189
Chrome 5.0.375.125
 197
Chrome 6.0.472.22 dev
 217
Internet Explorer 8
 27
Opera 10.60
 159
Safari 5.0.208
 208

Kategorien: HTML5 & CSS3 Web-Design

Einheitliche Schreibweise für HTML5

20. Oktober 2009, 12:24 · von · 0 Kommentare

Bisher benutzte die WHATWG HTML5 ohne Leerzeichen, während das W3C HTML 5 mit Leerzeichen verwendete.

Für die unterschiedliche Schreibweise gab es keine Gründe, vielmehr hat es sich durch einige Zufälle ergeben. Mittlerweile hat man sich auf HTML5 ohne Leerzeichen geeinigt.

Kategorien: HTML5 & CSS3 Sonstiges

XHTML 2.0 wird eingestellt – es lebe HTML 5

3. Juli 2009, 11:04 · von · 0 Kommentare

Zum Jahresende wird die World Wide Web Consortium (W3C) seine XHTML-2-Arbeitsgruppe schließen. Die Ressourcen sollen allesamt auf HTML 5 konzentriert werden, was die Entwicklung deutlich beschleunigen dürfte.

Dennoch wird es in Zukunft eine XML-basierte Formulierung von HTML geben. Die HTML 5 Spezifikation enthält sowohl einen Teil zur XML-Darstellung als auch zur text/html-Darstellung. An beiden will das W3C im Rahmen der HTML-Arbeitsgruppe weiterarbeiten, so dass die nächste Version einer in XML formulierten Version von HTML voraussichtlich in der HTML-5-Spezifikation enthalten sein wird.

Eine sehr positive Nachricht, wie ich finde. Man vermeidet zwei unterschiedliche Spezifikationen und kann gleichzeitig auf eine schnellere Entwicklung hoffen.

Kategorien: Coding HTML5 & CSS3