AlyenStudio » html

Crea impresionantes animaciones en CSS3 con Sencha Animator

Alyen — Sun, 14 Nov 2010 23:07:28 +0000

Cada vez se está dejando de usar aplicaciones y programas de terceros, como Flash, al diseñar páginas web. Un ejemplo claro está en los videos, que ahora pueden ser reproducidos sólo usando HTML5, sin complementos adicionales. Y ya que la web actual lo permite, ahora puedes crear animaciones bastante buenas, que ya parecen videos, sólo utilizando CSS3.

Sencha Animator te permite crear animaciones de alta calidad, que te hacen levantar una ceja, usando única y exclusivamente CSS3, ni siquiera JavaScript, por lo que sí o sí podrá ser reproducido en cualquier explorador de Internet.

Este programa está orientado principalmente hacia la publicidad en internet. Ya que las animaciones que se pueden crear con él son tan buenas como las de Flash, hace hincapié en que usar CSS3 tiene muchas más ventajas en comparación a usar Flash para pequeños banners de anuncios, que básicamente son una especie de Gifs animados a los que les das clic.

Lo que puedes lograr con este nuevo programa son animaciones como movimiento de imágenes, rotación, manejar texto, y todo lo demás que puedes ver en estos ejemplos ofrecidos en la página web oficial. Estos demos sólo pueden ser vistos en algunos exploradores que utlicen WebKit, como Chrome, debido a los aún notables problemas de compatibilidad con HTML5 y CSS3.

El editor trae a la mente (de nuevo) a Flash, ya que trabaja con línea de tiempo y acciones que ocurren en determinado momento. Puede ser instalado en Linux, Mac y Windows, y viene en dos versiones: estándar, que puedes descargar, y la edición para publicidad, que aparentemente será paga.

Link Sencha Animator

Via Crea impresionantes animaciones en CSS3 con Sencha Animator

4 Ferramentas para otimizar CSS

Alyen — Fri, 27 Feb 2009 09:55:26 +0000

Sempre se pode otimizar os códigos, aqui vou dar uma pequena lista de ferramentas singelas e muito úteis para melhorar e reduzir o tamanho das folhas de estilos.

Para realizar nosso teste, vamos utilizar a folha de estilo de Kabytes que atualmente tem um peso de 8.256KB

Clean CSS : Muito fácil de utilizar simplesmente colamos o código ou lhe damos a url do mesmo.
CSS Teak : Similar ao anterior, com uma utilidade de que podemos baixar um widgets para OSX. É muito prático já que uma vez que subimos o arquivo para otimizar o site nos devolve o css otimizado pronto para baixar.
flumpCakes : Mesma metodologia, não é tão pratico, quando gera o código otimizado temos que o copiar e colar no novo css de forma manual.
Icey CSS Compressor : Extremamente rápido, tem o mesmo “problema” do anterior que não gera o arquivo, você tem que o copiar diretamente do html que o site gera.

Resultados:

DSS Card – Direct Service System

Alyen — Wed, 18 Feb 2009 16:26:09 +0000

Dss Card – Direct Service System

Desenvolvimento:

WordPress
Válido HTML5
CSS
jQuery
Suporte para os navegadores (IE, Firefox, Opera, Safari, Chrome)
Newsletter
Suporte a Mult-Idiomas

Demo: www.dss-card.com

jQuery – Fade in/out

Alyen — Mon, 02 Feb 2009 17:31:11 +0000

Jquery Fade In.Fade Out – É uma libéria jquery que nos permitirá agregar efeitos de desvanecimento a qualquer elemento de nossa web, seja Texto, imagens ou todos os elementos dentro de uma DIV. Os desvanecimentos se apresentam num 30% e ao situar o nosso mouse sobre o mesmo o leva ao 100%, fazendo um efeito visual bem atraente.

Ver Demos - Baixar o Script – Uso e Info Jquery Fade In.Fade Out

Fonte visual-blast

Sexy Page Curls – Dobrar as esquinas com jQuery

Alyen — Mon, 26 Jan 2009 09:20:38 +0000

Estes efeitos normalmete era gerado mediante javascript + imagens + .sfw (flash). Sexy Page Curls, mostra outra alternativa, esta vez baseada em Jquery, com um efeito tão atraente como os demais e com o mesmo fim.

Link Sexy Page Curls

Via webmasterlibre

$fx() – JavaScript animation library

Alyen — Mon, 26 Jan 2009 09:13:13 +0000

$fx()

$fx() ver 0.1 é um pequeno e realmente muito flexível Javascript para animar elementos HTML. Permite alterar qualquer propriedade CSS, combinar efeitos em corrente ou em paralelo, também tem capacidade para estabelecer diferentes chamadas que lhe dá ainda mais flexibilidade.

Os exemplos e as idéias de como implementar me deixou fascinado, asim que dediquem um pouco de tempo para ver de que se trata.

Link $fx() ver 0.1 -Exemplos e Manual de uso – Baixar