description under construction
  1. Introduction
  2. Examples
  3. Help
    • Basic usage
    • Add your image to the Tiles Exhibition
    • Browser Support
  4. Updates
  5. To-do-List
  6. Related Links
    • About CSS Filters
    • Development

1. Introduction

With this Online-Tool you can style:

  • Images from your computer
  • Images from the Web
  • iFrames like YouTube Videos, Streetview etc.
  • Websites

and generate the css-code for the applied Filters.

Now (since 2016-Jan-8), you can also send your StreetviewArt to the Tiles Exhibition.

Filter wizard example image

Open <filter> wizard

2. Examples

Filter Wizard Example Editing Youtube Video

Fig. 1: Edit colors of a Youtube Videofilter-wizard-screen-13.jpg
Filter Wizard Example Editing Website

Fig. 2: Edit colors of a Website filter-wizard-screen-12.jpg
Filter Wizard Example Editing Streetview

Fig. 3: Edit colors of Streetviewfilter-wizard-screen-14.jpg
Filter Wizard Example Editing Webimage

Fig. 4: Edit colors of a Webimage filter-wizard-screen-15.jpg

3. Help

3.1 Basic usage

Wrap an image or <iframe> in a <div> or <figure> with the filter styles. You can also use an <iframe> with YouTube Video, Streetview etc. etc.

<style>
.myfilter {
	-webkit-filter: saturate(0.9) contrast(1.2); 
	filter: saturate(0.9) contrast(1.2);
}
</style>

<div class="myfilter">
	<img src="..." />
</div>

<div class="myfilter">
	<iframe src="..."></iframe>
</div>

3.2 Add your image to the Tiles Exhibition

1

Filter Wizard Add image to Tiles Exhibition
Click on Streetview (1)

2

Filter Wizard Add image to Tiles Exhibition
Click on the Walking Icon (2)

3

Filter Wizard Add image to Tiles Exhibition
Drag the Pegman Icon to a place on the map (3)

4

Filter Wizard Add image to Tiles Exhibition
Apply the filters to your image and then click „Add to Exhibition“ (4)

5

Filter Wizard Add image to Tiles Exhibition
Insert your Name (required) and optional a description (4) for your artwork and click on „Send“ (5)

6

Filter Wizard Add image to Tiles Exhibition
After sending your artwork, click on „Show“ to open the Tiles Exhibition in a new Window (7)

7

Filter Wizard Add image to Tiles Exhibition
That’s it!

Observations

  • Anonymous Artworks (can) be removed from the exhibition
  • If you don’t want to send your Artwork but saving the result, copy the HTML-Code. See step 5 / (6)

3.8 Browser Support

This tool uses CSS Filters, supported in the following browsers: Testing!

Not work in Internet Explorer 11

5. Updates

Version: 0.9.3 08.01.2016

  • Add your image to the „Tiles Exhibition“. Fig. 6 / (1).
  • Print your Artwork in the „Tiles Exhibition“.
    Filter Wizard Add Image to Tiles Exhibition

    Fig. 6filter-wizard-screen-09.jpg
  • Enhanced Mobile Version.
    Filter Wizard Mobile Version

    Fig. 7filter-wizard-screen-10.jpg

Version: 0.9.2.2 03.01.2016

  • Enhanced Streetview handling. Fig. 5 / (1).
    Filter Wizard Streetview Demo

    Fig. 5filter-wizard-screen-07.jpg

Version: 0.9.2.1 31.12.2015

  • Fixed color of working area
  • Added function „Switch background-color“ for better result avaliation. Fig. 4: You can switch the background-color of the working area (1). Click on the switch-icon (2).
    filter wizard switch working area background

    Fig. 4filter-wizard-screen-04.jpg
  • Technicolor Support
  • Print (Stylesheet). Works in Firefox. In Google Chrome not avaliable

6. Interfacedesign

Fig. 3: Not the best place for this menu (1) !

filter wizard ui

Fig. 3ui_01_menu.jpg

7. To-do List

  • Solving Bug: Copy to Clipboard in Safari
  • Solving various interface issues (Pri 1)
  • Add function: Save your, one style via cookie
  • and even more…

8. Related Links

8.1 About CSS Filters

8.2 Development

 

Posted:
Labels: , ,