Here some really simple tricks:

<map title=”My favorite links”>
The <map> tag is not only for imagemaps, you should use it to group link-lists. In the title-attribute you have to write a description for the elements within the map. Screen readers can now readout the description, so blind people can decide if they want hear the list.

WCAG Techniques – Link Blocks

<abbr title=”What the fuck”>WTF</abbr>
With the <abbr> tag you can markup abbreviations for screen readers, maybe search engines can use this additional data too.

WCAG Techniques – Abbreviations

<hr />
Use the oldschool horizontal ruler for your document structure, you can style it with css or hide it from non-blind users. Screen readers use it to tell users if there is a new content block.

Skip Links
With a “Skip to content”-Link, blind users can fast jump to the main content section. If you don’t provide such links screen readers must read always the main/sub-menu of your pages. You can hide the skip-links with css.

accesskey=”9″
Provide access key attribute, so blind users can faster navigate through your pages. You should add an access key to every main-menu point.

Mit Transformationen kann man Elemente drehen, verschieben und skalieren. Transformationen funktionieren in Chrome (Beta), Safari und Firefox 3.6.

1
2
3
4

#test1 {
	-webkit-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
	-moz-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
}

Transitions

Mit CSS-Transitions lassen sich flüssig animierte Übergänge zwischen zwei CSS-Angaben machen. Brauchbar für einfache Animationen, Farbübergänge (Hover-Effekte) usw. Transitions funktionieren derzeit nur mit Webkit, die nächste Version von Firefox wird auch Transitions unterstützen.

1
2
3
4
5
6
7

#test7 {
	background:#eee;
	-webkit-transition: background 2s;
}
#test7:hover {
	background: lime;
}

Animationen

Für komplexere Abläufe können in Zukunft auch Keyframe-Animationen definiert werden. Jede Animation bekommt einen eindeutigen Namen der via animation-Eigenschaft getriggert werden kann.

1
2
3
4
5
6
7
8
9
10
11

#test5:hover {
	-webkit-animation: 'wobble' 5s;
	-webkit-animation-iteration-count: infinite;
}		
@-webkit-keyframes 'wobble' {
	0% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
	25% { -webkit-transform: translate(0, 0) rotate(-10deg) scale(1.3); }
	50% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
	75% { -webkit-transform: translate(0, 0) rotate(-10deg) scale(0.7); }	
	100% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
}

Alle Beispiele ansehen, am Besten mit Chrome (Beta) oder Safari.

mehr Infos und Tutorials

Selection Background Color via CSS ändern

Und gleich noch einer … den werd ich demnext sorgar noch wo verwenden müssen, man kann ja nicht erwarten das die User die Browserfunktionen nützen können ???

Textgröße mittels Javascript ändern

Gleich mal merken für die Zukunft …

Mehrere Hintergrundbilder mittels CSS3

Kurzbeschreibung: “IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSSPNG work correctly under IE5 and IE6. issues and makes transparent “.

Funktions-Übersicht und Demos

base2 ist eine Library die Javascript um einige Funktionen erweitert und versucht die Konsistenz zwischen den einzelnen Browser Implementierungen zu verbessern. In der base2 Einführung wird alles genau erklärt.

Kurzbeschreibung: “base2 is a lightweight library that irons out all the annoying differences in JavaScript implementations. It provides the additional functionality from JavaScript 1.6+ that only Mozilla browsers implement. It also adds some features from ES4. The library is only 6KB (gzipped).“

“My all time favorite is The X-Files, which I have been watching literally half my life! Other honorable mentions are Battlestar Galactica and House MD“. – yeah … I want to believe Mulder.

“I also enjoy reading books, but I like webcomics even better! My favorite comics are XKCD and The Perry Bible Fellowship.” – BestOf: 01, 02, 03, 04, 05, 06, 07

“Comfortable with hand-coding (X)HTML and CSS from scratch” – Gibt’s da eine geile deutsche Übersetzung? “sich wohlfühlen bei”, “Von Grund auf”, “ganz von vorne”, “hand-crafted”, “handgefertigt”, “von Hand gefertigt”

“fast learner” – ist das “scharfe Auffassungsgabe”, “guter Schüler”, “helles Köpfchen”, “Schnellchecker”
mootools – MouseWheel Event (Custom), Tips, Chain, Group

(via rbthmr)

ToDo: mootools testen, ab und zu ein Comic anschaun

See it in action
Source Code incl. PHP

http://www.mariusroosendaal.com

ps.: Sehr geil ist auch der Style-Switcher mit dem man zwischen Tag/Nacht-Theme umschalten kann.

1. Man hat keine Zeichenfunktionen, ich will kein svg, canvas oder dergleichen verwenden (das wär ja leicht).
2. Damit kann man nur rechteckige Bilder verwenden … das macht die Sache nicht einfacher, vorallem im Bezug: Wie erkenn ich auf welchem der Bilder die Maus gerade steht (überlappen sich ja).

Aber mit ein bissl Fantasie hats dann doch hingehauen. Dann noch mittels jquery ein wenig Drag hier und ein bisschen Drop dort, und schon wars fertig.

http://bohuco.net/webiso/