Tag-Archive for » CSS 3 «

Was gibt es nicht mehr mit HTML 5?

By dmi · 27. August 2010

HTML 5 hält zusammen mit CSS 3 viele Neuerungen für uns bereit. Allerdings musste auch einiges Altes dafür weichen.

Das Beginnt mit dem Ende von <applet> und einigen Textauszeichnungen, nämlich <big>, <strike>,<tt>, <u> und <s>. Das Tag <acronym> ließ sich kaum von <abbr> (Abkürzung) unterscheiden. Auch <dir> und <isindex> stammen aus einer anderen Zeit und sind jetzt nicht mehr dabei. Die Tags <center>, <font> und <basefont> gibt es nicht mehr.

Auch die Attribute wurden ausgedünnt. Das Attribut name gibt es jetzt nur noch bei Formular-Elementen, und die Attribute width, height, align und border wurden wie auch andere stark eingeschränkt.

Und endlich sind auch die leidigen Frames Geschichte. Bei aktuellen Seiten kommen sie sowieso kaum noch vor. Und wenn man unbedingt Frames braucht, kann man sie mit dem <iframe>-Tag nachbauen, denn das soll es weiterhin geben.

Category: Allgemein  Tags: , , ,  Leave a Comment

Farbverlauf mit CSS 3

By dmi · 16. August 2010

Zu den neuen Möglichkeiten, die CSS 3 bietet, gehören auch Farbverläufe. Man setzt sie ja gerne als Hintergrund ein, um mehr Tiefe zu gewinnen oder besonders seit dem Web 2.0-Hype auch als feines Design bei Schaltflächen und Formularelementen.

Bisher wurden Farbverläufe meist mit einer entsprechenden Grafik realisiert, die den Elementen als Hintergrund zugewiesen wurde. Das ist nun mit CSS 3 wesentlich leichter zu machen – und man braucht kein Grafikprogramm mehr, um den Verlauf zu erzeugen und als Bild zu speichern. Der gewünschte Verlauf wird mit CSS 3 einfach definiert.

Um einen linearen Farbverlauf von oben nach unten und zum Beispiel von rot nach weiß zu erzeugen, brauchen Sie folgende Definitionen in Ihrem Stylesheet:

