Seit CSS3 hat man nicht nur die Möglichkeit Multiple-Backgrounds zu benutzen, sondern auch Mehrfach das text-shadow Attribut zu nutzen. Dieses führt zu schönen Text Effekten. Die Parameter bei der Verwendung von text-shadow sind:

text-shadow: <Verschiebung x-Richtung><Verschiebung y-Richtung><Stärke Weichzeichner><Farbe>;

Neon

.neon {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,  0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}

Giftig

.giftig {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #06ff00,
0 0 70px #06ff00,
0 0 80px #06ff00,
0 0 100px #06ff00,
0 0 150px #06ff00;
}

Feuer

.feuer {
color: black;
text-shadow: 0px 0px 4px #fff,
0px -5px 4px #FF3,
2px -10px 6px #FD3,
-2px -15px 11px #F80,
2px -25px 18px #F20;
}

3D Brille

.dreiDBrille {
color:rgba(255,0,0,0.5);
background:#fff;
text-shadow: 8px 0px 0 rgba(0,255,0,0.5);
}

3D Text

.dreiDText {
background:#404040;
color:#fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,0.1),
0 0 5px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.3),
0 3px 5px rgba(0,0,0,0.2),
0 5px 10px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.2),
0 20px 20px rgba(0,0,0,0.15);
}

Letter

.letterpress {
background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010,
1px 1px 0px #505050;
}

DEMO

Quellen:

http://wsmithdesign.wordpress.com/2010/11/15/practical-reasons-for-css3-shadows/
http://markdotto.com/playground/3d-text/
http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

Bis gestern habe ich mich immer davor gedrückt in die Flash Welt abzutauchen. Aber gestern habe ich dann zum ersten mal auch Adobe Flash CS5 meiner Adobe Suite geöffnet. Adobe Labs hat nämlich Wallaby Technology Preview veröffentlicht. Damit ist es möglich FLA Dateien in HTML5 Webseiten umzuwandeln. Dabei wird die Animation als Canvas umgewandelt werden die einzelnen Layer als SVG exportiert und mit CSS3 Keyframe Animation und jQuery animiert. Die Animationen sind allerdings nur mit Webkit Browsern wie Chrome oder Safari anzusehen.

Wallaby kann man hier runterladen. Das Programm kommt in gewohnter Adobe Manier als Air Anwendung für Mac und Windows daher. Das Interface ermöglicht es eine FLA Datei zu laden und zu konvertieren. Eventuelle Fehler werden auch angezeigt.

ActionScript wird bisher nicht unterstützt. Die gesamte Feature und Support Liste gibt es hier.

Zu Testzwecken habe ich eine kleine Animation erzeugt und diese auch konvertiert. Leider sind meine Flash Skills sehr bescheiden, aber zu Testzwecken sollte diese kleine Animation reichen.

DEMO DOWNLOAD (FLA, HTML5)

Seit CSS3 hat man als Benutzer die Möglichkeit mehrere Hintergründe für eine Box setzen. Vorher war man darauf angewiesen mehrere Boxen ineinander zu verschachteln und jeder dieser Boxen ein neues Background Attribut hinzuzufügen. Mit CSS3 ist das weit aus eleganter.

body {
background: url(images/background_grass.png)  bottom repeat-x,
url(images/background_stone.png)  bottom right no-repeat,
url(images/background_clouds.png) left top repeat-x,
url(images/background_sun.png) right top no-repeat,
url(images/background_sky.png) top repeat-x rgba(255,255,255,1);
}

Diese paar Zeilen CSS reichen aus, um dem body Element fünf verschiedene Hintergrundbilder zuzuordnen. Das “oberste” Element wird als vorderstes Element angezeigt. Die einzelnen Attribute werden einfach Komma-getrennt angefügt. Über die Eigenschaften top, bottom, left, right kann man ihre Position festlegen.

The background of a box can have multiple layers in CSS3

Quelle: http://www.w3.org/TR/css3-background/#layering

Das ganze funktioniert für folgende Browser.

Foto: http://fmbip.com/

DEMO DOWNLOAD

