Blog de Tecnología e Internet

Posts con la etiqueta ‘css’

CSS3PS: Extensión de PhotoShop para convertir formas en CSS

No cabe la menor duda de que PhotoShop es un software enormemente utilizado en el mundo del diseño en general, y como no, también en el del diseño web. En este último caso, los proyectos realizados en PhotoShop acaban siendo transportados a HTML + CSS. Por ello, es interesante disponer de alguna herramienta que nos ayude en esta tarea.

En concreto, vamos a hablar de CSS3PS; se trata de una extensión para PhotoShop que nos permitirá obtener (de forma sencilla) el código CSS correspondiente a una determinada forma diseñada en el programa de Adobe. Esta extensión está disponible de forma gratuita desde su web oficial, para las versiones CS3, CS4, CS5 y CS6 de PhotoShop.

En su mismo sitio web tienen disponible un vídeo en el que muestran como instalar y utilizar CSS3PS; en cualquier caso, os dejo el mismo vídeo después del salto. Como observaréis, tanto la instalación como el uso es muy sencillo, aunque cabe mencionar que requeriremos de internet, ya que esta extensión echa mano de su web para ofrecernos el código en CSS. Leer más →

Comparte fragmentos de código fácilmente gracias a SnipSource

Si nos dedicamos a algún campo de la programación informática o alguna actividad derivada, y trabajamos en equipo, es posible que nos veamos habitualmente en la situación de compartir fragmentos de código con nuestros compañeros. SnipSource es una aplicación web que nos va a facilitar esta tarea.

El funcionamiento es sencillo; para compartir un snnipet de código, tan sólo debemos dirigirnos a la web de SnipSource y cubrir el formulario que se presenta ante nosotros. En él debemos indicar un título y el lenguaje de programación del código que vamos a introducir (JavaScript, PHP, C, CSS, Java, …). Finalmente nos restará pegar el fragmento de código en su correspondiente campo.

Tras esto, obtendremos un enlace corto en forma de URL, el cual debe ser el que debemos facilitar al destinatario de nuestro código. Cabe mencionar que además de lo ya indicado, tenemos la posibilidad de proteger nuestros snnipets con contraseña y/o requerir que sea necesario rellenar un captcha para ver el fragmento de código.

Animatable: Fantástica colección de animaciones CSS3

En las webs actuales estamos más que acostumbrados a ver elegantes animaciones y transiciones que hacen que la navegación por parte del usuario sea más agradable. La idea es que cada vez se utilice más CSS y no otras alternativas para realizar estos efectos.

Si no sabéis exactamente a que me estoy refiriendo, os animo a que visitéis la colección de transiciones CSS3 que podemos ver en Animatable. Como veréis, son transiciones que no deberían ser demasiado complicadas de implementar, sin embargo, muy agradables de ver. Podemos apreciarlas pasando el ratón por encima de cada uno de los 39 ejemplos disponibles; otra opción que tenemos es verlas todas a la vez, pero os recomiendo que utilicéis la primera ya que podemos obtener un resultado no deseado.

Si deseamos ver cómo implementar alguna en concreto, no tendremos más que inspeccionar el código fuente para hacernos una idea, o si lo preferimos, podemos descargarnos el código fuente completo desde el espacio en Github del autor. Además, lo mejor de todo es que alguno de los ejemplos nos puede servir de inspiración para utilizar en alguno de nuestros proyectos.

Generador de Sombras CSS

No es que sea muy partidario yo de usar este tipo de herramientas, pero he de reconocer que para ciertos casos pueden llegar a ser útiles. Estoy hablando de un Generador de Sombras CSS. En este caso se trata de una herramienta online que nos permitirá, de forma visual, “diseñar” una sombra para un div y obtener el código resultante para usar en nuestro proyecto.

Para acceder a esta herramienta gratuita basta con hacer click en el siguiente enlace, y estaremos en disposición de comenzar a cambiar parámetros. Como podéis ver en la imagen superior, podemos cambiar desde el estilo de sombra, hasta el tamaño de la caja (div),… así como diversos parámetros de la sombra, tal y como pueden ser opacidad, blur, desplazamiento en el eje X, en el eje Y,...

Una vez consideremos que la sombra está bien para nuestras necesidades, no nos quedará nada más por hacer que copiar el código CSS que se nos ofrece y pegarlo en nuestra hoja de estilos. En definitiva, esto es algo que podríamos hacer nosotros directamente con código, pero que ciertamente, si estamos empezando a entender las sombras CSS o simplemente queremos ahorrarnos un poquillo de tiempo, creo que puede ser de gran utilidad.

Información

Aviso legal y Política de Privacidad

Contenido publicado bajo licencia Creative Commons

Licencia de Creative Commons