HTML / CSS

CSS3: box-shadow für schöne Schatten-Effekte

Posted on by marcus

Schöne neue CSS-Welt. Mit CSS3 wurde box-shadow eingeführt, mit dem man Elementen einen Schatteneffekt verpassen kann. Man hat dabei den praktischen Vorteil, dass sich der Schatten bei Größenänderung automatisch an die Box anpasst und sich bei Verwendung von abgerundeten Ecken mit border-radius ebenfalls abrundet. Supported wird box-shadow von Safari (ab 3.1), Firefox (ab 3.5), Chrome und Opera (ab 10.5). CSS-Chatten nehmen üblicherweise 3 Werte (horizontal offset, vertical offset, blur) und eine Farbe. Die Offset-Werte können positiv oder negativ sein, es ist auch möglich mehrere Schatten-Effekte zu verwenden, die Werte-Angabe werden dann einfach mehrfach nacheinender im CSS notiert. Es ist einiges möglich, es empfiehlt sich, etwas damit herumzuspielen, macht Spaß.

Hier findet Ihr die W3C-Spezifikation.

Und hier habe ich eine kleine Beispielseite zum Thema box-shadow für Euch.

HTML5 Formular Features Teil 1

Posted on by marcus

In diesem Beitrag möchte ich ein paar neue und praktische HTML5-Features für Formulare zeigen, die man bedenkenlos heute schon einsetzen kann. Die Browser, die diese neuen Funktionalitäten noch nicht unterstützen, ignorieren die Neuigkeiten einfach, während User, die Safari, Chrome oder auch Opera einsetzen, von den neuen Möglichkeiten profitieren. Für die eMail- und URL-Validierungen ist es allerdings sinnvoll und empfehlenswert, eine Fallback-Validierung vorsehen.

1. das Attribut autofocus
autofocus kann als Attribut für ein beliebiges Formularfeld verwendet werden und es tut genau das, was man erwartet: der Cursor wird automatisch onload in diesem Formularfeld gesetzt, man braucht kein extra Javascript mehr dazu wie bisher.

<input type="text" name="firstname" autofocus />

2. das Attribut placeholder
placeholder kann dazu benutzt werden, um ein Textfeld mit einem Default-Wert zu belegen. Sobald der User in das Formular-Feld klickt, verschwindet der Text wie gewohnt, funktioniert also nun auch ohne Javascript.

<input type="text" name="lastname" placeholder="Egger" />

3. type url
Ein Input-Feld kann nun  auch vom Typ „url“ sein. Automatisch wird das Feld auf eine gültige Web-Adresse hin validiert. Opera zeigt zusätzlich ein URL-Icon innerhalb des Formularfeldes an. Wenn man mit dem iPhone-Safari auf so ein Formular kommt und ins Feld klickt, zeigt die Tastatur automatisch die dafür meinst gebrauchten „.com“, „.“ und „/“ Buttons.

<input type="url" name="url" />

4. type email
Ein Input-Feld kann nun  auch vom Typ „email“ sein. Automatisch wird das Feld auf eine gültige eMail-Adresse hin validiert. Opera zeigt zusätzlich ein eMail-Icon innerhalb des Formularfeldes an. Wenn man mit dem iPhone-Safari auf so ein Formular kommt und ins Feld klickt, zeigt die Tastatur automatisch die dafür meinst gebrauchten „@“ und „.“ Buttons.

<input type="email" name="email" />

Browser-Validierung ohne zusätzliches Javascript

Browser-Validierung ohne zusätzliches Javascript

reflektierender Spiegel-Effekt mit CSS

Posted on by marcus
Bild mit webkit-box-reflect Effekt

Bild mit webkit-box-reflect Effekt

Heute bin ich über eine coole webkit-Sache gestolpert: man kann mit CSS Bildern einen äußerst ansprechenden reflektierenden Spiegel-Effekt verpassen, das kennt man aus den ansprechenden Produktabbildungen. Der Effekt funktioniert zwar nur in Webkit-Browsern (Safari/Chrome), ist aber natürlich nicht weiter schlimm, die anderen Browser ignorieren diese Eigenschaft halt dann einfach.
Spielt also einfach mal damit rum, man kann echt schöne Effekte erzielen. Nachstehend findet Ihr noch ein kurzes Beispiel, wie es grundlegend läuft, außerdem findet Ihr hier ein Beispiel zum Anschauen.

Wenn’s Euch ebenso gut gefällt wie mir, dann könnt Ihr Euch hier weiter einlesen.

<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
#container {
width: 600px;
margin: auto;
font: 16px/1.4em helvetica, arial, sans-serif;
}
img {
float: left;
margin: 0 20px 0 0;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(white));
-webkit-border-radius: 0px;
border-radius: 3px;
border: 3px solid #666;
}
</style>
</head>
<body>
<div id="container">
<h1>Spiegel-Effekt</h1>
<img class="post-image" src="hope.jpg" alt="hope" />
</div>
</body>
</html>

