Etiqueta: css

Blend, la forma más sencilla de hacer degradados CSS

Publicado el

por Juan Diego Polo

Es cierto que los degradados hace algunos años que dejaron de estar de moda. Los diseños actualmente son más planos, más ligeros y minimalistas, pero eso no significa que muchos de nuestros clientes no quieran saber de modas y prefieran apostar por los clásicos cambios sutiles de color en los fondos y componentes de sus sitios web.

Existen muchas aplicaciones que ayudan a diseñar degradados en CSS, pero la que os presentamos hoy es seguramente la más sencilla e intuitiva de todas: Blend.

Solo tenemos que elegir el color inicial y el final y pulsar en el botón central. Una vez mostrado el degradado, moveremos el eje hacia un lado u otro para aumentar la cantidad de uno u otro color, siendo posible en todo momento obtener el código CSS desde la misma pantalla.

captura-20

Creado por el diseñador Colin Keany, de DigitalOcean, no requiere registro ni identificación de ningún tipo. Tampoco tiene publicidad ni enlaces hacia otras páginas, aunque sí­ pueden encontrarse los clásicos botones para compartir el proyecto en las redes sociales.

Stylizer, para crear CSS de forma mucho más intuitiva

Publicado el

por Juan Diego Polo

Las hojas de estilo en una web son las responsables por todo su diseño: los colores, los espacios, el tipo de letra, la estructura… a menudo solo tenemos que cambiar de CSS para tener una web completamente renovada, aunque es necesario tener bastantes conocimientos para poder realizar los cambios deseados en poco tiempo.

Lo que ofrece Stylizer es una herramienta que ayuda a realizar cambios en el archivo CSS de forma visual, con un editor que puede abrir cualquier web local para realizar el trabajo.

captura-100

La aplicación permite que se vean los cambios de forma inmediata a medida que realizamos alteraciones en el diseño, evitando el F5; ofrece recursos para hacer de forma automática tareas repetitivas; permite el cambio de navegador de Internet para verificar que todos son capaces de mostrar el resultado que estamos deseando; ofrece barras de desplazamiento para cambiar el valor de las variables, evitando así­ la introducción manual de números en caso de que no lo queramos; tiene una herramienta para incluir los colores en una paleta con un simple click; dispone de sistema de detección de errores en la sintaxis…

Aunque es posible bajar una demostración, y ver un ví­deo con un ejemplo de uso, la aplicación, disponible para Windows y Mac, no es gratuita. La licencia cuesta 79 dólares para la versión 6, que fue lanzada recientemente.

strml – Una web que se construye sola

Publicado el

por Juan Diego Polo

Si estáis aprendiendo a programar páginas web, a entender mejor lo que se puede hacer con CSS y a jugar con HTML5, echad un vistazo en strml.net.

Se trata de un proyecto creado por Samuel Reeds, programador que decidió crear una web que se construye a media que leemos, ya que el texto, en inglés, va indicando las alteraciones que la propia web va sufriendo.

Nada más entrar veremos un texto negro con fondo blanco, texto que empieza a aparecer queriendo «más cambios». A medida que el tiempo pasa, la propia web indica los cambios sufridos: columnas, colores, efectos… ayudando así­ a entender cómo afecta el código al resultado final.

La animación puede pararse en cualquier momento, siendo así­ un excelente recurso para comentarlo en clase, ayudando a entender mejor la estructura de una web moderna.

captura-33

Como veis en la imagen, el resultado final no es impresionante, pero sí­ muy didáctico. En este caso está claro que lo que importa es el camino recorrido, y la original forma de mostrarlo.

codecast, un editor HTML y CSS en la web

Publicado el

por Juan Diego Polo

codecast

Si estáis aprendiendo HTML y CSS y queréis usar un editor rápido y eficaz, codecast puede ayudar mucho.

Se trata de una aplicación web que, sin necesidad de registro, permite escribir el código en el panel izquierdo y ver el resultado de lo programado en el derecho, sin necesidad de hacer f5 ni de usar bloc de notas para copiar y pegar código.

