Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Qué se puede hacer con CSS (algunos trucos y otras cositas útiles)
Qué se puede hacer con CSS
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 31 | 1:48 PM
Crear rollover con CSS Sprites

El efecto rollover (deslizar encima) es el término anglosajón por el que se conoce al efecto de mover el ratón sobre un icono de una web, y este cambie a otra forma, color o icono, dando a entender que es un botón presionable.

En este tutorial, vamos a ver como realizar un rollover simple con imágenes, utilizando una técnica llamada CSS Sprites. ¿Por qué con esta técnica? Pues por varias razones:
Simplicidad: Se trata de una técnica muy simple que requiere muy poco código. Esto en la web es lo principal. Cuánto menos código, más rápido y menos tiempos de espera.
Compatibilidad: Como se utiliza con CSS 2, es compatible con la mayoría de navegadores.
Accesibilidad: No usa javascript, y se puede diseñar para ser accesible para usuarios sin esta tecnología.
Rapidez: Uno de los problemas de los rollovers con javascript era que las imágenes tardaban en cargarse. Con CSS esto no ocurre, puesto las distintas imágenes están en un mismo fichero.
Peticiones: Cada vez que una página se carga, se realiza un cierto número de peticiones de ficheros. Al unir las distintas imágenes del rollover en un sólo fichero, reducimos ese número.

1. Estructura
Antes de comenzar, tenemos que diferenciar las dos partes de nuestro código que vamos tocar:

Código HTML: La capa de información. Aquí es donde colocamos toda la información, en el cuerpo de nuestra web.
Código CSS: La capa de presentación. Esta zona se encarga de darle forma, colores y demás atributos al código HTML.
El código CSS puede estar «embebido» en una página (como en el ejemplo) o, como suele ser más común y aconsejable, en un fichero externo de extensión .css.

2. Cuerpo de la página (HTML)
En nuestro código html vamos a colocar un enlace normal y corriente, con la única diferencia que le añadiremos un #id para diferenciarlo de otros enlaces.

Quote
<a id=”rss” href="http://www.ucoz.com/index.xml"></a>

Básicamente, este será el único cambio en el código HTML, ya que lo que nos interesa es que no sea demasiado diferente a un vínculo normal y corriente.

3. Imagen del botón
Antes de continuar, vamos a definir el tamaño de nuestro botón (una unidad). En este ejemplo, el botón tendrá 150px de ancho y 50px de alto.



Duplicaremos el tamaño de la imagen, para colocar 3 imágenes más (4 unidades) de las mismas dimensiones (arriba-derecha, abajo-izquierda y abajo-derecha).

Realmente las necesarias son las dos primeras, pero para tener un ejemplo concreto hemos utilizado las cuatro. Las colocamos adyacentes en un fichero, como muestra la imagen:

4. Presentación (CSS)
Lo primero que haremos en la parte CSS es darle forma al botón. Definimos el tamaño de la imagen (1 unidad) y le asignamos propiedad de bloque (en caso contrario no cambiará el tamaño).

Por último, con la propiedad background le asignamos la imagen (4 unidades) que creamos (rss-css-sprites.png en nuestro ejemplo).

Quote
a#rss {
display:block;
width:150px;
height:50px;
background:url(rss-css-sprites.png);
}

Ahora es donde llega la parte fuerte del asunto. Utilizaremos las pseudo-clases de CSS (algo así como eventos) para realizar el efecto. ¿Qué pseudo-clases existen?
:link Un enlace en estado normal.
:hover Un enlace cuando se pasa el ratón por encima.
:active Un enlace cuando está siendo pulsado.
:visited Un enlace ya visitado (en historial).
El truco está en combinar cada uno con la unidad de la imagen correspondiente (top = arriba, bottom = abajo, left = izquierda, right = derecha):

Quote
a#rss:link { background-position: top left; }
a#rss:hover { background-position: top right!important; }
a#rss:active { background-position: bottom left!important; }
a#rss:visited { background-position: bottom right; }

Con esto lo que conseguimos es que la zona roja (en la imagen) se ruede y muestre esa parte por cada evento ocurrido.

5. Accesibilidad
Queda un pequeño contratiempo con respecto a la accesibilidad. Al principio, en enlace a href del código HTML, no pusimos ningún texto.

Lo correcto sería incluir algo para que en navegadores basados en texto o lectores de voz para invidentes (por ejemplo) les apareciera un texto alternativo del enlace (algo similar al atributo alt del tag IMG) y no un espacio vacío.

Si incluimos el texto en el enlace, nos aparecerá encima de la imagen, arruinando nuestro invento. Pero podemos añadir un text-indent:-9999px; (comentado e inactivo en nuestro ejemplo) para mover (intentar o sangrar) el texto una longitud muy grande hacia la izquierda, solucionando el problema.
El problema de esta solución, es que algunos navegadores muestran el foco activo de la imagen, dejando un resultado bastante feo.

Rafa nos menciona en los comentarios el utilizar una propiedad para ocultarlo:

Quote
a#rss { outline:none }

Una última solución, con la desventaja de tener que editar el código HTML, sería introducir el texto en una capa span con clase oculto, que se oculte con CSS mediante el display:none.

Quote
<a id="rss" href="http://www.ucoz.com/index.xml"><span class="oculto">uCoz RSS</span></a> .oculto { display:none }

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 32 | 12:05 PM
Tablas y CSS

1. Introducción:
CSS2 introduce una serie de nuevos valores para formatear Tablas desde reglas-CSS.

Esto que quizá pueda parecer que no aporta mucho en HTML dónde ya hay tags específicos para construir tablas de casi cualquier tipo (<table>, <tr>, <td>, <th> <caption>...), se convierte en una herramienta de gran ayuda por ejemplo en XML para estructurar datos tabulados.

2. Estructura de tablas
2.1 table: Define un bloque rectangular contenedor de una estructura de datos en rejilla, ordenándolos mediante filas y columnas, cuya intersección es la celda. Pueden contener además cabecera, (<caption>).
Su equivalente en HTML es <table>.

2.2 inline-table: Igual que el elemento table pero la tabla no se define a nivel de bloque, sino a nivel de línea.
Su equivalente en HTML es <table>.

2.3 table-row: Agrupa todas las celdas de una fila concreta de la tabla.
Su equivalente en HTML es <tr>.

2.4 table-column: Agrupa todas las celdas de una columna concreta de la tabla.
Su equivalente en HTML es <col>.

2.5 table-header-group: Es un grupo de filas de la tabla que se sitúa en la cabecera, por encima de cualquier otro grupo de filas de la tabla, y por debajo del título <caption>.
Su equivalente en HTML es <thead>.

2.6 table-footer-group: Es un grupo de filas de la tabla que se sitúa en el pie de la misma, por debajo de cualquier otro grupo de filas de la tabla, y por encima del título del pie de tabla <caption>.
Su equivalente en HTML es <tfoot>.

2.7 table-row-group: Define un contenedor de un número concreto de filas de la tabla. Permite definir características de presentación específicas para este grupo de filas.
Su equivalente en HTML es <tbody>.

2.8 table-column-group: Define un contenedor de un número concreto de columnas de la tabla. Permite definir características de presentación específicas para este grupo de columnas.
Su equivalente en HTML es <colgroup>.

2.9 table-cell: Define el contenedor de una celda de la tabla. Sólo se puede definir dentro de un contenedor fila-
Su equivalente en HTML es <td> <th>.

2.10 table-caption: Celda especial que define el título de la tabla. Ocupa una fila o una columna entera y puede situarse en la parte más superior o más inferior de la tabla, así como en la parte más a la derecha o más a la izquierda de la misma.
Su equivalente en HTML es <caption>.

3. Diseño de tablas:
Hay una serie de elementos interesantes a la hora de especificar el diseño de tablas desde CSS's a partir de CSS2. Las malas noticias son que no todas las versiones de los navegadores más conocidos las soportan.

3.1 table-layout: Especifica de qué manera el browser va a construir y renderizar la estructura completa de la tabla:.
Valores:
o fixed: el browser ignora el contenido de las celdas y traza las filas y columnas según anchos width y altos height especificados, o en su caso según el espacio disponible. Es un procedimiento muy rápido de hacer el "render" de la tabla.
o auto (valor por defecto): el browser calcula anchos y altos de celdas, filas y columnas según su contenido. Normalmente es un proceso iterativo que requiere varias pasadas, por lo que es un procedimiento mucho más lento de hacer el "render" de la tabla.

