Texteffekte mit CSS3

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

Flash in HTML5 konvertieren

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)

Multiple Backgrounds mit CSS3

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

Zeitungslayout mit HTML5 und CSS3

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.

HTML5 Zeitung

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.

Zeitungs Header

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.

Layout

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.

Bild

#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

Wie erstellt man eine ToDo Liste in HTML5 mit Local Storage

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()=='&amp;lt;br&amp;gt;'){
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

Wie gestalte ich eine Webseite mit HTML 5 – Teil 1

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. Continue reading

Erste Schritte mit HTML5 und 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? Continue reading

15 tolle Tutorials zur Fotomanipulation in Photoshop

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

1ImaginativeMagicalPainted Continue reading

Templay – Kreative Downloads

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.

templay

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

10 brauchbare GIMP Tutorial Seiten

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

pa_blog Continue reading