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:
]]>
La implementación de columnas múltiples en CSS no es algo nuevo, fue propuesto a la W3C en el 2001 y ya estaba implementado en Webkit desde sus inicios, en Firefox desde la versión 1.5 y se podía utilizar fácilmente desde 2006. Pero con el advenimiento de CSS3 como un estándar cada vez más fuerte, y con una presión bastante notoria por parte de los desarrolladores para implementar sus beneficios en sus proyectos web se ha hecho cada vez más viable su uso. Además, existen fallbacks que permiten que se pueda utilizar en navegadores más antiguos o que no tengan esta capacidad sin mayores problemas.
Por suerte su implementación es bastante simple. Dado el siguiente HTML con un bloque de texto:
<div id="columna"> <p>International Bitterness Units (IBU), Caramel malt, Pitching Bottom-fermenting Yeast. Double bock/dopplebock; Reboboam Mash Tart Lagering Grist Caramel malt Bittering Hops...</p> </div>
Para separarlo en 2 columnas basta con utilizar la propiedad column-count: 2;
#columna {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
La lista completa de propiedades:
- column-count:
- la cantidad de columnas.
- column-width:
- define el ancho de las columnas, caso no quieras que el browser calcule de acuerdo al modelo de caja.
- column-gap:
- el espacio entre cada columna, en la unidad de medida que estimes.
- column-rule:
- borde (separación) entre cada colina, por ejemplo una línea recta.
Ahora, qué hacemos con los browsers que no tienen la capacidad de interpretar esta úil propiedad? Según caniuse.com, ningún IE lo soporta en la actualidad, quizás IE10 lo haga. Afortunadamente JavaScript viene al rescate con un pequeño script que incluiremos luego del estilo, el que agregará el soporte de column-count y demases.
Como ven, no hay razón para no comenzar a utilizar las columnas múltiples.
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.
]]>
NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10. Firefox 3.6 anda pero no ofrece todo el soporte que quisiéramos (aún).
Transiciones
Su característica es cambiar una propiedad (o un grupo de ellas) en un período de tiempo determinado. Una ventaja por sobre Javascript es su degradación, ya que si esta propiedad no es soportada por el browser, la animación simplemente no es mostrada.
El siguiente código muestra el aumento del ancho de un <div> en un segundo cuando el mouse se posiciona sobre él. Luego, cuando el mouse sale del <div> su ancho vuelve a la posición inicial en 2 segundos:
.prueba1 {
margin:10px;
width:200px;
height:200px;
background:#f00;
border:1px solid #666;
-webkit-transition: all 1s ease; /* Safari-Chrome */
}
.prueba1:hover{
width:400px;
-webkit-transition: all 2s ease; /* Safari-Chrome */
}
A continuación, una animación compuesta: dado un estado inicial se define nuevo width, height y background-color:
.prueba2 {
margin:10px;
width:200px;
height:200px;
background-color:#f00;
border:1px solid #666;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 1s, 1s;
-webkit-transition-timing-function: ease, ease-out;
-webkit-transition-delay:0s ,0.5s, 1.5s;
}
.prueba2:hover {
width:400px;
height:300px;
background-color:#fc0;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
-webkit-transition-timing-function: linear, linear;
-webkit-transition-delay:0s ,0.5s, 0.5s;
}
Propiedades:
- transition-property:
- Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.
- transition-duration:
- Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.
- transition-timing-function:
- Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.
- transition-delay:
- Tiempo en que la animación debe pausarse antes de comenzar.
Transformaciones:
Existen 4 tipos de valores para transformar elementos HTML mediante CSS3:
- Skew:
- desplazamiento de los ejes horizontales.
- Scale:
- modificación de la escala del elemento.
- Rotate:
- cambio de rotación del mismo definido en grados.
- Translate:
- desplazamiento del elemento desde su posición original.
Estas propiedades pueden ser utilizadas en la gran mayoría de los browsers modernos, con sus debidos prefijos como pueden notar en el código fuente del ejemplo.
Además, puedes comenzar a mezclar transformaciones con animaciones para lograr efectos como el siguiente (con Safari/Chrome):
#divloco div {
height:100px;
width:100px;
border:1px solid #f00;
margin:10px auto;
background: #ccc;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#divloco div:hover, #divloco div.hover_effect {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}
Links:
]]>
- 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.
Para quitarlo, basta declarar en CSS:
textarea {
resize: none;
}
Ver ejemplo
(En Safari-Chrome)