Um Printmedien im Internet in gewohnter Weise darzustellen, bietet CSS3 viele schöne Features. Es ermöglicht z.B. einen Text in Spalten darstellen zu lassen.  Auch kann man mit dem CSS Attribut text-justify, einen ähnlichen Effekt wie Blocksatz erzeugen. Dabei werden Abstände zwischen den Zeichen erhöht, um einen Flattersatz zu verhindern.

Ziel dieses Tutorials wird es sein ein Zeitungslayout für das Web zu erstellen. Erst einmal erstellen wir dafür eine Art Container <div id=”container” /> um die Zeitung nachher zentriert darstellen zu können. Für den Titel unser Tageszeitung reichen die wenigen Schriftarten, die uns zur Verfügung stehen nicht aus. Also bedienen wir uns der @font-face Syntax. Für den Titel wählen wir English Towne und binden den Font wie folgt ein.

@font-face
{
font-family:'English Towne';
src:local('English Towne'), url(fonts/EnglishTowne.ttf) format("truetype")
}

Für den Teaser verwenden wir die Schriftart Molengo, die man über Google Web Fonts einbinden kann. Die Schriftart können wir einfach als font “Molengo” auswählen.

@import url(http://fonts.googleapis.com/css?family=Molengo);
#teaser article{
font:10pt 'Molengo';
}

Kommen wir nun zum header der Zeitung. Er besteht aus dem Zeitungsnamen und einer weiteren Zeile.

header
{
	display:block;
	text-align:center;
}

#container > header
{
	border-bottom:rgba(4,99,128,1) 5px solid;
	margin-bottom:10px;
}

#container > header h1
{
	font:50pt 'English Towne';
	margin:0;
}

#container > header p
{
	font-size:12pt;
	margin:0;
	padding:0;
}

Da wir nur das erste Header Element in dem Container haben möchten, benutzten wir das Pseudotag “>” um nur das “Child Element” von #container zu adressieren. Den eigentlichen Inhalt fassen wir in eine eigene DIV Box, die das Attribut display:table bekommt ein. Die zwei Inhaltsspalten section und aside haben dementsprechend display:table-cell.

In dem Teaser ist ein Hinweis auf Seite 2. Um nicht jedes mal ein “►” vor einen Link zu bekommen, können wir uns dem :before Selector in CSS bedienen und das content Attribut verwenden.

#teaser a
{
color:rgba(0,0,0,1);
font-weight:bold;
text-decoration:none;
}

#teaser a:before
{
content:"►";
}

Kommen wir nun zum Spaltenlayout. Dafür Bietet CSS3 das column-gap Attribut, welches den Abstand zwischen den Spalten festlegt, die column-rule, die die Border angibt und column-width, welches die Breite der Spalten festlegt. Je nach dem viel viel Platz vorhanden ist, entstehen dann Spalten, in diesen Maßen.

section article p
{
-moz-column-gap:20px;
-moz-column-rule:rgba(102,102,102,1) 1px solid;
-moz-column-width:200px;
-webkit-column-gap:20px;
-webkit-column-rule:rgba(102,102,102,1) 1px solid;
-webkit-column-width:200px;
column-gap:20px;
column-rule:rgba(102,102,102,1) 1px solid;
column-width:200px;
}

Schenken wir jetzt noch dem Bild im Teaser besondere Aufmerksamkeit. Nehmen wir an, wir möchten diesem eine Bildunterschrift hinzufügen, möchten die aber nur anzeigen, wenn man über das Bild mit der Maus fährt.

<div class="image">
          	<img src="images/stuhl.jpg" alt="stuhl" />
            <span class="caption">Ein Stuhl - Foto: webventil.de</span>
          </div>

Dafür erstellen wir eine Div Box, die overflow:hidden und postition:relative als Attribut aufweist. Das letztere ermöglicht es uns die Bildunterschrift (caption) mit postition:absolute, und bottom:0px an die untere Kante des Bildes zu platzieren. Jetzt wählen wir als margin-bottom noch einen negativen Pixelwert, sowie eine transition auf diese Eigenschaft. In der hover Regel setzt man das margin-bottom auf 0px.

