CSS3

Fusionar fondos con CSS3

Posted on Actualizado enn


css-background-blend-modeTodos los diseñadores que comenzaron con Photoshop y después pasaron a la web se han encontrado que no pueden utilizar modos de fusión de capas por que tienen problemas al separar las imágenes.
Con CSS3 parte de esos problemas se pueden ver resueltos (no todos), y que mejor que hacerlo en el código. Aquí les dejo un articulo desde el sitio Mantra Creativo en donde nos muestran el resultado, su código y una tabla con la compatibilidad en navegadores.
Si quieren experimentar y ver lo que su imaginación hace con eso, pasen por aquí.

Extract PSD en Brackets 1.0

Posted on


heroPor fin tenemos una versión oficial de la aplicación para el editor de código gratuito Brackets.
Y la gran novedad es la implementación de la extensión Extract PSD en donde podemos ver un archivo PSD con todas sus capas y copiar de forma rápida sus características al estilo CSS de cualquier página web.
Pero eso no es todo, por que te permite utilizar rápidamente las imágenes utilizadas en tu PSD y guardarlas en la carpeta y formato que quieras.

Para los que no conocen esta aplicación y necesitan trabajar archivos HTML, CSS o JS les recomiendo darle un vistazo por que puedes ver de inmediato los cambios y cada vez que seleccionas parte del código te va mostrando que estás editando, así que resulta ideal cuando aun no entiendes bien el funcionamiento del HTML y CSS.  Lo mejor es que siempre ha sido de código abierto, es decir, que es de libre distribución.

Como tiene tan buenas características fue adquirido por Adobe y podemos ver las mismas caracteristicas en Edge Code y que puedes descargar si tienes una cuenta de Creative Cloud.

Los dejo con un video realizado por Code4d explicando de forma simple sus principales características. Leer el resto de esta entrada »

Tutorial: Menú con HTML y CSS

Posted on


Después de mucho tiempo por fin puedo realizar un nuevo video tutorial en donde explico a realizar un menú con opciones desplegables (o submenú) partiendo de una lista. Si sabes algo de CSS podrás personalizar este menú para tus diseños.

Si sigues leyendo podrás ver el código utilizado. Leer el resto de esta entrada »

Nueva herramienta de Google para diseñar sitios y avisos en HTML5

Posted on


web-designerA traves de Fayerwayer nos enteramos de que Google ha sacado una nueva herramienta para diseñar sitios y avisos en HTML5  (a parte de Google Swiffy que convierte archivos SWF en HTML5) llamada simplemente Web Designer y apunta al sector profesional ya que se requiere conocimientos previos de HTML y CSS como mínimo.

Esta disponible desde ayer 30 de Septiembre y se encuentra en su versión beta (también en español) para Mac y Windows desde aquí.

La herramienta fue desarrollada pensando inicialmente en los avisadores, de forma que pudieran crear publicidad en HTML5 para móviles y equipos de escritorio. Sin embargo, también es posible crear sitios interactivos y animaciones para otros propósitos. Google afirma que planea expandir las características disponibles para otros contenidos en el futuro.

La herramienta es muy visual, aunque se puede ingresar al código JavaScript y CSS para ajustar diferentes aspectos directamente en un editor integrado. Se puede hacer vista previa de los cambios en cualquier navegador instalado en el equipo. Web Designer también incluye una herramienta de lápiz para dibujar, además de una línea de tiempo para crear animaciones. También permite crear contenido 3D con CSS3 e importar componentes para galerías, mapas e insertar videos de YouTube.

Como es gratis  puede darle ventaja sobre otras alternativas como Adobe Muse o Reflow.

A continuación les dejo un extenso recorrido por las principales características de la aplicación.

Leer el resto de esta entrada »

Transformaciones, transiciones y animaciones CSS3.

Posted on Actualizado enn


En este tutorial traido desde creativasfera vamos a ver las transformaciones de CSS3, así como las transiciones y animaciones de CSS3. Las transformaciones de CSS3 permiten modificar la visualización de los elementos de una página web tanto en 2D como en 3D. Con las transiciones de CSS3 podemos crear exactamente esto, un efecto de transición, de los elementos en la pantalla. Con las animaciones de CSS3 podemos crear muchos efectos con movimiento sin necesidad de JavaScript, uso de frameworks o de la librería jQuery, de aquí su potencia. La combinación de HTML5 con CSS3 y en algunos casos JavaScript (por ejemplo, para el elemento de dibujo canvas), podremos crear sitios de la potencia de Flash, de aquí el declive de esta tecnología en web no optimizada para SEO y su paso a la creación de aplicaciones y juegos para móviles. Leer el resto de esta entrada »