mehr Schriftarten im Web mit Google Font API

Posted on by marcus

Frischer Wind im Web deutet sich derzeit an vielen Stellen an. Google bietet nun mit der Font API eine schnelle und simple Möglichkeit, OpenSource-Schriftarten in Webseiten zu integrieren.

So sieht das komplette HTML-Beispiel aus:
http://www.marcusegger.de/examples/webfont/index.html.

Im Prinzip ruft man das Stylesheet folgendermaßen auf:

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

Die gewünschte Schriftart kanndann ganz normal im CSS verwendet werden:

.cantarellParagraph {
font-family: 'Cantarell', arial, serif;
font-size: 48px;
}

Es besteht auch die Möglichkeit, mehrere Schriftarten auf einmal anzufordern, die Trennung der Font erfolgt dann mit dem Pipe-Symbol:

<link href='http://fonts.googleapis.com/css?family=Cantarell|Lobster' rel='stylesheet' type='text/css'>

Weiter Informationen und Möglichkeiten bitte unter http://code.google.com/intl/de-DE/apis/webfonts/docs/getting_started.html#Quick_Start einsehen, es ist auch möglich, verschiedene Schnitte einer Schrift zu verwenden. Mit dem sogenannten WebFont Loader eine Javascript-Variante zur Verfügung.

Hier das vollständige HTML des Beispiels:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Font API Test</title>
<link href='http://fonts.googleapis.com/css?family=Cantarell|Lobster' rel='stylesheet' type='text/css'>
<style type="text/css">
.cantarellParagraph {
font-family: 'Cantarell', arial, serif;
font-size: 48px;
}
.lobsterParagraph {
font-family: 'Lobster', arial, serif;
font-size: 26px;
}
</style>
</head>
<body>
<p class="cantarellParagraph">Making the Web Beautiful!</p>
<p class="lobsterParagraph">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben</p>
</body>
</html>

mehrspaltiges Web-Layout mit CSS 3 Columns in Mozilla und Webkit

Posted on by marcus

CSS3-Columns gibt es schon ewig, sie finden allerdings wenig Beachtung bis jetzt. Sie werden bis dato nur in Mozilla- und Webkit-basierten Browsern unterstützt, was natürlich zur Zeit bedeutet, dass Opera und der Internet Explorer da (noch) nicht mitmachen.  Aber bei gewissen Einsatz-Zwecken kann man das durchaus machen, finde ich, denn das Layout geht bei Nicht-Unterstützung nicht kaputt, sondern IE und Opera zeigen halt einfach einen längeren Absatz an, eben ohne Spalten – kein Drama, wie ich finde.

Das komplette Beispiel gibt es hier, so sieht das Ergebnis aus.

Der Code sieht folgendermaßen aus, kann man so als Basis nehmen und damit rumspielen, wenn Ihr mehr Spalten haben möchtet, dann einfach die column-count-Werte anpassen und so weiter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multi column test</title>
<style type="text/css">
#container {
width: 427px;
background-color: #CCC;
font:11px;
margin:auto;
padding:10px;
}
img {
width:100%;
}
#container p {
/*webkit*/
-webkit-column-count: 2;
-webkit-column-gap: 10px;
/* mozilla*/
-webkit-column-rule: 1px dashed black;
-moz-column-count: 2;
-moz-column-gap: 10px;
}
</style>
</head>
<body>
<div id="container">
<img src="paris.jpg" width="427" height="300" alt="Paris" longdesc="das ist das Filmplakat von Paris je t'aime" />
<h2>Paris je t'aime is a nice movie</h2>
<p>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
</p>
</div>
</body>
</html>

Form-Submit per Enter-Taste erzwingen

Posted on by marcus

Im Zusammenhang mit Userinteraktion via Formular gibt es ab und an die Anforderung, dass man unbedingt eine vom User gedrückte Enter-Taste in Textfeldern oder Textareas erkennen muss. Mit der Möglichkeit, dieses bestimmte Keyboard-Event zu erkennen, kann man dann das Formular direkt und in allen Fällen senden, wenn die Enter-Taste gedrückt wurde, ohne das man den üblichen standardmäßigen Limitierungen unterworfen wäre.

Das nachfolgende Script zeigt wie das funktioniert:

<script language="javascript" type="text/javascript">
<!--
function checkEnter(e){
var characterCode;
var e;
if(e && e.which){
e = e;
characterCode = e.which;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode == 13){ //if generated character code equal to ascii 13 (enter key)
filterByGameTitle();
return false;
}
else{
return true;
}
}
//-->
</script>

