Webmaster Libre » CSS

Paneles de imágenes deslizantes sólo con CSS3

Alma Fernández — Thu, 26 Jan 2012 14:56:17 +0000

No creo equivocarme demasiado si digo que todos los desarrolladores de front-end están como niño con zapatos nuevos con CSS3 y HTML5. Por lo que podemos ir viendo, las posibilidades de darle un toque especial a un sitio web no hacen más que aumentar y buena muestra de ello son estos paneles deslizantes con imágenes realizados sin mediar javascript.

Su aspecto es inmejorable y, cuando la gente decida por fin librarse de los navegadores obsoletos, seguro que es sólo una parte de lo que se podrá lograr.

En el artículo que enlazo, además de unos cuantos ejemplos de las diversas transiciones que podemos realizar obtendrás el código fuente para poder hacerlo tu mismo.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Paneles de imágenes deslizantes sólo con CSS3 was first posted on enero 26, 2012 at 3:56 pm.

Un vistazo al rendimiento de nuestras hojas de estilo

Alma Fernández — Tue, 24 Jan 2012 19:46:40 +0000

Con CSS3 trayéndonos grandes mejoras y muchas cosas bonitas que hacer con las hojas de estilo, puede suceder que sobrecarguemos nuestros CSS y, casi sin darnos cuenta, hagamos que nuestros sitios carguen más lento.

A la hora de optimizar la carga, sobre todo de sitios o aplicaciones grandes, solemos mirar primero a otros sospechosos habituales: imágenes, vídeos, javascript… Pero, a pesar de que confío que todos minimicemos en mayor o menor medida nuestros ficheros CSS existen más factores que pueden afectar a los tiempos de carga de un sitio web.

En Perfection Kills hacen un repaso al rendimiento de las hojas de estilo, aprovechando las herramientas que nos ofrecen los navegadores Opera y Chrome (WebKit). El artículo es largo y realmente interesante, no deberías dejarlo pasar pero, por si no tienes mucho tiempo aquí te dejo traducidas las conclusiones:

Reduce el número de selectores, incluso los destinados a IE (por ejemplo: .ie7 .foo .bar {})
Evita los selectores universales (‘*’), incluso los selectores de atributo inespecíficos ([type="url"]).
El zoom de la página afecta al rendimiento (ej. Opera)
En algunos navegadores el tamaño de la ventana afecta al rendimiento (ej. Chrome)
Los refrescos de página pueden afectar negativamente al rendimiento de las hojas de estilo en algunos navegadores (ej. Opera).
“border-radius” y “transform” son dos de las propiedades más “caras” (al menos en WebKit y Opera)

Como siempre, lo mejor es utilizar las herramientas de las que disponemos para comprobar caso por caso la eficiencia de nuestras hojas de estilo, en ocasiones no utilizar selectores universales o utilizar menos selectores puede suponernos un inconveniente y, dependiendo de como hayamos estructurado el resto de los estilos, algo que podemos dejar pasar.

¿Has notado algún otro agujero de rendimiento al generar tus estilos?

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Un vistazo al rendimiento de nuestras hojas de estilo was first posted on enero 24, 2012 at 8:46 pm.

CSS 3, please! Un generador de propiedades CSS3 crossbrowser

Alma Fernández — Wed, 10 Mar 2010 08:20:25 +0000

A pesar que todavía está muy verde la especificación de CSS3, ya podemos usar algunas reglas como, transform, box-shadow o border-radius. Eso si, dándole a cada navegador que lo soporte sus propias reglas. A través de Web Resources Depot conozco CSS3, Please!

CSS3, please! es un generador de propiedades CSS3 para todos los navegadores. Al entrar se nos presenta una hoja de estilo que podremos editar para adaptar a nuestras necesidades y ver los cambios aplicados a un cuadrado resaltado. Incluso incluye propiedades para Internet Explorer en los casos que la transformación esté soportada mediante filtros.

No deja de ser un asco tener que duplicar o triplicar una regla de estilo para que funcione en casi todos los navegadores pero, por lo menos, ahora es más rápido.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

CSS 3, please! Un generador de propiedades CSS3 crossbrowser was first posted on marzo 10, 2010 at 9:20 am.

