Contador de visitas

CSS

Firefox 15 ya está disponible con mejoras de rendimiento

Firefox 15

La nueva versión del navegador de Mozilla está disponible para descargar, incluyendo mejoras en el rendimiento y solucionando los problemas de consumo de memoria de los complementos.

Firefox 15 implementa diferentes mejoras en WebGL, entre las cuales ahora ofrece compresión de texturas para lograr un mayor rendimiento y reducir la cantidad de memoria necesaria para procesarlo. También se añade soporte para la versión 3 del protocolo SPDY.

Esta nueva versión incorpora soporte preliminar para la lectura de archivos PDF directamente desde el navegador usando PDF.js, aunque por el momento el consumo de memoria de esta herramienta es demasiado elevado y es necesario activarlo desde about:config en el navegador. Se han incluido mejoras para desarrolladores como la implementación de la propiedad word-break de CSS, soporte nativo para el códec de audio Opus y una nueva herramienta de diseño que nos permite observar una web en distintas resoluciones sin tener que modificar el tamaño de la ventana manualmente.

Fuente: Genbeta

PressWork: un excelente framework para WordPress

PressWork

Cuando nos dedicamos al desarrollo de sitios web usando como base WordPress, podemos utilizar alguno de los miles de temas disponibles para este CMS, pero no siempre es posible hacer esto con todos nuestros proyectos.

Muchas veces necesitamos que el sitio tenga un diseño exclusivo o puede que ninguno de los temas disponibles se adapte a nuestras necesidades. En esos casos tenemos dos opciones: diseñar nuestro propio tema o usar un “framework” para WordPress.

(más…)

Mostrar icono “home” (casa) usando menús personalizados en Mystique

Cuando instalas Mystique, por defecto verás un icono de una casita al lado de la palabra “Inicio” en el menú superior. Si después decides usar un menú personalizado de WordPress, verás que este icono desaparece.

Si quieres que se muestre de nuevo el icono, tienes que añadir el siguiente código en la pestaña “CSS” de las opciones de Mystique o en el archivo “style.css” de Mystique – Extend, cambiando “www.ejemplo.com” por tu propio dominio en las dos URLs, no lo olvides.

.nav-main .menu-inicio a{
background: transparent url(http://www.ejemplo.com/wp-content/themes/mystique/images/icons.png) no-repeat -46px -56px;
padding-left: 32px;
}

.nav-main .menu-inicio.active > a,
.nav-main .menu-inicio.active-parent > a{
background: transparent url(http://www.ejemplo.com/wp-content/themes/mystique/images/icons.png) no-repeat -46px -6px;
}

(más…)

CSS: Cajas con sombra para todos los navegadores usando box-shadow + Shadow Filter

Vamos a ver cómo conseguir un interesante efecto de sombra usando solamente CSS. En el ejemplo aplicaremos la sombra a un div, pero este efecto se puede usar prácticamente con cualquier elemento HTML, como imágenes, tablas, formularios, etc.

box-shadowAunque para las versiones actuales de todos los navegadores solo sería necesario usar la propiedad estándar “box-shadow“, para lograr la compatibilidad con todos los navegadores y sus versiones, vamos a utilizar 5 propiedades distintas.

Las dos primeras son necesarias para versiones anteriores de Mozilla Firefox y de navegadores basados en WebKit, como Safari y Google Chrome. La tercera propiedad es la estándar de CSS 3, válida para Opera y para todos los navegadores actuales. Las dos últimas son filtros específicos de Microsoft (Shadow Filter) y son necesarias para antiguas versiones de Internet Explorer.

(más…)

Tablas de compatibilidad de navegadores con HTML5, CSS3, SVG…

Hace unos días hemos visto cómo usar la propiedad text-shadow y hablábamos de su compatibilidad con los navegadores actuales.

Ahora os traigo una interesante página en la que podremos consultar la compatibilidad de los principales navegadores con muchas de las características de HTML5, CSS3, SVG y otras tecnologías web que están por llegar.

El proyecto se llama “When can I use…” y podemos encontrarlo dentro de un blog llamado Fyrdility, cuyo autor es Alexis Deveria.

Esta herramienta puede resultar especialmente útil para los que nos dedicamos habitualmente a esto del diseño web. En muchas ocasiones necesitas usar una determinada propiedad o característica en el código de tu página web, pero no sabes cómo se verá en otros navegadores, y tampoco puedes estar comprobándolo siempre en cada uno de ellos.

Vía: Ceslava, Criterion & [Q]interactiva

CSS: Texto con sombra usando text-shadow + Shadow Filter

Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.

La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.

Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.

Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:

.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}

(más…)

Ir arriba