Categoría: CSS
Movimiento del browser al arrastrar en móviles
Leer
Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre extremo dentro del <body> (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda y viceversa) éste se mueve levemente con un efecto resorte, lo que eventualmente puede llegar [...]
➜Layout Responsive / Adaptativo / Flexible
Leer
Nuevos conceptos pero no tan nuevas técnicas. La moda del diseño/desarrollo responsive hace necesaria una aclaración de algunas definiciones. Y qué mejor que hacerlo con un ejemplo utilizando las mismas técnicas descritas, para que puedan bucear por el código fuente.
➜Diseñando con CSS3: micro-curso y slides
Hace meses que tengo la idea de generar varios micro-cursos, donde en no más de 30 minutos expongo varias ideas puntuales sobre temas orientados al desarrollo web. En esta ocasión les traigo el primero de ellos: Diseñando con CSS3, donde muestro y demuestro mis argumentos para el diseño web orientado al CSS3.
➜Alcanzar el primer hijo de un selector pero no su descendencia
Leer
Problema: a través de CSS, necesitaba entregar estilos al primer hijo de un elemento sin afectar la herencia (nietos y más allá); sólo necesito darle estilo al hijo directo de un selector. Además: debiera ser genérico, sin restringirse al tipo de selector hijo que exista. Pueden ser <li>, <p>, <span>, etc. Y por último: que [...]
➜Reflejo horizontal y vertical con CSS3
Leer
Me entretengo mucho inventando proyectos donde pueda aplicar CSS3 a destajo sin importarme un carajo las limitaciones de los browsers. Buscando una solución elegante para aplicar el mismo efecto reflejo que tan fácil es hacer en Photoshop, pero con CSS3, lo que quería realizar era el reflejo de un elemento HTML; no un transform: rotate(180deg); [...]
➜FadeIn/Out en menú con CSS
Leer
Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar tranquilamente con CSS y la caída estrepitosa de IE6.
➜@font-face y renderizado de texto en Chrome Windows
Leer
Este es un bug molesto, donde a partir de algunas tipografías (generalmente de palo seco y delgadas) tienen un pobre renderizado en Chrome en Windows. Buscando una solución me deparo con 4 diferentes; finalmente solo la solución 2 me resulta efectiva pero las dejo todas ya que puede variar con el tipo de tipografía y [...]
➜Mejor renderizado para textos
Leer
Érase una vez una tímida propiedad CSS que pocos conocen y nadie usa, pero que es muy beneficiosa cuando tratamos con textos.
➜Pointer-Events en CSS3
Leer
Tonteando con una idea que tuve de un bookmarklet (una analogía gráfica que contamina visualmente un sitio web de la misma manera en que estamos contaminados quienes vivimos en grandes ciudades), tuve una epifanía y pude resolverla. La idea es crear una capa sobre todo el contenido del sitio: un <div> posicionado fijo, ancho y [...]
➜