PHP: Comprimir múltiples archivos CSS en un único archivo

0 - , - 17/07/2011 19:21:08

El siguiente código sirve para comprimir varios archivos CSS en único fichero. Se toman los distintos archivos css y se eliminan comentarios, espacios, tabulaciones, saltos de línea, etc, sirviendo un único fichero. De este modo, además de reducir el tamaño, reducimos el número de peticiones HTTP al servidor, lo que nos ayudará a optimizar la carga de nuestro sitio web.

header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
  /* remove comments */
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  /* remove tabs, spaces, newlines, etc. */
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  return $buffer;
}

/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');

ob_end_flush();

Visto en phpsnippets » »

Texto en 3D con CSS3

0 - - 29/05/2011 10:21:21

Interesante aplicación de CSS3 para, mediante el uso de sucesivas sombras de texto, obtener un texto en 3D.

3D texto CSS

h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

3D Text » »

Grid basado en porcentaje con HTML5

0 - , - 26/04/2011 19:46:42

Interesante tutorial que al mismo tiempo nos ofrece el resultado final: un sistema de cuadrícula realizado con HTML5. Las principal característica de esta retícula es que todas las columnas tienen un ancho basado en porcentaje, lo que hace que se adapten al elemento contenedor. Esto significa que con el uso de este sistema, no tendrás que definir un ancho de cada columna de forma manual, sólo tienes que definirlas dentro de un contenedor y el ancho de las columnas y los espacios entre columnas se ajustarán automáticamente.

Grid System HTML5

Easy Percentage Grid System with HTML5 » »