Guymon » image effects

Image Effects with CSS

admin — Thu, 02 Feb 2012 08:56:22 +0000

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.

Possibly related posts (automatically generated)

Bildeffekte mit Canvas

admin — Fri, 23 Dec 2011 12:59:50 +0000

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.

Possibly related posts (automatically generated)

jQuery: Image Zoom Tour

admin — Wed, 24 Aug 2011 07:33:39 +0000

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.

Possibly related posts (automatically generated)

Photo Stack with jQuery

admin — Thu, 21 Jul 2011 12:04:36 +0000

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

Possibly related posts (automatically generated)

Photo Stack Effect with CSS or MooTools

admin — Wed, 20 Jul 2011 09:50:45 +0000

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.

Possibly related posts (automatically generated)

Shutter Effect for Photos

admin — Wed, 09 Mar 2011 08:51:15 +0000

Einen sehr schicken Foto Effekt demonstriert Martin Angelov .

In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Sehr cooler Effekt.

Possibly related posts (automatically generated)

daily links

admin — Wed, 02 Feb 2011 19:01:03 +0000

HTML5 Grayscale Image Hover
Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale
Taxonomy Additions | drupal.org
_Adds a delete link in the vocabulary terms list
_Adds an option to not allow duplicate terms in a vocabulary
_Views integration - provides a Views argument handler which adds the capabality of showing the results of related terms’ nodes (e.g. If you have a view list for the term "Drupal", and that term is related to "Drupal core", nodes that are tagged with "Drupal core" will also show up in that view)
Fancy Insert | drupal.org
This module allows users to easily insert images into node posts. When nodes contains a lot of images is very difficult to insert them into the node body.
Fancy insert convert the imagefield widgets in a floating box and by clicking in one image the tag is automatically inserted.
Data Migration - part 2 | Gizra

Possibly related posts (automatically generated)

Rotating Image Slideshow

admin — Wed, 01 Dec 2010 08:55:38 +0000

Martin Angelov verwendet das jQuery Rotate Plugin für eine nette Rotating Image Slideshow.

Habe ich so noch nicht gesehen und sieht wirklich nett aus.

Possibly related posts (automatically generated)

box-shadow: insert bei Bildern

admin — Wed, 24 Nov 2010 15:55:06 +0000

box-shadow: inset ist bei Bildern etwas tricky:

Browsers allow box-shadow on elements, so why not just use an inset box-shadow on it.
Turns out, you can use inset box-shadows on images, it’s just the browser sets it behind the image, which mean if you use a fully opaque image (very likely if you are interested in vignetting it), you won’t see the shadow at all.

Possibly related posts (automatically generated)

jQuery: Orbit Image Slider

admin — Mon, 13 Sep 2010 13:44:36 +0000

Schicker jQuery Slider, der mit 2.8kb recht leichtgewichtig ist.

Most jQuery image sliders hover at around 8 kbs for minified versions, and around 15kbs or more for uncompressed development files, but what if there was a way to keep the simple fades, slides, and a couple other nifty bits, but strip the bloated and corny diagonal-cross fades or spiral dissolves. But wait! Oh snap, there is a way, and it’s called Orbit.

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.