tecnicalia.com

Los media type especifican el soporte al cual apunta la hoja de estilos definida: pantalla (screen), papel (print), móviles (handheld), etc. Algunas propiedades CSS están diseñadas para medios específicos (page-break-after y page-break-before se usan para media="print" por ejemplo), y en otros casos propiedades son compartidos por diferentes medios, pero usan diferentes unidades (pixel para pantalla, centímetros para papel).

Usualmente se especifican los medios al cual apuntan las hojas de estilos como atributo de la etiqueta <link />, de la siguiente forma:

<link href="estilos/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="estilos/print.css" rel="stylesheet" type="text/css" media="print" />

Sin embargo existen otros 2 métodos, los cuales pueden ser utilizados dentros mismo de las hojas de estilos. El segundo mediante @import:

@import url("sintetizado.css") aural;

Y el tercero, a través de la regla @media:

@media print {
     body { font-size: 14pt }
}

Con esta regla, podemos definir dentro de nuestras hojas de estilos las propiedades y valores para cada medio, sin necesidad de linkear otras hojas de estilo externas:

@media screen {  
     body {
          color: #666;
          font-size: 12px;
          padding: 15px 0;
     }
}
@media print {  
     body {
          background-color: #fff
          color: #000;
          padding: 1cm;
     }
}

Para entregar información más completa, todos los medios disponibles en CSS 2 son:

all

todos los medios

aural

para sintetizadores de voz

braille

para dispositivos táctiles que usan braille

embossed

utilizada para impresoras para braille

handheld

dispositivvos móviles

print

material impreso

projection

proyectores o impresores de transparencias

screen

pantallas en color en general

tty

medios con caracter en grilla, como teletipos, terminales o dispositivos móviles con capacidad limitada. Al tener nula resoución, no se debe usar la unidad de pixeles.

tv

dispositivos de televisión (baja resolución)

Link:

• Media types

Un tip precoz es un método tan corto y rápido, que casi que no es un artículo en sí. Los artículos son más bien extensos, donde explico paso-por-paso alguna técnica propuesta. En esta ocasión es casi como un twitter-artículo. La presente técnica la conozco pero no sé de dónde la saqué, ya que por más que busco en la web no encuentro documentación alguna al respecto. No sé ni cómo se llama, así que la incluí dentro de los selectores contextuales, ya que se comporta respetando los atributos adyacentes.

Veamos la siguiente situación: tengo una etiqueta con una class="destacado" donde lo que hace es poner rojo el color del texto:

.destacado {
     color: red;
}

<blockquote class="destacado">
     Lorem ipsum dolor sit amet.
</blockquote>

Esa class la uso en varias otras etiquetas, pero hay una que por X motivo tiene un id="unico", y necesito que esa etiqueta tenga un tamaño de fuente mayor. Lo normal sería pensar en crear otra class que tenga color rojo y font-size deseado. Otra solución es crear una class con sólo el nuevo font-size y aplicarlo junto a la class="destacado" ya existente. Pero otra solución es utilizar el id="unico" junto a la class="destacado" ya declarados para ello, de la siguiente manera:

#unico.destacado {
     font-size: 3em;
}

<blockquote id="unico" class="destacado">
     Amet sit dolor ipsum lorem.
</blockquote>

Como .destacado ya está declarado para poner color rojo al texto, sólo basta agregar el nuevo tamaño de texto.

Ahora, hay otra situación. Qué pasa si, por esas cosas de la vida, tengo dos classes en una misma etiqueta:

<blockquote class="destacado menor">
     Bla ble bli blo blu.
</blockquote>

Y quiero que el texto sea rojo (ya declarado en .destacado) pero con un font-size menor. De la misma forma anterior:

.destacado.menor {
     font-size: 0.5em;
}

Y… si por esos accidentes raros de la vida profesional te tocara un elemento con 1 id y 2 classes:

<blockquote id="unico" class="destacado mayor">
     Cla cle cli clo clu.
</blockquote>

Y quieres también darle estilo pero sólo cuando esté dado esa situación… supones bien, de la siguiente manera:

#unico.destacado.mayor {
     font-size: 6em;
}

Ver todos los ejemplos juntos

Me da gusto esta vez de anunciar que esto funciona en IE6… por lo tanto, los otros browsers buenos también lo aceptan.

Muchas han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class="clearfix" y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema.

(more…)

Luego del anterior artículo develando cómo se realiza el efecto Parallax con CSS, surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar esa frustración que surgió en los comentarios, me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de 2monos), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en movimiento horizontal mediante anclas; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools.

(more…)

El efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad a través de capas, utlizando principalmente CSS. Con esto podemos simular un pseudo-3D dentro de un escenario. Esta técnica es prácticamente la misma utilizada en los juegos 2D donde el personaje se mueve por su mundo (Sonic, Mario, etc) y el fondo se mueve en diferentes velocidades, simulando profundidad.

Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio. Otro punto importante es que lo más probable necesiten hacerlo con PNG transparente, lo que hace que IE6 sea excluído (salvo utilicen algun buen filtro de PNG para él). Un par de gradiosos ejemplos lo encontramos en el sitio de Silverback y de We all hate quick books.

En este artículo les mostraré cómo se realiza, y lo más probable es que se hagan la misma pregunta que yo me hice: ¿porqué #&œ¥Ω no se me ocurrió a mí antes?

Parallax no es muy amigable, ya que a primera vista no se nota. Se necesita mover la ventana del browser para recién notar el efecto. Primero les presento el ejemplo final, para que puedan apreciar lo que haremos. Si modifican el tamaño de su ventana podrán notar de qué les estoy hablando

Ver ejemplo final

Primero necesitamos de las imágenes que formarán nuestras capas. Cuiden de prepararlas cosa que el final y el principio calcen perfectamente; en mi caso con 3 capas necesité montañas, árboles y unas ramas desenfocadas como se muestran en el siguiente diagrama:

Luego, el HTML. Básicamente se compone de (en mi caso) 3 div’s, uno para cada capa (cada capa anidado en otra):

<div id="montanas">
     <div id="arboles">
          <div id="hojas">
          </div>
     </div>
</div>

El <div> #montanas será el que se despliegue más atrás; así #hojas será el que esté más adelante y el que se moverá más rápido que las otras.

El CSS es muy simple. El efecto se logra con un juego de porcentajes: mientras agregamos las imágenes de fondo de los div’s mediante background-image, posicionamos cada capa (con background-position) con porcentajes horizontales: mientras las montañas se ubican a 30% de la izquierda, las hojas estarán a 70% lo que hará que se muevan en diferentes velocidades si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del browser):

#montanas {
     background: url(images/montanas.png) 30% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}
#arboles {
     background: url(images/arboles.png) 50% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}
#hojas {
     background: url(images/hojas.png) 70% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}

Ver nuevamente ejemplo final