3.2 caption-side: Especifica la posición y alineación del título de la tabla.
Valores:
o top (valor por defecto): El título de la tabla se sitúa justo encima del contenedor de filas y columnas.
o bottom: El título de la tabla se sitúa justo encima del contenedor de filas y columnas.
o left: El título de la tabla se sitúa justo a la izquierda del contenedor de filas y columnas.
o right: El título de la tabla se sitúa justo a la derecha del contenedor de filas y columnas.

3.3 empty-cells: Cuando se utilizan bordes separados para la tabla (border-collapse: separate), esta propiedad especifica qué ha de hacer el browser con las celdas que no tienen ningún contenido, fundamentalmente si se han de pintar bordes y "background" para las mismas.
Valores:
o show (valor por defecto): Se pintarán bordes alrededor de las celdas sin contenido.
o hide: Las celdas sin contenido aparecerán como espacios en blanco sin borde alguno.
Esta propiedad sólo es aplicable para tags <td>.

3.4 border-collapse: Especifica si los bordes en la tabla están juntos o separados.
Valores:
o collapse: Es el modelo tradicional de tabla: celdas contiguas comparten el mismo borde.
o separate: Los bordes de las celdas están separados de manera que cada una tiene los suyos propios.
Esta propiedad sólo es aplicable para tags <table>.

3.5 border-spacing: Cuando se utilizan bordes separados para la tabla (border-collapse: separate), esta propiedad indica la distancia que separa los bordes de las celdas contiguas. Este espacio se rellenará con el "background" de la tabla.
Valores:
o Se especifica 1 valor: Será tanto la distancia horizontal como vertical entre celdas.
o Se especifican 2 valores El primero será la distancia horizontal entre celdas, y el segundo será la distancia vertical entre celdas.
Esta propiedad sólo es aplicable para tags <table>.

4. Ejemplos de diseño de tablas:
4.1 Formatear la Tabla mediante reglas CSS: Especifica de qué manera el browser va a construir y "renderizar" la estructura completa de la tabla:

En este primer caso vamos a mostrar como aportar formato rico a la tabla exclusivamente mediante una CSS externa: HTML sólo lo utilizaremos para estructurar los datos, quedando un código tan sencillo y limpio como el siguiente:

Quote
<table class="tbCss1">
<caption class="tb1CaptionTop"> Ventas por Trimestre</caption>
<tr class="tbHeader1">
<th colspan="3"> 1º Trim</th>
<th colspan="3"> 2º Trim</th>
<th colspan="3"> 3º Trim</th>
<th colspan="3"> 4º Trim</th>
</tr>
<tr class="tbSubHeader1">
<th colspan="3"> 1.200</th>
<th colspan="3"> 1.150</th>
<th colspan="3"> 11.320</th>
<th colspan="3"> 1.110</th>
</tr>
<tr>
<td class="tdCss1"> 400</td>
<td class="tdCss1"> 300</td>
<td class="tdCss1"> 500</td>
<td class="tdCss1"> 650</td>
<td class="tdCss1"> 375</td>
<td class="tdCss1"> 125</td>
<td class="tdCss1"> 275</td>
<td class="tdCss1"> 10.425</td>
<td class="tdCss1"> 620</td>
<td class="tdCss1"> 530</td>
<td class="tdCss1"> 370</td>
<td class="tdCss1"> 210</td>
</tr>
<caption class="tb1CaptionBottom"> Ejercicio-2007</caption>
</table>

Dónde hemos utilizado las siguientes reglas para aplicar formato a la tabla, título ( <caption>), filas y celdas:

Quote
.tbCss1 {background: #FFFFFF;color: #333377;font-size:11px;padding: 6px;margin: 3px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tb1CaptionTop {caption-side: top;color:#191970;font-weight: bold;font-size:11px;font-family: verdana,arial,helvetica,sans-serif;}
.tb1CaptionBottom {caption-side: bottom;color:#191970;font-weight: normal;font-size:11px;font-family: verdana,arial,helvetica,sans-serif;}
.tbHeader1 {background: #AAAAFF;color: #FFFFFF;font-size:11px;font-weight: bold;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tbSubHeader1 {background: #CCCCFF;color: #191970;font-size:11px;font-weight: bold;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tdCss1 {padding: 4px;}

Se han utilizado 2 títulos de página (<caption>), uno superior (tb1CaptionTop) y otro inferior (tb1CaptionBottom), que son tratados de diferente forma en los 2 browsers que lo hemos probado:
o IExplorer 6.0: Admite los 2 <caption> pero sitúa ambos títulos en la parte superior de la tabla: no soporta caption-side.
o Mozilla Firefox 2.0: Sólo admite 1 elemento <caption> y le puede situar tanto en la parte superior de la tabla como en la inferior, ya que sisoporta caption-side

4.2 Tabla con "table-layout": Especifica de qué manera el browser va a construir y "renderizar" la estructura completa de la tabla:

En este segundo caso vamos a utilizar el elemento table-layout: fixed en la clase que define la tabla para que el navegador realice automáticamente la asignación de dimensiones a las celdas, filas y columnas:

Quote
<table class="tbCss2">
<caption class="tb2CaptionTop"> Ventas por Trimestre</caption>
<tr class="tbHeader2">
<th colspan="3"> 1º Trim</th>
<th colspan="3"> 2º Trim</th>
<th colspan="3"> 3º Trim</th>
<th colspan="3"> 4º Trim</th>
</tr>
<tr class="tbSubHeader2">
<th colspan="3"> 1.200</th>
<th colspan="3"> 1.150</th>
<th colspan="3"> 11.320</th>
<th colspan="3"> 1.110</th>
</tr>
<tr>
<td class="tdCss2"> 400</td>
<td class="tdCss2"> 300</td>
<td class="tdCss2"> 500</td>
<td class="tdCss2"> 650</td>
<td class="tdCss2"> 375</td>
<td class="tdCss2"> 125</td>
<td class="tdCss2"> 275</td>
<td class="tdCss2"> 10.425</td>
<td class="tdCss2"> 620</td>
<td class="tdCss2"> 530</td>
<td class="tdCss2"> 370</td>
<td class="tdCss2"> 210</td>
</tr>
<caption class="tb2CaptionBottom"> Ejercicio-2007</caption>
</table>

Vemos que los anchos de columnas y celdas resultan diferentes (mayores) que en el caso anterior, dónde, al no haber especificado table-layout, el navegador asume el valor por defecto, table-layout: auto.

Se han utilizado las siguientes clases de estilo para aplicar formato a la tabla, título ( <caption>), filas y celdas:

Quote
.tbCss2 {table-layout: fixed;background: #EFEFFF;color: #333377;border-collapse: separate;border-spacing: 6px;border:1px solid #FF0000;font-size:11px;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tb2CaptionTop {caption-side: top;background: #EFEFFF;color:#191970;border-top:1px solid #191970;border-left:1px solid #191970;border-right:1px solid #191970;font-weight: bold;font-size:11px;font-family: verdana,arial,helvetica,sans-serif;}
.tb2CaptionBottom {caption-side: bottom;background: #EFEFFF;color:#191970;border-bottom: 1px solid #191970;border-left: 1px solid #191970;border-right: 1px solid #191970;font-style: italic;font-weight: bold;font-size:11px;font-family: verdana,arial,helvetica,sans-serif;}
.tbHeader2 {background: #0077AA;color: #FFFFFF;font-size:11px;font-weight: bold;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tbSubHeader2 {background: #CCCCCC;color: #191970;font-size:11px;font-weight: bold;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tdCss2 {background: #FFFFFF;padding: 4px;border:1px solid #191970}

4.3 Tabla con "empty-cells": Especifica de qué manera el browser va a construir y "renderizar" la estructura completa de la tabla:

Finalmente, en este tercer caso vamos a manejar el concepto de empty-cells y ver como ambos browsers lo implementan:

Quote
<table class="tbCss3">
<caption class="tb3CaptionTop"> Ventas por Trimestre</caption>
<tr class="tbHeader3">
<th colspan="3"> 1º Trim</th>
<th colspan="3"> 2º Trim</th>
<th colspan="3"> 3º Trim</th>
<th colspan="3"> 4º Trim</th>
</tr>
<tr class="tbSubHeader3">
<th colspan="3"> 1.200</th>
<th colspan="3"> 1.150</th>
<th colspan="3"> 11.320</th>
<th colspan="3"> 1.110</th>
</tr>
<tr>
<td class="tdCss3"> 400</td>
<td class="tdCss3"> 300</td>
<td class="tdCss3"> 500</td>
<td class="tdCss3"> 650</td>
<td class="tdCss3"> 375</td>
<td class="tdCss3"> 125</td>
<td class="tdCss3"> 275</td>
<td class="tdCss3"> 10.425</td>
<td class="tdCss3"> 620</td>
<td class="tdCss3"> 530</td>
<td class="tdCss3"> 370</td>
<td class="tdCss3"> 210</td>
</tr>
</table>

De nuevo vemos que los anchos de columnas y celdas resultan ostensiblemente mayores que en el primer caso por el hecho de haber especificado table-layout: fixed.

Utilizado las siguientes clases de estilo para aplicar formato a la tercera tabla de ejemplo:

Quote
.tbCss3 {table-layout: fixed;background: #89ADA1;color: #C8D3D0;border: outset 5px;border-collapse: separate;border-spacing: 18px;font-size:11px;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tb3CaptionTop {caption-side: top;background: #C8D3D0;color: #053A29;border-top:1px solid #191970;border-left:1px solid #191970;border-right:1px solid #191970;font-weight: bold;font-size:12px;font-family: verdana,arial,helvetica,sans-serif;}
.tbHeader3 {background: #FF8000;color: #FFFF77;font-size:11px;font-weight: bold;padding: 6px;border:2px groove #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tbSubHeader3 {background: #EFDCBE;color: #800000;font-size:11px;font-weight: bold;padding: 6px;border:2px ridge #C8C8F2;line-height: 1.5em;white-space: nowrap;font-family: verdana,arial,helvetica,sans-serif;}
.tdCss3 {background: #C8D3D0;color: #053A29;border: inset 3px #10AD79;empty-cells: hide;}
.tdCssB3 { border: groove 5px }

Observamos que:
o En IExplorer 6.0: no se pinta el borde de las celdas sin contenido, pero reserva el background de la misma, aunque esté vacía, es decir, no soporta del todo el elemento empty-cells.
o En Mozilla Firefox 2.0: ni se pinta el borde ni se reserva el background de las celdas sin contenido, por lo que se consigue el efecto deseado de "ausencia de celda", cuando ésta está vacía, con lo que se sisoporta perfectamente el elemento empty-cells.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 33 | 4:38 PM
Cambiar propiedades CSS con JQuery


JQuery nos ofrece varias formas de manipular nuestros CSS de forma dinámica. Lo primero que tenemos que conocer es la forma de acceder a los distintos elementos que conforman nuestra página web. Esto lo podemos hacer con el extenso juego de selectores que nos ofrece JQuery: Selectores CSS, XPath, de Formulario,... Los más utilizados y con los que nos podremos manejar en la mayoría de ocasiones son:

Elemento: T
Todos los elementos que tienen una etiqueta con el nombre T.
Ejemplo:
$("div"): Selecciona todos los elementos con la etiqueta div del documento.

ID: #miId
El elemento cuyo Id sea igual a miId.
Ejemplo:
$("#test"): Selecciona el elemento cuyo id="test", independientemente del name que este elemento pudiera tener.

Una buena práctica a la hora de definir una página web es que cada id sea único. En el caso de que hubiera más de un elemento con el mismo id, el selector devolvería el primer elemento coincidente a través de la arquitectura DOM.

Class: .miclase
Selecciona todos los elementos que tienen una clase .miclase.
Ejemplos:
$(".miclase"): Selecciona todos los elementos que tienen una clase .miclase.
$("p.miclase"): Selecciona todos los elementos p (párrafos) que tienen una clase .miclase.
$(".miclase.otraclase"): Selecciona todos los elementos que tienen una clase .miclase y .otraclase.

Descendente: E F
Selecciona todos los elementos coincidentes con F que son descendientes del elemento E
Ejemplo:
$("#contenedor p"): Selecciona todos los elementos <p> que son descendientes de un elemento cuyo id es contenedor.

Como comentaba anteriormente, existen bastantes más selectores, pero con estos y con una buena planificación de nuestro HTML nos puede ser más que suficiente. Jugando con esto y con unos cuantos métodos para CSS podemos empezar a modificar el aspecto de nuestra web dinámicamente.

css(nombre)
Devuelve el valor de la propiedad de un estilo CSS, para el primer elemento encontrado. Por ejemplo, si tuviésemos el siguiente código HTML:

Quote
<p style="font-weight: bold;">Texto de ejemplo</p>

Y la siguiente código javascript:

Quote
$(document).ready(function() {
var fuente = $("p").css("font-weight");
alert( fuente);
});

Nos mostraría un alert con el texto: "bold"

css(propiedades)
Establece los valor a las propiedades especificadas en todos los elementos coincidentes. Muy útil si deseamos establecer un número grande de propiedades. Por ejemplo, si tuviésemos el siguiente código HTML:

Quote
<div>Texto de ejemplo</div>

Y la siguiente código javascript:

Quote
$(document).ready(function() {
$("div").css({ color: "#FFFFFF", background: "#FF0000" });
});

Habríamos cambiado las propiedades de la capa, estableciendo el color de la fuente a blanco y su fondo a rojo.

css(clave,valor)
Establece un valor a las propiedad especificad en todos los elementos coincidentes. Muy parecida a la instrucción anterior. Su uso sería:

Quote
$("p").css("color","red");

height()
Obtiene la altura en píxeles del primer elemento coincidente. Por ejemplo:

Quote
$("#test1").height();


Nos devolvería la altura en píxeles del div cuyo id fuera test1.

width()
Obtiene la anchura en píxeles del primer elemento coincidente. Por ejemplo:

Quote
$("#test1").width();


Nos devolvería la anchura en píxeles del div cuyo id fuera test1.

Un ejemplo muy sencillo podría ser que al hacer click sobre un texto pudiésemos cambiar el color de fondo de la web.

Quote
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").click(function () {
alert("OK");
$("body").css("background","red");
});
});
</script>
</head>
<body>
<p>Cambiar fondo</p>
</body>
</html>

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 34 | 4:45 PM
Crear cajas de mensajes con CSS y jQuery


Haciendo uso de CSS y jQuery podemos mostrar de una manera mucho más atractiva los mensajes que deseemos mostrar al usuario de nuestro sitio o aplicación web. Lo primero que deberemos hacer es crear el CSS para nuestras cajas.

Quote
.info, .exito, .alerta, .error {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('exito.png');
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('alerta.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}


Los iconos utilizados para este ejemplo son “Knob Buttons Toolbar icons”.
El código XHTML sería, para cada uno de los mensajes, algo similar a:

Quote
<div class="info">Mensaje de información que deseamos mostrar al usuario</div>
<div class="exito">Mensaje de éxito de la operación realizada</div>
<div class="alerta">Mensaje de alerta que deseamos mostrar al usuario</div>
<div class="error">Mensaje que informa al usuario sobre el error que se ha producido</div>

Lo que nos daría un resultado similar al siguiente:

Ahora tan sólo queda añadir algún tipo de efecto con jQuery. Para poder interactuar con las cajas de mensajes de una forma genérica con jQuery, le añadiremos una clase más a cada uno de los elementos:

Quote
<div class="info mensajes">Mensaje de información que deseamos mostrar al usuario</div>
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<div class="alerta mensajes">Mensaje de alerta que deseamos mostrar al usuario</div>
<div class="error mensajes">Mensaje que informa al usuario sobre el error que se ha producido</div>


Ahora tan sólo queda darle algún efecto con jQuery. Podemos animar el mensaje, cambiarlo de color, hacerlo aparecer, etc. En este ejemplo, y creo que es una forma bastante interesante de mostrar los mensajes, la caja que muestra el mensaje aparece, permanece durante tres segundos y desaparece tras un ligero parpadeo.

El código para ello sería:

Quote
$(document).ready(function(){
setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000);
});

El código para este ejemplo sería:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mensajes2</title>
<style type="text/css">
.info, .exito, .alerta, .error {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('exito.png');
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('alerta.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000);
});
</script>
</head>
<body>
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<p>El mensaje desaparecerá¡ a los tres segundos.</p>
</body>
</html>

Lógicamente podremos cambiar el tipo de mensaje variando la primera clase del div en función del resultado de las operaciones realizadas por el usuario o por la información que deseemos suministrarle.

Adherido: 6781494.jpg (8.2 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 35 | 12:25 PM
Capas visibles e invisibles con CSS

Una capa es un contenedor en la página Web que contiene elementos de página HTML. El uso de capas en la página proporciona mayor control y flexibilidad para hacer la página dinámica. Las capas se crearon para el diseño Web con el fin de proporcionar a los diseñadores un control y una flexibilidad similares a los que tenían en el diseño tradicional para impresión.

Las capas pueden apilarse una encima de otra, ocultar unas capas y mostrar otras, o mover una capa por la pantalla con una línea de tiempo. Por ejemplo, puede haber una imagen de fondo en una capa y luego apilar encima otra capa que contenga texto. En la página también puede haber imágenes que aparecen y desaparecen de la página.

En el caso que nos corresponde, como primera instancia hay que definir las propiedades de la capa CSS. En ella también podremos poner información, imágenes, links, etc.

Quote
#pantalla {position: absolute; width: 50%;

height: 50%; background:url(imagen.gif)

no-repeat fixed center; border: 1px solid}

Una vez definida la capa debemos insertarla en nuestro documento html de la siguiente manera:

Quote
<div id="pantalla"></div>

…y colocar dos enlaces para activar y desactivar el efecto:

Quote
<a href="javascript:closeit()">Mostrar capa</a>

<a href="javascript:showit()">Esconder capa</a>

Ahora solo resta insertar el script:

Quote
<script>

var once_per_browser=0

var ns4=document.layers

var ie4=document.all

var ns6=document.getElementById&&!document.all

if (ns4)

crossobj=document.layers.pantalla

else if (ie4||ns6)

crossobj=ns6? document.getElementById("pantalla") :

document.all.pantalla

function closeit(){

if (ie4||ns6)

crossobj.style.visibility="visible"

else if (ns4)

crossobj.visibility="show"

}

function get_cookie4(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie4.length > 0) {

offset = document.cookie4.indexOf(search)

if (offset != -1) { // if cookie4 exists

offset += search.length

// set index of beginning of value

end = document.cookie4.indexOf(";", offset);

// set index of end of cookie4 value

if (end == -1)

end = document.cookie4.length;

returnvalue=unescape(document.cookie4.substring(offset, end))

}

}

return returnvalue;

}

function showornot(){

if (get_cookie4('postdisplay')==''){

showit()

document.cookie4="postdisplay=yes"

}

}

function showit(){

if (ie4||ns6)

crossobj.style.visibility="hidden"

else if (ns4)

crossobj.visibility="hide"

}

if (once_per_browser)

showornot()

else

showit()

</script>

Ver ejemplo en marcha.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 36 | 4:00 PM
CSS: Crea un menú de íconos al estilo Apple Dock

Seguramente estén familiarizados con el plugin jQuery Dock que permite a los desarrolladores crear un menú como la Apple Dock.
En el artículo de hoy, te enseñaremos cómo crear un menú similar[b] con el [b]efecto burbuja utilizando simplemente CSS.

Método 1: Sprites CSS

Utilizar sprites CSS es la forma más simple de lograr el efecto burbuja. Sólo necesitas cambiar la imagen de fondo.

Al principio, tu HTML debería lucir así:

Quote
<ul id="bubble">
<li>
<a class="icon feed" href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">Full RSS Feed</a>
</li>
<li>
<a class="icon email" href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">Feed via email</a>
</li>
<li>
<a class="icon twitter" href="http://twitter.com/prlamnguyen" title="Full RSS Feed">Follow me on Twitter</a>
</li>
<li>
<a class="icon facebook" href="http://facebook.com/duylamng" title="Full RSS Feed">I'm on Facebook</a>
</li>
<li>
<a class="icon delicious" href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Full RSS Feed">Save me</a>
</li>
<li>
<a class="icon technorati" href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Full RSS Feed">Fave me</a>
</li>
</ul>

Después de preparar la imagen para sprites, debería lucir así:

Este es el código CSS que necesitas para crear la lista de menús y el fondo de imagen por defecto de los links:

Quote
#bubble {
list-style: none;
margin: 0px;
padding: 0px;
}
#bubble li {
display: inline-block;
margin: 0px;
padding: 0px;

}

#bubble li a.icon {
background: url(images/sprites.png) no-repeat;
border: none;
display: block;
width: 128px;
height: 128px;
text-indent: -9999px;
}

Es muy importante al utilizar sprites CSS calcular las dimensiones de la imagen de fondo. Es necesario ser preciso con los píxeles. Necesitarás utilizar el CSS de abajo para cambiar la imagen de fondo de los links.

Quote
#bubble li a.feed {
background-position: -139px -12px;
}
#bubble li a.feed:hover {
background-position: -13px -12px;
}
#bubble li a.email {
background-position: -139px -149px;
}
#bubble li a.email:hover {
background-position: -13px -149px;
}
#bubble li a.twitter {
background-position: -139px -283px;
}
#bubble li a.twitter:hover {
background-position: -13px -283px;
}
#bubble li a.facebook {
background-position: -139px -422px;
}
#bubble li a.facebook:hover {
background-position: -13px -422px;
}
#bubble li a.delicious {
background-position: -139px -559px;
}
#bubble li a.delicious:hover {
background-position: -13px -559px;
}
#bubble li a.technorati {
background-position: -139px -698px;
}
#bubble li a.technorati:hover {
background-position: -13px -698px;
}