background: #f00
background:  -moz-linear-gradient(top, #f00, #fff);
background:  -webkit-gradient(linear, left top, left bottom, from(#f00), to(#fff);

Im Beispiel ist die erste Zeile ein einfaches Fallback auf rot, das jeder Browser beherrscht. Die zweite Zeile definiert den Verlauf für den aktuellen Firefox und die dritte für Safari und Chrome. Dem Internet Explorer muss man dabei noch mit einem Gradienten-Filter unter die Arme greifen, damit auch er den Verlauf ohne Grafikbildchen erzeugen kann:

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(start Colorstr= #ffff0000, endColorstr= #ffffffff)”;

filter: “progid:DXImageTransform.Microsoft.gradient(start Colorstr= #ffff0000, endColorstr= #ffffffff)”;

Category: Allgemein  Tags: , , , , ,  Leave a Comment

CSS 3: Transparenz ohne Tricks

By dmi · 29. Juli 2010

Zu den besonders beliebten und deshalb schon heute sehr viel benutzten CSS 3-Eigenschaften gehört die Transparenz (opacity). Sie legt  den Grad der Transparenz eines Elements fest. Der Wertebereich geht von 0 bis 1, und je niedriger der Wert ist, umso durchsichtiger wird das Element. Die Zuweisung geschieht einfach mit:

< div class=”halbdurchsichtig”></div>.

Der CSS-Code dazu lautet:

.halbdurchsichtig {

opacity: 0.5;

}

Und schon klappt es in allen modernen Browsern – bis auf den Internet-Explorer von Microsoft.  In der neuen Version 9 funktioniert das auch mit dem Microsoft-Browser, aber für die älteren Versionen brauchen Sie spezielle Microsoft-Filter, eins für den Internetexplorer 8 und ein weiteres für Versionen unter 8. Erweitern Sie den Style für die Klasse “halbdurchsichtig” wie folgt

.halbdurchsichtig {

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

filter: progid:DXImageTransform. Microsoft.Alpha(Opacity=50);

zoom: 1;

opacity: 0.5;

}

und die Microsoft-Browser zeigen das DIV-Element jetzt auch halbdurchlässig an.

Category: Allgemein  Tags: , , ,  One Comment

CSS 3: Google bietet 18 kostenlose Web-Fonts an

By dmi · 26. Juli 2010

CSS 3 buhlt mit seinen neuen Eigenschaften um die Gunst der Web-Entwickler. Da gibt es nicht nur Boxen mit runden Ecken sondern auch Schatten und Transparenzen. Auch herunterladbare Schriften, Webfonts genannt, gehören zu den neuen Features, die uns CSS 3 bringt.

Die kostenlosen Google Webfonts

Diese Schriften liegen auf dem Server, so dass sie auch bei Besuchern angezeigt werden, auf deren Computer sie nicht installiert sind. Damit wird man endlich unabhängig von den wenigen Schriften wie Arial und Verdana, die die Browser von Haus aus mitbringen, ohne auf grafiklastige Lösungen mit ihren bekannten Nachteilen ausweichen zu müssen.

Noch gibt es verschiedene Schriftformate für unterschiedliche Browser und zusätzlich diverse rechtliche Einschränkungen, die den Einsatz von Standardschriften als Webfonts erschweren. Da kommt das Angebot von Google gerade recht. Der Internet-Gigant bietet 18 verschiedene Schriften zum Einsatz als Webfonts auf seiner Website (google.com/webfonts) an.

Einbinden können Sie diese Schriften recht einfach. Man wählt eine der Schriften und klickt sie an. Jetzt wird angezeigt, wie die gewählte Schrift in unterschiedlichen Größen aussieht. Die Option “Character Set” zeigt, welche Zeichen in dieser Schrift zur Verfügung stehen, so dass man vorher nachsehen kann, ob auch Umlaute und andere benötigte Sonderzeichen unterstützt werden. Die Option “Get the code” zeigt die Codezeilen zum Einbinden der Web-Schrift. Das sieht für Tangerine so aus:

<link href=’http://fonts.googleapis.com/css?family=tangerine’ rel=’stylesheet’ type=’text/css’>

Mit dier Zeile, die man im Head-Bereich der Internetseite einbindet,  wird das jeweils zum aktuell verwendeten Browser passende Stylesheet mit allen nötigen Angaben eingebunden.

Man kann die Webfonts mit dem Internet Explorer ab Version 6.0, mit Firefox ab Version 3.5, mit Google Chrome ab Version 4.2, mit Safari ab Version 3.1 und mit Opera ab Version 10.5 nutzen. Auf anderen Browsern greift die angegebene Fallback-Schrift.

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5 zum Zweiten

By dmi · 12. Juli 2010

In allen moderneren Webbrowsern außer dem Internet Explorer 8 laufen HTML 5 – Seiten mit CSS 3 problemlos. Da aber viele Surfer noch steinzeitliche Browser benutzen, gibt es Möglichkeiten, diese zur Zusammenarbeit mit der Kombination HTML 5 / CSS 3 zu bringen.

Da der Internet Explorer 8 CSS-Deklarationen für HTML-Elemente, die er nicht kennt, einfach ignoriert, hilft ein Workaround, der die Elemente zur Laufzeit mittels Javascript erzeugt:

<script>
document.create.element(‘header‘);
document.create.element(‘nav‘);
document.create.element(‘section‘);
document.create.element(‘article‘);
document.create.element(‘aside‘);
document.create.element(‘footer‘);
</script>

Zum Testen der per Javascript erzeugten DOM-Elemente können Sie eine einfache HTML 5-Seite benutzen:

<!doctype html>
<html>
<head>
<title> HTML 5 wird getestet…</title>
<style type=“text/css“>css3.css</style>
</head>
<body>

<header>Der Test beginnt mit einer Überschrift</header>

<nav>
<ul>
<li>Home</li>
<li>Impressum</li>

<li>Kontakt</li>
</nav>

<section>
<h1> Erster Bereich</h1>
<article> Dies ist der erste Artikel…</article>
</section>

<footer>
<p>Hier steht der Inhalt der Fußzeile</p>
</footer>

</body>
</html>

Ein weiteres Hilfsmittel, mit dem man die alten Microsoft-Browser Internet Explorer 6, 7 und 8 auf HTML 5-Kompatibilität bringen kann, ist das Plugin Google Chrome Frame. Das Plugin ist kostenlos, aber es ist aus der Erfahrung nicht einfach, seine Besucher davon zu überzeugen, dies Plugin zu installieren. Mit diesem Plugin brauchen Sie die oben beschriebene Erzeugung der fehlenden DOM-Elemente per Javascript nicht mehr durchführen.

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5 zum Ersten

By dmi · 8. Juli 2010

Keine Frage – HTML 5 ist im Anmarsch. Es gibt zwar noch keine finale Version der neuen Markup-Sprache fürs Web, aber im Grunde ist der neue Standard einsatzbereit. Ein guter Anlass, sich das jetzt nicht nur anzuschauen, sondern auch aktiv zu werden und die erste eigene Seite mit HTML 5 und CSS 3 zu entwickeln.

HTML 5 bringt viele neue Funktionen und Möglichkeiten. Aber nichts ist so anders wie die neuen semantischen Tags. Dadurch wird es für Suchmaschinen, aber auch für Ihren Browser überhaupt erst möglich, sich ein Bild von den Inhalten der Website zu machen, den immer häufiger zum Surfen benutzten Smartphones wird die Navigation durch die Site erleichtert oder gar erst möglich gemacht, und last not least werden auch Sie als Webdesigner mit HTML 5 letztlich einfacher durchs Leben kommen.

Wer schon einmal einen Satz Designs für ein CMS erstellt hat, der weiß, wie unnötig komplex der Aufbau eines Dokumentes mit den bisherigen nichtssagenden Tags gerät. Der korrekte Einsatz von HTML 5 eliminiert diese Probleme und wird Ihr Leben als Webdesigner auch dahingehend verändern, dass Sie sich mehr aufs Design konzentriern können und weniger um dessen Mechanik kümmern müssen!

Über die neue Dokument-Typdeklaration und die neuen sprechenden Auszeichner von <header> über <nav> und <section> bis <footer>, aber auch über die Frage, wie man denn den bekannten, zu HTML 5 inkompatiblen Altlasten-Browsern HTML 5 unterschieben kann, erfahren Sie mehr im nächsten Artikel zur Einführung des neuen Webstandards.

Category: Allgemein  Tags: , , , , , ,  Leave a Comment