Enhancing a picture, sans Photoshop

Web browsers often have special features that only they support.  While all browser such as Internet Explore, Firefox, and Safari have to work with web standards, each can offer special extensions usable by webpage designers that work when the webpage is viewed with a specific web browser.

Apple's Safari is one of several browsers that use the open source software WebKit to process and display web page content.  A WebKit enabled browser can allow a website to have content that utilizes advanced features that have not yet made it into all web browsers as a standard, to make the web page more visually interesting.

There are many advanced features in WebKit.  Some of more visually interesting abilities are to enhance images in a web page without having to manipulate the image in photoshop.  For example, you can add a reflection or a mask.  Apple details many possibilities with Safari 4 and images on its website.  If you are not viewing this web page with Safari 4, I have added what the examples of what the image would look if you were, created in Photoshop.

Let's take a photo of mine showing the Guggenheim museum in New York City.

We can add a reflection to it...

(Safari 4)

img src="Guggenheim.jpg" style="-webkit-box-reflect: below 3px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.5, transparent), to(white)) 0 0 0 0 stretch stretch;" (For other browsers, resulting image after modification in Photoshop)

Or we can make a fuzzy border...

(Safari 4)

img src="Guggenheim.jpg" style="-webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));" (For other browsers, resulting image after modification in Photoshop)