CSS FADING GALLERIES

 

RED LEAF
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.

FADING GALLERIES - CSS CODE

FADING GALLERIES - VERSION 1
FADING GALLERIES - VERSION 2

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.

FADING GALLERIES - VERSION 2

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.
FADING GALLERIES - VERSION 3 FADING GALLERIES - VERSION 3 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 4 of Fading Galleries implements 3 images (instantaneous) switching based on "z-index" property. Moreover, using the example presented developers can implement any number of switching images galleries.

FADING GALLERIES - VERSION 4 FADING GALLERIES - VERSION 4 FADING GALLERIES - VERSION 4
FADING GALLERIES - VERSION 5
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!
 
 
 
 
x
Send your comments regarding this page using support@corollarytheorems.com, noi@editcc.com, or cus@2agraph.com
Page last updated on: July 15, 2017
© SC Complement Control SRL. All rights reserved.
 

OUR CANADIAN FLAG

x
 

Valid HTML 4.01!

Site page valid according to W3C

Valid CSS!

Stylesheets pages valid according to W3C

 
x