CSS dinámicos

ByLuis

Un interesante artículo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artículo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.

Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.

Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se debería diferenciar de mostrar un HTML:

header('Content-Type: text/css');
if (condicion) {
echo '#estilo { display: inline; }';
} else {
echo '#estilo { display: inline; }';
}

El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, así seleccionamos unos estilos u otros, pero no los generamos:

header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
echo '@import "estilo1.css";';
} else {
echo '@import "estilo2.css";';
}

Static and dynamic CSS combined

71 formas de hacer un menú mediante CSS (y contando)

ByLuis

Si tienes alguna duda de cómo realizar el menú de tu aplicación web, aquí tienes una lista bastante extensa de artículos y tutoriales de listas, menús, navegación y pestañas. Los hay mejores, peores, más sencillos, os recomiendo que os deis una pasada por ellos y veáis cual se adapta mejor a vuestras necesidades. Eso sí, comprobaría que funcionen en todos los navegadores.
Top 71 CSS Menus Navigation Tabs
Via / Digg

|

Recursos CSS para principiantes

ByLuis

No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco más. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquí tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.

  • La primera de las utilidades nos permite darle estilos a una tabla, pudiendo jugar con los colores, grosores y demás de las tablas, filas y celdas.
  • La siguiente utilidad nos ayuda con el texto: la fuente, negrita, itálica, tamaño, separación de letras, alineamiento, …
  • Y por último una lista de colores y su correspondencia RGB.

También es curiosa la utilidad para crearnos nuestro favicon, aunque supongo que la gente que llega a este nivel, quizás si sepa usar un editor gráfico.

Web development

Vía / dzone

| |

Incluir CSS a tu RSS

ByLuis

Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.

Se trata de añadir una línea indicando el xml-stylesheet en las RSS:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...

Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Ejemplo

Adding a CSS StyleSheet to your RSS Feed

Vía / dzone

|

Crear nuestros propios checkboxes y radio buttons mediante CSS

ByLuis

A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.

fuglychecks.pngEsto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.

Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).

Tenemos estos elementos HTML:

<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>

Los estilos iniciales para el input y para el label son los siguientes:

input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}

Y por último, los estilos para los distintos estados del input son los siguientes:

input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}

Styling Checkbox and Radio Graphics With Only CSS

Vía / Digg

|

Floatutorial

ByLuis

Un impresionante tutorial que nos va enseñando paso a paso como posicionar elementos HTML con float y clear. Nos enseña con ejemplos:

  • Información general, definición de conceptos, explicación de float y clear.
  • Posicionamiento de una imagen a la derecha, añadiéndole márgenes y bordes.
  • Posicionamiento de la imagen y su pie de foto, aplicando bordes.
  • Crear thumbnails.
  • Usar listas de elementos para crear botones “Anterior” – “Siguiente”.
  • Usar listas de elementos para crear pestañas.
  • Crear efecto de letra inicial de párrafo de tamaño superior al resto.
  • Estilo de dos columnas.
  • Estilo de tres columnas.

Floatutorial

Vía / Dzone

| |

Laboratorio: simulación de transparencia mediante CSS

ByLuis

En la Web 2.0 está más de moda usar transparencias en nuestras páginas web, realmente se puede realizar con estilos, pero con Internet Explorer se hace de una forma y con Firefox de otra, y no estoy muy seguro, con Opera no se puede (actualización: Federico nos comenta que en la versión 9 ya está implementada). Por ello, una forma de simular la transparencia en una capa es usar dos imágenes, una de fondo con la imagen original y la otra con una imagen que hemos creado nosotros que tendrá el efecto de transparencia.
transparencia.png

Yo en el ejemplo me he creado una capa blanca, encima he puesto la imagen con cierto grado de transparencia y encima he puesto la misma imagen con efecto de luminosidad suave, para que no sea símplemente una transparencia.

Tenemos una capa div y dentro de ella un párrafo:

<div><p>...</p></div>

Ahora le tenemos que indicar los estilos:

div.contenedor {
width: 500px;
height: 375px;
background: url(forest.jpg) top left no-repeat;
}
div.contenedor p {
width: 420px;
height: 295px;
top: 40px;
left: 40px;
background: url(forest_transparencia.jpg) -40px -40px no-repeat;
border: 2px solid #000000;
position: relative;
}

Si te fijas, verás que en el estilo de párrafo, se desplaza del background hacia arriba y hacia la izquierda tanto como está desplazado el párrafo hacia abajo y hacia la derecha sobre la capa contenedora.

Ejemplo

|

Cinco consejos sobre CSS

ByLuis

Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cómo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.

  • Organiza tus estilos según el siguiente formato: primero reune las que correspondan a los contenedores y layouts, después las cabeceras (<h1>..<h6>), seguido iría los párrafos y los enlaces, y por último todas las listas (navegación, …).
  • No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defínelo contenido por bloques (por ejemplo: #contenido a {..}).
  • Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una línea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un código más limpio.
  • En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma función que quieres mostrar, por ejemplo, en vez de usar una capa para el título, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
  • Nombra los estilos según su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips
Vía / SkimCSS

|

Presentando CSS World Awards

ByLuis

css-world-awards-logo.gif En CSS Manía acabamos de anunciar el primer certamen que premiará a los mejores diseños en CSS.

Desde el primer día que lanzamos CSS Manía, teníamos en mente el galardón. Pensábamos organizarlo mediante votación popular pero sabiendo del lío que se podría montar qué mejor opción que contar con un prestigioso y relevante jurado como el que forman: Andy Budd, Cameron Moll, Molly E. Holzschlag, Roger Johansson y Sergio Villareal donde la calidad y el valor de los futuros premiados obtiene mayor reconocimiento.

Read More “Presentando CSS World Awards”

| | | |

Nueva versión de FireBug

ByLuis

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint