CSS3: Selectores, Clases y Pseudo-Clases
Por @Dorex89
Conocer y dominar todos los selectores, clases y pseudo-clases de CSS es imprescindible para crear diseños web profesionales. El estándar de CSS 3 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.
Selector de hijo (Child Selector)
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el “signo de mayor que” (>).
Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser hijo directo de otro elemento.
<p> span { color: blue; }
<p>
<span>Texto1</span>
</p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>
En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.
Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector descendente y el selector de hijos:
p a { color: red; }
p > a { color: red; }
<p>
<a href="#">Enlace1</a>
</p>
<p>
<span>
<a href="#">Enlace2</a>
</span>
</p>
El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.
El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.
El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento padre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis el símbolo +. Si se considera el siguiente ejemplo:
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
- Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:
- El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos<h2> cumplen la primera condición del selector adyacente.
- El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.
Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.
El siguiente ejemplo puede ser útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. El selector p + p selecciona todos los párrafos que están dentro de un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.
El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento padre debe ser el mismo. Si se considera el siguiente ejemplo:
p + p { color: red; }
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:
-El primer párrafo no va precedido de ningún otro párrafo, por lo que no cumple una de las condiciones de p + p
• El segundo párrafo va precedido de otro párrafo y los dos comparten el mismo padre, por lo que se cumplen las dos condiciones del selector p + p y el párrafo muestra su texto de color rojo.
• El tercer párrafo se encuentra dentro de un elemento <div>, por lo que no se cumple ninguna condición del selector p + p ya que ni va precedido de un párrafo ni comparte padre con ningún otro párrafo.
Selector de atributos
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementosHTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
- [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
- [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
- [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
- [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
Pseudo-clases
La pseudo-clase :first-child
La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Si se considera el siguiente ejemplo:
p em:first-child {
color: red;
}
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim. Praesent nulla ante, <em>ultricies</em> id, porttitor ut, pulvinar quis, dui.</p>
El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento y que se encuentre dentro de un elemento <p>. Por tanto, en el ejemplo anterior sólo el primer <em> se ve de color rojo.
La pseudo-clase :first-child también se puede utilizar en los selectores simples, como se muestra a continuación:
p:first-child { … }
La regla CSS anterior aplica sus estilos al primer párrafo de cualquier elemento. Si se modifica el ejemplo anterior y se utiliza un selector compuesto:
p:first-child em {
color: red;
}
<body>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
<div>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
</div>
</body>
El selector p:first-child em selecciona todos aquellos elementos <em> que se encuentren dentro de un elemento<p> que sea el primer hijo de cualquier otro elemento.
El primer párrafo del ejemplo anterior es el primer hijo de <body>, por lo que sus <em> se ven de color rojo. El segundo párrafo de la página no es el primer hijo de ningún elemento, por lo que sus elementos <em> interiores no se ven afectados. Por último, el tercer párrafo de la página es el primer hijo del elemento <div>, por lo que sus elementos <em> se ven de la misma forma que los del primer párrafo.
Las pseudo-clases :link y :visited
- Las pseudo-clases :link y :visited se pueden utilizar para aplicar diferentes estilos a los enlaces de una misma página:
- La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
- La pseudo-clase :visited se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.
El navegador gestiona de forma automática el cambio de enlace no visitado a enlace visitado. Aunque el usuario puede borrar la cache y el historial de navegación de forma explícita, los navegadores también borran de forma periódica la lista de enlaces visitados.
Por su propia definición, las pseudo-clases :link y :visited son mutuamente excluyentes, de forma que un mismo enlace no puede estar en los dos estados de forma simultánea.
Como los navegadores muestran por defecto los enlaces de color azul y los enlaces visitados de color morado, es habitual modificar los estilos para adaptarlos a la guía de estilo del sitio web:
a:link { color: red; }
a:visited { color: green; }
Las pseudo-clases :hover, :active y :focus
Las pseudo-clases :hover, :active y :focus permiten al diseñador web variar los estilos de un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y :visited que sólo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a cualquier elemento.
A continuación se indican las acciones del usuario que activan cada pseudo-clase:
:hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.
:active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.
:focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos <input> de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.
De las definiciones anteriores se desprende que un mismo elemento puede verse afectado por varias pseudo-clases diferentes de forma simultánea. Cuando se pulsa por ejemplo un enlace que fue visitado previamente, al enlace le afectan las pseudo-clases :visited, :hover y :active.
Debido a esta característica y al comportamiento en cascada de los estilos CSS, es importante cuidar el orden en el que se establecen las diferentes pseudo-clases. El siguiente ejemplo muestra el único orden correcto para establecer las cuatro pseudo-clases principales en un enlace:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
Los navegadores obsoletos como Internet Explorer 6 y sus versiones anteriores no son capaces de aplicar estas pseudo-clases a los elementos que no sean enlaces.
Por último, también es posible aplicar estilos combinando varias pseudo-clases compatibles entre sí. La siguiente regla CSS por ejemplo sólo se aplica a aquellos enlaces que están seleccionados y en los que el usuario pasa el ratón por encima:
a:focus:hover { … }
La pseudo-clase :lang
La pseudo-clase :lang se emplea para seleccionar elementos en función de su idioma. Los navegadores utilizan los atributos lang, las etiquetas <meta> y la información de la respuesta del servidor para determinar el idioma de cada elemento.
Si se considera el siguiente ejemplo:
p { color: blue; }
p:lang(es) { color: red; }
Los párrafos del ejemplo anterior se ven de color azul, salvo los párrafos cuyo contenido esté escrito en español, que se ven de color rojo.
Como los navegadores actuales no son capaces de inferir el idioma de un elemento a partir de su contenido, el uso de esta clase está muy limitado salvo que la página utilice de forma explícita los atributos lang:
<p lang=”en”>Lorem ipsum dolor sit amet…</p>
<div lang=”fr”>
<p>Lorem ipsum dolor sit amet…</p>
<p lang=”es_ES”>Lorem ipsum dolor sit amet…</p>
</div>
<p lang=”en”>Lorem ipsum dolor sit amet…</p>
<ul>
<li lang=”fr”>Lorem ipsum dolor sit amet…</li>
</ul>
La pseudo-clase :lang(xx) es muy diferente al selector de atributos [lang|=xx], tal y como muestran las siguientes reglas:
*[lang|=es] { … } /* selector de atributo */
*:lang(es) { … } /* pseudo-clase */
<body lang=”es”>
<p>Lorem ipsum dolor sit amet…</p>
</body>
El selector *[lang|=es] selecciona todos los elementos de la página que tengan un atributo llamado lang cuyo valor empiece por es. En el ejemplo anterior, solamente el elemento <body> cumple con la condición del selector.
Por otra parte, el selector *:lang(es) selecciona todos los elementos de la página cuyo idioma sea el español, sin tener en cuenta el método empleado por el navegador para averiguar el idioma de cada elemento. En este caso, tanto el elemento <body> como el elemento <p> cumplen esta condición.
Pseudo-elementos
Los selectores de CSS, las pseudo-clases y todos los elementos HTML no son suficientes para poder aplicar estilos a algunos elementos especiales. Si se desea por ejemplo cambiar el estilo de la primera línea de texto de un elemento, no es posible hacerlo con las utilidades anteriores.
La primera línea del texto normalmente es variable porque el usuario puede aumentar y disminuir la ventana del navegador, puede disponer de más o menos resolución en su monitor y también puede aumentar o disminuir el tamaño de letra del texto.
La única forma de poder seleccionar estos elementos especiales es mediante los pseudo-elementos definidos porCSS para este propósito.
El pseudo-elemento :first-line
El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:
p:first-line { text-transform: uppercase; }
Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados:
div:first-line { color: red; }
p:first-line { text-transform: uppercase; }
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
En el ejemplo anterior, la primera línea del primer párrafo también es la primera línea del elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayúsculas y de color rojo.
El pseudo-elemento :first-letter
El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera línea de texto de un elemento. De esta forma, la siguiente regla CSS muestra en mayúsculas la primera letra del texto de cada párrafo:
p:first-letter { text-transform: uppercase; }
Los signos de puntuación y los caracteres como las comillas que se encuentran antes y después de la primera letra también se ven afectados por este pseudo-elemento.
Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
Los pseudo-elementos :before y :after
Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento.
Las siguientes reglas CSS añaden el texto Capítulo - delante de cada título de sección <h1> y el carácter . detrás de cada párrafo de la página:
h1:before { content: “Capítulo - “; }
p:after { content: “.”; }
El contenido insertado mediante los pseudo-elementos :before y :after se tiene en cuenta en los otros pseudo-elementos :first-line y :first-letter.
Selectores de CSS 3
La futura versión CSS 3 incluye todos los selectores de CSS 2.1 y añade otras decenas de selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explicación detallada se puede encontrar en el
En primer lugar, CSS 3 añade tres nuevos selectores de atributos:
Elemento[atributo^=”valor”], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
Elemento[atributo$=”valor”], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
Elemento[atributo*=”valor”], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:
/* Selecciona todos los enlaces que apuntan a una dirección de correo electrónico */
a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a una página HTML */
a[href$=".html"] { ... }
/* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra "capítulo" */
h1[title*="capítulo"] { ... }
Otro de los nuevos selectores de CSS 3 es el “selector general de elementos hermanos”, que generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y selecciona el elemento2 que es hermano de elemento1y se encuentra detrás en el código HTML. En el selector adyacente la condición adicional era que los dos elementos debían estar uno detrás de otro en el código HTML, mientras que ahora la única condición es que uno esté detrás de otro.
Si se considera el siguiente ejemplo:
h1 + h2 { ... } /* selector adyacente */
h1 ~ h2 { ... } /* selector general de hermanos */
<h1>...</h1>
<h2>...</h2>
<p>...</p>
<div>
<h2>...</h2>
</div>
<h2>...</h2>
El primer selector (h1 + h2) sólo selecciona el primer elemento <h2> de la página, ya que es el único que cumple que es hermano de <h1> y se encuentra justo detrás en el código HTML. Por su parte, el segundo selector (h1 ~ h2) selecciona todos los elementos <h2> de la página salvo el segundo. Aunque el segundo <h2> se encuentra detrás de<h1> en el código HTML, no son elementos hermanos porque no tienen el mismo elemento padre.
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se utilizan :: en vez de: delante del nombre de cada pseudo-elemento:
::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
Elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
- elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
- elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
- elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
- elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
- elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas para realizar selecciones avanzadas:
li:nth-child(2n+1) { … } /* selecciona todos los elementos impares de una lista */
li:nth-child(2n) { … } /* selecciona todos los elementos pares de una lista */
/* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */
p:nth-child(4n+1) { ... }
p:nth-child(4n+2) { ... }
p:nth-child(4n+3) { ... }
p:nth-child(4n+4) { ... }
Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen la posición de las imágenes en función de la posición de la imagen anterior:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
Otro de los nuevos selectores que incluirá CSS 3 es :not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector:
:not(p) { … } /* selecciona todos los elementos de la página que no sean párrafos */
:not(#especial) { … } /* selecciona cualquier elemento cuyo atributo id no sea “especial” */
Aunque todavía faltan muchos años hasta que la versión CSS 3 sustituya a la actual versión CSS 2.1, los navegadores que más se preocupan por los estándares (Opera, Safari y Firefox) incluyen soporte para varios o casi todos los selectores de CSS 3.
Existe una herramienta llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.
Links de Ayuda/Practicas:
Introducción al CSS3: Parte 1 - Propiedades Básicas
Por @Dorex89
En este primer tutorial de la serie de introducción al CSS3 estudiaremos las propiedades (la inmensa cantidad de propiedades) de todo tipo para diseñar el aspecto de las páginas HTML que nos ofrece el css3 y que nos muestran recursos gráficos que no se pueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografía avanzada. Estas por supuesto son solo las propiedades básicas, mas adelante estudiaremos las propiedades avanzadas. Antes de comenzar a desglosar las propiedades vamos con lo que nos ofrecen las mismas.
Lo mejor de las propiedades CSS3:
- Propiedades shorthand para crear hojas de estilos concisas.
- La propiedad hasLayout de Internet Explorer, imprescindible para solucionar muchos errores de ese navegador.
- Limpiar floats, para trabajar correctamente con los elementos posicionados de forma flotante.
- Cómo crear elementos de la misma altura, imprescindible para el layout o estructura de las páginas.
- Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS
- Sustitución de texto por imágenes y por Flash, para utilizar cualquier tipografía en el diseño de las páginas.
- Rollovers y sprites CSS para mejorar el tiempo de respuesta de las páginas.
- Técnicas para trabajar con el texto y la tipografía.
Antes de comenzar con las propiedades, para aquellos que estén interesados a fondo en el diseño web con CSS3, les recomiendo visitar esta pagina, en la que encontraran la compatibilidad de la mayoría de los motores de búsqueda de internet con el CSS3, pero no solo con el CSS3 en general sino con cada uno de sus elementos desde lo más grande hasta lo más pequeño:
Compatibilidad CSS3 con los Navegadores
PROPIEDADES CSS3
1. SHORTHAND: permiten crear hojas de estilos mucho más concisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia la definición formal de las seispropiedades shorthand estándar disponibles para el CSS3:
- FONT: TIPOGRAFÍA
Valores: ( ( <font-style> || <font-variant> || <font-weight> )? <font-size> ( / <line-height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit
Aplicable a: Todos los elementos
Descripción: Permite indicar de forma directa todas las propiedades de la tipografía de un texto
- MARGIN: MARGEN
Valores: ( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Aplicable a:Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas
Descripción: Establece de forma directa todos los márgenes de un elemento
- PADDING: RELLENO
Valores: ( <medida> | <porcentaje> ){1, 4} | inherit
Aplicable a: Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla
Descripción: Establece de forma directa todos los rellenos de los elementos
- BORDER: ESTILO COMPLETO DE TODOS LOS BORDES
Valores: ( <border-width> || <border-color> || <border-style> ) | inherit
Aplicable a: Todos los elementos
Descripción: Establece el estilo completo de todos los bordes de los elementos
- BACKGROUND: FONDO DE UN ELEMENTO
Valores: ( <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ) | inherit
Aplicable a: Todos los elementos
Descripción: Establece todas las propiedades del fondo de un elemento
- LIST-STYLE: ESTILO DE UNA LISTA
Valores: ( <list-style-type> || <list-style-position> || <list-style-image> ) | inherit
Aplicable a: Elementos de una lista
Descripción: Propiedad que permite establecer de forma simultanea todas las opciones de una lista
Si se considera la siguiente hoja de estilos:
p {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.5em;
line-height: 1.5;
font-family: Arial, sans-serif;
}
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 7px;
}
h1 {
background-color: #FFFFFF;
background-image: url("imagenes/icono.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}
Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:
p {
font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
}
div {
margin: 5px 10px;
padding: 3px 5px 10px 7px;
}
h1 {
background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
}
2. CLEANING DE FLOATS: La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor.
La solución tradicional de este problema consiste en añadir un elemento invisible después de todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor tenga la altura suficiente. Los elementos invisibles más utilizados son <div>, <br> y <p>. La técnica de corregir los problemas ocasionados por los elementos posicionados de forma flotante se suele denominar “limpiar los float”.
Aunque añadir un elemento invisible corrige correctamente el problema, se trata de una solución poco elegante e incorrecta desde el punto de vista semántico. No tiene ningún sentido añadir un elemento vacío en el códigoHTML, sobre todo si ese elemento se utiliza exclusivamente para corregir el aspecto de los contenidos.
Afortunadamente, existe una solución alternativa para limpiar los float que no obliga a añadir nuevos elementosHTML y que además es elegante y muy sencilla. La solución consiste en utilizar la propiedad overflow de CSSsobre el elemento contenedor. Se modifica el código CSS anterior y se incluye la siguiente regla:
#contenedor {
border: thick solid #000;
overflow: hidden;
}
Ahora, el contenedor encierra correctamente a los dos elementos <div> interiores y no es necesario añadir ningún elemento adicional en el código HTML. Además del valor hidden, también es posible utilizar el valor autoobteniendo el mismo resultado.
Esta solución funciona correctamente en todas las versiones recientes de los navegadores, incluyendo Internet Explorer 7 y 8. No obstante, en las versiones anteriores de Internet Explorer es necesario añadir cualquier propiedad CSS que obligue al navegador a considerar que el elemento contenedor ocupa sitio en la página.
Técnicamente, esta estrategia se conoce como forzar a que Internet Explorer active la propiedad hasLayout sobre el elemento. A continuación se muestran algunas técnicas sencillas para conseguirlo:
/* Funciona correctamente con cualquier navegador */
#contenedor {
border: thick solid #000;
overflow: hidden;
width: 100%;
}
/* Funciona correctamente con cualquier navegador */
#contenedor {
border: thick solid #000;
overflow: hidden;
height: 1%;
}
/* La propiedad zoom no es parte del estándar CSS, por lo
que esta hoja de estilos no validaría */
#contenedor {
border: thick solid #000;
overflow: hidden;
zoom: 1;
}
/* El truco del guión bajo delante de las propiedades CSS sólo
lo interpreta correctamente la versión 6 de Internet Explorer */
#contenedor {
border: thick solid #000;
overflow: hidden;
_height: 1%;
}
De todas las soluciones anteriores, la más utilizada es la que establece la propiedad height: 1%, ya que normalmente es la que menos afecta al aspecto del elemento contenedor. Considerando todo lo anterior, a continuación se muestra la solución definitiva para limpiar los floats, que es compatible con todos los navegadores y que hace que la hoja de estilos sea válida:
#contenedor {
border: thick solid #000;
overflow: hidden;
height: 1%;
}
#izquierda {
float: left;
width: 40%;
}
#derecha {
float: right;
width: 40%;
}
3. SOMBRAS: La regla CSS 3 necesaria para crear una sombra gris muy difuminada y que se visualice en la esquina inferior derecha de un elemento:
.elemento {
box-shadow: 2px 2px 5px #999;
}
Desafortunadamente, esta propiedad sólo está disponible en los navegadores que más se preocupan por los estándares. El navegador Safari 3 incluye la propiedad con el nombre -webkit-box-shadow y Firefox 3.1 la incluye con el nombre -moz-box-shadow.
La sintaxis completa de la propiedad box-shadow es muy compleja por lo que existen infinidad de recursos oficiales y no-oficiales para tratar con la misma. A continuación se muestra su sintaxis simplificada habitual:
box-shadow: <medida> <medida> <medida>? <medida>? <color>
- La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
- La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
- La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
- La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
- El color indicado es directamente el color de la sombra que se muestra.
4. @FONT-FACE: La directiva @font-face permite describir las fuentes que utiliza una página web. Como parte de la descripción se puede indicar la dirección o URL desde la que el navegador se puede descargar la fuente utilizada si el usuario no dispone de ella. A continuación se muestra un ejemplo de uso de la directiva @font-face:
@font-face {
font-family: "Fuente muy rara";
src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf");
}
h1 {
font-family: "Fuente muy rara", sans-serif;
}
La directiva @font-face también permite definir otras propiedades de la fuente, como su formato, grosor y estilo. A continuación se muestran otros ejemplos:
@font-face {
font-family: Fontinsans;
src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: Tagesschrift;
src: url("fonts/YanoneTagesschrift.ttf") format("truetype");
}
5. SOLUCIONES FIR: Las siglas FIR (Fahrner Image Replacement) abarcan decenas de técnicas similares que tratan de resolver el problema de utilizar cualquier tipo de letra en una página web. El propósito de estas técnicas es sustituir el texto normal por una imagen que contenga el mismo texto escrito con la tipografía deseada. Si se dispone de un título de sección <h1> que se quiere mostrar con una tipografía muy especial, se puede utilizar el siguiente código HTML y CSS para sustituirlo por una imagen:
<h1><span>Lorem ipsum dolor sit amet</span></h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png") no-repeat top left;
}
h1 span {
display: none;
}
El código anterior muestra como imagen de fondo del elemento <h1> la imagen que contiene el titular escrito con la tipografía deseada. Para sustituir el texto por la imagen, simplemente se oculta el texto mediante la propiedaddisplay: none.
Aunque se trata de una de las técnicas FIR más sencillas, su principal problema es que el texto oculto mediantedisplay no lo leen correctamente los dispositivos lectores de páginas que utilizan las personas con discapacidades visuales.
La evolución de la técnica anterior consiste en reemplazar la propiedad display por text-indent:
<h1>Lorem ipsum dolor sit amet</h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png") no-repeat top left;
text-indent: -5000px;
}
Utilizando un valor negativo muy grande en la propiedad text-indent del elemento que se quiere reemplazar, el texto no se oculta pero se desplaza fuera de la pantalla. Los navegadores normales no muestran el texto y los lectores de páginas lo leen correctamente porque el texto no está oculto.
El problema de la solución anterior es que si el navegador tiene activado CSS y desactivada la carga de las imágenes, no se muestra nada. La solución consiste en volver a utilizar otro elemento <span> dentro del elemento que se quiere reemplazar:
<h1><span></span>Lorem ipsum dolor sit amet</h1>
h1 {
width: 450px;
height: 100px;
position: relative;
}
h1 span {
background: #FFF url("/imagenes/titular.png") no-repeat top left;
position: absolute;
width: 100%;
height: 100%;
}
En esta solución, la imagen se muestra por delante del texto, por lo que aunque el texto no se oculta ni se desplaza, el usuario no puede verlo. El principal problema de esta técnica es que no se pueden utilizar imágenes con transparencias.
Por último, se muestra una versión simplificada de la solución anterior que presenta los mismos problemas con las imágenes transparentes:
<h1><span>Lorem ipsum dolor sit amet</span></h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png") no-repeat top left;
}
h1 span {
position: relative;
z-index: -1;
}
Independientemente de los problemas técnicos relacionados con CSS y los navegadores, el principal problema de las técnicas FIR anteriores es que se deben crear tantas imágenes como elementos se quieran reemplazar. Aunque el proceso de creación de imágenes sea automático, es un proceso pesado cuando se quiere modificar por ejemplo el tamaño o tipo de letra utilizado.
6. SUSTITUCION DE TEXTO POR FLASH: La solución definitiva de todos los problemas de las soluciones basadas en CSS es la técnica sIFR (Scalable Inman Flash Replacement), que combina CSS, JavaScript y Flash para mostrar correctamente cualquier texto con cualquier tipografía deseada.
La sustitución requiere que en la función replaceElement() se indique el selector CSS de los elementos que se van a sustituir y una serie de opciones que se deben tener en cuenta en la sustitución. La única opción obligatoria se denomina sFlashSrc e indica la ruta completa hasta el archivo .swf que contiene la tipografía deseada. A continuación se muestra una tabla con todas las propiedades de sFIR:
sSelector
El selector del elemento o elementos que se quieren reemplazar. Se puede indicar mediante esta opción o como primer argumento de la función replaceElement(). Se pueden indicar varios selectores separándolos por comas. Los selectores soportados son los de etiqueta, clase, id y el selector de hijos.
- sColor
Color del texto indicado en formato hexadecimal, como por ejemplo #000000 o #CC0000
- sLinkColor
Color de los enlaces que puede contener el texto
- sHoverColor
Color del estado :hover de los enlaces que puede contener el texto
- sBgColor
Color de fondo del texto indicado en formato hexadecimal
• nPaddingTop ; nPaddingRight; nPaddingBottom; nPaddingLeft
Relleno superior, izquierdo, inferior e izquierdo del texto
- sCase
Transformación del texto. El valor upper transforma el texto a mayúsculas; el valor lower lo transforma a minúsculas
- sWmode
Esta opción causa problemas en algunas versiones de algunos navegadores, por lo que no se recomienda su uso. Si se le asigna el valor transparent, el Flash que sustituye al texto tiene un fondo transparente. Si se emplea el valor opaque, el Flash tiene un color de fondo sólido.
- sFlashVars
Variables adicionales que pueden modificar el aspecto del texto sustituido.
- textalign=center centra el texto de forma horizontal
- offsetleft=5 desplaza el texto hacia la derecha los píxeles indicados por el número
- offsetTop=5 desplaza el texto hacia abajo los píxeles indicados por el número
- underline=true muestra los enlaces subrayados en el estado :hover
7. ESQUINAS REDONDEADAS: La propiedad border-radius establece la misma curvatura en todas las esquinas y también se definen las propiedades border-top-right-radius,border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius para establecer la curvatura de cada esquina.
En cada propiedad se debe indicar obligatoriamente una medida y se puede indicar opcionalmente una segunda medida. Cuando se indica una sola medida, la esquina es circular y su radio es igual a la medida indicada. Cuando se indican dos medidas, la esquina es elíptica, siendo la primera medida el radio horizontal de la elipse y la segunda medida su radio vertical.
Aunque faltan muchos años hasta que se publique la versión definitiva de CSS 3, los navegadores que más se preocupan de los estándares ya incluyen soporte para crear esquinas redondeadas. El siguiente ejemplo muestra cómo crear esquinas redondeadas con los navegadores Safari y Firefox:
div {
-webkit-border-radius: 5px 10px; /* Safari */
-moz-border-radius: 5px 10px; /* Firefox */
}
La solución basada en CSS 3 es la más sencilla y la mejor técnicamente, pero hasta que todos los navegadores no incluyan soporte para CSS 3, no es posible utilizar esta técnica para crear esquinas redondeadas.
Afortunadamente, las esquinas redondeadas son uno de los recursos más solicitados por los diseñadores web y por eso se han definido decenas de técnicas para mostrarlas. Las técnicas se clasifican en:
- Soluciones basadas en CSS y que no utilizan imágenes.
- Soluciones basadas en CSS y que utilizan imágenes.
- Soluciones basadas en JavaScript.
6. Rollovers y sprites: La idea para mejorar el rendimiento de una página que descarga por ejemplo 15 imágenes consiste en crear una única imagen grande que incluya las 15 imágenes individuales y utilizar las propiedades CSS de las imágenes de fondo para
La mayoría de sitios web profesionales utilizan sprites para mostrar sus imágenes de adorno. La siguiente imagen muestra el sprite del sitio web YouTube:
Los principales inconvenientes de los sprites CSS son la poca flexibilidad que ofrece (añadir o modificar una imagen individual no es inmediato) y el esfuerzo necesario para crear el sprite.
————-
Como pudieron percatarse, no examinamos en este tutorial la propiedad y los recursos que nos ofrece CSS3 con respecto al texto, eso se debe a que el mismo tiene un tutorial reservado exclusivamente para el, en el cual además de estudiar el código, valores, etc, realizaremos divertidos diseños combinando ciertas propiedades aleatoriamente. Esperenlo!
Recursos Interesantes para trabajar con CSS3:
CSS3 Cheat Sheet Completo - Es un cheat sheet de css3 que contiene un listado con todas las propiedades, selectores, pseudo-clases, etc. Se encuentra en ingles.
CSS3 Transforms - Es una herramienta muy interesante, y diseñada en CSS3, que nos permite transformar y jugar con nuestro CSS3 y previsualizarlo. 100% recomendado.
CSS3 Color Names - En esta pagina encontraremos los nombres de los colores para aplicarlos a los diseños, sencillo pero útil para aquellos que no quieren visitar la paleta de colores a cada momento.
CSS3 Canvas Cheat Sheet -En esta pagina podremos descargar otro cheat sheet, pero específicamente para acostumbrarnos al lienzo de trabajo del CSS3. Excelente para practicas.
En cada tutorial dejare links interesantes que correspondan al tema estudiado en el mismo. Au revoir!
Aprendiendo a hacer un plugin de jQuery para rotar divs con CSS3
por Daniel R.
En este artículo les contaré mis primeros pasos en animaciones dinámicas de elementos del DOM con el uso de las transformaciones y transiciones provistas por las técnicas de CSS3, para simplificar el proceso haré un pequeño plugin para jQquery que a la final me permitirá rotar divs con un API como esta:
$( elementoDelDOM ).rotate( gradosDeRotacion , tiempo , desenvoltura );
Antes de ir con el código, explicaré un poco sobre jQuery y CSS3 para quienes no los conocen, los que ya sepan pueden reforzar sus conocimientos, llenarse de críticas construct(destruct)tivas al respecto o sencillamente saltar esas secciones e ir directo a lo que les llame la atención.
jQuery
Se trata de la librería más utilizada de JavaScript, según wikipedia 46% de los sitios web más visitados del mundo la utilizan (1, 2), está diseñada para facilitar la manipulación del DOM, el manejo de eventos, animaciones sencillas y AJAX (3), es código libre y abierto, hace uso de una sola variable global inalterable (jquery) que tiene como referencia predeterminada a la variable dolar ($).
En esencia, el API de jquery permite asignar, modificar y/o animar atributos de elementos HTML de la página en donde se ejecute, enviándole como parámetro a la variable principal (dolar $) algún identificador del elemento que deseas seleccionar (nombre del elemento, identificación o clase), y luego ejecutando métodos dentro de la librería especializados para facilitar toda clase de acciones. Por ejemplo, si tenemos el siguiente elemento en el body del documento:
<div id="mi_div"> Mi div </div>
Podríamos indicarle que desaparezca con el siguiente código:
$("#mi_div").fadeOut();
Si desean leer más detalles sobre jQuery, pueden ingresar en su documentación en línea, o revisar los tutoriales publicados en nuestro blog con temáticas relacionadas aquí.
CSS3
Tal como nos cuenta Wikipedia, CSS (Hojas de Estilo Cascada) es un lenguaje de estilos utilizado para describir las presentaciones semánticas (apariencia y formato) de un documento escrito en un lenguaje de marcado. En la web, su uso principal es para con HTML, permite predefinir colores, imágenes de fondo, bordes, alineaciones, estilos de letra y en su versión 3 hacer rotaciones, sombras difuminadas, gradientes, animaciones cortas, entre muchas otras cosas.
CSS asigna valores a los elementos en HTML según su nombre de etiqueta, id o clase, luego se procede a abrir un bloque con llaves ({}) en donde colocaremos los estilos que deseemos que tenga nuestro elemento, por ejemplo:
div #miId .miClase {
background:#FFFF66; /* Color o imagen de fondo */
font:10px sans-serif; /* Fuente del texto */
margin:10px; /* Margen externo */
padding:5px; /* Margen interno */
display:block; /* Encaje del elemento */
float:left; /* Flotabilidad del elemento */
width:150px; /* Ancho */
height:80px; /* Alto */
overflow:hidden; /* Cómo manejar los excesos */
}
En nuestro caso, solo nos interesa saber los aspectos necesarios para rotar un div. Luego de googlear un poco y revisar en la MDN (Sobre “transition”, sobre “transform”) conseguí algunos artículos que en síntesis dicen que para rotar un div con CSS, necesitamos aplicarle el siguiente estilo:
.rotated {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
En el ejemplo anterior le definimos a todos los elementos dentro del HTML con clase “rotated” una transformación de tipo rotación, con un valor de 10 grados. Por compatibilidad entre navegadores, es necesario colocar todas las líneas, indicando el mismo valor en el grado de rotación que queremos.
Para animarlo, podemos añadirle un estilo adicional que permita que, cuando el puntero esté sobre el div (:hover), este gire en un tiempo determinado (transition: all 1s), y que ejecute la transición acelerando al principio y frenando al final (ease-in-out), de esta manera:
.rotated:hover {
/* tiempo y modo de ejecución */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
/* giro */
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Para hacer esto de una manera mucho más dinámica y sencilla, necesitamos hacer uso de JavaScript, y ya que hablamos de elementos del DOM y animaciones sencillas, nada mejor que jQuery.
jQuery y CSS3
La librería jQuery posee un método para cambiar los estilos (atributo style) de los elementos del DOM (ver especificación aquí), una vez los seleccionemos con $("elemento"), podremos llamar a .css(), y pasarle el atributo que queremos cambiar seguido del valor, o bien un objeto literal con la lista de atributos y sus valores, de esta manera:
$("div .clase").css("width", "300px"); // Cambiará el ancho de los divs de clase "clase" a 300px
$("div .clase").css({
width: "300px", // Cambiará el ancho de los divs de clase "clase" a 300px
"margin-left": "100px" // Cambiará el margen izquierdo de los divs de clase "clase" a 100px
});
jQuery además permite simplificar el manejo de eventos, por ejemplo, podemos decirle que al hacer click sobre un div ($(elemento).click(), ver click en jquery) ejecute una función donde le asignemos el estilo que utilizamos para hacer giros animados en los ejemplos anteriores, como elementos del objeto literal (utilizamos comillas porque necesitan símbolos que javaScript podría malinterpretar “-“):
$("div").click(function(){
$(this).css({
"-webkit-transition": "all 1s ease-in-out",
"-moz-transition": "all 1s ease-in-out",
"-o-transition": "all 1s ease-in-out",
"-ms-transition": "all 1s ease-in-out",
"-webkit-transform": "rotate(10deg)",
"-moz-transform": "rotate(10deg)",
"-o-transform": "rotate(10deg)",
"-ms-transform": "rotate(10deg)"
});
});
Ya que sabemos como cambiar el estilo de cualquier elemento del DOM, podríamos desarrollar un método que nos permita girar elementos con valores arbitrarios de tiempo, tipo de animación y giro, e incluso colocarlo como plugin de jQuery, una vez entendamos que nos hace falta para extender a esa librería.
Sobre como hacer plugins para jQuery
La extensibilidad de jquery nos permite definir nuevos métodos dentro de ella misma declarándolos dentro del objeto “fn”, de esta manera:
jQuery.fn.miFuncion = function(alarm) { $(this).html(alarm); };
$("p").miFuncion("Hola");
Sin embargo es importante aislar esa declaración en un espacio distinto al del window, utilizando una función anónima, que además nos permitirá declarar variables privadas dentro, de esta manera:
(function($) {
// Variables privadas
var end = " y adios";
$.fn.miFuncion = function(alarm) {
$(this).html(alarm+end); // solo esta función puede acceder a la variable end
};
})(jQuery);
$("p").miFuncion("Hola");
Pero ¿Qué pasa si nuestro selector consigue más de un elemento?, para asegurarnos de que ejecute la función a todos los elementos que consiga necesitamos hacer uso del método “each” de jquery.
(function($) {
var end = " y adios";
$.fn.miFuncion = function(alarm) {
// para que funcione con todos:
this.each(function() {
$(this).html(alarm+end);
});
};
})(jQuery);
$("p").miFuncion("Hola");
Solo nos faltaría unir el marco para hacer plugins con el css que nos permite hacer la rotación.
Un sencillo plugin de rotación
En el CSS entendimos que hay varias líneas que hacen el trabajo; las transiciones necesitan de un valor en segundos “1s” y otro sobre el cómo fluirá “ease-in-out”, y las líneas que indican la rotación necesitan la cantidad de grados expresados en n”deg” (degrees); de modo que podemos hacer que el nuevo método de jquery “rotate” reciba como parámetros: los grados de rotación, el tiempo para la animación en segundos, y el orden de flugo (“in” para “ease-in”, “out” para “ease-out”, y “in-out” para “ease-in-out”). Para garantizar que estas variables son recibidas, o para evitar posibles errores, debemos colocar debajo de la declaración de la función una serie de líneas que confirmen si existen los parámetros, y en caso de no existir, asignen valores por defecto, y finalmente, según esos valores escribiríamos el nuevo estilo de los elementos que nos interese rotar:
(function($) {
// Declaramos el método rotate dentro de jQuery
// vean los parámetros: def, t, ease, callback
// callback permitirá ejecutar una función al finalizar la rotación
$.fn.rotate = function(deg,t,ease,callback) {
// verificamos si los parámetros recibieron valores válidos
// y asignamos los convenientes en caso de no tenerlos
deg = (typeof(deg) == "number")? deg : 10;
t = (typeof(t) == "number")? t : 1;
ease = (["in","out","in-out"].indexOf(ease) !== -1)?
"ease-"+ease : "";
callback = (typeof(callback) === "function")? callback : null;
// Contamos la cantidad de elementos a los que se les ejecutó el método rotate
var count = this.length;
// Procedemos a recorrer los elementos seleccionados
this.each(function() {
// Asignamos los estilos según los valores recibidos
$(this).css({
"-webkit-transition": "all "+t+"s "+ease,
"-moz-transition": "all "+t+"s "+ease,
"-o-transition": "all "+t+"s "+ease,
"-ms-transition": "all "+t+"s "+ease,
"transition": "all "+t+"s "+ease
});
$(this).css({
"-webkit-transform": "rotate("+deg+"deg)",
"-moz-transform": "rotate("+deg+"deg)",
"-o-transform": "rotate("+deg+"deg)",
"-ms-transform": "rotate("+deg+"deg)",
"transform": "rotate("+deg+"deg)"
});
// Vamos restando hasta que sepamos que es el último elemento
// Si lo es, ejecutamos en este punto a la función callback
// La cual, por comodidad, vinculará su prototipo a el de esta función
if (!--count && callback) {
setTimeout(callback.bind(this),t*1000); // t*1000 se ejecutará a penas termine la rotación
}
});
};
})(jQuery);
Con este plugin creado, y gracias a que añadimos un parámetro de “callback” que permite ejecutarse luego de terminar la rotación, podemos concatenar rotaciones una tras de otra, por ejemplo, en el siguiente ejemplo le indico a jquery que a recorra los elementos “div”, y que les indique que en el caso de que el mouse salga de ellos (mouseout) ejecute una función que primero rotará al elemento a 5 grados en un tiempo de 0.5 segundos frenando al final, luego rotará a -3 grados en un segundo frenando al principio y al final, y luego de esos 2 movimientos, rotará a cero grados en 0.5 segundos frenando al principio, de esta manera:
$("div").each(function(){
$(this).mouseout(function(){
$(this).rotate(5,0.5,"out",function(){
$(this).rotate(-3,1,"in-out",function(){
$(this).rotate(0,0.5,"in");
});
});
});
});
Así tendremos listo un pequeño plugin de jQuery para rotar divs. Le hacen falta muchas modificaciones para que pueda ser usado en proyectos a gran escala, pero les da una perspectiva de lo que se necesita.
¡Estén atentos con los próximos tutoriales aquí en los Yucazos de TecnoYucas!
No se olviden de dejar algún comentario o darle a “me gusta” ;)
Sinceramente, mis mejores deseos para todos.