Y ese es el método 1. Muy fácil y simple. Ahora, veamos el método 2, el intercambio de imagen.

Método 2: Intercambio de imágenes

Con este método, utilizarás más HTML y menos CSS. Ya que usaremos 2 imágenes para cada link, el código HTML completo debería lucir como este:

Quote
<ul id="bubble2">
<li>
<a href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">
<img class="small" src="images/feed.png" alt="Full RSS" />
<img class="large" src="images/feed_large.png" alt="Full RSS" />
</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Feed via Emal">
<img class="small" src="images/email.png" alt="Feed via Emal" />
<img class="large" src="images/email_large.png" alt="Feed via Emal" />
</a>
</li>
<li>
<a href="http://twitter.com/prlamnguyen" title="Follow me on Twitter">
<img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
<img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
</a>
</li>
<li>
<a href="http://facebook.com/duylamng" title="I'm on Facebook">
<img class="small" src="images/facebook.png" alt="I'm on Facebook" />
<img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
</a>
</li>
<li>
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me">
<img class="small" src="images/delicious.png" alt="Save me" />
<img class="large" src="images/delicious_large.png" alt="Save me" />
</a>
</li>
<li>
<a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Fave me on Technorati">
<img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
<img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
</a>
</li>
</ul>

En este método, haremos algunos cambios. El efecto hover hará que el botón seleccionado se mantenga sobre los otros. La diferencia entre el anterior método y éste es que aquí se debe programar la altura y el ancho para los elementos <li>, ya que no queremos que la lista se mueva y cambie de tamaño cuando el mouse esté sobre ella.

El código CSS para la lista es el siguiente:

Quote
#bubble2 {
list-style: none;
margin: 20px 0px 0px;
padding: 0px;
}
#bubble2 li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
}

72px es el tamaño de las imágenes pequeñas. Puedes programarlas más grandes, pero no demasiado.

El CSS para el link es:

Quote
#bubble2 li a img {
position: relative;
border: none;
}

#bubble2 li a img.large {
display: none;
}

#bubble2 li a:hover img.small {
display: none;
z-index: 0;
}

#bubble2 li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
}

Recuerda configurar la posición de la imagen en relative, porque configuraremos z-index para las imágenes grandes y el z-index funciona sólo con posición absoluta o relativa.

Cuando el mouse pasa por encima, configuraremos el margen de la imagen en 28px porque cuando agrandamos las imágenes, queremos que la más grande tenga el mismo centro que la pequeña. Es muy importante ver el efecto zoom. La cantidad de pixel que necesitamos para el margen se calcula como
margin-top= - (altura de la imagen grande - altura de la imagen chica)/2
margin-left= - (ancho de la imagen grande - ancho de la imagen chica)/2

Finalmente, añade este código a tu archivo HTML para que el menú sea visible en IE:

Quote
<!--[if IE 7]>
<style type="text/css">
#bubble li, #bubble2 li {
display: inline;
}
</style>
<![endif]-->

Y listo.

Haz clic aquí para descargar el código ».

