El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad.
Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML:
<strong style="cursor: help;">¡Ayuda!</strong>
Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando.
A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto:
CSS2:
cursor: auto; cursor: inherit; cursor: crosshair; cursor: default; cursor: help; cursor: move; cursor: pointer; cursor: progress; cursor: text; cursor: wait; cursor: e-resize; cursor: ne-resize; cursor: nw-resize; cursor: n-resize; cursor: se-resize; cursor: sw-resize; cursor: s-resize; cursor: w-resize;
CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):
cursor: none; cursor: context-menu; cursor: cell; cursor: vertical-text; cursor: alias; cursor: copy; cursor: no-drop; cursor: not-allowed; cursor: ew-resize; cursor: ns-resize; cursor: nesw-resize; cursor: nwse-resize; cursor: col-resize; cursor: row-resize; cursor: all-scroll;
Propietarios (Firefox y Chrome/Safari):
cursor: -webkit-grab; cursor: -moz-grab; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
Tu propio cursor:
cursor: url(images/cursor.cur); cursor: url(images/cursor.png), default;
* para mejor fallback después del url() utiliza algunos de los cursores CSS2
* Para Firefox y Chrome/Safari utiliza un PNG transparente.
* IE require que sea un archive .cur
* Opera no lo soporta
Link:
]]>
Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?
Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.
Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?
La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:
<link rel="stylesheet" type="text/css" href="css/normal.css"> <link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >
El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:
normal.css
#logo {
background-image: url('images/logo.png');
background-size: 100px 100px;
background-repeat: no-repeat;
}
retina.css
#logo {
background-image: url('images/logo_hi.png');
}
Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:
Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.
Mediante JS
Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:
<script type="text/javascript">
if (window.devicePixelRatio >= 2) {
document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
} else {
document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");
</script>
Links:
]]>En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.
* He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando
Transiciones 
4+ & Mobile
11+
11+
5+
La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.
Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.
En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:
En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration:
Transformaciones 3D 4+ & Mobile11+
Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:
Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.
Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:
@-webkit-keyframes girando {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora:
#contenedor {
margin: 30px auto;
-webkit-perspective: 600px;
}
Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).
Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:
#girando {
-webkit-animation-name: girando;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
-webkit-transform-style: preserve-3d;
}
Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:
Interesante es lo que puedes lograr agregando la propiedad:
-webkit-backface-visibility: hidden;
Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:
Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:
@-webkit-keyframes girando {
from,20% { -webkit-transform: rotateY(0deg); }
30%,40% { -webkit-transform: rotateY(90deg); }
50%,60% { -webkit-transform: rotateY(180deg); }
70%,80% { -webkit-transform: rotateY(270deg); }
90%,to { -webkit-transform: rotateY(360deg); }
}
Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):
Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.
Links:
]]>La condición dice:
Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu sitio no llega hasta el fondo de la ventana, la imagen de fondo llegará sólo hasta donde llegue el contenido.
Para solucionarlo, basta con definir:
html {
height: 100%;
}
Ahora, esta solución es útil cuando sabes que el contenido es y será menor al alto de la ventana; si tu contenido es dinámico es mejor que utilices min-height:
html {
min-height: 100%;
}
Gracias a inyaka por hacerlo notar.
Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:
#container {
width: 600px;
display: inline-block;
}
.floto {
float: left;
}
Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan:
Para contrarrestarlo, define también ancho fijo en los elementos flotantes:
#container {
width: 600px;
display: inline-block;
}
.floto {
width: 280px;
float: left;
}
Nada es perfecto… es un método más.
]]>
- TTF – Funciona en todos los browsers excepto IE y Mobile Safari (iPhone/iPad).
- EOT – Sólo IE.
- WOFF – Comprimido y candidato a estándar.
- SVG – Mobile Safari (iPhone/iPad).
Esto es simple: primero debes disponer de las fuentes que quieres utilizar, luego las puedes utilizar tal cual o transformarlas a los formatos necesarios. Esas fuentes las importas mediante CSS y las utilizas como una propiedad font-family donde quieras incluirlas. Quizás ya conocías Cufón o SIFr, pero desde que uso @font-face he notado que es bastante más rápido en la carga y es más versátil en su uso (ya que utiliza simple CSS y no depende de llamados JS).
Entonces, primero debes declarar la regla @font-face en tu hoja de estilos para importar las tipografías (nótese la ruta donde las tienes en el servidor, si no estas seguro mejor utiliza algún path absoluto).
@font-face {
font-family: 'Delicious';
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: 'Delicious';
font-weight: bold;
src: url('Delicious-Bold.otf');
}
Si quieres estar seguro de que se verá en la gran mayoría de los browsers, mejor impórtalas todas:
@font-face {
font-family: 'Delicious';
src: url('Delicious-Roman.eot');
src: local('?'), url('Delicious-Roman.woff') format('woff'), url('Delicious-Roman.ttf') format('truetype'), url('Delicious-Roman.svg#webfont57ztNrX6') format('svg');
}
Y luego las declaras por simple CSS:
h3 { font-family: Delicious, sans-serif; }
Google actualmente está apoyando muchos desarrollos para Chrome y dispone de un importante catálogo de fuentes para su fácil e inmediato uso (y directo desde sus servidores).
Links:
]]>¿Porqué utilizar gradientes en CSS en vez de imágenes?
- Es más flexible y mantenible
- Menos dependendias de programas y editores gráficos
- Menos consultas al servidor
- Es escalable
En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.
Según los estándares W3C, crear gradientes se compone de:
linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )
Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz:
-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) -moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )
Y para Webkit, es bastante diferente:
-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)
Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos:
Gradiente Lineal
body{
background-color:#ccc;
background-image: -moz-linear-gradient(top, #333, #ccc);
background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc));
background-image: linear-gradient(top, #333, #ccc);
}
Gradiente Radial
body{
background-color:#ccc;
background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));
background-image: radial-gradient(center 45deg,circle cover, #ccc, #333);
}
¿Y con Internet Explorer?
Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión através de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.
¿Muy complicado? También lo creo. Mejor prueba algún script como Modernizr ó CSS3 Pie, los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya.
Al declarar algunos valores en propiedades CSS como background-image, usualmente se permite poner o no el valor entre comillas dobles "" ó simples ”. Si escribes el código a mano, no las utilizas. Si usas algún editor, quizas las agrega. Pero ¿se debe o no poner comillas?
Esta pregunta que ha intrigado al hombre por años no tiene una respuesta definitiva. Por lo menos no la he encontrado de manos de la W3C, pero sí el uso de comillas en ciertas declaraciones tiene sentido:
… single quotes (‘), and double quotes (") must come in matching pairs …
Primero, no dice que deben ser utilizadas. Segundo, dice que si las utilizas, deben estar en par (si abres con comilla simple cierra con simple, etc.). Pero:
Inside the quotes, characters are parsed as a string.
Esto es lo importante. Si utilizas las comillas simples o dobles, el valor se pasa como string. Un ejemplo práctico y descuidado: si tienes una imagen con espacios en su nombre:
background: url('back ground.png')
Si utilizas comillas en su declaración la imagen se mostrará:
Si no la utilizas, el browser no encontrará la imagen:
Este comportamiento es independiente del doctype que estés utilizando. Yo las uso.
Link:
]]>CSS tiene una ‘obscura’ propiedad llamada vertical-align. Lo obscuro se debe a que es confuso su entendimiento, y por ende su uso. Para ayudar a aclarar eso, este artículo lo atacará por dos ámbitos más que necesarios: alineado de elementos de formulario y de imágenes.
Vertical-align tiene uso principalmente en etiquetas que son por esencia de tipo inline. Si tratas de utilizar esta propiedad en un <div> por ejemplo, o en un <p> quizás es por eso que te hayas frustrado ya que estos elementos son de tipo block. Cuando vertical-align es definido para elementos inline, se comporta como el antiguo y obsoleto atributo valign="". Tomando este principio, su uso en imágenes junto a texto se ven resultados concretos:
Los valores de vertical-align son:
- baseline: valor por defecto, el elemento es ubicado en la base del elemento padre.
- sub: alinea el elemento como si fuera subescrito (<sub>).
- super: alinea el elemento como si fuera sobrescrito (<sup>).
- top: la parte superior del elemento es alineado con la parte superior del elemento en la misma línea.
- text-top: la parte superior del elemento es alineada con la parte superior del padre de los elementos de texto.
- middle: el más interesante; el elemento es ubicado en la mitad del elemento padre.
- bottom: también interesante; la parte inferior del elemento es alineado con la parte más baja de la línea.
- text-bottom: la parte inferior del elemento es alineada con la parte inferior del padre de los elementos de texto.
- %: alínea el elemento en valores porcentuales de la propiedad line-height (se permiten valores negativos).
Otro importante uso de esta propiedad es con etiquetas de formulario, principalmente cuando queremos alinear los nombres de los campos (generalmente envueltos en <label></label>) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto:
Como décadas pasadas, esta propiedad también puede ser utilizada en reemplazo del atributo para celdas de tablas, bajo los mismos valores. Como las celdas por defecto tienen vertical-align: middle definidos, puedes utilizar los otros valores para lograr lo que necesites.
¿Milagrosa? Bueno, suena bien hasta ahora pero está lejos de ser la solución definitiva, ya que IE6 e IE7 soporta esta propiedad a su manera, como siempre.
Links
]]>
White-space define cómo se comportan los espacios en blanco dentro de un elemento, o sea, en un párrafo son los espacios entre 2 palabras. Sus valores son:
- normal: por defecto, el espacio en blanco es ignorado por el browser.
- pre: el espacio en blanco es preservado por el navegador.
- nowrap: el texto no se quiebra, continúa en la misma línea hasta que no haya un quiebre mediante la etiqueta <br />.
Ahora, su real uso. Según veo, da igual si lo declaras o no para todos los <p> por ejemplo. Pero sí me da un real uso cuando trabajo con links. Si tengo uno o varios links de 2 o más palabras, y justo uno te ellos me pilla en el margen del contenedor y se le ocurre quebrarme en 2 el enlace… se ve bastante feo y dificulta la lectura de ese link:
Bueno, con white-space: nowrap; se soluciona, ya que si el contenido dentro de <a></a> no cabe en la línea, no me lo corta en 2 (como ocurre con Miguel Benigno del ejemplo anterior… pobrecito), sino que entero baja al siguiente renglón.
Pequeños detalles que marcan la diferencia.
]]>