#teaser .image
{
border:rgba(0,0,0,0.5) 1px solid;
display:block;
overflow:hidden;
padding:5px;
position:relative;
}

#teaser .image:hover
{
box-shadow:rgba(0,0,0,0.5) 0 0 20px;
}

#teaser .image .caption
{
-moz-transition:margin-bottom;
-moz-transition-duration:.5s;
-moz-transition-timing-function:ease-in-out;
-webkit-transition:margin-bottom;
-webkit-transition-duration:.5s;
-webkit-transition-timing-function:ease-in-out;
background:rgba(0,0,0,0.5);
bottom:0;
color:rgba(255,255,255,1);
display:block;
font-size:12pt;
left:0;
margin-bottom:-100px;
padding:5px;
position:absolute;
transition:margin-bottom;
transition-duration:.5s;
transition-timing-function:ease-in-out;
width:100%;
}

#teaser .image:hover .caption
{
margin-bottom:0;
}

Damit ist unser Zeitungslayout fertig.

DEMO DOWNLOAD

Mit HTML5 ist es möglich Offline Applikationen zu schreiben. Ein Grund dafür ist der Local Storage. Dieser ermöglicht es Daten in dem Browser des Benutzers zu speichern. Im Prinzip war das schon immer durch HTTP Cookies möglich. Ein Nachteil von Cookies ist allerdings, dass sie bei jedem HTML Request mitgeschickt werden und pro Domain nicht mehr als 20 Cookies á 4KB existieren dürfen.

Die Größe von Local Storage hingegen ist nicht in ihrer Größe beschränkt. Die Daten werden von dem Browser des Benutzers verwaltet. Das bedeutet, dass die Daten auch nur in diesem Browser verfügbar sind.

Was bietet Local Storage also? Der Browser legt für die Seite eine Datenbank an, in der Datensätze gespeichert werden. Die Datensätze sind nicht wie bei einem Cookie oder Session Variablen auf ihre Größe beschränkt, sondern können beliebig groß sein. Öffnet man ein neues Fenster und ruft die Seite auf, wäre normalerweise die Session nicht mehr vorhanden. Dank Local Storage schon.

Local Storage hat im wesentlichen vier Methoden.

localStorage.setItem(id,value);
Mit diesem Methode kann man einer id einem Wert zuweisen.

localStorage.getItem(id);
Mit dieser Methode bekommt man  den Wert einer id zurück.

localStorage.removeItem(id);
Mit dieser Methode löscht man das Element mit der id.

localStorage.clear();
Alle Daten in der Local Storage werden gelöscht.

Man kann auch direkt auf die Elemente zugreifen über localStorage[id].

In diesem Tutorial verwende ich das jQuery Framework. Man kann das ganze aber auch ohne dieses Framework umsetzen. jQuery bietet aber die .blur() Funktion, die ein Event hervorruft, sobald ein Element getriggert wird.

Unser HTML body besteht im Wesentlichen aus der Liste, die allerdings das Attribut contenteditable mit dem Wert true aufweist. Dadurch kann man sie bearbeiten. Bei der Überschrift hab ich das gleich Attribut verwendet um die Liste auch für andere Zwecke verwenden zu können.

<ol id="liste" contenteditable="true">
      <li></li>
 </ol>

In dem JavaScript speichert man das HTML Object zunächst in eine Variable ab.

toDoListe = $('#liste');

Für jede dieser Variable (Liste / Überschrift) zwei verschiedene Aufrufe. Zunächst wird überprüft ob für diese id schon ein Wert abgespeichert wurde. Ist dies der Fall, rufen wir auf die HTML Objekt die jQuery .html() Funktion auf, wobei der Parameter unser localStorage Element ist.

if (localStorage.getItem('toDoListe')) {
toDoListe.html(localStorage.getItem('toDoListe'));
}

Wenn wir Änderungen in der Liste verfolgen möchten, können wir dafür die .blur() Funktion benutzten. Erfolgt eine Änderung speichern wir das Ergebnis im Local Storage.

toDoListe.blur(function() {
localStorage.setItem('toDoListe', $(this).html());
});

