Stoppt die Vorratsdatenspeicherung! Jetzt klicken &handeln! Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:

Archived entries for image effects

Image Effects with CSS

Nick La stellt einige schöne Bildeffekt vor – embossed, soft embossed, cutout und glossy.

Various styles such as embossed, cutout / pressed, and glossy effect can be achieved using multiple inset box-shadows. You can also use the :before element to another layer of effect such as glossy gradient. See the demo source code for CSS details. Resize your browser window to see the resizable images.

Bildeffekte mit Canvas

Zwei interessante Canvas Bibliotheken sind mir heute über den Weg gelaufen. Da ist zum einen PaintbrushJS

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create a temporary canvas element and manipulate the image there, before finally saving it back out to the original element.

und zum anderen CamanJS

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

jQuery: Image Zoom Tour

Sehr cooler Effekt für den ich sicherlich mal Verwendung finden werde.

Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.

Photo Stack with jQuery

Nach der MooTools Variante hier die jQuery Version.

If you are using Google Plus then you must have noticed the photo stack effect when you view your own album or someone else album. In this tutorial, I will explain how you can achieve this effect powered by Jquery and CSS3

Photo Stack Effect with CSS or MooTools

David Walsh baut den Foto Stack Effekt von Google Plus mit MooTools und CSS nach.

Duplicating Google’s photo stack effect was much easier than I had expected it to be thanks to MooTools’ flexible, easy to use Fx class. If you aren’t worried about animating back to original position, you can stick to the simple CSS solution. You can’t lose with either effect; they’re both very smooth and add a subtle touch of class to an otherwise dull photo display.



Copyright © 2004–2009. All rights reserved. – Impressum

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.