El maravilloso poder de CSS

Les mostrare algunos trucos que puedes utilizar con CSS y que te pueden ayudar mucho.

Comencemos con los links, por ejemplo este, hace que los links vacíos sean bastante obvios.

a[href = ""] {
  background: red;
  color: white;
  font-size: x-large;
}

Puedes colocar esto en tu CSS y así te podrás dar cuenta cuando dejas un link vacío ya que con este código le puedes dar un estilo bastante obvio a los links que no tengan una ruta especificada.

Aqui el demo

Puedes también dar un estilo a los links absolutos, diferente a los links relativos:

a[href ^= http] {
  display: inline-block;
  color: red;
  transform: rotate(180deg);
}

 Aqui el demo 

Si quieres tener un estilo diferente para links que apunten fuera de tu dominio, puedes usar el selector :not().

a[href ^= 'http']:not([href *= 'elementalcode.']) {
  background: transparent url(arrow.png) no-repeat center right;
  padding-right: 16px;
}

 Aqui el demo

Solo para recordar que no estas limitado a dar estilo a los links, aqui esta como invertir todas las imagenes PNG

img[src $= .png] {
  filter: invert(100%);
}

Pasando a los selectores de atributos, ¿sabías puedes hacer visible el encabezado del documento, junto con los otros elementos allí?

head {
  display: block;
  border-bottom: 5px solid red;
}
script, style, link {
  display: block;
  white-space: pre;
  font-family: monospace;
}

O que se puede utilizar el impresionante poder de CSS attr-function para rellenar el contenido del :after y el :before?

script:before {
  content: “<script src=\”“ attr(src) “\” type=\”“ attr(type) “\”>”; 
}
script:after {
  content: “</script>”;
}

style:before {
  content: “<style type=\”“ attr(type) “\”>”; 
}
style:after {
  content: “< /style>”;
}

/* Y para finalizar,  */
link:before {
  content: “<link rel=\”“ attr(rel) “\” type=\”“ attr(type) “\” href=\”“ attr(href) “\” />”;
}

 Aqui el demo 

Nota: Ten en cuenta que attr() lee los valores de los atributos del elemento coincidente, por lo que si usted lo usa para #foo:before, lee los atributos de #foo.

Algunas Características de CSS3 (parte 2)

Comenzaremos la segunda parte de este tuto mostrando caracteristicas de CSS3, con los bordes redondeados, algo que con CSS3 es muy sencillo de hacer, les mostrare una caricatura hecha solo con div's rectangulares y bordes redondeados, para que vean que es muy util.

Algunas Características de CSS3 (parte 1)

Comenzaremos este tuto con Una de las Caracteristicas de CSS3 mas destacadas, como lo son los selectores, mostraremos un ejemplo en el cual crearemos 4 div’s con la clase “columna” y al agregar nth-child(even) y nth-child(odd) haremos que una tenga un color blanco y la siguiente un color gris, y asi sucesivamente tantos divs como mostremos, el código CSS seria asi:

.columna:nth-child(even) {
  background: #dde;
}
.columna:nth-child(odd) {
  background: white;
}

Y aqui tenemos el resultado:

columna 1

columna 2

columna 3ndiv>

columna 4

Tenemos también atributos específicos, como por ejemplo:

input[type="text"] {
  background: #eee;
}

Esto hará que todos los input de tipo texto tengan un fondo de color #eee.

Una nueva característica bastante interesante es la negación, podemos hacer una negación de esta manera:

:not(.ejemplo) {
  color: red; 
}            
:not(span) {
  align: center; 
}  

Con esto hariamos que los que no tengan la clase “ejemplo” tengan un color rojo y que lo que no este entre una etiqueta “span” que se centre.
Podemos tener también una mayor selectividad, como por ejemplo:

h2:first-child { ... }

div.texto > div { ... } 
h2 + header { ... } 

podemos tambien usar Fuentes web

