(whose width is set to the percent value to display)
within another
(not a ), like this:
*/
.starratingi, .starratingi_h{
position:relative;
width:65px;
height:12px;
/*poner estos gifs en el directorio de la app
background:url(star1.gif) 0 0 repeat-x;
*/
}
.starratingidiv, .starratingi_h:hover div {
position:absolute;
height:12px;
/* Idem
background:url(star2.gif) 0 0 repeat-x;
*/
top:0px;
left:0px;
}
/*progress bar
To display a progress bar
inside another and give each a background color or perhaps
a gradient fill using a suitable class (and use the styleargument to set the width of the inner
), you would use code such as this:
*/
.progress, .progress_h{
position:relative;
width:120px;
height:15px;
}
.progressdiv, .progress_h:hover div {
position:absolute;
height:15px;
top:0px;
left:0px;
}
/*scale up and scale down classes
HOW TO USE THEM:
To use these classes, place them in the class argument of an object to be scaled, as in the
following example, which was used to create Figure 7-5:
*/
.scaleup1, .scaleup1_h:hover {
-moz-transform :scale(1.1);
-webkit-transform:scale(1.1);
-o-transform :scale(1.1);
transform :scale(1.1);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.1', M22='1.1');
}
.scaleup2, .scaleup2_h:hover {
-moz-transform :scale(1.2);
-webkit-transform:scale(1.2);
-o-transform :scale(1.2);
transform :scale(1.2);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.2', M22='1.2');
}
.scaleup3, . :hover {
-moz-transform :scale(1.3);
-webkit-transform:scale(1.3);
-o-transform :scale(1.3);
transform :scale(1.3);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.3', M22='1.3');
}
.scaleup4, .scaleup4_h:hover {
-moz-transform :scale(1.4);
-webkit-transform:scale(1.4);
-o-transform :scale(1.4);
transform :scale(1.4);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.4', M22='1.4');
}
.scaleup5, .scaleup5_h:hover {
-moz-transform :scale(1.5);
-webkit-transform:scale(1.5);
-o-transform :scale(1.5);
transform :scale(1.5);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.5', M22='1.5');
}
.scaleup6, .scaleup6_h:hover {
-moz-transform :scale(1.6);
-webkit-transform:scale(1.6);
-o-transform :scale(1.6);
transform :scale(1.6);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.6', M22='1.6');
}
.scaleup7, .scaleup7_h:hover {
-moz-transform :scale(1.7);
-webkit-transform:scale(1.7);
-o-transform :scale(1.7);
transform :scale(1.7);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.7', M22='1.7');
}
.scaleup8, .scaleup8_h:hover {
-moz-transform :scale(1.8);
-webkit-transform:scale(1.8);
-o-transform :scale(1.8);
transform :scale(1.8);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.8', M22='1.8');
}
.scaleup9, .scaleup9_h:hover {
-moz-transform :scale(1.9);
-webkit-transform:scale(1.9);
-o-transform :scale(1.9);
transform :scale(1.9);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.9', M22='1.9');
}
.scaleup10, .scaleup10_h:hover {
-moz-transform :scale(2);
-webkit-transform:scale(2);
-o-transform :scale(2);
transform :scale(2);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='2', M22='2');
}
/*scale down*/
.scaledown1, .scaledown1_h:hover {
-moz-transform :scale(0.9);
-webkit-transform:scale(0.9);
-o-transform :scale(0.9);
transform :scale(0.9);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.9', M22='0.9');
}
.scaledown2, .scaledown2_h:hover {
-moz-transform :scale(0.8);
-webkit-transform:scale(0.8);
-o-transform :scale(0.8);
transform :scale(0.8);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.8', M22='0.8');
}
.scaledown3, . :hover {
-moz-transform :scale(0.7);
-webkit-transform:scale(0.7);
-o-transform :scale(0.7);
transform :scale(0.7);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.7', M22='0.7');
}
.scaledown4, .scaledown4_h:hover {
-moz-transform :scale(0.6);
-webkit-transform:scale(0.6);
-o-transform :scale(0.6);
transform :scale(0.6);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.6', M22='0.6');
}
.scaledown5, .scaledown5_h:hover {
-moz-transform :scale(0.5);
-webkit-transform:scale(0.5);
-o-transform :scale(0.5);
transform :scale(0.5);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.5', M22='0.5');
}
.scaledown6, .scaledown6_h:hover {
-moz-transform :scale(0.4);
-webkit-transform:scale(0.4);
-o-transform :scale(0.4);
transform :scale(0.4);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.4', M22='0.4');
}
.scaledown7, .scaledown7_h:hover {
-moz-transform :scale(0.3);
-webkit-transform:scale(0.3);
-o-transform :scale(0.3);
transform :scale(0.3);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.3', M22='0.3');
}
.scaledown8, .scaledown8_h:hover {
-moz-transform :scale(0.2);
-webkit-transform:scale(0.2);
-o-transform :scale(0.2);
transform :scale(0.2);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.2', M22='0.2');
}
.scaledown9, .scaledown9_h:hover {
-moz-transform :scale(0.1);
-webkit-transform:scale(0.1);
-o-transform :scale(0.1);
transform :scale(0.1);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.1', M22='0.1');
}
.scaledown10, .scaledown10_h:hover {
-moz-transform :scale(0);
-webkit-transform:scale(0);
-o-transform :scale(0);
transform :scale(0);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0', M22='0');
}
/*transition classes
HOW TO USE THEM:
To use these classes, add them to the class argument of an object and forget about them.
Then, when any properties of the object are changed that can transition, they will be animated
over the period of time specified, rather than changing immediately.
For example, here’s the example HTML from Plug-in 49, but modified to change all the
hover effects to transitions of differing durations:
*/ /*thumbnail How to Use It Although this plug-in is intended mainly for displaying a large version of a thumbnail image, because it simply hides and displays a on demand, you can place anything you like in it, meaning you can use it to display information on an image or other details. Here is the HTML used for Figure 7-8, page 187: NOTA MIA: EL SPAN DE MAS AFUERA CONTIENE LA CLASE. DENTRO HAY DOS SPAN: UN IMAGEN AFUERA CON UN SPAN QUE MANEJA BORDES OTRA DENTRO IGUAL, PERO ACRECENTANDO GROSOR DE BORDE, ETC
*/
/*pointer of the mouse
This short and sweet class simply sets the cursorproperty of an object to the value
pointer, so that the mouse cursor will change to a pointing finger when it passes over
the object.
How to Use It
Following is the HTML used for Figure 7-11, in which the class has been assigned to one of
two buttons:
*/
.pointer { cursor:pointer; }
/* */
.thumbview{
position:relative;
}
.thumbviewspan {
position:absolute;
top:-30px;
left:30px;
-moz-transition :all .3s linear;
-webkit-transition:all .3s linear;
-o-transition :all .3s linear;
transition :all .3s linear;
-moz-transform :scale(0);
-webkit-transform :scale(0);
-o-transform :scale(0);
transform :scale(0);
opacity :0;
z-index :0;
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0', M22='0');
}
.thumbview:hover span {
-moz-transform :scale(1);
-webkit-transform :scale(1);
-o-transform :scale(1);
transform :scale(1);
opacity :1;
z-index :100;
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1', M22='1');
}
@media all and (-webkit-min-device-pixel-ratio:10000), /* Only Opera */
not all and (-webkit-min-device-pixel-ratio:0) { /* sees this hack */
.thumbviewspan { top:30px; }
}
.transitionall{
-moz-transition :all .7s;
-webkit-transition:all .7s;
-o-transition :all .7s;
transition :all .7s;
}
.transitionallslowest{
-moz-transition :all 2s;
-webkit-transition:all 2s;
-o-transition :all 2s;
transition :all 2s;
}
.transitionallslow{
-moz-transition :all 1.5s;
-webkit-transition:all 1.5s;
-o-transition :all 1.5s;
transition :all 1.5s;
}
.transitionallfast{
-moz-transition :all .3s;
-webkit-transition:all .3s;
-o-transition :all .3s;
transition :all .3s;
}
.transitionallfastest{
-moz-transition :all .1s;
-webkit-transition:all .1s;
-o-transition :all .1s;
transition :all .1s;
}
.transitionall_l{
-moz-transition :all .7s linear;
-webkit-transition:all .7s linear;
-o-transition :all .7s linear;
transition :all .7s linear;
}
.transitionallslowest_l{
-moz-transition :all 2s linear;
-webkit-transition:all 2s linear;
-o-transition :all 2s linear;
transition :all 2s linear;
}
.transitionallslow_l{
-moz-transition :all 1.5s linear;
-webkit-transition:all 1.5s linear;
-o-transition :all 1.5s linear;
transition :all 1.5s linear;
}
.transitionallfast_l{
-moz-transition :all .3s linear;
-webkit-transition:all .3s linear;
-o-transition :all .3s linear;
transition :all .3s linear;
}
.transitionallfastest_l{
-moz-transition :all .1s linear;
-webkit-transition:all .1s linear;
-o-transition :all .1s linear;
transition :all .1s linear;
}
/*Breakpage*/
.break { page-break-before:always; }
/*caption classes*/
.caption, .caption_h { position:relative; } .caption img, .caption_h img { background:#000000; padding:3px; } .caption img, .caption_h:hover img { padding:0px; border:3px solid #ffffff; border:3px solid #eeeeee\0; /* IE hack */ -moz-box-shadow :3px 5px 9px #444; -webkit-box-shadow:3px 5px 9px #444; box-shadow :3px 5px 9px #444; }
.caption:before\0, .caption_h:hover:before\0 { /* IE hack section */ position:absolute\0; color:#eeeeee\0; top:auto\0; bottom:3px\0; left:0px\0; font-size:20pt\0; font-weight:bold\0; font-family:Impact\0; content: '\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588 \2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588 \2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588 \2588\2588\2588\2588\2588\2588\2588\2588\2588\2588'; /* 1 long line */ } .caption:after, .caption_h:hover:after { position:absolute; background:#ffffff; color:#000000; top:auto; bottom:3px; left:0px; width:100%; text-align:center; height:30px; line-height:30px; font-size:8pt; text-shadow:#888888 2px 2px 2px; font-weight:bold; font-family:Verdana, Helvetica, sans-serif; content:attr(alt); opacity:.9; }
/*thumbs*/
.thumbview { position:relative; } .thumbview span { position:absolute; top:-30px; left:30px; -moz-transition :all .3s linear; -webkit-transition:all .3s linear; -o-transition :all .3s linear; transition :all .3s linear; -moz-transform :scale(0); -webkit-transform :scale(0); -o-transform :scale(0); transform :scale(0); opacity :0; z-index :0; filter :progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand', M11='0', M22='0'); }
.thumbview:hover span { -moz-transform :scale(1); -webkit-transform :scale(1); -o-transform :scale(1); transform :scale(1); opacity :1; z-index :100; filter :progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand', M11='1', M22='1'); }
/*pointer*/
.pointer { cursor:pointer; }
/*rotation*/
.rotatec90,.rotatec90_h:hover { -webkit-transform:rotate(90deg); -moz-transform :rotate(90deg); -o-transform :rotate(90deg); transform :rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .rotatec180, .rotatec180_h:hover { -webkit-transform:rotate(180deg); -moz-transform :rotate(180deg); -o-transform :rotate(180deg); transform :rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rotatec270, .rotatec270_h:hover { -webkit-transform:rotate(270deg); -moz-transform :rotate(270deg); -o-transform :rotate(270deg); transform :rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .rotatea90,.rotatea90_h:hover { -webkit-transform:rotate(-90deg); -moz-transform :rotate(-90deg); -o-transform :rotate(-90deg); transform :rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.rotatea180, .rotatea180_h:hover { -webkit-transform:rotate(-180deg); -moz-transform :rotate(-180deg); -o-transform :rotate(-180deg); transform :rotate(-180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rotatea270, .rotatea270_h:hover { -webkit-transform:rotate(-270deg); -moz-transform :rotate(-270deg); -o-transform :rotate(-270deg); transform :rotate(-270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
/*odd and even text colors.*/
/* When you wish to present a table in a more easy-to-read format, you can use the classes in this plug-in to alternate the color of each row by adding a class to the tag*/
.aqua_o tr:nth-child(odd), .aqua_e tr:nth-child(even) { color:#0ff } .black_o tr:nth-child(odd), .black_e tr:nth-child(even) { color:#000 } .blue_o tr:nth-child(odd), .blue_e tr:nth-child(even) { color:#00f } .brown_o tr:nth-child(odd), .brown_e tr:nth-child(even) { color:#c44 } .fuchsia_o tr:nth-child(odd), .fuchsia_e tr:nth-child(even) { color:#f0f } .gold_o tr:nth-child(odd), .gold_e tr:nth-child(even) { color:#fc0 } .gray_o tr:nth-child(odd), .gray_e tr:nth-child(even) { color:#888 } .green_o tr:nth-child(odd), .green_e tr:nth-child(even) { color:#080 } .khaki_o tr:nth-child(odd), .khaki_e tr:nth-child(even) { color:#cc8 } .lime_o tr:nth-child(odd), .lime_e tr:nth-child(even) { color:#0f0 } .maroon_o tr:nth-child(odd), .maroon_e tr:nth-child(even) { color:#800 } .navy_o tr:nth-child(odd), .navy_e tr:nth-child(even) { color:#008 } .olive_o tr:nth-child(odd), .olive_e tr:nth-child(even) { color:#880 } .orange_o tr:nth-child(odd), .orange_e tr:nth-child(even) { color:#f80 } .pink_o tr:nth-child(odd), .pink_e tr:nth-child(even) { color:#f88 } .purple_o tr:nth-child(odd), .purple_e tr:nth-child(even) { color:#808 } .red_o tr:nth-child(odd), .red_e tr:nth-child(even) { color:#f00 } .silver_o tr:nth-child(odd), .silver_e tr:nth-child(even) { color:#ccc } .teal_o tr:nth-child(odd), .teal_e tr:nth-child(even) { color:#088 } .white_o tr:nth-child(odd), .white_e tr:nth-child(even) { color:#fff } .yellow_o tr:nth-child(odd), .yellow_e tr:nth-child(even) { color:#ff0 }
/*odd and even background colors*/
.aqua_bo tr:nth-child(odd), .aqua_be tr:nth-child(even) { background:#0ff } .black_bo tr:nth-child(odd), .black_be tr:nth-child(even) { background:#000 } .blue_bo tr:nth-child(odd), .blue_be tr:nth-child(even) { background:#00f } .brown_bo tr:nth-child(odd), .brown_be tr:nth-child(even) { background:#c44 }
.fuchsia_bo tr:nth-child(odd), .fuchsia_be tr:nth-child(even) { background:#f0f } .gold_bo tr:nth-child(odd), .gold_be tr:nth-child(even) { background:#fc0 } .gray_bo tr:nth-child(odd), .gray_be tr:nth-child(even) { background:#888 } .green_bo tr:nth-child(odd), .green_be tr:nth-child(even) { background:#080 } .khaki_bo tr:nth-child(odd), .khaki_be tr:nth-child(even) { background:#cc8 } .lime_bo tr:nth-child(odd), .lime_be tr:nth-child(even) { background:#0f0 } .maroon_bo tr:nth-child(odd), .maroon_be tr:nth-child(even) { background:#800 } .navy_bo tr:nth-child(odd), .navy_be tr:nth-child(even) { background:#008 } .olive_bo tr:nth-child(odd), .olive_be tr:nth-child(even) { background:#880 } .orange_bo tr:nth-child(odd), .orange_be tr:nth-child(even) { background:#f80 } .pink_bo tr:nth-child(odd), .pink_be tr:nth-child(even) { background:#f88 } .purple_bo tr:nth-child(odd), .purple_be tr:nth-child(even) { background:#808 } .red_bo tr:nth-child(odd), .red_be tr:nth-child(even) { background:#f00 } .silver_bo tr:nth-child(odd), .silver_be tr:nth-child(even) { background:#ccc } .teal_bo tr:nth-child(odd), .teal_be tr:nth-child(even) { background:#088 } .white_bo tr:nth-child(odd), .white_be tr:nth-child(even) { background:#fff } .yellow_bo tr:nth-child(odd), .yellow_be tr:nth-child(even) { background:#ff0 }
/*SUPER CLASES*/
/*Now that you have access to the almost 1800 [or less in my case] classes from the previous chapters, this chapter focuses on combining them in combinations to make superclasses�single classes with the functionality of several classes at once. These superclasses include creating an RSS button, applying simple borders, handling rollovers, horizontal and vertical animated tabs, and more. You�ll also discover how easy it is to create your own superclasses using simple statements to help make building dynamic web pages the easiest it has ever been.*/
/*Ejemplo:
In this example, the superclass clickable is created by placing the argument httpequiv='sclass' within a tag, followed by the argument specifying the name of the superclass, name='clickable', and finally the classes to put in the superclass, content='nooutline pointer'.
Here�s another example:
This creates the new superclass yellowonblue which will set the foreground color of the object to which it applies to yellow, and the background to blue
*/
.yellowonblue{
}
.clickable{
}
*/
.scaleup1, .scaleup1_h:hover {
-moz-transform :scale(1.1);
-webkit-transform:scale(1.1);
-o-transform :scale(1.1);
transform :scale(1.1);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.1', M22='1.1');
}
.scaleup2, .scaleup2_h:hover {
-moz-transform :scale(1.2);
-webkit-transform:scale(1.2);
-o-transform :scale(1.2);
transform :scale(1.2);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.2', M22='1.2');
}
.scaleup3, . :hover {
-moz-transform :scale(1.3);
-webkit-transform:scale(1.3);
-o-transform :scale(1.3);
transform :scale(1.3);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.3', M22='1.3');
}
.scaleup4, .scaleup4_h:hover {
-moz-transform :scale(1.4);
-webkit-transform:scale(1.4);
-o-transform :scale(1.4);
transform :scale(1.4);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.4', M22='1.4');
}
.scaleup5, .scaleup5_h:hover {
-moz-transform :scale(1.5);
-webkit-transform:scale(1.5);
-o-transform :scale(1.5);
transform :scale(1.5);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.5', M22='1.5');
}
.scaleup6, .scaleup6_h:hover {
-moz-transform :scale(1.6);
-webkit-transform:scale(1.6);
-o-transform :scale(1.6);
transform :scale(1.6);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.6', M22='1.6');
}
.scaleup7, .scaleup7_h:hover {
-moz-transform :scale(1.7);
-webkit-transform:scale(1.7);
-o-transform :scale(1.7);
transform :scale(1.7);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.7', M22='1.7');
}
.scaleup8, .scaleup8_h:hover {
-moz-transform :scale(1.8);
-webkit-transform:scale(1.8);
-o-transform :scale(1.8);
transform :scale(1.8);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.8', M22='1.8');
}
.scaleup9, .scaleup9_h:hover {
-moz-transform :scale(1.9);
-webkit-transform:scale(1.9);
-o-transform :scale(1.9);
transform :scale(1.9);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1.9', M22='1.9');
}
.scaleup10, .scaleup10_h:hover {
-moz-transform :scale(2);
-webkit-transform:scale(2);
-o-transform :scale(2);
transform :scale(2);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='2', M22='2');
}
/*scale down*/
.scaledown1, .scaledown1_h:hover {
-moz-transform :scale(0.9);
-webkit-transform:scale(0.9);
-o-transform :scale(0.9);
transform :scale(0.9);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.9', M22='0.9');
}
.scaledown2, .scaledown2_h:hover {
-moz-transform :scale(0.8);
-webkit-transform:scale(0.8);
-o-transform :scale(0.8);
transform :scale(0.8);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.8', M22='0.8');
}
.scaledown3, . :hover {
-moz-transform :scale(0.7);
-webkit-transform:scale(0.7);
-o-transform :scale(0.7);
transform :scale(0.7);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.7', M22='0.7');
}
.scaledown4, .scaledown4_h:hover {
-moz-transform :scale(0.6);
-webkit-transform:scale(0.6);
-o-transform :scale(0.6);
transform :scale(0.6);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.6', M22='0.6');
}
.scaledown5, .scaledown5_h:hover {
-moz-transform :scale(0.5);
-webkit-transform:scale(0.5);
-o-transform :scale(0.5);
transform :scale(0.5);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.5', M22='0.5');
}
.scaledown6, .scaledown6_h:hover {
-moz-transform :scale(0.4);
-webkit-transform:scale(0.4);
-o-transform :scale(0.4);
transform :scale(0.4);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.4', M22='0.4');
}
.scaledown7, .scaledown7_h:hover {
-moz-transform :scale(0.3);
-webkit-transform:scale(0.3);
-o-transform :scale(0.3);
transform :scale(0.3);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.3', M22='0.3');
}
.scaledown8, .scaledown8_h:hover {
-moz-transform :scale(0.2);
-webkit-transform:scale(0.2);
-o-transform :scale(0.2);
transform :scale(0.2);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.2', M22='0.2');
}
.scaledown9, .scaledown9_h:hover {
-moz-transform :scale(0.1);
-webkit-transform:scale(0.1);
-o-transform :scale(0.1);
transform :scale(0.1);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0.1', M22='0.1');
}
.scaledown10, .scaledown10_h:hover {
-moz-transform :scale(0);
-webkit-transform:scale(0);
-o-transform :scale(0);
transform :scale(0);
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0', M22='0');
}
/*transition classes
HOW TO USE THEM:
To use these classes, add them to the class argument of an object and forget about them.
Then, when any properties of the object are changed that can transition, they will be animated
over the period of time specified, rather than changing immediately.
For example, here’s the example HTML from Plug-in 49, but modified to change all the
hover effects to transitions of differing durations:
*/ /*thumbnail How to Use It Although this plug-in is intended mainly for displaying a large version of a thumbnail image, because it simply hides and displays a on demand, you can place anything you like in it, meaning you can use it to display information on an image or other details. Here is the HTML used for Figure 7-8, page 187: NOTA MIA: EL SPAN DE MAS AFUERA CONTIENE LA CLASE. DENTRO HAY DOS SPAN: UN IMAGEN AFUERA CON UN SPAN QUE MANEJA BORDES OTRA DENTRO IGUAL, PERO ACRECENTANDO GROSOR DE BORDE, ETC
*/
/*pointer of the mouse
This short and sweet class simply sets the cursorproperty of an object to the value
pointer, so that the mouse cursor will change to a pointing finger when it passes over
the object.
How to Use It
Following is the HTML used for Figure 7-11, in which the class has been assigned to one of
two buttons:
*/
.pointer { cursor:pointer; }
/* */
.thumbview{
position:relative;
}
.thumbviewspan {
position:absolute;
top:-30px;
left:30px;
-moz-transition :all .3s linear;
-webkit-transition:all .3s linear;
-o-transition :all .3s linear;
transition :all .3s linear;
-moz-transform :scale(0);
-webkit-transform :scale(0);
-o-transform :scale(0);
transform :scale(0);
opacity :0;
z-index :0;
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='0', M22='0');
}
.thumbview:hover span {
-moz-transform :scale(1);
-webkit-transform :scale(1);
-o-transform :scale(1);
transform :scale(1);
opacity :1;
z-index :100;
filter :progid:DXImageTransform.Microsoft.Matrix(
SizingMethod='auto expand', M11='1', M22='1');
}
@media all and (-webkit-min-device-pixel-ratio:10000), /* Only Opera */
not all and (-webkit-min-device-pixel-ratio:0) { /* sees this hack */
.thumbviewspan { top:30px; }
}
.transitionall{
-moz-transition :all .7s;
-webkit-transition:all .7s;
-o-transition :all .7s;
transition :all .7s;
}
.transitionallslowest{
-moz-transition :all 2s;
-webkit-transition:all 2s;
-o-transition :all 2s;
transition :all 2s;
}
.transitionallslow{
-moz-transition :all 1.5s;
-webkit-transition:all 1.5s;
-o-transition :all 1.5s;
transition :all 1.5s;
}
.transitionallfast{
-moz-transition :all .3s;
-webkit-transition:all .3s;
-o-transition :all .3s;
transition :all .3s;
}
.transitionallfastest{
-moz-transition :all .1s;
-webkit-transition:all .1s;
-o-transition :all .1s;
transition :all .1s;
}
.transitionall_l{
-moz-transition :all .7s linear;
-webkit-transition:all .7s linear;
-o-transition :all .7s linear;
transition :all .7s linear;
}
.transitionallslowest_l{
-moz-transition :all 2s linear;
-webkit-transition:all 2s linear;
-o-transition :all 2s linear;
transition :all 2s linear;
}
.transitionallslow_l{
-moz-transition :all 1.5s linear;
-webkit-transition:all 1.5s linear;
-o-transition :all 1.5s linear;
transition :all 1.5s linear;
}
.transitionallfast_l{
-moz-transition :all .3s linear;
-webkit-transition:all .3s linear;
-o-transition :all .3s linear;
transition :all .3s linear;
}
.transitionallfastest_l{
-moz-transition :all .1s linear;
-webkit-transition:all .1s linear;
-o-transition :all .1s linear;
transition :all .1s linear;
}
/*Breakpage*/
.break { page-break-before:always; }
/*caption classes*/
.caption, .caption_h { position:relative; } .caption img, .caption_h img { background:#000000; padding:3px; } .caption img, .caption_h:hover img { padding:0px; border:3px solid #ffffff; border:3px solid #eeeeee\0; /* IE hack */ -moz-box-shadow :3px 5px 9px #444; -webkit-box-shadow:3px 5px 9px #444; box-shadow :3px 5px 9px #444; }
.caption:before\0, .caption_h:hover:before\0 { /* IE hack section */ position:absolute\0; color:#eeeeee\0; top:auto\0; bottom:3px\0; left:0px\0; font-size:20pt\0; font-weight:bold\0; font-family:Impact\0; content: '\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588 \2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588 \2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588\2588 \2588\2588\2588\2588\2588\2588\2588\2588\2588\2588'; /* 1 long line */ } .caption:after, .caption_h:hover:after { position:absolute; background:#ffffff; color:#000000; top:auto; bottom:3px; left:0px; width:100%; text-align:center; height:30px; line-height:30px; font-size:8pt; text-shadow:#888888 2px 2px 2px; font-weight:bold; font-family:Verdana, Helvetica, sans-serif; content:attr(alt); opacity:.9; }
/*thumbs*/
.thumbview { position:relative; } .thumbview span { position:absolute; top:-30px; left:30px; -moz-transition :all .3s linear; -webkit-transition:all .3s linear; -o-transition :all .3s linear; transition :all .3s linear; -moz-transform :scale(0); -webkit-transform :scale(0); -o-transform :scale(0); transform :scale(0); opacity :0; z-index :0; filter :progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand', M11='0', M22='0'); }
.thumbview:hover span { -moz-transform :scale(1); -webkit-transform :scale(1); -o-transform :scale(1); transform :scale(1); opacity :1; z-index :100; filter :progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand', M11='1', M22='1'); }
/*pointer*/
.pointer { cursor:pointer; }
/*rotation*/
.rotatec90,.rotatec90_h:hover { -webkit-transform:rotate(90deg); -moz-transform :rotate(90deg); -o-transform :rotate(90deg); transform :rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .rotatec180, .rotatec180_h:hover { -webkit-transform:rotate(180deg); -moz-transform :rotate(180deg); -o-transform :rotate(180deg); transform :rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rotatec270, .rotatec270_h:hover { -webkit-transform:rotate(270deg); -moz-transform :rotate(270deg); -o-transform :rotate(270deg); transform :rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .rotatea90,.rotatea90_h:hover { -webkit-transform:rotate(-90deg); -moz-transform :rotate(-90deg); -o-transform :rotate(-90deg); transform :rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.rotatea180, .rotatea180_h:hover { -webkit-transform:rotate(-180deg); -moz-transform :rotate(-180deg); -o-transform :rotate(-180deg); transform :rotate(-180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rotatea270, .rotatea270_h:hover { -webkit-transform:rotate(-270deg); -moz-transform :rotate(-270deg); -o-transform :rotate(-270deg); transform :rotate(-270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
/*odd and even text colors.*/
/* When you wish to present a table in a more easy-to-read format, you can use the classes in this plug-in to alternate the color of each row by adding a class to the