Tutos

TwitterFacebook
Get flash to fully experience Pearltrees

Elastic Image Slideshow with Thumbnail Preview

Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/
So, this 404 page background tile is just an animated GIF. Very old skool tech but you can still have a lot of fun with them. Advertisement <a href="http://ad.doubleclick.net/jump/fut.gb.net/tutorials;kw=CSS;kw=Photoshop;tile=1;sz=300x250;ord=2013032706?" target="_blank"><img src="http://ad.doubleclick.net/ad/fut.gb.net/tutorials;kw=CSS;kw=Photoshop;tile=1;sz=300x250;pos=2;ord=2013032706?"

How to make a super simple animated background

http://www.netmagazine.com/tutorials/how-make-super-simple-animated-background

Responsive Image Gallery with Thumbnail Carousel

http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/ A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We'll also add the possibility to navigate with the keyboard. View demo Download source
Tutos HTML5

Tutos CSS

Behind The Scenes Of Nike Better World - Smashing Magazine

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World . It’s been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce. In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We’ll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we’ll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation. http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/