Category: CSS

Artí­culos, opiniones y demás sobre Cascading Style Sheet.

Categories
CSS3 Herramientas html5 JavaScript

Adobe mata a Flash y lanza Adobe Edge, su plataforma de animaciones HTML5, Javascript y CSS3

No he podido creer la noticia, después de haber invertido millones de dólares en el desarrollo de Flash, de haber escrito y reescrito ActionScript; Adobe se "echa" ante lo nuevo y reemplaza a Flash por HTML5, JavaScript y CSS3.

Lo hace mediante Edge, la herramienta por ahora gratuita que genera animaciones e interaccion del usuario.

Adobe Edge

La herramienta la puedes usar gratis por sólo 152 días desde su instalación.

Probando un poco he visto que para las animaciones usan jQuery y otras herramientas propias de Adobe. La interfaz recuerda a Lightroom pero el uso del timeline es igual a Flash. El código resultante es limpio y fácil de editar. Personalmente le veo mucho futuro.

HTML:

<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Untitled-1_edge.js"></script>
    <link rel="stylesheet" href="Untitled-1_edge.css"/>
 

Javascript que se usa en un ejemplo

Las características que más me llaman la atención las pongo en negrita:

  • Crea nuevas composiciones con las herramientas de dibujo y texto.
  • Importa los tipos de imágenes SVG, PNG, JPG or GIF files.
  • Crea animaciones con un editor de línea de tiempo. Anima posición, tamaño, color, fondo, rotación y más.
  • Añade archivos HTML existentes con animación, mientras se preserva la integridad de los layouts.
  • Copia y pega transiciones, las invierte y se puede escoger entre más de 25 efectos existentes.

Otras características se añadirán poco a poco, si quieres estar informado puedes seguir la página en Facebook o la cuenta en Twitter.

Enlace: Adobe Edge Preview

Categories
Artí­culos CSS3 Diseño Firefox Google Chrome html5

Efecto Abanico de Fotos en álbumes en Google+

Efecto Abanico en álbumes de Google+

Efecto de Abanico en Albumes de Google+ hecho con CSS3 y HTML5

Continue reading "Efecto Abanico de Fotos en álbumes en Google+"
Categories
CSS Herramientas

Guía de soporte CSS en correos electrónicos

Posiblemente el trabajo mas tedioso que tengas que hacer es estilizar un correo electrónico para que éste llegue bien a una bandeja de entrada.

Guia CSS para correos electrónicos

CampaignMonitor ha preparado una guia muy detallada que nos ayuda a ver que elementos y propiedades CSS son soportadas en diferentes clientes de correo de escritorio y web. Aunque esta lista fue publicada años atrás, ha sido actualizada sólo hace unos días.

Puedes verla en línea o descargártela en PDF o Excel.

Categories
CSS3 Herramientas html5

Sitios bonitos y elegantes con Gridless

Gridless es un framework HTML5 y CSS3 que permite hacer sitios web simples y elegantes usando una hermosa tipografía.

Gridless

El framework no usa grids para su funcionamiento, lo que si hace es "normalizar" las reglas CSS en vez de resetearlas. También añade estilos de impresión y

Funciona en todos los navegadores incluidos IE6.

Enlace: Gridless | Demo | Código fuente

Visto en: WebResourcesDepot

Categories
CSS Herramientas JavaScript

Usa CSS dinamicamente con “{less}”

Muchas veces al momento de escribir código CSS, hemos tenido la sensación de: ¿Por qué no puedo usar variables?, ¡Que bueno sería usar alguna función!. Ahora puedes hacerlo con {less}.

{less} modifica el comportamiento de CSS para que puedas usar variables, funciones, operaciones y mezclar estos para escribir código más rápidamente y usando tus talentos de programador.

El resultado es mostrado en el navegador como código CSS simple y funciona con todos los navegadores, también puede ser usado de lado del cliente y del servidor. Aquí algunos ejemplos:

Variables

Con {less}

CSS:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
 

Resultado

CSS:

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}
 

Mezclas

Con {less}

CSS:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Resultado

CSS:

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Funciones y operaciones

Con {less}

CSS:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Resultado

CSS:

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

y muchos otros ejemplos...

El sitio tiene extensa documentación y su uso puede ahorrarnos algunas líneas menos.

Enlace y descarga: {less}

Documentación: {less} docs