Dando estilo a los formularios con CSS

ByLuis

Roger Johansson revisa su clásico “styling from controls“, artículo en el que mostraba cómo se ven los estilos CSS aplicados sobre los controles de formularios en diversos navegadores y sistemas operativos.

Demostraba además que intentar que los elementos de formulario se vean igual en todos los navegadores es una tarea imposible.

Roger acaba de publicar una revisión incorporando nuevos navegadores y sistemas operativos y agregando nuevos controles. En total revisa los siguientes controles en 14 combinaciones navegador – sistema operativo:

Una actualización necesaria, un recurso indispensable.

Similar Posts

Precarga de imágenes mediante CSS

ByLuis

Acabo de ver un método bastante curioso para precargar imágenes en la página mediante CSS. Se trata de crearnos un estilo para una capa que tenga varias líneas de background y que no se muestre, así se cargan todas las imágenes durante la carga de la página y luego las podemos usar para otras cosas como rollovers.

 #preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

Luego tendremos que definirnos una capa de la siguiente manera:

<div id="preloadedImages"></div>

A Simple CSS Image preloading technique

Render más rápido de las tablas con CSS

ByLuis

En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.

La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:

.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}

El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.

El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.

Use the table-layout CSS property to speed up table rendering

Vía / Posh CSS

12 técnicas básicas de plantillas CSS

ByLuis

Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es más de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseños están divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorías, a su vez tiene diseño estático, estático con paneles en el pie de página y diseño fluido.
csstemplates.png
Se pueden descargar los diseños cuando los visualizas.
12 Basic CSS Templates
Vía / Digg

Letras capitales mediante CSS

ByLuis

Es curioso como el uso del pseudo-elemento :first-letter no es muy usado en la web, mientras que en papel si se suele usar con frecuencia. En este caso se trata de crear letras capitales mediante este pseudo-elemento. Para ello habrá que usar un fondo común para todas y luego modificar la letra inicial para que encaje en el marco.

firstletter.png

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

Nice Drop caps with CSS

Vía / Posh CSS

| | |

Personaliza los radio y los checkbox

ByLuis

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX

|

CSSViewer: visor de CSS para Firefox

ByLuis

cssviewer.jpgCSSViewer es una extensión para Firefox que nos permite visualizar en una ventana los estilos que posee un elemento de la página web que estamos viendo. Muy útil para cuando desarrollamos o para cuando visitamos páginas que nos gustan y queremos destripar los estilos sin necesidad de meternos en el código fuente.

Un par de fallos sí que le veo:

  • los iframes los trata como objecto, cuando podría profundizar en ellos, y los frames no sabe tratarlos, por ejemplo en la página de GMail, supongo que será porque tira del elemento body, el cual no existe en la página que contiene los frames (claro que esto es una suposición),
  • el segundo fallo es que la ventana que muestra los estilos es demasiado Web 2.0, algo más anticuado hubiera quedado mejor, es demasiado grande y se sale de la pantalla y no sigue bien al ratón, por lo que a veces el ratón se posiciona encima de la ventana y obtiene los estilos de la ventana que muestra los estilos (un poco recursivo, ¿no?).

Salvo estas cosillas, una extensión que ya tengo instalada y que creo que me será muy útil.

CSSViewer

Vía / Bartelme Design