Una sencilla y vistosa barra de herramientas para tu web con jQuery y CSS3

Alma Fernández — Wed, 09 Dec 2009 12:25:31 +0000

De un tiempo a esta parte empiezo a ver por muchos sitios una barra de herramientas en la parte inferior de las páginas con utilidades como enviar enlaces a redes sociales, suscribirse al feed o abrir una ventana de chat. Muy al estilo de la que emplea, por ejemplo, Facebook.

Existen algunos servicios como Wibiya con los que generar nuestra propia barrita de forma cómoda y sencilla pero, si buscamos ese punto extra de personalización nos toca ponernos manos a la obra y crear la nuestra propia.

En pvmgarage nos enseñan a hacer una gracias a jQuery y CSS3, lo malo es que no se lleva nada bien con Explorer 6 o 7 – y en el 8 se ve ligeramente fea – así que, al menos de momento, queda relegada a proyectos donde no te importe perder unos cuantos visitantes por culpa de su navegador. O eso, o te toca ponerte a trabajar un poco más para adaptar algunas cosas ya que el autor no considera esos navegadores porque “están pasados” (sic).

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Una sencilla y vistosa barra de herramientas para tu web con jQuery y CSS3 was first posted on diciembre 9, 2009 at 1:25 pm.

Estilos para los comentarios de tu blog

Alma Fernández — Wed, 07 Oct 2009 19:36:53 +0000

Si buscas dar un estilo elegante a los comentarios de tu blog pero no tienes tiempo o ganas de ponerte a ello estás de enhorabuena.

En Templatica ponen a nuestra disposición un buen set de estilos para nuestros comentarios con instrucciones sobre como deben estar maquetados para que sólo sea cuestión de copiar y pegar el código en nuestra hoja de estilos. Interesante ¿no?

Styling Blog Comments: Correct Markup and Free Examples

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Estilos para los comentarios de tu blog was first posted on octubre 7, 2009 at 9:36 pm.

IE Tester, probar tus páginas en múltiples versiones de Internet Explorer en una sola ventana

Alma Fernández — Mon, 28 Sep 2009 19:34:59 +0000

En este blog creo que, de tanto en cuanto, toca hablar de algo que nos permita probar nuestros sitios en IE o no rompernos los cuernos más de lo estrictamente necesario ¿por qué será?

Esta semana descubro vía Genbeta una utilidad que nos permitirá probar nuestros sitios contra múltiples versiones de Internet Explorer en una misma ventana, dividida en pestañas.

La aplicación se llama IETester y, como digo, nos ayudará a abrir nuestros sitios en varias versiones de Explorer simultáneamente. El programa está en fase alfa así que puede que de vez en cuando se rompa, no obstante cada pestaña funciona como un proceso independiente de las demás así que si se rompe en una de ellas las demás no nos dejarán tirados.

Para funcionar, IE Tester requiere una copia de Windows con IE7+ instalado.

IE Tester: http://www.my-debugbar.com/wiki/IETester/HomePage

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

IE Tester, probar tus páginas en múltiples versiones de Internet Explorer en una sola ventana was first posted on septiembre 28, 2009 at 9:34 pm.

MeeCSS, envía tu sitio a más de 100 galerías CSS cómodamente

Alma Fernández — Mon, 27 Jul 2009 18:23:31 +0000

Cuando creamos un sitio, echamos horas diseñándolo y trabajando en su código para que todo se vea divinamente nos encanta enseñarlo ¿no?

Las galerías de diseños CSS son un buen sitio donde lucir nuestra obra maestra y, de paso, recibir algo de feedback y algunas visitas.

MeeCSS es una sencilla herramienta web con la que podrás enviar tu sitio web a más de 100 galerías de este estilo, que no se si serán todas las disponibles pero igualmente son una buena cantidad.

El sistema no es automatizado, ya que seguramente la mayoría de estas galerías no tardarían demasiado en darse cuenta del asunto y bloquearían la aplicación. En lugar de esto, lo que hacemos es seleccionar las galerías a las que queremos hacer el envío, introducir los datos y darle a enviar. De esta manera se irán abriendo progresivamente los formularios de envío y tendremos a mano los datos que introdujimos en la aplicación para poder hacerlo todo a base de copiar y pegar.

