TEMAS de CSS

Posiblemente la regla que más impacto negativo ha tenido en los resultados de Page Speed en la gran mayoría de Blogs de Blogger ha sido la que vamos a tratar y resolver en esta guía: los problemas de generación con bloqueos de Javascript y CSS.

En este artículo se trata:
1. Optimización de documentos HTML mediante el uso de sprites
2. Obtención de sprites
3. Inclusión de sprites mediante CSS
4. Obtención de sprites –imágenes en general- codificados en Base64
5. Técnica de inclusión de sprites embebidos

Guia que detalla los pasos a seguir para la correcta depuración, optimización e instalación de una página web o blog en CSS.

Aprende a incluir en tus proyectos web cualquier tipo de fuente sea ttf, eot, otf o svg

El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas. Es cierto, antes ligábamos todos los elementos del diseño (tamaño de tipografía, contenedores, imágenes, márgenes…) a una unidad fija. El pixel. Pero con el responsive todo es distinto. Trabajamos con unidades relativas: porcentajes (%), ems, rems…y las imágenes sin duda son uno de los elementos más afectados.

En este artículo os mostraré como maquetar una web para que se adapte a diferentes resoluciones de pantallas, smartphones y tablets. Tendencia que en inglés se llama Responsive Design.

Para fijar las dimensiones de las fuentes de textos, disponemos de un buen grupo de unidades de medida estandarizadas en CSS 3. Este artículo te explica como usarlas.

Crea correctamente las CSS necesarias para que tu página web disponga de versión para impresión.

Al crear prototipos o wireframes de sitios y aplicaciones web, es habitual incluir contenidos de relleno por no disponer de los contenidos definitivos. Rellenar texto es muy sencillo con el famoso Lorem Ipsum y otras técnicas que ya presentamos en este mismo sitio. Sin embargo, incluir imágenes de relleno no es tan fácil, ya que requiere mucho tiempo preparar imágenes con diferentes tamaños.
La librería holder.js, creada por el diseñador y programador Ivan Malopinsky, soluciona este problema creando las imágenes de relleno directamente en el navegador. Las imágenes se crean mediante el elemento canvas y otras técnicas similares, por lo que funciona bien en todos los navegadores móviles y de escritorio, incluyendo Internet Explorer.

Los navegadores web modernos pueden aplicar con facilidad los siguientes cuatro efectos CSS: cambio de posición, escalado, rotación y opacidad. Si aplicas cualquier otro efecto CSS en la página, es muy posible que el rendimiento se resienta y no puedas mantener los 60 frames por segundo que hacen que la página se vea tan bien. Que hacer en estos casos.