No acepta php, asp, ni ningún otro lenguaje de programación dinámico, no es tan sofisticado como scrapfy. Se parece, en su filosofí­a, a lo que hace dillinger con el markdown, siendo ideal para uso educativo.

Si queréis algo más completo siempre podéis acceder a la nueva versión de codeanywhere, aunque no es tan intuitivo ni práctico para los que están empezando en el mundo de la programación web.

Shade, una aplicación web para quien usa degradados en el CSS

Publicado el

por Juan Diego Polo

Si os gustan los degradados en una página web y queréis usarlos en vuestro proyecto, aquí­ tenemos una aplicación web que nos puede ayudar mucho.

Hay degradados CSS lineales (linear-gradient) y radiales (radial-gradient), siendo el primer caso, donde la transformación de color va avanzando lí­nea a lí­nea, la que tratan en jxnblk.com.

Solo tenemos que entrar a la página e indicar el color base para poder empezar a trabajar. Para hacerlo es posible alterar las variables de los controles de la izquierda, dedicando los de la derecha a gestionar valores relacionados con el brillo y saturación.

A medida que movemos los controles, veremos los cambios en tiempo real en el panel superior, siempre con la linea de CSS que deberemos incluir en nuestra hoja de estilos.

El ejemplo que mostramos en la captura superior responde a background-image: linear-gradient(-90deg, #DFF3DD, #1E4328);, tal y como se puede ver en la sección derecha de la misma, valores que se alteran a medida que probamos diferentes combinaciones.

Aunque los degradados han perdido el protagonismo que tení­an hace unos años, aún pueden ser utilizados en proyectos que necesiten destacar alguna zona especí­fica, por lo que vale la pena guardar este enlace en la categorí­a de Utilidades para Diseño.

Más de 800 plantillas web gratuitas en HTML5

Publicado el

por Juan Diego Polo

Si estáis buscando plantillas gratuitas para comenzar a desarrollar un proyecto web, echad un vistazo en templated.co, don, bajo licencia Creative Commons, se ofrecen 844 templates diseñadas y construidas por Cherry (@cherrynastor) y AJ (@n33co).

Las plantillas pueden usarse en proyectos comerciales, solo es necesario indicar el crédito del trabajo en alguna parte de la página final. Todos los diseños ofrecidos se adaptan a diferentes tamaños de pantalla, siendo necesario editar el contenido para adaptarlo a nuestras necesidades (ellos mismos recomiendan sublimetext.com para realizar ese trabajo).

Para el desarrollo han usado el framework Skel, bien documentado y disponible de forma gratuita en la web, ocupando solamente 23kb.

Destaca en producthunt bajo el tí­tulo: A collection of 844 free CSS and HTML5 site templates, se transforma en un buen recurso para tener en nuestra categorí­a de Utilidades para Diseño.

CSS Dig, una extensión chrome para analizar hojas de estilo

Publicado el

por Juan Diego Polo

Si trabajáis diseñando o dando manutención en páginas web seguramente os pasáis mucho tiempo analizando y alterando hojas de estilo (archivos .css). Hoy os presentamos una extensión que puede ayudar a realizar el trabajo de forma mucho más sencillo: cssdig.com.

Disponible solo para Chrome, agrupa todos los archivos css a los que hace referencia una página especí­fica, mostrando detalles de la información en un único panel, con tres posibles visualizaciones:

Resumen

Para conocer las páginas CSS a las que se hace referencia. En caso de no poder obtenerse el contenido de alguno de ellos, se indicará en esta página, donde también es posible seleccionar o eliminar hojas especí­ficas.

Propiedades

Para ver las caracterí­sticas agrupadas de todos los archivos CSS indicados antes. En dos columnas es posible analizar rápidamente las propiedades y los valores asociados.

Detalles

Para ver el origen de una propiedad especí­fica. Solo tenemos que indicar lo que estamos buscando para obtener los lugares a los que se hace referencia en los archivos css (en la imagen podéis ver un ejemplo con colores: indicamos el color azul y vemos los lugares a los que se hace referencia al dicho color dentro de los archivos CSS).

Como veis, es mucho más fácil de analizar una hoja de estilo usando CSS Dig que las herramientas ya existentes en el propio Chrome.

Adobe lanza nueva versión de Brackets, editor de texto de código libre, y extensión para generar CSS a partir de PSD

Publicado el

por Juan Diego Polo

Un editor de texto que entiende de diseño web.

Así­ presentan desde Adobe a la nueva versión de su proyecto brackets.io, un editor de texto, con código libre, que ve hoy su versión 1.0, construido para los diseñadores web y desarrolladores de aplicaciones que trabajan con HTML, CSS y JavaScript.

El editor incluye varias herramientas de ayuda integradas para facilitar la construcción y depuración del código, permitiendo ver siempre el resultado de lo que programamos en tiempo real.

Esta versión también incluye una vista previa de una extensión extremadamente útil, un nuevo servicio de Creative Cloud que permite ver y obtener la información de archivos PSD desde el editor de texto y generar un CSS con información de colores, fuentes, medición, gradientes, etc. Se trata de la extensión Extract, aún en modo de pruebas, por lo que los resultados no son muy exactos, siendo incluso posible ver errores durante la lectura.

Es posible bajarse el editor con la extensión incorporada o instalar únicamente Brackets, de forma gratuita en brackets.io.

CSS Shapes Editor para Chrome permite crear e interactuar con formas CSS en sitios web

Publicado el

por Fco. José Hidalgo

CSS Shapes Editor

CSS Shapes Editor es una extensión para Chrome que añade una nueva barra lateral en el panel de elementos de herramientas de desarrollo llamada «Shapes», con la cual, los diseñadores y desarrolladores web como aquellos otros que así­ lo deseen, podrán crear y editar formas en CSS como polí­gonos, cí­rculos y elipses en elementos seleccionados, permitiendo la interacción con las mismas, observando en tiempo real a través del propio navegador web las variaciones que produce su integración en los elementos que existen a su alrededor en función de las modificaciones que se realicen, ya sean tirando desde cualquiera de sus nodos, generando cualquier tipo de rotaciones o escalando sus tamaños.

Hay que señalar que esta extensión, que va por su versión 1.1.0, puesta a disposición a los usuarios hace dos dí­as, ha sido desarrollada por Razvan Caliman, estando disponible para su instalación a través de la Chrome Web Store para Chrome 37 en adelante. Además, el código de CSS Shapes Editor está disponible a través de la plataforma GitHub, donde los usuarios pueden entrar para realizar su descarga o incluso sumarse como contribuyentes al proyecto, y donde además encontrarán un ví­deo de una demo de su funcionamiento, instrucciones de instalación y las instrucciones de uso, entre otros elementos.

Para que podamos hacernos una mejor idea, y como una imagen vale más que mil palabras, os dejamos con el señalado ví­deo:

Tomodo, una aplicación que nos permite cambiar el css y javascript de cualquier sitio web

Publicado el

por Juan Diego Polo

Si queréis consultar una página web con una hoja de estilos o un comportamiento especí­fico, tomodo.com os puede ayudar. Se trata de una aplicación que permite hacer una versión personalizada de cualquier página, indicando la url de la misma para que podamos sobreescribir el css y el javascript. En algunos casos (no es compatible con todos los sitios web) podemos retirar e incluir contenido, llevando la personalización al máximo.

El resultado puede guardarse en un subdominio de tomodo, permitiendo ser consultado por cualquier persona. Ellos no guardan nada en sus servidores (no se clona el contenido), solo se hace de puente entre el servidor original y el cliente alterando los componentes especificados por el usuario.

El funcionamiento es semejante a lo que podemos hacer con Greasemonkey, aunque en este caso no es necesario tener una extensión, generando resultados que pueden consultarse desde cualquier dispositivo.

Desde tomodo comentan que se retirarán los sobdominios que reciban denuncias, y en su FAQ incluyen un código que los webmasters podrí­an incluir en su robots.txt para que su web no pueda ser alterada por la plataforma.

Personalmente lo encuentro una muy buena idea que puede usarse en cursos de programación y diseño. Un ejercicio del tipo «cambia el aspecto de reddit completamente usando tomodo» puede ser muy productivo.