Como me explico bastante mal ultimamente, mejor te dejo el video para que veas como va el proceso.

Untitled from MeeNews on Vimeo.

Seguiremos teniendo que ponerle un poco de tiempo al tema de los envíos pero, sin duda, mucho menos que yendo manualmente de un sitio a otro.

MeeCSS: http://www.meecss.com/

Vía Criterion

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

MeeCSS, envía tu sitio a más de 100 galerías CSS cómodamente was first posted on julio 27, 2009 at 8:23 pm.

Dust-Me Selectors extensión de Firefox para encontrar selectores no usados

Alma Fernández — Mon, 29 Jun 2009 15:40:24 +0000

Hace unos días hablábamos de una aplicación online que nos permitía detectar selectores de nuestra hoja de estilo que no se estaban empleando en nuestros sitios y que, por tanto, podíamos eliminar para aligerar nuestra CSS.

Dust-Me Selectors hace esto mismo pero en forma de extensión para Firefox, de forma que no necesitaremos tener conexión a internet para hacer un poco de limpieza en nuestras hojas de estilo.

Podrás escanear páginas individuales o sitios completos y, cuando hayas acabado, obtendrás una lista de selectores que no están en uso.

Dust-Me Selectors soporta hojas de estilo locales o remotas, enlazadas o importadas mediante @import y declaraciones dentro de comentarios condicionales para Internet Explorer.

Dust-Me Selectors: http://www.sitepoint.com/dustmeselectors/

He incluído esta extensión en el recopilatorio de extensiones de Webmaster Libre para Firefox

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Dust-Me Selectors extensión de Firefox para encontrar selectores no usados was first posted on junio 29, 2009 at 5:40 pm.

Página de prueba para comprobar nuestros estilos

Alma Fernández — Wed, 24 Jun 2009 15:49:36 +0000

Cada vez es más común que, en lugar de diseñar para páginas estáticas que sólo nosotros o alguien con conocimientos actualizará, diseñemos para CMS que nuestro cliente podrá editar y utilizar a su antojo.

Una parte importante del diseño y la maquetación de una plantilla para un CMS es la de tener en cuenta todos esos elementos que podrían aparecer en un sitio, dependiendo del uso que den nuestros usuarios, por ejemplo, al editor de entradas. No sería la primera vez que nos olvidamos de dar estilo a los encabezados más allá del h3 o que nos dejamos atrás cosas tan prácticas como los blockquotes o las listas de definición, pensando que nadie las va a usar.

Esta página HTML de prueba nos permitirá aplicar nuestros estilos a una página con todos los elementos que podrían aparecer en una página, de forma que es muy simple comprobar si hemos dado estilo a todo lo que deberíamos.

Obviamente, hay algunas combinaciones de etiquetas, como por ejemplo las listas anidadas, que no están contempladas en este documento pero nos puede servir como base para crear nuestra propia guia de estilo.

HTML Test Page for CSS Style Guide

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Página de prueba para comprobar nuestros estilos was first posted on junio 24, 2009 at 5:49 pm.

The 1Kb CSS Grid, la forma más ligera de crear un diseño en retícula

Alma Fernández — Tue, 23 Jun 2009 12:25:56 +0000

A pesar de su innegable utilidad para cosas tan pesadas como maquetar un diseño basado en una retícula (grid based en inglés) siempre me ha parecido que usar frameworks CSS era matar moscas a cañonazos.

La mayoría nos proponen usar una hoja de estilo adicional, llena de cosas que podemos usar o no y, francamente, me da angustia.

The 1Kb CSS Grid es la solución a mis problemas con los frameworks, me permitirá arrancar un diseño en retícula de forma mucho más rápida y controlada pero sin sobrecargar mis páginas con cosas inútiles.

Selecciona el número de columnas que quieres emplear, su tamaño y el tamaño de los márgenes entre ellas y listo, es tan sencilla que incluso es cuestión de segundos modificar los nombres de las clases para usar unos con algo más de sentido.

The 1Kb CSS Grid: http://www.1kbgrid.com/

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

The 1Kb CSS Grid, la forma más ligera de crear un diseño en retícula was first posted on junio 23, 2009 at 2:25 pm.