Adherido: 2332943.jpg (46.1 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 37 | 5:11 PM
Novedades en CSS3

Qué gran cosa es esto del css, y que buenas son las nuevas especificaciones. Ya vamos por la tercera de la saga, y las novedades de esta ultima versión son espectaculares. En este articulo trataré de resumirlas (no va a ser una clase práctica, sino una especie de resumen introductorio para que, quien quiera, indague mas en la cuestión) y explicaré brevemente en que consiste eso que llaman el CSS3.

El objetivo de CSS3 es claro: Evitar los trucos que los programadores debemos emplear a la hora de hacer nuestros diseños cotidianos. A menudo estos trucos eran dos cosas: Ingeniosos y engorrosos, lo cual emborronaba el código de las paginas haciéndolas mas complicadas. Así que bienvenidos todos a la era del control total de los elementos de nuestra web.

Estas son las características que varían en CSS3, un listado extraído de http://www.css3.info/preview/ . Resumiré también lo mas brevemente posible, en que varían dichos atributos. Eso sí, antes de que alguien se empiece a frotar las manos, aquí vienen las malas noticias: Todavía no funciona en casi ningun navegador. Incluso los cambios mas importantes, como los relativos a colores y opacidad, solo me han funcionado en firefox, safari y chrome. Nada de opera, y por supuesto, nada de explorer.

Propiedades en CSS 3

Bordes
border-color: Se añaden bordes con degradados (gradientes), pero solo para mozilla
border-image: posibilidad de crear bordes redondos y de muchas formas para imágenes, aunque también hay incompatibilidades con explorer y demás navegadores.
Border-radius: Por fin! Ya podemos hacer cajas con bordes redondeados sin usar trucos.
Box-shadow: Sombras con gradientes para las cajas. Esta echa con bordes redondeados

Fondos
background-origin & background-clip: Posiciones del fondo con respecto a las cajas, con tres modos diferentes.
Background-size: Especificación del tamaño de la imagen de fondo. En píxels o porcentaje.
Multiple backgrounds: varias imágenes de fondo en el mismo elemento. Su notación es como hasta ahora, solo que separando con comas cada imagen.

Color
Las novedades mas importantes de todo el CSS3.
colores HSL: Otra manera de especificar los colores: COLOR, SATURACIÓN Y LUMINOSIDAD.
colores HSLA: Lo mismo que el anterior, añadiendo un cuarto dato: El canal alfa (OPACIDAD).
colores RGBA: Añadir un 4º canal a la notación RGB de colores: El canal alfa (OPACIDAD).
Opacidad: Lo comentado en los dos puntos anteriores.

Texto
text-shadow: Efectos de sombra en texto, comparables a fotoshop. Bastante impresionante.
Text-overflow: Cuando el texto desborde, se ponen automáticamente tres puntos suspensivos.
Text-Wrap: Rompe palabras largas que no caben en una linea. Funciona en safari.

Interfaz de CSS 3
box-sizing: Atributo nuevo para las cajas. Por si no entendias el modelo de cajas tradicional, ahora hay otra forma de especificar las dimensiones de éstas.
Resize: Ahora las cajas pueden ser redimensionables, para mi gusto un poco tonto.
Outline: para crear marcos y bordes dobles con la separación especificada en píxels.
nav-top, nav-right, nav-bottom, nav-left

Selectores
Selectores por atributos
Modelo de caja básico

overflow-x, overflow-y

Otros
media queries
multi-column layout: Propiedades de columnas de texto dentro de la misma caja
Web fonts: Aunque es mas propia del CSS2, esta propiedad permite que nuestra web visualice correctamente un texto con una fuente que el usuario no tenga instalada en su S.O.
Speech: Ya se creo con CSS2, pero ahora se le añaden (y quitan) muchos atributos a esta propiedad que sirve para que nuestra pagina pueda ser leída por el ordenador en “voz alta”. Útil para que nuestra web no suponga una barrera para usuarios con problemas de visión.

En definitiva, CSS3 nos deja varias cosas muy buenas: la opacidad, con la que yo ya he estado jugando y se hacen verdaderas maravillas, la posibilidad de poder usar cualquier fuente en nuestros textos, la facilidad para crear cajas redondeadas y algunos efectos espectaculares como sombras y marcos. Tampoco olvidemos el avance de la propiedad Speech, que para mi es fundamental para que nuestra página sea accesible por más personas.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 38 | 5:11 PM
Resetear CSS para HTML5


¿Se acuerdan de una entrada anterior donde exponía una gran lista sobre distintos modos de resetear CSS? Mediante estas CSS Reset podíamos resetear nuestro código CSS para optimizarlo. Pues ahora existe una únicamente orientada a HTML5, la adaptación de la creada anteriormente por Eric Meyers, una de las mejores que existen, y la que la mayoría de la gente usa. A esta nueva versión se le han añadido nuevos elementos y eliminado otros, que eran inservibles para HTML5. Les muestro esta nueva forma de resetear CSS a continuación (Si tienen alguna duda, no duden en dejarla en los comentarios):

Quote
/*

html5doctor.com Reset Stylesheet

v1.4

2009-07-27

Author: Richard Clark - http://richclarkdesign.com

*/

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, dialog, figure, footer, header,

hgroup, menu, nav, section, menu,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

<a title="outline" href="http://www.cssblog.es/css-la-propiedad-outline/">outline</a>:0;

font-size:100%;

vertical-align:baselinebaseline;

background:transparent;

}

body {

line-height:1;

}

article, aside, dialog, figure, footer, header,