Da es zur Zeit Probleme mit Safari gibt, wenn zwei leere Listenelemente übereinander erzeugt werden, habe ich noch den folgenden Fix implementiert, der das vorherige Listenelement überprüft, ob es leer ist.

toDoListe.keypress(function(event) {
if(event.which==13){
if(toDoListe.find('li').last().html()=='<br>'){
event.preventDefault();
}
}
});

Zusätzlich ist noch ein Button implementiert, der die Funktion localStorage.clear(); aufruft um den Local Storage zu leeren.

Fertig ist unsere ToDo Liste! Erst nach dem aktualisieren der Seite kann man das Resultat begeistern.

DEMO DOWNLOAD

Im vorangegangen Tutorial habe ich schon ein paar Grundlagen in HTML5 vermittelt. Ich möchte in diesem Tutorial erst einmal nur auf die Semantik eingehen. Ziel ist es, einen Blog zu designen, der in etwa so aussehen wird:

In diesem Tutorial kümmern wir uns erstmal die Seitenstruktur. Das nächste Tutorial wird sich mit dem Gestalten der Seite mit Hilfe von CSS3 kümmern. In einem dritten Tutorial werden wir versuchen den Blog so anzupassen, dass er möglichst auch abwärtskompatibel ist.

Fangen wir also an. Die Seite ist untergliedert in einen Header, der auch die Seitennavigation beinhaltet, einem Inhaltsbereich, der in zwei Spalten geteilt ist und dem Footer, wo Copyright oder ähnliches später drinstehen soll.

Wie schon im vorangegangen Post erwähnt ist unser HTML head durch HTML5 sehr aufgeräumt. Das Attribute lang im html Tag weißt auf die verwendete Sprache im Dokument hin, das Attribut charset im meta Tag gibt das Encoding der Seite an.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Homepage</title>
<link rel="stylesheet" href="css/style.css">
</head>

Es folgt der HTML Body, den wir mit einem “Container”-DIV beginnen wollen. Dieser umschließt alle Elemente und ermöglicht es uns die Seite später zu zentrieren. Das erste Element in diesem Container ist unser Header. Hier möchten wir unser Logo platzieren und die Seitennavigation einfügen. Für den Header verwenden wir den neuen <header> Tag.

The header element represents the header of a section.

Quelle: W3C HTML5:header

Die Navigation schließen wir mit dem neuen <nav> Tag ein. Da die Listenelemente der Navigation floaten, fügen wir eine DIV-Box unter das Element. Dazu mehr im 2. Teil.

The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.

Quelle: W3C HTML5:nav

<body>

<div id="containter"><!--containter start-->
<header><!--header start-->
<div id="logo">
<img src="css/images/logo.png" alt="logo" />
<p>Eine kleine Testseite</p>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Unterseiten</a>
<ul>
<li>
<a href="#">Unterpunkt 1</a>
</li>
<li>
<a href="#">Unterpunkt 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="clear" />

Es folgt unser content Bereich, dieser wird geteilt in <section> und <aside>. In dem section Bereich kommen nachher unsere Artikel rein.

The section element represents a section of a document, typically with a title or heading.

Quelle: W3C HTML5:section

Wir fügen in die Section einzelne <article> Elemente, unsere Blogartikel.

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.

Quelle: W3C HTML5:article

In jeden <article> können wir jetzt Überschriften mit dem <header> Tag gruppieren. Außerdem möchte ich im Header noch das Datum der Veröffentlichung mit unterbringen. Für ein Datum bietet HTML5 das <time> Element. Dort kann in dem Attribut pubdate die Zeit stehen, wann der Artikel veröffentlich wurde.

The time element represents a date and/or time.

Quelle: W3C HTML5:time

Danach schreiben wir unseren eigentlichen Inhalt.

<div id="content"><!--content start-->
<section><!--feed start-->
<article>
<header>
<h2><a href="#">Artikelüberschrift</a></h2>
<p>Veröffentlicht am <time datetime="2011-02-15">15. Januar</time> von <b>Arne</b></p>
</header>
<p>...</p>
</article>
</section><!--feed end-->

Das aside Element benutzten wir für unsere Sidebar.