Auaführliche Beschreibung ist unter http://jscript.psend.com/162/examples/stringEnterKeyDetector.php zu finden, nur drauf achten, dass da noch kleine Fehler im Script sind.

Javascript debuggen mit console.log und Firebug

Posted on by marcus

Firebug ist ja bekannterweise eine äußerst hilfreiche Extension für den beliebten Browser Mozilla Firefox.
Wenn in Javascript-Werte zu debuggen sind, dann ist die Konsolen-Ansicht in Firebug sehr hilfreich, wie ich festgestellt habe. Anstelle des oft verwendeten Vorgehens, einen alert() einzubauen, kann man hier viel schöner mit console.log arbeiten.

Hier eine kurze Demo anhand des nachstehenden HTML-Codes:

<html>
<head>
<title>testpage</title>
</head>
<body>
<p>dies ist die Testseite</p>
<script language="javascript" type="text/javascript">
var i = 'ich bin der zu debuggende String';
console.log('i value is %d', i);
</script>
</body>
</html>

Mittels dieser Technik kann man gut Variablen-Werte unter Live-Bedingungen debuggen, ohne störende Alert-Fenster einzublenden. Im Firebug ist der jeweilige Wert dann direkt zu sehen:

console.log in Firebug

console.log in Firebug

Links:
Mozilla Firefox
Firebug Extension

Icons im Web ohne Grafiken mittels @font-face

Posted on by marcus

Mit CSS3 ergeben sich viele neue Möglichkeiten: wie wäre es zum Beispiel, anstatt Grafiken auf einer Website nur noch Schrift zu verwenden? Ich finde die Idee cool. Und prinzipiell geht das so: zuerst wird @font-face im CSS verwendet, mit der nachfolgenden Deklaration werden alle Browser bedient, die Schriftart muss in mehreren Formaten vorliegen:

@font-face {
font-family: 'IconFont';
src: url('iconfont.eot');
src: local('IconFont'),
url('iconfont.woff') format('woff'),
url('iconfont.otf') format('opentype'),
url('iconfont.svg#IconFont') format('svg'); }

Nun wird wir die festgelegte Schriftart für eine Klasse definiert:

<style type="text/css">
.staricon { font-family: 'IconPack'; }
</style>

Um nun ein bestimmtes Icon aus dem Schriftsatz zu referenzieren,  wird die grade definierte Klasse normal auf ein Element angewendet:

<div class="staricon">a</div>

tolle Icons für alle Einsatz-Zwecke

Posted on by marcus

Icons braucht man immer, deswegen kann man nie genug gute Bookmarks haben: unter der Adresse http://findicons.com/ findet sich eine Icon-Sammlung, die es in sich hat. Egal ob ganze Icon-Packs oder einzelne Symbole, hier seid Ihr echt gut bedient.

Die Suchemaske mit Suggest-Funktione ist schnell und funktioniert präzise – das Suchergebnis kann auch nochmals nach Keywords eingegrenzt werden, außerdem kann man Farbfilter verwenden oder die gewünschte Lizenz-Art auswählen.

Icons auf www.findicons.com

Darüberhinaus stehen weitere Filter wie Icons-Größe etc. zur Verfügung.

http://findicons.com/

Deutsch-Englisch-Wörterbuch unter OS X direkt mit Spotlight benutzen

Posted on by marcus

Die zu OS X gehörige Lexikon.app kann coolerweise durch Plugins erweitert werden. Ihr könnt beispielsweise ein Deutsch-Englisch-Wörterbuch einklinken, dann könnt Ihr mit der Spotlight-Suche pfeilschnell übersetzen – und das auch offline! Nachfolgend beschreibe ich kurz die durchzuführenden Schritte:

Zuerst ladet Euch unter http://lipflip.org/articles/dictcc-dictionary-plugin das kostenlose dict.cc-Plugin herunter (Zip-File). Dieses entpackt Ihr und installiert es durch Doppleklick wie gewohnt.

Lexikon.app Einstellungen

Lexikon.app Einstellungen

2. Nun öffnet Ihr die Lexikon.app und dort die Einstellungen. Hier zieht Ihr dann das dict.cc-Plugin einfach per Drag&Drop an die erste Stelle.
Das Ändern der Reihenfolge ist wichtig, damit die Ergebnisse direkt von der Spotlight-Suche angezeigt werden. So, das war’s im Prinzip schon, nun könnt Ihr mit CMD+Space-Taste die Spotlight-Suche aufrufen, dort das zu übersetzende Wort eingeben und seht direkt die Übersetzung; das funktioniert auch offline und ist äußerst komfortabel.

Kostenlos gibt es auch noch das BeoLingus-Plugin (http://www.tekl.de/deutsch/BeoLingus_Deutsch-Englisch.html), das das Wörterbuch-Projekt der TU Chemnitz beinhaltet. Es ist die perfekte Ergänzung zum dict.cc-Plugin.