hgroup, nav, section {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

a {

margin:0;

padding:0;

border:0;

font-size:100%;

vertical-align:baselinebaseline;

background:transparent;

}

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted #000;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

Si lo deseas puedes descargarla desde Google Code:

Descargar CSS Reset por Eric Meyers desde Google Code


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 39 | 5:44 PM
Crear enlaces inteligentes con CSS

Muchas veces necesitamos mostrar iconos al lado de los enlaces, ayuda al lector además de que ayudan a expresar el significado del enlace si sabemos utilizarlo correctamente. Pero, ¿y si estos enlaces fueran “inteligentes” y dependiendo del contenido del enlace, pasaran a mostrar un icono distinto automáticamente? Mucho más inteligentes que si tienen el poder de ocultarse y mostrarse o mostrando al lado un icono de fondo.

Esto es lo que vamos a crear con CSS, de forma sencilla. Por ejemplo, podemos usar estos iconos:



Ahora explicaremos como funciona, después veremos varios ejemplos paso a paso:

¿Cómo funciona?
Como vemos en la imagen, la magia está en el código CSS. Se trata de Escoger la etiqueta <a> y buscar dentro del enlace lo que existe al final, en este caso, como el enlace termina en .PDF (archivo .PDF) le damos este estilo (un icono al lado, aunque puede ser lo que nosotros queramos).

Ejemplo 1 – Enlace a archivo PDF

Código HTML
Enlazamos al archivo PDF mediante un enlace:

Quote
<a href="files/holidays.pdf">View Holidays</a>

Y obtendremos algo parecido a esto:

Código CSS

Quote
a[href $='.pdf'] {

padding-right: 18px;

background: transparent url(icon_pdf.gif) no-repeat center rightright;

}

Al aplicar el estilo nos tendrá que quedar algo parecido a esto:

Listo, ya tenemos nuestro primer enlace inteligente.

Ejemplo 2 – Enlace hacia un correo

Para enlazar hacia un correo y que automáticamente CSS defina al lado del enlace el icono de un correo, debemos de seguir estos pasos:

Código HTML

Quote
<a href="mailto:billg@microsoft.com">Contact Me</a>

Código CSS

Quote
a[href ^="mailto:"] {

padding-right: 20px;

background: transparent url(icon_mail.gif) no-repeat center rightright;

}

Fijaos en los signos “^=”, esto quiere decir “empieza con”, es decir, se aplicará este estilo a todos los enlaces que empieсen por: “mailto:”.

Aquí se puede ver el resultado final:

Ejemplo 3 – Enlace a ventanas emergentes

Código HTML
Aquí usaremos la clase “popup” o el atributo “rel”:

Quote
<a class="popup" href="help.html">Help Page</a>

Código CSS
Aplicamos el nombre de la clase al código CSS:

Quote
a[class ="popup"] {

padding-right: 18px;

background: transparent url(icon_popup.gif) no-repeat center rightright;

}

Esta regla funcionará para todos los enlaces que tengan la clase =”popup”.

Aquí podemos ver el resultado final:

Encontrando un valor entre muchos

Observad esta clase en el código HTML:

Código HTML

Quote
<a class="popup specialstyle" href="help.html">View Help</a>

Se encuentran valores separados, ¿verdad?. Ahora debemos utilizar otra regla para identificar este enlace. Fijaos en el siguiente código CSS:

Código CSS

Quote
a[class ~="popup"] {

padding-right: 18px;

background: transparent url(icon_popup.gif) no-repeat center rightright;

}

Con estos signos “~=”, si existen múltiples valores en una clase, se buscará el que esté definido entre el código CSS descrito anteriormente. Si se encuentra, aparecerá al lado del enlace el icono que hayamos definido (en el ejemplo es un icono, pero puede ser, por ejemplo, que la fuente del enlace se convierta en negrita).

Más ejemplos
En Iconize podremos ver más ejemplos con varios tipos de enlaces.

Problemas con IE 6
Para variar, en IE 6 este hack no funciona, por lo tanto deberemos hacer uso de JQuery. Añade esto en tu documento (modifica según los tipos de enlaces que hayas puesto, puede que no sean los mismos que los del ejemplo):

Quote
$(document).ready(function(){
$("a[@href$=pdf]").addClass("pdf");
$("a[@href$=zip]").addClass("zip");
$("a[@href$=psd]").addClass("psd");
});

Ejemplo de su funcionamiento
Podemos descargar aquí todos los ejemplo.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 40 | 6:28 PM
Solución a 10 propiedades CSS no compatibles con IE6


Cuando creas un sitio web o un blog, muchas veces nos fijamos en que Internet Explorer 6 no soporta algunas propiedades que hemos aplicado, mientras que otros navegadores sí. Esto puede ser un asunto muy engorroso para el desarrollador, se empieza a poner nervioso sin encontrar la solución a su fallo.
En esta entrada recopilaré algunas de las propiedades que no pueden implementarse correctamente en Internet Explorer 6 (dado que no son compatibles) e iré indicando sus respectivas soluciones.

I. Bordes redondeados
Podemos usar un archivo .HTC, pero para ello debemos asignar el correcto MIME Type para htc behavior en tu servidor. Es muy importante realizar este paso. A continuación se muestra como hacerlo:

1. Ve a tu panel y haz click en un enlace llamado MIME Types Link.
2. Debajo de MIME Type, añade text/x-component.
3. Debajo de las extensiones, añade htc.
4. Reinicia el servidor web Apache.

Para mas detalles de cómo añadir MIME Type visita el soporte de Microsoft.

Todo lo que necesitas hacer para aplicar bordes redondeados en IE6 es descargar el HTC desde HTMLremix o un enlace alternativo e incluir el siguiente código en tu archivo CSS:

Quote
.div_class_name{
behavior:url(border-radius.htc);
}

Alternativa en Javascript: JQuery Corner es una alternativa en Javascript que te permitirá crear bordes redondeados compatibles en todos los navegadores.

II. El popular fallo de la transparencia PNG
Muchos diseñadores deben utilizar transparencia en sus proyectos, ¿por qué limitarla? Existen muchos recursos con los que podemos solucionar este error. Os mostraré unos cuantos:

Aplicando la propiedad filter (de Microsoft):

Quote
.class_name{
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
}

Alternativa HTC: Si la solución anterior no te funciona, puedes probar esta: HTC.

Si necesitas soporte en la propiedad background-position, ve a: DD_belated.

La solución que recomiendo es usar un .gif en vez de PNG o un PNG-8.

III. Opacidad
Este hack es mucho más sencillo de aplicar para que la opacidad funcione en Internet Explorer. Aplica este código donde deseas que funcione la opacidad:

Quote
.opacity_div {
filter: alpha(opacity = 50);
}

IV. Posición Fixed
Todos los navegadores soportan la propiedad “fixed” pero IE 6 no. Os mostraremos varias soluciones para arreglar este fallo. Copia y pega este código donde desees que funcione la propiedad “fixed”:

Quote
* html .fixed_div{
position: absolute; /* position fixed para IE6 */
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

Solo cambia los valores top (104) y left (15) por la posición que quieras darle a tu elemento.

El problema de esto es, que al mover la barra de desplazamiento, nos va a tirones, esto lo podemos arreglar insertando este código:

Quote
* html {
background-image: url(image.jpg);
}

Todo lo que necesitas es una imagen de 1px por 1px. ¡Suena chapuza pero debería funcionar!

V. Min-width y Max-width
Para hacer que funcione la propiedad min-width, podemos probar con esto:

Quote
.div_miclase{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}


Para la propiedad max-width:

Quote
.div_miclase{
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
}

Alternativa en Javascript: Se muestra una alternativa a la solución anterior: JQminmax es un plugin que te permitirá definir los valores máximos y mínimos para la altura y anchura.

VI. Hover para elementos no anchor
Desafortunadamente IE6 solo soporta :hover para etiquetas con anchor. Esto significa que los submenús basados en CSS no funcionarán en IE6. CSSHover.htc es la mejor solución en estos casos. Puedes descargar el archivo desde xs4all.nl. El código CSS a aplicar para que funcione es este:

Quote
body {
behavior: url("csshover3.htc");
}

Como dije en el hack número 2 (transparencia PNG) no olvides definir el correcto MIME Type para htc behavior en tu servidor, esto es fundamental.

VII. Min-height y Max-height

Min-height:
Aplicamos este código (podría no considerarse un hack ya que utiliza CSS válido):

Quote
.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}

Max-height:

Quote
.div_class_name{
height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
}

VIII. Escalado bicúbico para imágenes
Una línea arregla todo este fallo.

Quote
img {
-ms-interpolation-mode: bicubic;
}

IX. Text-indent negativo para input button
El valor text-indent normalmente es utilizado para esconder valores de texto dentro de los botones, por lo que podemos usar imágenes de fondo para mostrar el texto del botón. IE6 no soporta la propiedad text-indent en los botones así que debemos usar este código CSS:

Quote
input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/button_image.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}

X. Text-shadow
Este filtro para la propiedad text-shadow es uno de los filtros más usados en IE:

Quote
.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}

¡Eso es todo!
smile smile smile


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 41 | 11:50 AM
Sticky Footer con CSS


En esta entrada aprenderemos a crear un pie de página que siempre se mueve hacia donde nosotros estamos, es decir, que quede “pegado” a la barra de navegación.

Bastante útil para mostrar información que siempre queremos que se visualice, ya que creemos que es información importante o que el lector debería leerla.

El código CSS sería así:

Quote
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* el margin del bottom debe ser el mismo valor que el alto del footer pero en negativo */
}
.footer, .push {
height: 142px; /* .push debe ser el mismo alto que .footer */
}

/*

Sticky Footer by Ryan Fait

http://ryanfait.com/

*/

El código HTML:

Quote
<div class="wrapper">

<div class="header">
<h1>CSS Sticky Footer</h1>
</div>

<h2>El título del pie de página</h2>
<p>El texto del pie de página</p>
<h2>El título de pie de página</h2>

<p><q>El texto de pie de página</q></p>
<p></p>

<div class="push"></div>
</div>
<div class="footer">
<p> Texto alternativo </p>
</div>

Recomiendo usar el pie de página para indicar las secciones de Contacto, Información suscripción a feed y otras que informarán al lector acerca de la web.

Podemos ver un ejemplo de su funcionamiento. (Si tienes una resolución muy alta deberás redimensionar la ventana del navegador hasta que se vea la barra de scroll vertical.)


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 42 | 1:26 PM
Fixed Footer Backgrounds con CSS definitivo


Tras una entrada en la que indicamos como crear un footer de fondo que quedase pegado al bottom de la ventana (ver el post anterior), puede haber que el truco no funcione bien. Esto se debe a que este hack CSS es muy antiguo, por eso algunos navegadores actuales no pueden interpretarlo correctamente.

Por eso hemos querido actualizar dicho hack y ahora os ofrecemos una versión mucho más moderna, compatible con todos los navegadores actuales.

Para crear una imagen que quede “pegada” al bottom de la ventana, debemos seguir estos pasos:

HTML
Añadir este código HTML a nuestro documento:

Quote
<div class="headwrap">
<!--Tu contenido-->
<div class="container"></div>
<!--Fin del contenido-->
</div>

CSS
En la etiqueta del cuerpo usaremos una imagen fixed y repetida horizontalmente, posicionada en el bottom.

Quote
body {
margin: 0;
padding: 0;
background: #005094 url(footer_bg.jpg) fixed repeat-x left bottombottom;
width: 100%;
min-width:970px;/*--Fixes Background Bug--*/
}

Después añadiremos nuestro fondo de la cabecera en un div:

Quote
.headwrap {
background: url(body_bg.jpg) no-repeat center top;
float: left;
width: 100%;
}

