cssvault - inspiring creativity

Shadowbox is a lightbox-style multimedia viewer inspired by LightWindow. This includes images, Flash videos, Quicktime, Windows Media Player, and even webpages.

From the website:

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page.

Aside from support for Firefox 1.5+, Safari 2+ and IE 6+, it comes with adapters for most widely adapted JavaScript frameworks, allowing for easy integration and optimized code execution.

• Yahoo! User Interface Library
• Ext (standalone)
• Prototype + Scriptaculous
• jQuery
• MooTools (requires Fx.Styles and its dependancies)
• Dojo Toolkit (thanks Peter Higgins)

Lightview is an AJAX image viewer similar to the ever so famous Lightbox JS. It features very nice, PNG-less, customizable rounded corners, a slideshow mode, pulsing captions, and a very clean and smooth blackout animation and slideshow transition.

One thing that I really like about Lightview is that the image remains stationary when scrolling unlike in Lightbox where the image scrolls with the content.

Still, the script was implemented on Scriptaculous and Prototype, which, given the size of these things may not be the way to go for sites optimized for speed. For those looking for a lighter lightbox alternative, Slimbox may be the better choice.

Another article demonstrating what could be done by combining effects such as opacity, shadows, and tiger striping.

Currently they are claiming that only Opera 9.5 beta renders the demo correctly — not really useful right seeing that Opera has been stuck at ~1.5% market share, and I am sure only a handful of them actually use the beta.

Posting this from my sleek and super fast Mozilla Firefox 3 Beta 2.

Update: Link to the article (thanks, mediter!)

swIR uses JavaScript and Flash to dynamically apply visual effects to images on a web page, using a method similar to sIFR (Scalable Inman Flash Replacement). Probably the most interesting feature of this is the ability to scale an image long with the text. It reportedly crashes Opera, though.

It is also incompatible with other JS libraries like Prototype or MooTools and doesn’t work with hot-linked images (because of security restrictions in Flash), and you can sometimes get a FOUC (flash of unstyled content) when the image loads before JavaScript replaces it.

Given that CSS 3 can already do almost all of these effects, I am eager to explore other possibilities with Flash-based image replacement. While I expect the adoption of CSS 3 enabled browsers to come slowly, I hope the maintainers of this project will not loose interest and keep it alive with fresh ideas that cannot be done with CSS or CSS 3. How about dynamic image composition, or creating interesting button effects with the images?

I personally am not a big fan of frameworks, but if you work with a team enforcing frameworks is a good way of getting things done consistently and getting everyone up to par when it comes to CSS standards. This article highlights the pros and cons of using frameworks, and is a good reference for the top CSS frameworks available on the net.

Here is a good resource to understanding the different color modes in CSS, including a write-up on CSS3’s different alpha mode notations.

Comprehensive tutorial that covers just about everything you need to know about floated CSS elements.

Here is an awesome pure CSS, cross-browser drop down menu that can easily be plugged into any site.

The original script is a bit bulky at 10 KB (a whopping 296 lines of code!) but I was able to bring it down to 4.1 KB with a little help from CSS Optimiser.

You can download the optimized version here.

Technique to build flexible CSS drop shadows applied to arbitrary block elements using plain and simple CSS and without using any images.

CSS Text Wrapper is a tool that generates CSS for text wrapped by custom-defined edges. It can generate three types of code that will achieve this effect: inline CSS, XHTML with external CSS classes, and JavaScript. It’s a really nice tool to have, especially for those aiming to create “something different”.

Check out the website and the examples page.