volver a SuperCSS
SuperCSS

SuperCSS #68

# Newsletter sobre diseño web en español #

Bienvenido al número #68 de SuperCSS!

El nuevo formato de imagen para web WebP sigue optimizándose para reducir aun más su tamaño y conseguir descargas más rápidas.

Hay que recordar que es un formato capaz de reducir en un 26% el tamaño de imagen sin perdidas comparado con un .png y entre un 25-34% las imágenes con perdidas con respecto a un .jpg actual.

El equipo encargado de este formato en Google, anunció hace unos meses que también se podrá usar para imágenes animadas, reduciendo en este caso hasta un 57% los tamaños de un .gif animado tradicional.

Si queréis ver este nuevo formato de forma experimental podéis acceder con Chrome a la Google Play Store, todas las imágenes son WebP.

Hasta el próximo envío.

PD: Por fin está disponible la primera versión oficial de Macaw. Seguro que revolucionará el mercado de aplicaciones de diseño web. Comentaremos sus principales características en el siguiente número.

Articulos & Tutoriales

 

6 trucos CSS que tal vez no sepas

www.antonionavajas.com
Este artículo recoge 6 trucos de CSS y CSS3 muy útiles y que no todo el mundo conoce ordenados de más comunes a más raros.

CSS3: Texto vertical

www.bufa.es

Si alguna vez has pensado presentar texto en vertical con CSS3, este tutorial te enseña como hacerlo con la ayuda de las propiedades transform y transform-origin.

Links con aspecto de botón, activado y desactivado

joseoliveras.es

Artículo que incluye diferentes ejemplos para conseguir un link con aspecto de botón. Encontrar un método que se adapte a casi todos los casos no es fácil.

jQuery: Mostrar animaciones según te desplazas por la página

www.miguelmanchego.com

Tutorial para añadir animaciones a una landing page o a un sitio con navegación vertical aprovechando las ventajas de las animaciones en CSS3.

Accesibilidad web en WordPress

ayudawp.com

Un completo repaso a la accesibilidad web y como podemos aplicarla en un proyecto con WordPress, cuando hagamos uso de ese CMS.

 

Inspiración

 
Ô Green by Nestle
Ô Green by Nestle
Just Bespoke
Just Bespoke
SM+P-Architects
SM+P-Architects
Axara
Axara
Slam Dunk History
Slam Dunk History
NZK
NZK
 

Recursos

 
CSS Diner: aprende selectores CSS

CSS Diner: aprende selectores CSS

CSS Diner es un pequeño juego para aprender a usar los selectores de CSS. Tendrás que escribir el selector correcto para superar el nivel y hay 26!. Al principio parece fácil, pero luego la cosa se complica…

 
Iconion: creador gratuito de iconos

Iconion: creador gratuito de iconos

Iconion te permite convertir cualquier fuente de iconos en iconos PNG añadiendo diferentes efectos como color, sombra, fondo, etc… Es gratuito y está en versión para PC y Mac.

 
Gridzzly: papel de retícula personalizado

Gridzzly: papel de retícula personalizado

Con Gridzzly podrás crear tu propio papel de retícula personalizado para usar en tus wireframes.