Estandarización

  • XHTML 1.0 Transitional válido (1 error por haber olvidado crear una etiqueta alt, nada más).
  • CSS 2.1 válido.

    Ejemplo
    Podemos ver un ejemplo de su funcionamiento.

    Probablemente haya otras maneras de conseguir este efecto, si lo sabes, dínos la tuya.

    ACTUALIZACIÓN: Deambulante nos cuenta su forma de hacer un footer fixed con CSS:

    Primero definir el #container de la siguiente forma:

    Quote
    #container {
    width:100%;
    margin:0;
    min-height:100%;
    background:#E3D9C6;
    }
    /* IE Hack*/
    * html #container {height:100%;}

    Luego meter todo el contenido de su web en esa gran div, y luego del cierre de la misma agregar la div #footer:

    Quote
    #footer {
    position:relative;
    height:40px;
    margin:-40px auto 0;
    }

    Como verán, la página les quedaría de un height de 100% + 40px, pero al asignarle un margen negativo al footer, el height final sería de 100% + 40px – 40px, logrando el efecto esperado. Luego, a la div footer le definen el background que quieran y además, le pueden agregar texto sin problemas.

    Se puede ver un ejemplo de la técnica de Deambulante en tikalcerámica.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 43 | 4:46 PM
    Selectores de atributo, ¿Todavía nos los utilizas?

    Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.

    Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

    Selectores por atributos en CSS2 (no funcionan en ie6)

    etiqueta[atributo]: Los estilos se aplicarán a todas las etiquetas que tengan ese atributo.

    Quote
    <!--HTML-->
    <abbr title="Cascading Style Sheets">CSS</abbr>
    <!--CSS-->
    abbr[title] {color: #666;border-bottom: 1px dotted #666;}

    etiqueta[atributo=valor]: Se aplicará a los estilos de todos las etiquetas que tengan ese atributo con ese valor.

    Quote
    <!--HTML-->
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" />
    <input type="submit" value="Enviar" />
    <!--CSS-->
    input[type="text"] {width: 200px;}

    etiqueta[atributo~=valor]: El estilo se aplicará a las etiquetas que tengan ese atributo y que uno de sus valores separados por espacios sea el valor:

    Quote
    <!--HTML-->
    <a href="#" title="Abre PDF ">Descargar<a>
    <a href="#" title="descargar">El selector de atributo no se aplicará en este enlace</a>
    <!--CSS-->
    a[title~=PDF]{background:url(img/pdf.gif) no-repeat center right}

    etiqueta[atributo|=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que sea igual a valor o a valor seguido de un guion. Este tipo de selector es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

    Quote
    <!--HTML-->
    <span lang="en">Windows</span>
    <!--CSS-->
    *[lang|="es"] { color : red }

    Selectores de atributos en CSS3 (no funcionan en ie6)

    Los navegadores Standard, ya incluyen soporte para varios o casi todos los selectores de CSS3, por lo tanto los selectores que veremos a continuación funcionaran correctamente en Opera, Safari, firefox y Chrome. Según la Microsoft Developer Network de Microsoft, estos selectores son compatibles en Internet Explorer 7 y 8.
    A este respecto, existe una herramienta muy útil llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.

    elemento[atributo^="valor"]: Se seleccionan todos los elementos que tienen este atributo y cuyo valor comienza por la cadena de texto indicada.

    Quote
    <!--HTML-->
    <a href="http://www.circulodemaquetadores.com/" >este enlace tendrá un color gris</a>
    <a href="#" >El selector de atributo no se aplicará en este enlace </a>
    <!--CSS-->
    a[href^=http://] {color:#ccc}

    elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. Este selector es muy útil para agregar un icono diferente al lado de cada tipo de archivo que tu sitio web enlace. De este modo, los usuarios de tu sitio sabrán cuándo obtendrá una imagen, un archivo PDF o un documento de Word, aumentando así la usabilidad de tu web.

    Quote
    /*CSS*/
    a[href$=".jpg"] {background: url(jpeg.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
    a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
    a[href$=".doc"] {background: url(word.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
    a[href$=".swf"] {background: url(flash.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}

    elemento[atributo*="valor"]: Se aplica a todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.

    Quote
    <!--HTML-->
    <p title="home">El selector de atributo no se aplicará en este párrafo </p>
    <p title="contact">Este párrafo tendrá un tamaño de fuente de 1.2em y negrita</p>
    <p title="house"> El selector de atributo no se aplicará en este párrafo</p>
    <!--CSS-->
    p[title*="ont"] {font-size:1.2em; font-weight:bold}

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 44 | 12:33 PM
    CSS: Cómo utilizar caracteres escapados en tu código

    Una "secuencia de caracteres escapados" se le llama a una secuencia de caracteres utilizada para representar de forma colectiva un carácter diferente.

    Independientemente de dónde aparecen, los valores de string en el CSS se comportan de manera similar. Lo más importante para recordar acerca de ellos es que no son HTML.

    Esto significa, por ejemplo, que la inserción de llaves, sin escaparlos como referencias a entidades HTML (<y>) es perfectamente legal. En otras palabras, la regla:

    Quote
    #example:before { content: "3 <5"; }

    Resultará en un pseudo-elemento cuyo contenido son los cinco caracteres (incluyendo espacios) y no una etiqueta HTML de comienzo rota. De forma similar, esta regla:

    Quote
    #example:before { content: "<"; }

    Resulta en un pseudo-elemento cuyo contenido son los cuatro caracteres < y no un ícono de "menor a". Esto significa que el carácter < y el & no son tratados de forma especial por los analizadores de strings CSS, a pesar de que sean caracteres con significado especial en lenguajes derivados de SGML como el HTML y el XML.

    Dentro de los strings CSS, el único carácter con sentido especial es la barra (\). Este carácter delimita el comienzo de una secuencia de escape, de forma bastante similar a lo que el ampersand (&) hace en el código HTML.

    Las secuencias de escape son útiles porque permiten a los autores de hojas de estilo representar los caracteres que normalmente serían ignorados o interpretados de manera diferente por las reglas tradicionales de análisis de CSS. El ejemplo más evidente de esto es la representación de una barra invertida en un string CSS. Al principio, podrías pensar que la siguiente regla CSS produciría una barra invertida al comienzo de cada párrafo, pero estarías equivocado.

    Quote
    p:before { content: "\"; }

    Cuando un analizador CSS lee la declaración en esta regla, considera que la barra invertida es el comienzo de una secuencia de escape, por lo que lo ignora. A continuación, se encuentra con una cita doble y dado que este carácter no es un componente legal en una secuencia de escape, lo reconoce como el final de la cadena de valor y regresa. El resultado es una cadena vacía, sin barra invertida: " ".

    Para obtener la aparición de una barra invertida, por lo tanto, necesitamos "escapar" de ella, o "deshacer" su significado especial. Esto es bastante simple. Nos limitamos a anteponer la barra invertida con otra, como esta:

    Quote
    p:before { content: "\\"; }

    Esta vez, cuando un analizador CSS lee la declaración en la norma, se encuentra con la primera barra diagonal, cambia a su "modo de secuencia de escape", encuentra una barra invertida (la segunda que escribimos) como parte del valor del string en análisis, y luego encuentra el final del valor por medio de las comillas. El resultado es lo que buscábamos originalmente, y el valor que devuelve el analizador de CSS es una barra invertida: "\". Tengan en cuenta que el CSS no hace distinción entre cadenas de comillas simples o dobles, por lo que en cualquier caso, dos barras invertidas son necesarias en el código para dar salida a una.

    Una situación similar ocurre si se desea producir una cita doble dentro de una cadena entre comillas dobles. En lugar de escribir """, deberías escribir" \ ""; para decirle al analizador CSS que trate a la segunda cita como parte de un valor en lugar de cómo si fuera el delimitador del final del valor. Como alternativa, puedes utilizar comillas sencillas como el delimitador del string (contenido:'"';).

    Después de la barra invertida de partida, solamente los dígitos hexadecimales (números del 0 al 9 y las letras A a la F) pueden aparecer dentro de una secuencia de escape. En las secuencias de escape, estas cifras siempre son referencia a puntos de código Unicode, independientemente del conjunto de caracteres utilizados en la hoja de estilo en sí. Como resultado, es posible representar los caracteres de manera uniforme en una hoja de estilo que no son posibles de incrustar directamente dentro de la hoja de estilo en sí.

    Los caracteres acentuados (como la "E" en éste o café) son un ejemplo de una clase de caracteres a los que habría que darle escape en una cadena de CSS si la hoja de estilos estuviera codificada en formato ASCII en lugar de, por ejemplo, UTF-8.

    Una aplicación útil para esto es integrar saltos de línea en el contenido generado. El punto de código Unicode para el carácter de nueva línea es U+00.000 A. En una cadena de CSS, esto se puede escribir como \00000A. De una manera similar a la que la forma hexagonal de un triplete para los valores de color se puede acortar, las secuencias de escape también se pueden acortar quitando los ceros a la izquierda desde el punto de código, así que otra manera de escribir una nueva línea es \A. He aquí una regla CSS que separa las dos palabras "Hello" y "world" con una nueva línea, colocando cada una en su propia línea.

    Quote
    #example:before { content: "Hello\Aworld."; }

    Algo a tener cuidado al usar las secuencias de escape en strings de CSS es poner fin a la secuencia de escape en el que se proponen. Observen lo que ocurre si nuestro texto "Hello world" ha cambiado a "Hello boy".

    Quote
    #example:before { content: "Hello\Aboy."; }

    Ahora, en lugar de una nueva línea (punto de código \A), nuestra secuencia de escape es una marca de citación de doble ángulo que apunte a la izquierda, o (punto de código \ AB). Nuestro contenido generado ahora dice "Hello « Oy". Esto sucede porque la "B" en el "boy"se interpreta como un dígito hexadecimal. La secuencia de escape termina en el siguiente carácter, la "O", ya que la letra no es también como un dígito.

    De forma explícita, se puede concluir una secuencia de escape en una de dos maneras. En primer lugar, se puede especificar la secuencia en su totalidad utilizando los seis dígitos hexadecimales (incluyendo los ceros iniciales, si los hay). En segundo lugar, puedes añadir un espacio. Las dos reglas CSS siguientes, por lo tanto son equivalentes:

    Quote
    #example:before { content: "Hello\00000Aboy."; }
    #example:before { content: "Hello\A boy."; }

    Sabiendo esto, ahora podemos dividir nuestro ejemplo anterior de la imagen a través de dos líneas justo donde queremos. Presten mucha atención a la adición del espacio en blanco en la declaración white-space: pre;.

    Ya que estamos generando espacios en blanco y en la mayoría de las situaciones todos los espacios en blanco en HTML se acoplan en un único espacio, la declaración de white-space es necesaria para interpretar literalmente el salto de línea (como si todo el contenido se generará dentro de un elemento <pre>).

    Quote
    img[title]:before {
    content: attr(title) "\AImage retrieved from"
    attr(src);
    white-space: pre;
    display: block;
    }


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 45 | 1:13 PM
    Rosemary: Un filtro que modifica y expande tu CSS

    Todo el mundo tiene una queja sobre el CSS y sobre la compatibilidad de los navegadores. Esto es algo que Rosemary busca solucionar.

    Rosemary es un sistema de modificación basado en un filtro open-source modular para archivos CSS, o comúnmente reconocido como OSMCFBMS4CSS, una sigla nada sintética.

    Tus archivos CSS se ejecutan a través de una serie de filtros que modifican uno tras otro. Estos filtros se pueden ser activados o desactivados, reorganizados, o todos ellos deshabilitados completamente para darle salida en bruto. Proporciona un contenedor CSS escalable que puedes seguir utilizando sin importar qué versión de CSS sea soportada (o no soportada).

    Cualquier persona con algunos conocimientos de PHP tiene la capacidad de crear un filtro para su uso con Rosemary. La combinación de filtros en diferentes arreglos brindará resultados diversos. Tanto desarrolladores como diseñadores se beneficiarán de la facilidad de personalización que Rosemary proporciona. Los filtros pueden permitir configuraciones muy técnicas para los desarrolladores o ser tan simples como 1-2-3.

    Un filtro es un paquete independiente de código que modifica el CSS o te da nuevas habilidades al escribir CSS. Un ejemplo de esto es el filtro del navegador. El filtro del navegador te da nuevas capacidades en CSS por escrito para definir ciertos bloques o propiedades como específicas del navegador. El filtro eliminará todos los bloques o las propiedades etiquetadas como"IE" si el usuario está ejecutando Firefox. Hay también otros filtros, como el filtro del compresor, que no te dan ninguna nueva capacidad, sino que simplemente realizan una acción. En este caso, el filtro del compresor elimina todos los espacios en blanco y saltos de línea en tiempo real, así puedes editar el código limpio y enviar un archivo comprimido pequeño para el usuario.

    Algunas de las razones de la genialidad de Rosemary:
    Versiones: Los filtros son aislados en diferentes carpetas y actúan de forma independiente. Si un nuevo navegador sale a la luz o el CSS cambia, puedes descargar una versión nueva de un filtro, lo mismo sucede si se arregla algún bug o algún requisito de una propiedad.
    Open Source: Están diseñados para ser un proyecto de comunidad. Cualquiera que tenga algo de experiencia en codificación puede crear filtros que satisfagan sus necesidades.
    Simple y ligero: El sistema no podría ser más simple. Un archivo .htaccess para empujar tu CSS a través del filtro, un archivo para definir qué filtros deseas usar y el paquete Rosemary dónde decides qué filtros deseas.
    Nunca está desactualizado: Esto tiene relación con la posibilidad de darle versiones a tus filtros. Cuando algo en la web cambia de repente, esto se puede adaptar como cualquier otro plugin.

    Han creado un pequeño paquete de filtros sólo para comenzar. Hay algunas tareas pendientes y correcciones de errores posibles en espera en algunos de estos filtros así que siéntanse libres para enviar sus comentarios y editar algunos archivos. Los filtros existentes son: Browser, Compressor, Inheritance, Reset, StripComments, Variables. Hay más documentación, ejemplos, y un área de prueba en el archivo zip adjunto para que jueguen con ellos.

    Si están buscando algunas ideas, aquí hay algunas:
    Agrupamiento: Permitir la anidación orientada a objetos de selectores a través de múltiples niveles.
    Grupos Selector: Esto funciona muy similar a lo de anidación, pero es un enfoque un poco diferente. Esto le daría la capacidad de hacer: html body .myDiv [h1,h2,h3,h4,h5] en lugar de: html body .myDiv h1, html body .myDiv h2, html body .myDiv h3, html body .myDiv h4, html body .myDiv h5
    Filtro de paquetes: Algunas personas quieren aprovechar todas las funcionalidades y otras sólo quieren instalar y listo. Paquetes distintos de filtros como "Object Oriented Dev Pack" o "7 Filter Designer Pack", harán de Rosemary una poderosa herramienta para cualquier tipo de usuario, de aficionados a expertos.
    Anchura / altura completa: Mucha gente no entiende el modelo de caja. Si digo que es 500px de ancho con 20px de relleno y 5px de margen, ¿Por qué es más de 500px de ancho? Un buen filtro para los diseñadores sería de dos nuevas propiedades llamadas "de ancho completo" y "de altura completa." Se podría escribir la propiedad a ser 'height' = 'full-width' - 'padding'-'border'. Lo mismo para la altura.

    Denle la vuelta y vean a qué llegan.
    Descarga Rosemary.zip

    Este Nuevo filtro simula "Mixins," un tipo diferente de herencia. Utiliza clases, IDs y selectores como variables en cualquier parte de tu hoja de estilos.
    Download Mixins Filter

    Este filtro te permite incluir archivos CSS pre-procesados en uno.
    Descarga Include Filter

    Snippet de ejemplo usando el filtro de Variables:

    Quote
    define red: #ff0000;
    define full wide: "600px";

    #myDiv {
    /* Color will be red */
    color: @red;
    /* Width will be `"600px"` */
    width: @full wide;
    }

    define red: #0000ff;

    #myDiv2{
    /* Color will be blue */
    color: @red;
    }

    Snippet de ejemplo usando el filtro de Navegador:

    Quote
    ~!ie #myDiv{
    /** This block only appears for NON-IE browsers **/
    }

    ~gecko #myDiv{
    /** This block only appears for Gecko-type browsers **/
    }

    ~firefox3 #myDiv{
    /** This block only appears for Firefox3.0 browsers **/
    }

    #myDiv{
    /** Can be applied to properties inside blocks **/
    ~ie height: 100%;
    ~!ie height: 500px;
    }

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Qué se puede hacer con CSS (algunos trucos y otras cositas útiles)
    Búscar: