|
|
CSS FADING GALLERIES
|
|
|
A. CSS FADING GALLERIES
SPECIFICATIONS
1. CSS Fading Galleries work in all major browsers: Chrome, Firefox, Opera, Safari,
and IE 12/11/10. 3D animations do not work in IE 9/8/7/6.
2. A CSS Fading Gallery is one CSS compact component, and it can be integrated into any site, inside a <TD>
or in a <DIV> HTML element. [Fading Galleries work only with HTML and CSS code.]
3. Your site may be coded in HTML 2/3/4/5, XHTML.
4. This Tutorial Kit presents 5 versions of Fading Galleries.
5. Each Fading Gallery code is very simple, therefore it is easy to integrate it in your site.
After maximum 1 hour
of moderate coding pains, you can have
a nice professional attractive fading gallery to attract more visitors!
Sorry, this item is currently not available!
|
B.
CONTENT OF FADING GALLERIES TUTORIAL KIT
This Tutorial Kit contains the following:
CG1: five HTML files, each implementing a different version of a
Fading Gallery;
CG2: one detailed PDF Tutorial file of 14 pages;
CG3: two stylesheet *.css files;
CG4: one folder containing 8 page banner pictures of 992x210px each;
CG5: a "BASIC_IMAGES" folder containing 10 pictures of 200x100px each. |
C. DESCRIPTION OF
FADING GALLERIES TUTORIAL KIT
Fading Galleries app. is presented in five versions, and each one is explained line by line, functionally, as comments embedded into the CSS code,
plus in ample details in a dedicated PDF
tutorial file.
 |
|
|
Version 1 of Fading Gallery presents 2 pairs of fading pictures, as it is
illustrated on left. The first pair is the very banner picture: green and yellow. The second pair
is a small blue-red image.
Particular to this version is the fact that there are 3 different animation sequences presented.
The first animation implements the simple fade in/out of 2 images. The second animation adds a
scale up/down, while the last animation adds a Z-axis rotation to scale and to fade in/out.
The general idea is to present a few nice options in addition to the simple fade in/out of 2
pictures, and also to familiarize the users with writing complex animations. |
|
Version 2 of Fading Galleries works with a stack of 10 pictures, each fading in/out at a time. In
fact, this version is the actual Fading Gallery.
Based on the 10 pictures implementation, developers can easily design a similar Fading Gallery
containing any desired number of images--though within reasonable limits, naturally. |
 |
 |
Version 3 of Fading Gallery implements instantaneous image switch (like a blink) using the
"z-index" property. This is a very important lesson any designer should know because "z-index"
works normally in Chrome and Opera, though it is different in Firefox, Safari, and IE11/10/12.
|
|
|
|
Version 5 of Fading Galleries implements "site image copy-protection". The way it works is, when a
site visitor clicks on one image to copy it, the image fades out and leaves behind a blue background
carrying a copy-protect warning message.
The "image>save" and "image>save-as" commands are both missing on mouse right-click, so we are good
there. Moreover, based on the examples presented in this tutorial, developers could easily come up with even tougher
implementations! |
|
|
|
|
|
