| | |

CSSVista: editor CSS para Firefox e IE6

ByLuis

CSSVista es una aplicación desarrollada por la gente de SiteVista que nos permite editar CSS y ver los resultados que se producen directamente en IE6 y Firefox.
cssvista.png
Se trata de una aplicación gratuita, todavía en fase de desarrollo que nos puede ser de gran utilidad cuando maquetamos un diseño y queremos que se vea correctamente en ambos navegadores. Aunque yo prefiero usar un editor normal y refrescar el contenido en el navegador que esté probando en ese momento.
CSSVista
Vía / Lifehacker

Similar Posts

| |

El skin de Flock para Firefox

ByLuis

En estos días también intentaremos publicar sobre pequeños detalles.
Hay ejemplos tan sencillos que repercuten en tu productividad que asombran. Uno de ellos, y que desde hace meses nos encanta, es la apariencia visual de Flock aplicada a Firefox.
firefox-con-flock.png
Para ello, al comienzo nos descargábamos Flock y el tema por default lo cambiábamos por el de Firefox pero desde hace unas semanas ya hay un tema que en apenas unos segundos nos sirve.
Lo bajamos, descomprimimos, abrimos la ventana de Temas de Firefox y con un simple drag and drop queda instalado. Cierras el navegador. Lo vuelves a abrir y listo.
¿Por qué aumenta nuestra productividad? A nosotros nos incita a navegar más. Nos da sensación de directo, pero sobre todo nos ayuda a diseñar mejor. Es una percepción puramente subjetiva. ¿La compartís?
Flofox Revisited – Flock Theme for Firefox

Márgenes redondeados mediante CSS

ByLuis

borde-redondo.gif Seguimos con bordes redondeados.
Siempre que añadimos imágenes en nuestra página web, el texto cuando se ordena alrededor de ella lo hace tomándola como una caja, lógicamente, porque es así su forma real. Pero, ¿qué pasa cuándo la imagen tiene transparencias y tiene un contorno no recto?, pues que da igual, sigue tomándolo como una caja. En estos casos, el efecto que causa es un poco feo, ya que queda mucho espacio sobrante.
En publicaciones de prensa, sobre todo en revistas, muchas veces aparece la imagen de un personaje y el texto se ordena según la figura de la persona. Aunque en prensa usan un diseño estático e introducen saltos de línea cuando les interesa, el efecto que crean es de mucha vistosidad.
Si estás interesado en esta forma de presentación, puedes ver en couchfort cómo lo hacen. Debido a que la explicación quizás no sea suficiente para algunas personas, en Sentido Web vamos a incluir un howto que explique cómo hacerlo paso a paso.
Vía / del.icio.us

Grep para Windows

ByLuis

Los usuarios de Windows no disponemos de las aplicaciones de línea de comando tan sencillas como útiles que ofrece Linux/Unix. A la hora de desarrollar en Unix, comandos como find, tail o grep pueden sernos de mucha utilidad.
grep.png
Windows Grep, como indica su nombre, es un grep para Windows, el cual dispone de las siguientes características: uso para principiantes o expertos, tratamiento de ficheros planos o binarios, búsqueda en archivos ZIP, reemplazo masivo, multitaréa, modo línea de comandos y extensión para el explorador de ficheros.
Windows Grep
Vía / Digg

Bordes irregulares con CSS3 y webkit

ByLuis

Jugando un poco con las CSS3 y Webkit (en mi caso Chrome) me ha dado por crear bordes irregulares. Lo he hecho mediante -webkit-border-top-left-radius y similares.
El concepto es sencillo, hay dos colores: el de fondo (no puede ser transparente) y el del borde, en las curvas concavas se usan los colores tal cual, y en las curvas convexas se usan al revés (el color borde se simula usando el color de fondo, y el fondo con el borde).
bordeslocos.png
La verdad es que lo he hecho rápido y me he liado bastante y está muy a ojo, pero espero estudiarlo un poco mejor cómo va e incluso hacer un plugin para jquery.
Ejemplo

|

5 efectos CSS accesibles

ByLuis

El tema de la accesibilidad es algo que a veces se deja de lado cuando se quiere conseguir un diseño más dinámico. Pero si se busca bien, se podrá encontrar ejemplos de diseños CSS que sean accesibles.

Estos son 5 muy buenos ejemplos de ello:

  • Enlaces externos: modificas el texto “(enlace externo)” incluyéndolo en un span y después lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.Enlaces externos
  • Sigue leyendo: el texto “Sigue leyendo sobre …” se modifica, haciendo que solo aparezca “Sigue leyendo” y el resto del texto aparece como un popup mediante posición absoluta y jugando con el hover.Sigue leyendo
  • Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.Tamaño de texto
  • Pestañas con imágenes: se crea un menú de pestañas con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces están formados por imágenes y estas cambian según el hover.Pestañas
  • Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.Formularios

5 Accessible and pretty CSS tips

Vía / dzone

Firefox 2 alpha 1 listo para descargar

ByLuis

firefoxlogo.png Ya ha salido la versión alfa de Firefox 2, llamada Bon Echo, entre las novedades que encontramos hay:

  • Cambios en el comportamiento de las pestañas.
  • Nueva capa de almacenamiento de historicos y marcadores usando SQLlite.
  • Ampliado el formato de búsqueda de plugins.
  • La actualización de extensiones se mejora tanto en seguridad como a la hora de su localización.
  • Soporte de svg:textPath para SVG
  • Y muchas otras que aún no han tenido tiempo de escribir.

Descarga

Vía / mozillaZine