@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}

Justificacion de texto

Aqui podemos mostrar un ejemplo de la justificacion de texto con overflow:hidden

#wrapping {width: 50%}
#overflow-hidden { font-size: 25px; height: 1.1em; overflow: hidden; }
#no-wrap { font-size: 25px; height: 1.1em; white-space: nowrap; overflow: hidden; }
#ellipsis { font-size: 25px; text-overflow: ellipsis; white-space: nowrap; height: 1.1em; overflow: hidden; }

Y aqui vemos el resultado en los tres contenedores:

Mostramos un pequeño ejemplo de el justificado de texto con overflow:hidden

Mostramos un pequeño ejemplo de el justificado de texto con overflow:hidden

Mostramos un pequeño ejemplo de el justificado de texto con overflow:hidden

 

Tenemos también las Columnas, cambiando simplemente un numero, podemos tener tantas columnas como queramos:

.Ejemplo{
  column-count: 4;
  column-rule: 1px solid #bbb;
  column-gap: 2em;
  display: block;
  padding: 10px 20px;
  color: black;
  background: rgba(255, 255, 255, 0.4);
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

Tenemos un resultado como este... claro, hay que tener en cuenta, que debes usar los prefijos o incluir prefix-free en tu web.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum ligula in diam ornare congue id ac erat. Quisque et justo nulla, et eleifend justo. Phasellus aliquet orci sit amet libero auctor aliquet. Nunc vulputate porta pulvinar. Sed porttitor, mi a elementum luctus, lectus sem molestie magna, ut volutpat lorem dolor eu libero. Nullam vulputate justo sem, non fringilla metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae augue ac nisi semper posuere eu vulputate elit. Morbi aliquam vehicula velit eget facilisis. Integer magna sem, hendrerit sit amet auctor sit amet, scelerisque vitae elit.

Podemos crear texto con trazos utlizando text-stroke de esta manera:

#ejemplo-texto-con-trazo { 
              font-size: 85px;
              padding: 20px 0;
              text-align: center;
n 
             text-stroke-color: blue;
              text-fill-color: white;
              text-stroke-width: 1px;
            }

Utilizando esta característica, obtendriamos un resultado como este:

Texto Trazo

Tenemos la libertad de usar opacitad con CSS3, algo muy util para hacer algunos efectos visules, utilizando colores RGBA. Haremos un pequeño ejemplo utilizando un div y texto para que veas como trabajar con colores RGBA.

#ejemplo-opacidad {
                margin: 100px auto;
                font-size: 80px;
                line-height: 200px;
                text-align: center;
                font-weight: bold;
                letter-spacing: -4px;
                border-radius: 5px;
                border-radius: 5px;
                border-radius: 5px;
                border-radius: 5px;
                text-shadow: none;
                color: rgba(255, 0, 0, 0.41);
                background-color: rgba(0, 0, 255, 0.40);
                background-position: initial initial;
                background-repeat: initial initial;
              }

Y asi tenemos un div con opacidad y un texto con el mismo efecto.

Opacidad

Siguiendo con los efectos en los textos, podemos jugar con los tonos, saturación y luminosidad, con HSLA.

#ejemplo-hsla {
              font-size: 75px;
              padding-top: 20px;
              padding-right: 0px;
              padding-bottom: 20px;
              padding-left: 0px;
              text-align: center;
              color: hsla(166,81%,27%,0.30); 
            }

Se pueden crear colores muy buenos con hsla.

HSLA

En otro tuto, mostraremos algunas otras características, como transiciones, animaciones, transformaciones y muchas mas, espero les haya gustado.!!

Notificaciones cronometradas con CSS3

[caption id="attachment_208" align="aligncenter" width="480"] notificaciones cronometradas con css3[/caption]

Un consejo rápido sobre cómo crear algunas notificaciones simples sincronizados con animaciones CSS. La idea es mostrar una notificación con una barra de progreso durante un tiempo específico y luego hacerla desaparecer.