The aside element represents content that is tangentially related to the content that forms the main textual flow of a document.

Der dortige Inhalt sollte eigentlich Bezug zu dem Hauptinhalt auf der angezeigten Seite haben. Er sollte wie in einem Buch als Anmerkung benutzt werden. Daher eignet er sich eigentlich nicht als typische Blog Sidebar für Widgets. Das ignoriere ich hier allerdings.

<aside><!--sidebar start-->
<h2>Kategorien</h2>
<p>
<ul>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
</ul>
</p>
</aside><!--sidebar end-->
<div class="clear" />
</div><!--content end-->

Abgeschlossen wird unsere Seite mit einem <footer>.

The footer element represents the footer for the section it applies to.

Quelle: W3C HTML5:footer

Footer können wir auch einsetzten um z.B. bei einem Blog-Artikel auf Kommentare hinzuweisen.

Damit sieht der gesamte Seitenquelltext wie folgt aus:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Homepage</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div id="containter"><!--containter start-->
<header><!--header start-->
<div id="logo">
<img src="css/images/logo.png" alt="logo" />
<p>Eine kleine Testseite</p>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Unterseiten</a>
<ul>
<li>
<a href="#">Unterpunkt 1</a>
</li>
<li>
<a href="#">Unterpunkt 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="clear" />
<div id="content"><!--content start-->
<!--feed start-->
<h2><a href="#">Artikelüberschrift</a></h2>
Veröffentlicht am 15. Januar von <strong>Arne</strong>

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
<h2><a href="#">Artikelüberschrift</a></h2>
Veröffentlicht am 15. Januar von <strong>Arne</strong>

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
<!--feed end-->
<!--sidebar start-->
<h2>Kategorien</h2>
<ul>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
</ul>
<h2>Seiten</h2>
<ul>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
</ul>
<h2>Links</h2>
<a href="http://www.w3.org/html/logo/">
<img title="HTML5 Powered with CSS3 / Styling, and Semantics" src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" alt="HTML5 Powered with CSS3 / Styling, and Semantics" width="165" height="64" />
</a>

<!--sidebar end-->
<div class="clear"></div>
<!--content end-->

<!--footer start-->

Copyright © 2011 DeineSeite.de - Design von www.webventil.de

</div>
<!--container end-->

Im nächsten Tutorial stylen wir den Blog mit Hilfe von CSS3.

HTML5 zieht sich gerade wie eine kleine Revolution durch das Internet. Nach und nach rüsten viele große Webseiten nach und präsentieren ihre Inhalte in dem neuen Standart. Doch was bietet mir HTML5 eigentlich?

• Offline / Storage
• Web SQL Datenbank
• Application Cache
• Real Time Communication über Web Sockets
• File und Hardware Access
• Drag and Drop
• Geolocation
• Speech Input (Formular)
• Rich Media
• …

Darüber hinaus zeichnet sich HTML5 auch durch eine viel bessere und einfachere Semantik aus als sein Vorgänger XHTML 1.0

Nehmen wir uns als Beispiel folgendes Layout vor.

Es gibt einen Header-Bereich, einen großen Inhaltsbereich wo z.B. bei einer Nachrichtenseite/Blog der Feed dargestellt wird und die Sidebar, sowie einen Footer. Bildet man das ganze mit XHTML 1.0 ab, so kommt man auf den folgenden Quelltext.

Auffallend groß ist hierbei die Document Type Declaration. Eine HTML5 Seite beginnt mit folgendem Doctype:

<!DOCTYPE html>

Im head Element  befindet sich auch die meta Deklaration. Auch hier glänzt HTML5 wieder durch Einfachheit. Es reicht, wenn man folgendes schreibt:

<meta charset=”utf-8″ />

Wenden wir uns nun den weiteren Elementen zu. Das Element mit der id container ist in diesem Fall ein Wrapper um die ganzen Elemente, damit wir die Seite zentriert darstellen  können. Spannender sind die Elemente da drin. In unserem header Element möchten wir später mal unser Logo platzieren. Da das Motto von HTML5 scheinbar “Keep it simple” lautet, ist es nicht verwunderlich, dass der Bedarf nach einem eigenen Tag dafür erkannt wurde. Ab sofort braucht man seinen header nicht mehr als DIV Box schreiben, sondern verwendet einfach:

<header>

Es gibt eine Menge neuer Tags, um den Quellcode besser lesbar zu machen und um den Inhalten in den einzelnen Elementen eine Bedeutung zu geben. So kann man seinen Feed durch das section Element umrunden. Dieses ist gedacht für “a thematic grouping of content, typically with a heading“. Hat man einzelne Artikel darin, kann man dafür das article Element verwenden. Unsere Sidebar verpacken wir in das aside Element (nur wenn der Inhalt darin sich auf den Inhalt in section bezieht) und für den Footer gibt es jetzt den footer Tag, so dass unser HTML5 Quelltext für unsere Seite jetzt wie folgt aussieht:

Und schon haben wir unsere erste HTML5 Seite geschrieben.

In der folgenden kleinen Serie möchte ich ein HTML5 Theme erstellen und Features von CSS3 näher betrachten. Ich freue mich über Anregungen und Wünsche.

Wer sich schon immer mal richtig in Szene setzten wollte, dafür aber noch nicht das richtige Hintergrundmotiv hatte, dem wird die nachfolgende Sammlung an Tutorials helfen. Fotomanipulation macht einen immer größeren Anteil in Bildbearbeitung aus. Angefangen bei kleineren Schönheitskorrekturen, bis hin zum Entfernen von Personen oder der einer Neuinszinierung des Bildes.

1. How to Create an Imaginative, Magical Painted Scene

2. Design an Epic Fantasy Scene with Photoshop

3. How to Create a Fantasy “Mother Nature” Scene

4. How to Create a Photo Manipulation of a Flooded City Scene

5. Create dynamic distortion effects

6. How To Create a Post Apocalyptic Photo Manipulation

7. Creative Photoshop Animal King Photo Manipulation Tutorial

8. How to Create a Slice of Nature Photo Manipulation

9. How to Create a Dark Emotional Photo Manipulation

10. Photo Manipulate a Falling Angel

11. How to Mold Paint Splatter to a Face in Photoshop

12. How to Combine Digital Painting and Photo Manipulation to Create a Platform Environment

13. Create a Divine Angel Montage in Photoshop

14. Design an Awesome Space Dancer Scene with Nebula Texture in Photoshop

15. How to Make a Dark, Post-Apocalyptic City Illustration

Beim Surfen im web ist mir folgende Seite ins Auge gesprungen. Templay, eine Seite für Tutorials und kreative Downloads. Das mag nichts neues sein, aber die Qualität macht den Unterschied. Oft findet man nur Tutorials in englischer Sprache und bei den deutschen Tutorials, lässt die Qualität zu wünschen übrig. Hier nicht! Templay bietet nicht nur hochwertige Tutorials im Bereich Photoshop, auf der Seite kann man sich auch tolle Icons, Themes, Templates und vieles mehr runterladen.

Templay.de ist die Idee eines kleinen Teams, bestehend aus Grafikern, Webdesignern und Programmierern. Diese einem Blog ähnliche Plattform soll in erster Linie eine kreative Hilfe für Dich und Deine Projekte sein. Mit deutschsprachigen Tutorials, Grafiken und Web-Templates möchten wir Dich bei der Umsetzung Deiner Ideen unterstützen.

Ein Besuch lohnt sich! http://www.templay.de/

GIMP, was für GNU Image Manipulation Program steht, ist wahrscheinlich das beste Beispiel, wie ein Open Source Programm es mit seinem kommerziellen Bruder aufnehmen kann. Mit vielen Funktionen, Filtern und einer benutzerfreundlichen Oberfläche hat GIMP viele Freunde im Internet gefunden.

In diesem Artikel finden sie 10 Seiten, die Ihnen des erlernen von GIMP, vereinfachen können.

PA Blog

Meet the GIMP

Gimp Talk

Gimp Tutorials

Gimpology

Gimp – Tutorials

Gtuts

Gimp / Tutorials

Gimp Users

Gimpguru