Parallax Scrolling und Storytelling.

Stand-alone parallax scrolling library Skrollr

DEMO 1: Grußkarte

DEMO 2: SNOW FALL

DEMO 3: Interaktives Datenbankmodellierungsverfahren

GoogleDocs Linkliste

Tags: Storytelling, Animation, CSS, JavaScript,

Kategorie: webdesign

Demo:

http://danburzo.ro/demos/svg-animate/
http://lazylinepainter.info/
http://codepen.io/netsi1964/pen/iyglK
http://jakearchibald.com/2013/animated-line-drawing-svg/

SVG Animation als Storytelling Version

Tags: SVG, path,animation,

Kategorie: webdesign

Ohne Programmierfähigkeiten einfach und schnell animierte und responsive HTML5 Banner erstellen? Das geht mit dem online Animation Tool - HTML5 Maker.

Mit dem Online-Editor ist es in der BASIC FREE Edition möglich in kürzester Zeit effektvolle Animationen zu erstellen. Diese können danach als HTML-5-Banner-Animation heruntergeladen werden.

Als registrierte Nutzer (FIRST PLAN - $ 9,99/month) stehen weitere Features zur Verfügung z.B.: SWF-Export, Animation Hosting, SSL-Verschlüsselung und Google-Ads-Kompatibilität.

http://html5maker.com

Kategorie: webdesign

 body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

Via css-tricks.com

Tags: top-shadow, css,

Kategorie: webdesign

Multiple Borders können mittels CSS und pseudo-elementen dargestellt werden.

Dem 1. Element wird ein einzelner border zugewiesen.
Der 2. border wird als pseudo-element hinzugefügt.
Der 3. wird mittels einem outline-element dargestellt.
Der 4. wird mittels box-shadow realisiert.

Diesen Tip gibt es von:
http://css-tricks.com/snippets/css/multiple-borders/
Demo:
http://jsfiddle.net/chriscoyier/Vm9aM/



Der 2. Tip ist von:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

Hier wird mittels den pseudo-elementen :before bzw. :after der border angefügt.

	
	Multi-Borders
	
		body { background: #d2d1d0; }
		
		#box {
			background: #f4f4f4;
			border: 1px solid #bbbbbb;
			width: 200px;
			height: 200px;
			margin: 60px auto;
			position: relative;
		}
		
		#box:before {
			border: 1px solid white;
			content: '';
			width: 198px;
			height: 198px;
			position: absolute;
		}
		
		#box:after {
			content: '';
			position: absolute;
			width: 196px;
			height: 196px;
			border: 1px solid #bbbbbb;
			left: 1px; top: 1px;
		}
	



	

Tags: HTML, border, multiple, CSS,

Kategorie: webdesign

Noupe.com hat eine kleine Linksammlung zu HTML 5 und CSS 3 Tools im Angebot.

Unter anderem den CSS3 Button Maker, CSS3 Maker, CSS3 Please, Modernizr, CSS3 Transforms, CSS3 Pie, CSS3 Menu, CSS3 Pattern Gallery, CSS3 Watch, CSS3 Power Tools Tut, HTML5 Tools, Initializr, Switch to HTML5, HTML5 Demos, Canvas Demos, HTML5 Rocks, HTML5 Boilerplate, HTML5 Doctor, Sproutcore, Dive into HTML5, HTML5 Cheat Sheet und Coding A HTML 5 Layout From Scratch.

Link: Noupe.com

Via kolos.blogger.de

Tags: HTML5, CSS3, TOOL

Kategorie: webdesign

Mit Lorempixum kann man Placeholder Bilder erstellen.
Über den Placeholdergenerator erstellt man Bilder in der eingegebene Größe und kann diese dann in sein Webtemplate einfügen.

Über die URL http://lorempixum.com/*breite*/*größe*/
kann man auf die Bilder in der angegebenen Größe und Breite gleich zugreifen.

http://lorempixum.com/

Tags: Platzhalter, Placeholder, Images, Placeholder Image generator,

Kategorie: webdesign

Browser-Specific CSS Hacks, Cross Browser Vertically and Horizontally Centered Images in CSS without Tables, Cross-Browser Transparency via CSS, CSS Box Shadow, Outer shadow, Inner shadow, Cross-Browser Min Height, 3 Ways to Preload Images with CSS, JavaScript, or Ajax, CSS Fixed Footer, Clearfix CSS Hack, 8 Definitive Web Font Stacks, iPad Orientation CSS (Revised), Wrapping Text Inside Pre Tags, Hardboiled CSS3 Media Queries, Eric Meyer’s Reset Reloaded, Multiple borders ....... und viele mehr. LINK

VIA powerbook.blogger.de

Tags: Webdesign Links, CSS 3, iPad

Kategorie: webdesign

Bei Uistencils.com habt Ihr die Möglichkeit Browser Sketch Pads und Website Stencil Kits zu erwerben.

Die Webseiten Skizzenblöcke gibt es unter anderem als Browser, iPad, oder iPhone Millimeterpapierblock und Haftnotizblöcke.

Mit dem iPhone, iPad, Android Stempel Kit wird die Möglichkeit gegeben, seine Ideen Perfekt in Skizzen umzusetzen.

Weitere Angebote sind die iPad Magnetschreibtafel, der Zebra Pencil Refill Pack und Design Commission Wear und Sticker.

Tags: Stencil, Pad, iPhone, iPad, Android, Browser, Design

Kategorie: webdesign

HTML5 Boilerplate ist die HTML/CSS/JS-Vorlage für knallharte Profis: die Basis für eine schnelle, robuste und zukunftssichere Seite.

Boilerplate ist weder ein Framework, noch schreibt es dir eine Entwicklungsphilosophie vor. Es ist eine Sammlung von Tips und Tricks, die Dir helfen, dein Projekt schnellstmöglich und flexibel auf die Beine zu stellen.

LINK

Tags: HTML5, Cross-Browser, Optimierungen für mobile Browser, Druck-Stylesheet, iOS, Android und Opera, PNG-Fix für IE6, barrierefreier Code

Kategorie: webdesign