Vamos a ver cómo crear una simple notificación oportuna con animaciones CSS. Vamos a utilizar un indicador de progreso para mostrar cuánto tiempo queda para que el cuadro desaparezca.

Seguramente, usted ya lo vio en alguna parte, yo lo descubrí en la buysellads.com, cuando las notificaciones programadas se muestran es decir, después de salvar a algunos ajustes.

HTML

Para el marcado simplemente tendremos una división con un mensaje en el interior y con una división adicional de la barra de progreso:

<div class="tn-box tn-box-color-1">
<p>Su configuracion se ha guardado satisfactoriamente!</p>
<div class="tn-progress"></div>
</div>

CSS

En el cuadro de la notificación se va a tener las clases tn-box y tn-box-color-1 que se utilizará para definir los diferentes colores. Luego se define el estilo de la caja:

.tn-box {
width: 360px;
position: relative;
margin: 0 auto 20px auto;
padding: 25px 15px;
text-align: left;
border-radius: 5px;
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6);
opacity: 0;
cursor: default;
display: none;
}
.tn-box-color-1{
background: #ffe691;
border: 1px solid #f6db7b;

Vamos a configurar el cuadro en display:none y darle 0 a la opacidad.

La barra de progreso tendrá el siguiente estilo:

.tn-progress {
width: 0;
height: 4px;
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 5px;
left: 2%;
border-radius: 3px;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.05),
0 -1px 0 rgba(255,255,255,0.6);

Inicialmente, la barra tendrá 0 de ancho.

En este ejemplo, estoy usando un botón con una casilla de verificación que comenzará a las animaciones una vez que sea activado.

input.fire-check:checked ~ section .tn-box {
display: block;
animation: fadeOut 5s linear forwards;
}
input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s;

El botón precede a la sección con los cuadros de notificación para que pueda utilizar el general sibling combinator.

Si usted tal vez desea agregar una clase con JavaScript en su lugar, se podría definir algo como esto:

.tn-box.tn-box-active {
display: block;
animation: fadeOut 5s linear forwards;
}
.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}

donde tn-box-active es la clase que tu agregas a el div tn-box.

La animacion en si, seria esta:

@keyframes fadeOut {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; transform: translateY(0px);}
99% { opacity: 0; transform: translateY(-30px);}
100% { opacity: 0; }

Parece un "desvanecimiento", pero que en realidad se desvanece la caja en la primera y luego la hace desaparecer y moverse un poco. La animación de la barra de progreso seria así:

@keyframes runProgress {
0% { width: 0%; background: rgba(255,255,255,

0.3); }
100% { width: 96%; background: rgba(255,255,255,1);

Animamos la anchura a 96% (de izquierda fue de 2% en lo que queremos que se detenga el 2% de la derecha también), y la opacidad del valor RGBA.

La duración de la animación de la barra de progreso será un poco inferior a la duración de la animación cuadro, ya que va a empezar más tarde (la caja tiene que desaparecer en primer lugar).

Nota: Lo que pensé que sería bueno, es una pausa de la animación en vuelo estacionario. Esto tiene sentido si el usuario desea tener más tiempo para leer lo que dice la notificación. Pero, por desgracia, parece que hay algunos problemas con broswers WebKit. En Chrome (19.0.1084.56 en Win) la animación se rompe, mientras que en Safari (5.1.5 Win) me sale un informe de accidente en WebKit2WebProcess.exe ... Funciona perfectamente bien en Firefox 12,0.

De todos modos, así es cómo usted podría hacer:

.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress{
animation-play-state: paused;

Hace falta decir que esto sólo funcionará en los navegadores que soporta CSS Animations! Usted necesitará algún tipo de reserva JS para otros navegadores.

Y eso es todo! Espero que les sea útil!

Demo: Ver                                                Archivos: Descargar

 

Efecto Navegación Circular

[caption id="attachment_196" align="aligncenter" width="480"] efecto navegación circular[/caption]

Vamos a crear un interesante efecto hover para una navegación de imagen utilizando CSS3. La idea es ampliar una navegación circular con una flecha y hacer una burbuja con una miniatura. En nuestro ejemplo, se muestra la miniatura de la imagen anterior y posterior deslizante en torno a las flechas. El efecto se hace con transiciones CSS3.

El HTML

Para lograr este pequeño efecto CSS3  nuestra navegacion tendra una estructura como esta:

<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(../images/thumbs/1.jpg);"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Next</span>
<div style="background-image:url(../images/thumbs/3.jpg);"></div>
</a>
</div>

En nuestra demostración vamos a hacer una plantilla de jQuery fuera de este y agregar dinámicamente las miniaturas de las imágenes anterior y posterior del slider. Sin embargo, para mostrar cómo el efecto de círculo en expansión se lleva a cabo, sólo les mostraremos esta parte:

El CSS

Vamos a ver ahora, como agregar el estilo para esta navegación

Asumiento que tenemos algun contenedor relativo alrededor, estableceremos los elementos del link con una posición absoluta. El alto y ancho sera de 70 pixeles, así no tendremos un area tan pequeña para el efecto hover.

cn-nav > a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;

El elemento span, que contendrá las flechas como una imagen de fondo tendrá una altura inicial y la anchura de 46 píxeles. Con el fin de hacer que se vea como un círculo, tenemos que establecer el radio de frontera (border radius) a la mitad de su anchura/altura. Con el truco margen del 50% y negativo, lo establecemos en el centro del elemento link. A continuación, se define la transición que tendrá todas las propiedades en cuenta con una duración de 400 ms y con ease, como la función de aceleración:

.cn-nav a span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}

Los fondos de imagen de los spans (flecha derecha y la flecha izquierda):

cn-nav a.cn-nav-prev span{
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span{
background: #666 url(../images/next.png) no-repeat center center;

El div con el thumbail como imagen de fondo inicialmente va a tener una altura y anchura de 0 píxeles. Va a ser absoluta y también se coloca en el centro del elemento link. Radio Frontera (border radius) y los márgenes van a ser 0 inicialmente. La imagen de fondo llenará todo el elemento, por lo tanto, vamos a dar al fondo una anchura y la altura de 100%. La transición de este elemento será para todas las propiedades con una duración de 200 ms y con la función de ease-out para aliviar:

n>cn-nav a div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

Ahora, vamos a definir cuáles son los elementos que se verían al hacer hover

El span se incrementará a 100 píxeles de anchura y altura y, en consecuencia, vamos a establecer los márgenes negativos y el radio de frontera (border radius) a la mitad de eso. Vamos a aumentar el tamaño de la imagen de fondo un poco. Además, vamos a cambiar el color de fondo y la opacidad:

cn-nav a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;

Y, por último, el elemento div de la imagen se ampliará  un poco, a 90 píxeles, por lo que aún podemos ver el elemento span alrededor, aparece como una frontera (border) para el thumb. También vamos a aumentar el tamaño de fondo un poco y establecer los márgenes negativos y el radio de frontera (border radius) a la mitad del ancho del elemento:

cn-nav a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;

Y eso es todo! Un habil efecto sólo con CSS3! Echa un vistazo a la demo para ver cómo se ve integrado en un control deslizante con el que muestra la de miniatura anterior y el siguiente (con un navegador moderno, lo siento IE9 no está incluido)! Espero que hayan disfrutado esta pequeña guía y les sea útil.

Demo: Ver                                         Archivos: Descargar

 

Diapositivas estilo prezzi con Impress.js

[caption id="attachment_183" align="aligncenter" width="480"] impress.js[/caption]

impress.js es una herramienta para crear presentaciones con el poder de CSS3 transforms y transitions en navegadores modernos e inspirado en la idea de prezi.

Necesitas tener mucho conocimiento de HTML y CSS para poder usar impress.js efectivamente. y algo mas importante, necesitas ser diseñador tambien, porque las presentaciondes de impress.js no traen estilos por defecto, no hay ningun layout automatico para ellos...

Necesitas diseñar y construir esto a mano. entonces... ¿Todavia te gustaria saber como usar impress.js?

HTML

Debes tener en cuenta, que para comenzar tu codigo HTML debes comenzarla con la etiqueta

<!doctype html>

ya que impress.js trabaja con html5, si no empiezas el documento como html5, no funcionará.

Impress.js no depende de ninguna hoja de estilo externa. El script añade todo el estilo necesario para que la presentación funcione.

El estilo que utilizaremos es solo un demo (desde la web del autor ya que el ejemplo, es igual, solo que traducido), mas que todo para ver como darle estilos a los steps de las presentaciones.

Se creativo, construye uno propio. Nosotros no buscamos que todas las presentaciondes con impress.js luzcan igual verdad?

Al crear su propia presentación puedes deshacerte de este archivo. Empezar desde cero, es divertido!

<link href="css/impress-demo.css" rel="stylesheet" />

El elemento body es usado por impress.js para establecer algunos nombres de las clases que utiliza, que permitira detectar el apoyo y el estado de la presentacion CSS u otros scripts.

El primer y muy util nombre de clase es el `impress-not-supported`. Esta clase dice, que navegador no soporta las caracteristicas  requeridas por impress.js, entonces, puedes aplicar algun estilo fallback  en tu CSS. No es necesario añadir manualmente esto en el elemento. Si el script detecta que el navegador no es muy bueno el agregara la clase, pero añadir esto al HTML, hara que un usuario sin JavaScript pueda tener un estilo Fallback.

Cuando impress.js detecta que el navegador no soporta las caracteristicas requeridas, esta nombre de la clase sera removida.

El nombre de la clase en el elemento cuerpo, tambien depende de la presentacion activa en el momento.

<body class="impress-not-supported">

Por ejemplo, este mensaje fallback sera solo visible cuando la clase `impress-not-supported` esté en el cuerpo.

<div class="fallback-message">
    <p>tu navegador <b>no soporta las caracteristicas requeridas</b> por impress.js.</p>
    <p>para una mejor experiencia, por favor utiliza la version mas reciente de <b>Chrome</b>,<b>Safari</b> o <b>Firefox</b></p>
</div>

Este es el elemento nucleo usado por impress.js.

Esta sera la envoltura de cada steps de tu presentacion. En este elemento toda la magia de impress.js sucede. No tiene porque se un <div>. solo el "ID" es importante aqui, ya que asi es como el script lo encuentra.

Probablemente no vas a necesitar esto ahora, pero aqui estan unas opciones de configuracion que pueden usarse en estos elementos.

Para cambiar la duracion de la transición entre los slides, usa `data-transition-duration="2000"` dandole a esto, un numero de ms. por defecto vendra a 1000 (1s).

puedes tambien controlar la perspectiva con `data-perspective="500"` dandole a esto un número
nde pixeles, por defecto esta en 1000. puedes establecerlo en 0 si no buscas ningun efecto 3D. Si estas pensando en cambiar este valor, asegurate de entender como funciona la perspectiva en CSS 

pero como dije, no necesitas esto por ahora, entonces no te preocupes aqui hay simples, pero interesantes cosas  con respecto a este tag.

<div id="impress">

Aqui es donde comienzan las cosas interesantes.

Cada paso de la presentacion debe  ser un elemento dentro de `#impress` con un nombre de clase de `step`. Este elemento step esta posicionado  rotado y escalado por impress.js y la camara los muestra en cada step de la presentacion.

La informacion del posicionamiento se pasa a traves de los atributos de datos.

en el ejemplo solo especificaremos "x" y "y" y la posicion de cada elemento step con los atributos `data-x="-1000"` y `data-y="-1500`. esto quiere decir que "el centro" de los elementos (si, el centro) sera posicionado en el punto x= -1000px y y= -1500px de la presentacion 'canvas'

esta no sera rotada ni escalada

<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>No estas simplemente <b>aburrid@</b> con todas esas presentacions de slides basicos</q>
</div>

El atributo ID de el elemento step es usado para identificarlo en la url, pero es opcional. si no esta definido, este obtendrá un valor por defecto de 'step-N' es un numero de slide.

por lo tanto en el ejemplo debajo de esto, será ''step-2". La parte hash de la url cuando este step esté activo será '#/step-2'.

Tambien puedes usar '#step-2' en un link, para colocarlo directamente en este step. Por favor, nota que mientras '#/step-2' (con slash) tambien funcionaria, no es recomendado. usando el clasico 'id' - based links como '#step-2' hace estos link utiles en el modo fallback.

<div class="step slide" data-x="0" data-y="-1500">
<q>No piensas que las presentaciones <strong>en navegadores modernos</strong> deberian ser mejores?<strong>copiando los limites</strong> de las clasicas cubiertas de slides.</q>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>Te gustaria <strong>impresionar tu audiencia</strong>con <strong>impresionantes visualizaciones</strong> de tu charla?</q>
</div>

Este es un ejemplo de un elemento step siendo escalado. De nuevo, usamos el atributo 'data-' , pero esta vez es `data-scale="4"` esto quiere decir que este elemento será 4  veces mayor que los otros.

hablando de la presentación y el punto de vista de las transiciones significa que, tendrá que ser reducido (4 veces) para poder volver a su tamaño correcto.

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">Entonces puedes intentar</span>
        <h1>impress.js<sup>*</sup></h1>
        <span class="footnote"><sup>*</sup> Sin rima ninguna</span>
</div>

Este elemento tiene rotación. La notación no debería ser una sorpresa. Nosotros utilizamos el atributo 'data-rotate="90"', lo que significa que este elemento debe ser rotado 90 grados en sentido horario.

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>Esta es una<strong> herramienta para presentaciones</
nstrong> <br/>
inspirado en la idea de <a href="http://prezi.com">prezi.com</a> <br/>
y basado en el <strong>poder de CSS3 transforms y transitions</strong> en navegadores modernos.</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>visualiza tus <b>grandes </b> <span class="thoughts">pensamientos</span></p>
</div>

Y ahora esto se pone de verdad excitante! ahora movemos esto en Tercera Dimension. Junto con 'data-x' y 'data-y' puedes definir la posicion en un tercer eje (z), con 'data-z'. en el ejemplo usamos 'data-z=".3000"' lo que significa que el elemento puede estar posicionado a unos 3000 pixeles de nosotros.

<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>y <b>peque&ntilde;as</b> ideas</p>
</div>

Este paso aquí no introduce nada nuevo cuando se trata de los atributos de datos, pero debes notar en la demostración de que algunas palabras de este texto se están animando. Es una transición CSS muy básica que se aplica a los elementos cuando este step es alcanzado.

En el comienzo de la presentación de todos los elementos step se les da la clase de 'future'. Esto significa que no han sido visitados todavía. Cuando la presentación se mueve a un paso dado el nombre de la clase 'future' se cambia a 'present'. Así es como la animación en este paso funciona - el texto se mueve cuando el step cambia el nombre de la clase a 'present'

Finalmente, cuando el step deja el `present` la clase se retira del elemento y la clase `past` se añade. Así que, básicamente todos los elementos step tienen una de tres clases: `future`, `present` o `past`. Pero sólo el step actual tiene la clase `present`.

<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>mediante <b class="positioning">positioning</b>, <b class="rotating">rotating</b> y <bclass="scaling">scaling.</b> Esto, en un canvas infinito</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>El unico <b>limite</b> es tu <b class="imagination">imaginacion</b></p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>quieres saber mas?</p>
<q><a href="http://github.com/bartaz/impress.js">usa el codigo</a>, Luke!</q>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>una cosa mas...</p>
</div>

Y la última muestra del poder y la flexibilidad de impress.js. Usted puede no sólo posicionar el elemento en 3D, sino que también girar alrededor de cualquier eje. Así que esto de aquí obtendrá rotacion en -40 grados (40 grados en sentido antihorario) alrededor del eje X y 10 grados (sentido horario) alrededor del eje Y.        Por supuesto, puedes hacerla girar alrededor del eje Z con 'data-rotate-z' -que tiene exactamente el mismo efecto que 'data-rotation' (estos dos son básicamente los mismos).

<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">sabias </span> <span class="you">t&#65533;, </span> <span class="noticed">que</span> <span class="its">esto es</span> <span class="in">en </span> <b>3D<sup>*</sup></b>?</p>
<span class="footnote">* toma eso, prezi ;)</span>
</div>

Así que para hacer un resumen de todos los atributos posibles que
nsirven para colocar los steps de la presentación, tenemos:

•  "data-x", "data-y", "data-z" - estos definen la posicion del centro en pixeles del elemento step en el canvas; Su valor inicial es 0


•  "data-rotate-x", "data-rotate-y", "data-rotate-z", "data-rotate" - estos definen la rotacion de el elemento en grados alrededor de los ejes; su valor inicial es 0 "data-rotate" y "data-rotate-z" son exactamente los mismos.


•  "data-scale" - define el scale de el elemento step; su valor inicial es 1.

Estos valores son usados por impress.js en las funciones de transformacion CSS, asi que para mas informacion consulta CSS transform docs.

<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>

"hint" no está relacionado con impress.js de ninguna manera. Sin embargo, le puede mostrar cómo utilizar las funciones impress.js en forma creativa. Cuando el step de presentación se muestra (selected) su elemento obtiene la clase de "active" y el elemento de cuerpo se basa en la clase Identificación del step activo "impress-on-ID" (donde ID es el id del step)... Tal vez no sea tan clara, debido a todos estos "IDs" en la frase anterior, por ejemplo, cuando el primer step (el unico con el ID de "bored") está activo, el elemento del cuerpo recibe una clase de "impress-on-bored". Esta clase la utiliza este "hint" a continuación. Compruebe el archivo CSS para ver cómo se muestra con retraso en la animación CSS cuando el primer step de la presentación es visible durante un par de segundos. Y cuando se trata de este fragmento de código JavaScript a continuación, (los niños, no hagan esto en casa) Es una solución rápida y sucia para obtener texto de sugerencia distinta para los dispositivos táctiles. En un mundo real debe ser por lo menos en distintos archivo JS... y el contenido de touch debe estar probablemente sólo oculta en algún lugar de HTML - no codificado en la secuencia de comandos.

<div class="hint">
<p>Usa la barra espaciadora o las flechas para navegar</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Toque a la izquierda o derecha para navegar</p>";
}
</script>

Por último, pero no menos importante. Para que todo lo que se ha descrito anteriormente funcione realmente, es necesario incluir impress.js en la página. De aquí me basta con incluir la fuente completa de la secuencia de comandos para que sea más legible. Tambien es necesario llamar a `impress().init()` para inicializar la función de presentación impress.js. Y debe hacerlo en el final de su documento. No sólo porque es una buena práctica, sino también porque se debe hacer cuando todo el documento está listo. Por supuesto que se puede envolver en cualquier tipo de evento "DOM ready", pero yo estaba demasiado perezoso para hacerlo ;)

<script src="js/impress.js"></script>
<script>impress().init();</script>

Y eso es todo.!! Espero puedan hacer magnificas presentaciones con impress.js

Resultado: Ver                                Archivos: Descargar