|
|
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 in 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 2 main versions of Fading and of Blinking Galleries.
5. Each Fading Gallery code is very simple, therefore it is easy to integrate it in your site. In maximum 1 hour
of moderate coding pains you can have
a nice spinning professional attractive carousel to attract more visitors!
6.
The price of our Fading Gallery Tutorial Kit is hilariously cheap:
5 EURO!
7.
In order to purchase Fading Gallery Tutorial-Kit send us an email with your order using:
support@corollarytheorems.com
|
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 example presented developers could easily come up with even tougher
implementations! |
|
|
|
|
|
