En Gradients Party pueden encontrar una gran cantidad de modelos de degradados en CSS listos para usar en cualquier diseño. Solo tienen que hacer click en alguno que les guste y se copiará automáticamente el CSS al portapapeles.

Si estos degradados no les alcanzan porque son insaciables del diseño, acá también tienen otro post donde pueden encontrar 60 modelos más.

La entrada Grandients Party, degradados en CSS listos para usar se publicó primero en Punto Geek.

En total son 60 modelos de degradados, de todos los colores y para todos los gustos. Tienen la opción de descargarlos en formato de imagen, o bien descargar el código CSS para usar directamente en sus diseños.

Hacer un degradado, claro está, no es algo muy difícil. El secreto está en tener buen gusto para combinar los colores.

Pueden acceder a esta colección de degradados en CSS desde aquí.

La entrada 60 modelos de degradados en CSS para usar gratis en tus diseños se publicó primero en Punto Geek.

Este tipo de recursos me encantan, por eso nunca dudo en compartirlo con todos ustedes; sobre todo con los diseñadores que nos leen.

Sombras en CSS gratis

Lo bueno de estas sombras es que son completamente gratuitas y libres para usar en nuestros diseños.
En total son 41 diseños distintos, listos para ser descargados y usados en segundos.

En cada diseño podemos ver el nombre de la fuente usada, la paleta de colores y, obviamente, el código CSS para usarlo en nuestros diseños.

Al tener los códigos, luego podremos modificarlos a gusto. No es lo mismo empezar de cero, que ya tener una base a editar. Podemos cambiar los colores, el tamaño de la sombra, etc.

La entrada Sombras para texto en CSS: 41 modelos gratis y listos para usar se publicó primero en Punto Geek.

El sitio se llama templated.co, y en él van a encontrar una lista interminable de plantillas bajo licencia creative commons que podrán bajar sin tener miedo de usar en sus sitios, nadie les reclamará nada.

En la lista verán una vista previa de la plantilla y el link para poder verla completa y descargarla. Además de eso también les indicará qué tipo de plantilla es, si HTML5 responsive, HTML5 o solo CSS.

Enlace: templated.co

Visto en Maestro de la Computación

La entrada Más de 840 plantillas responsive en HTML5 y CSS para descargar gratis se publicó primero en Punto Geek.

Enjoy CSS es un generador muy muy avanzado de CSS3, la nueva especificación de CSS que ya lleva algunos años entre nosotros, si lo estás empezando a estudiar te darás cuenta que algunas cosas han cambiado y otras son completamente nuevas, o si ya lo has implementado pero todavía no tienes suficiente experiencia con las nuevas reglas y las formas cortas de escribir algunas propiedades, bueno, ya no tienes que rajarte la cabeza pensando en el orden en que escribir esto o aquello o el nombre de los malignos prefijos para cada navegador, Enjoy CSS hace todo esto por ti.

Enjoy CSS te permite crear tres tipos de elementos: Input, Block o Button, al cual le puedes editar absolutamente todo: Texto, Clase, Estados (Active, Hover, Before y After), Fondo, Transiciones, Transformaciones,  Posición, Márgenes y Bordes. Cada una de estas opciones tiene un editor visual, no tienes que tocar nada de código para editarlo, el editor posee selector de colores, fuentes, gradientes y demás, y en el caso de las transiciones están todas las diferentes funciones de tiempo disponibles, por supuesto cada cambio se inmediatamente reflejado en el elemento.

Si tal vez necesitas algo rápido para comenzar existe una extensa galería de elementos de todo tipo para ayudarte a realizar la creación de tu elemento.

La función más destacada de Enjoy CSS es la exportación del código, esto lo puedes por cada una de las diferentes categorías de estilo o por todo el elemento, en este aspecto Enjoy CSS no deja de ser avanzado, te permite seleccionar la versión de todos los navegadores para los cuales estás trabajando y si estás utilizando un preprocesador de CSS como Sass y Less también puedes exportar el código en estos formatos.

Espero que les sea de utilidad este completo generador de CSS y disfruten más de su CSS.

Enjoy CSS

La entrada Enjoy CSS: Generador avanzado de CSS3 se publicó primero en Punto Geek.

En la versión número 3 de CSS se introdujo una característica increíblemente útil: la posibilidad de seleccionar determinados elementos hijos de un elemento padre en común, es decir, si tienes una lista desorganizada <ul> con varios items <li> ahora puedes seleccionas alguno de ellos o definir una sumatoria para seleccionarlos, por ejemplo, los items pares o impares, o cada 3 items.

A pesar de la excelente especificación que tiene siempre es un poco complicado comprender perfectamente como funciona, el ejemplo más claro es con las listas pero prácticamente se puede aplicar a cualquier listado de etiquetas que sean hijas de otra.

Si deseas aprender mejor como funciona este pseudo-selector te recomiendo NTH-Test, una pequeña aplicación web para que compruebes visualmente y de manera rápida lo que estás seleccionando actualmente cuando utilizas este selector.

NTH-TEST

La entrada NTH-Test: Aprende fácilmente como utilizar CSS nth-child y nth-of-type se publicó primero en Punto Geek.

HTML, CSS y JavaScript son solo la punta del iceberg en cuanto a desarrollo web se refiere, una vez conozcas como funcionan, sus especificaciones y sus estrechas relaciones apenas estarás entrando al maravilloso mundo de la web.

Como los desarrolladores evitamos a toda costa repetir lo que escribimos se crearon los preprocesadores de CSS, los cuales permite establecer variables, crear funciones y realizar operaciones matemáticas con las hojas de estilo, de esta forma te ahorrarás muchísimo tiempo al no tener que estar cambiando muchas líneas de código cuando deseas hacer una actualización o añadir una margen o espaciado a algún componente.

Bueno, después de la pequeña ilustración sobre preprocesadores de CSS hoy les presento otra excelente prueba del poder de la nueva versión de CSS: CSS3, esta vez es una pequeña pero increíble detallada animación de Mario Bros saltando para obtener una moneda, la animación fue creada solamente utilizando un elemento HTML y el resto lo hace el procesador de CSS, Sass.

Pueden ver la animación completa y su código cuente en CodePen

La entrada Mario Bros creado con SCSS se publicó primero en Punto Geek.

Antes teníamos que crear las imágenes de los iconos que íbamos a utilizar en nuestro sitio web y empezar a cargarlas una por una, ahora y gracias a los avances con las tecnologías web y en especial de CSS y fuentes web ya es posible tener todos estos iconos en solo archivo como si se tratará de una fuente con letras.

Tener fuentes de iconos tiene como ventaja que se comportan como imágenes vectoriales, puedes cambiarles el tamaño sin perder calidad, también puedes cambiarles el color sin ningún problema y si necesitas aplicar algún efecto como una sombra, animación o similar funciona sin problemas porque se comporta con un carácter más en una fuente normal.

Genericons es un repositorio de iconos que hace uso de esta técnica web para ofrecernos más de 100 iconos listos para usar en nuestros sitios y aplicaciones web, por supuesto los iconos son absolutamente gratuitos.

Descargar Genericons

La entrada Genericons: Colección de iconos en alta resolución se publicó primero en Punto Geek.

Te cuento que ya no es necesario una aplicación de escritorio ni un editor de código ni un lento y pesado, pero robusto IDE para editar código, ahora ya existen aplicaciones y herramientas online para ejecutar cualquier código que necesites y ver los cambios en vivo a medida que escribes el código.

A continuación les dejo una lista de editores de código en vivo y en la web, todos absolutamente gratuitos y sin nada que envidiarle a un editor de código como aplicación de escritorio:

CodePen

CodePen te permite incluir tu HTML, CSS y JavaScript en los panales destinadas para cada tecnología web y ver en vivo como cambia la forma final de tu código mientras lo editas. Permite guardar todos tus códigos, compartirlos, incrustarlos en otros sitios web e incluso ejecutarlos en los smartphones.

JSFiddle

JSFiddle es uno de los más populares porque es uno de los más completos, te permite agregar cualquier librería de JavaScript o CSS, pero lo mejor es que ya tiene un listado con docenas de las librerías más populares como jQuery, Mootools, YUI, e incluso frameworks JavaScript como AngularJS o EmberJS, permite además hacer peticiones AJAX dentro del editor, limpiar el código JavaScript y guardar varias versiones de tu edición.

Mozilla Thimble

Mozilla Thimble es uno de los últimos esfuerzos por la empresa Mozilla, quien esta detrás del popular navegador Firefox, de llevar a más personas las hermosas capacidades de las tecnologías web, aunque no tiene muchas opciones, es uno de los más rápidos, como punto a favor te muestra errores en tu HTML rápidamente y subrayado de etiquetas, puedes incluir CSS y JavaScript en el documento sin problemas, pero no tiene guardado de código, así que ten cuidado con cerrar la pestaña del navegador.

dabblet

dabblet es un editor enfocado al CSS y HTML, tiene dos vistas principales, el HTML y el resultado o el CSS y el resultado, como lo pueden notar esta enfocado al CSS de la página, puedes escribir cualquier CSS que se te ocurra y funcionará directamente en la previsualización, la forma final de tu código se puede compartir o ver a pantalla completa, también guarda todos las versiones que hagas del código.

CSSDeck

CSSDeck, como su nombre lo indica está completamente enfocado al CSS, te muestra un panel pequeño para el HTML, uno más grande para el CSS y por último el panel con el resultado de tu código, como punto a favor de CSSDeck, puedes cambiar el fondo de la página de resultados y crear enlaces únicos que puedes compartir para que cualquiera vea tu nueva creación, por último puedes descargar el resultado en un archivo .html.

JSBin

Lo mejor para el final, JSBin es una completa joya en cuanto a editores de código online se refiere, puedes incluir CSS, JS y HTML, agregar una o varias de las más de 50 librerías que tiene disponibles para importar, por supuesto puedes compartir el código final, incrustarlo en sitios web seleccionando que paneles deseas mostrar en el resultado final, exportar el código a un Gist de Github, guardarlo como plantilla y navegar desde la misma ventana a través de todos tus Bins.

La entrada Herramientas online para probar código en vivo se publicó primero en Punto Geek.

Este es otro post mostrándoles las capacidades de la nueva versión de CSS3, en esta oportunidad les traigo todos los modelos del Magic Mouse de Apple, desde el Macintosh Mouse lanzado en 1986 hasta el relativamente nuevo Apple Magic Mouse, todos, absolutamente todos creados con solo CSS3.

Los resultados son increíbles, muy increíbles, y no es porque sean de Apple, no, si no por todos los detalles tan bien logrados en todas las versiones, desde el cable, los colores, las sombras, el bixel de los mouse, es increíble, y todo esto realizado solo con CSS.

A continuación algunos ejemplos para que se hagan una idea de lo que les hablo:

Pueden ver la galería completa en Apple Mice

La entrada Todos los mouse de Apple hechos con CSS se publicó primero en Punto Geek.

¿Para qué imágenes, programas de edición como Photoshop o Illustrator si puedes hacer lo que quieras con CSS?

Una de las cosas que se pueden hacer solo con CSS y un elemento HTML son figuras geométricas, desde simples cuadros, círculos, triángulos hasta formas más complicadas como un Jinjiang o una estrella. Por hoy aprenderán como crear un simple triángulo, esta no es una explicación donde copias y pegas, realmente te explica el truco y como funciona para crear un triángulo solo con CSS:

¿Cómo se crea un triángulo con CSS? (Quería insertar la animación acá pero WordPress no lo permite)

Original creado por CSS-Tricks

La entrada Aprende como se crea un triángulo con CSS se publicó primero en Punto Geek.

Hoy me encuentro con un recurso que me hubiese servido muchísimo en semanas anteriores, se trata de extractCSS, un procesador de documentos HTML, en cualquiera de sus versiones, que extrae los ID, las clases y los estilos en línea o inline styles del documento en cuestión.

Posee algunas configuraciones, se puede seleccionar el tipo de información que se desea extraer del documento, el número de espacios de indentación y el estilo de las llaves de apertura en el CSS, cuando tengas todo listo solo debes copiar el HTML al que deseas extraer la estructura CSS y darle click al botón Extrac! verde, obtendrás al lado derecho la estructura de los estilos y si es el caso el estilo en línea de los elementos HTML que lo tengan.

extractCSS

La entrada extractCSS: Obtén la estructura, id’s, clases y estilos en línea de cualquier HTML se publicó primero en Punto Geek.

Al desarrollar aplicaciones o sitios web repetidamente nos encontramos con la situación que necesitamos algún componente de interfaz de usuario para cumplir con algún requerimiento, un componente de interfaz de usuario es un menú de navegación, un calendario, un seleccionador de fecha o Datepicker, también puede ser un Dialogo Modal, una barra de progreso o un seleccionador de color, elementos rutinarios que ya existen en Internet y son relativamente fácil de incorporarlos en nuestro proyecto o si necesitas algo más específico puedes también hacerlo tu mismo.

UIBox es una página web que funciona a modo de librería o recopilatorio de todos estos componentes, tratando de solucionar una de las mayores fortalezas y debilidades de Internet: su tamaño, a pesar que exista de todo, es tan grande que es difícil encontrarlo, el autor de la página web se encarga de recolectar los elementos manualmente, comprobar que tengan un Demo funcional, excelente documentación, y el soporte de varios navegadores, al encontrar un componente con estas características lo agrega a la librería haciéndolo más fácil de encontrar y posteriormente integrar en nuestros proyectos.

Así que la próxima vez que necesites algún componente rápido para tu proyecto solo entra a UIBox y lo tendrás funcionando en minutos.

La entrada UIBox: Colección de elementos de interfaz de usuarios se publicó primero en Punto Geek.

Siempre es bueno recomendar este tipo de cursos gratis, y en este caso les quiero dejar uno titulado «Maquetando el monstruo web», un curso con el cual aprenderán a armar una web HTML y CSS desde cero sin tener ningún tipo de conocimientos previos.

Acerca del curso

Ayuda al Dr. Frankestein en su afán de construir y darle vida al monstruo web, y aprende conjuntamente a él a dar los primeros pasos en la creación de sitios web con HTML y CSS de forma dinámica y divertida, con vídeos, exámenes y desafíos.

Este es un curso introductorio para aquellos que están arrancando desde cero a crear para la web. HTML y CSS son los dos componentes básicos de cualquier sitio web o aplicación, y debes aprenderlos para poder estructurar y presentar correctamente tus proyectos. Una vez completado el curso, contarás con los conocimientos necesarios para poder armar tu propio sitio web.

Pueden acceder al curso desde Acamica completamente gratis, solo tienen que registrarse en el sitio y esperar a que comience, ya que la fecha de inicio está programada para el 1 de septiembre. Igualmente, si están leyendo esto luego de la fecha de inicio no se preocupen porque pueden hacerlo igual.

La entrada Curso gratis de HTML y CSS para crear tu web desde cero se publicó primero en Punto Geek.

La unidad de medida EM es utilizada en el desarrollo web para definir tamaños escalables a los elementos, ya que utiliza como referencia el tamaño definido de la propiedad font-size, si este no está definido hereda el tamaño definido por el navegador, que normalmente son 16 px, así 1em = 16px, está unidad es utilizada muchísimo en estos días porque al ser una medida escalable es especialmente útil cuando se están creando sitios web que se necesita que sean Responsive o con diseño adaptativo.

Si estás creando un sitio web con diseño Responsive y apenas te enteras de esto o quieres actualizar uno que ya tengas listo y no quieres (nadie quiere) ponerte en la tarea de convertir manualmente todos los valores, ahora la tienes más fácil con Pixem, un convertidor de PX a EM y viceversa, lo único que tienes que hacer en copiar y pegar todo tu CSS, así es todo, sin límites, definir una base de tamaño de píxeles y darle click al botón Convert, obtendrás al otro lado el CSS pero con todos los tamaños, medidas y demás valores numéricos en valores de la unidad EM.

Más fácil imposible: Pixem

La entrada Convierte de PX a EM de todo tu CSS con Pixem se publicó primero en Punto Geek.

Cuando estamos programando algún proyecto siempre necesitamos a la mano la documentación del lenguaje de programación, librería o utilidad que estemos empleando para su implementación, porque no sabemos como hacer algo o saber si lo que necesitamos hacer es posible hacerlo con dicho lenguaje o librería.

Cada una de estas herramientas tiene sus sitios oficiales y su documentación oficial para ser consultada, pero como buen geeks que somos es mejor tener toda esta información reunida en un solo lugar para que sea mucho más rápido la consulta y no perder tanto tiempo buscando entre varias página la forma de hacer algo.

El desarrollador web Thibaut Courouble se dio cuenta de esto y decidió crear DevDocs, un sitio que recopila la documentación de los tres principales lenguajes de programación web, HTML, CSS y jQuery cuenta con una sección para cada lenguaje donde se encuentran organizadas por orden alfabético las etiquetas, atributos y utilidades de cada uno de los lenguajes, cada una con ejemplos, documentación clara y precisa sobre su correcto uso y la forma correcta de utilizarlas.

DevDocs

La entrada Documentación de HTML, CSS y jQuery en un solo lugar se publicó primero en Punto Geek.

La etiqueta background existe desde la primera versión de CSS, se mejoró su funcionalidad en la versión 2, y ahora con la versión número 3 de la especificación la etiqueta ha introducido mejoras considerables que permiten hacer muchísimas cosas con las imágenes de fondo de cualquier elemento HTML que antes se tenían que hacer con programas procesadores de imágenes como Adobe Photoshop, Fireworks o GIMP.

En la última versión de la etiqueta ahora es posible crear backgrounds múltiples a cualquier elemento HTML, cada uno con su imagen, dimensión y posición diferentes, aunque esto es posible desde Julio del año pasado, son pocos los que conocen sus posibilidades y es un poco más complicado implementarlos de forma correcta por la cantidad de posibilidades que ofrece gracias a la combinación de todas sus propiedades como: color, imagen, repetir la imagen, posición, tamaño y otras.

Si deseas empezar a utilizar esta propiedad en tus proyectos te recomiendo CSS Background Size una página creada para probar de forma rápida y directa varias configuraciones de la etiqueta background y ver fácilmente en vivo lo que significan dichos atributos, solo basta jugar un poco con los diferentes tamaños, orientación de la imagen y posición del fondo para ver el resultado.

CSS Background Size

La entrada Comprende mejor la etiqueta background de CSS3 se publicó primero en Punto Geek.

Los botones siempre han tenido un papel sumamente importante en las interfaces de usuarios tanto en software de escritorio como en la web, juegan un rol fundamental en la usabilidad de la aplicación. Los botones fueron hechos para hacer click, para hacer pulsados, una analogía de lo botones que tenían los aparatos eléctricos de hace décadas, un botón significa acciones, vínculos, llamados a hacer algo por parte del usuario.

Crear botones para la Web no es una tarea sencilla, hay muchos detalles que cuidar y actualmente existe muchísimas opciones para hacerlos, puedes crearlos desde cero desde un editor gráfico como Photoshop o Illustrator y luego convertirlos  a código o puedes utilizar una herramienta como CSSButton, una aplicación web con una interfaz sumamente fácil e intuitiva de usar que te permite crear botones con CSS3 válido con muchísimas opciones para personalizar, desde el borde del botón, hasta la animación entre los estados normal, hover y active del botón, pasando por la fuente, la sombra del botón o del texto y por supuesto las dimensiones o el fondo del botón.

Ten MUCHO CUIDADO de no hacer click en Browse o Rockstars porque perderán todas las modificaciones en las que hayan estado trabajando.

Si necesitas algo todavía más personalizado puedes importar directamente tú HTML y CSS al generador.

Cuándo hayas terminado de personalizar tu botón solo basta con darle click en Source para obtener el código CSS3 válido que podrás aplicar a tu botón en tu proyecto.

Si se crean una cuenta podrán guardar los botones que vayan creando así como compartirlos en la plataforma con el resto de los creadores, también puedes navegar las creaciones de los demás en la pestaña Browse y descargarlos libremente o usarlos como plantilla para tu botón.

CSSButton

La entrada Crea botones con CSS3 válido gráficamente con CSSButton se publicó primero en Punto Geek.

Esto es una gran ventaja desde varios puntos de vista, y uno de ellos puede ser el SEO, ya que a Google le gusta que los sitios carguen rápido y estén bien estructurados.

A continuación les dejo un par de herramientas muy útiles para minificar códigos en 3 de los lenguajes más utilizados: PHP, CSS y JavaScript.

Comprimir código PHP

1. Tiny PHP
2. Compress PHP Template
3. PHP Minifier

Comprimir código CSS

1. CSS Compressor & Minifier
2. Minifier
3. Pretty Diff (también soporta otros lenguajes)
4. Minify CSS
5. CSS Minifier

Comprimir código JavaScript

1. Online Javascript & jQuery Minifier Tool
3. UglifyJS JavaScript minification
4. Minify JavaScript Online
5. Online Javascript minifier

Visto en I Love Free Software – 1 – 2 – 3

La entrada 13 herramientas online para minificar código PHP, CSS y JavaScript se publicó primero en Punto Geek.

La Web en su filosofía de ser abierta, compatible y disponible para todos a veces supone un buen dolor de cabeza para los desarrolladores quienes muchas veces (por no decir siempre) nos encontramos con problemas de compatibilidad entre los navegadores, creaste algo genial, funciona y se ve bien, corre rápido, pero cuando vas a probarlo en otro navegador es un desastre total, no es de la quinta parte de como se ve y se comporta en el otro navegador.

Encontrar las soluciones a estos problemas de compatibilidad no es nada fácil, muchas veces no sabes ni que utilizar para solventarlos, pero ahora te será más fácil con Browserhacks, una colección de hacks y trucos de CSS y Javascript que te permitirán resolver mucho más rápido los diarios problemas que surgen cuando se está desarrollando para la Web.

Tienen trucos para todos los navegadores, Chrome, Firefox, Internet Explorer, Opera y Safari, resalto Internet Explorer porque como bien sabemos es el que más problemas da, menos mal Microsoft lo ha hecho más compatible y actualizado en las últimas versiones, para utilizar un Hack solo basta copiar y pegarlo en tu hoja de estilo o archivo de Javascript y ya esta.

Browserhack

Vía: Kabytes

La entrada Browserhacks: Encuentra la solución a problemas de CSS en todos los navegadores se publicó primero en Punto Geek.

Si eres un desarrollador frontend conoces de primera mano que existen en el mercado una basta variedad de Frameworks para todo, des de maquetación, grids, animaciones, funcionalidad específicas y muchos otros.

Existen tantos que decidirse por alguno puede ser una tarea que toma días en resolver, muchos sitios tiene opiniones muy variadas y diferentes,  a veces crees que encontraste el indicado pero luego surge uno perfecto que soluciona todas las necesidades que tienes para empezar el proyecto que tienes en mente.

Por ello te presento hoy CSS Frontend Frameworks un sitio web creado por usabli.ca, un grupo de desarrolladores independientes que crean aplicaciones y productos con alta usabilidad, el sitio muestra la comparación de más de 30 frameworks diferentes, entre la información que utilizan para compararlos está la compatibilidad con las versiones de los navegadores más usados, Chrome, Firefox, Safari, Opera e Internet Explorera, el lenguaje dinámico que utilizan para su creación, si es Responsive, es decir, si está creado de tal forma que el sitio web que lo utilice se puede ver correctamente en móviles y tablets, la licencia bajo la cual es ofrecido y por último un pequeño texto descriptivo del Framework.

CSS Frontend Frameworks comparison

La entrada Comparación de frameworks CSS se publicó primero en Punto Geek.

CSS Matic es una genial herramienta destinada a diseñadores que nos permite generar estilos CSS con efectos muy avanzados, todo online y gratis.

Editor gradientes: Con esta herramienta podemos crear geniales degradados con CSS, ya sea partiendo de los diseños predefinidos o creando el nuestro. Podemos cambiar los colores, la orientación del degradado, la opacidad, etc.

Radio bordes: Con esta se pueden crear cajas con bordes redondeados, totalmente con CSS y de forma muy sencilla. Podemos elegir el radio del borde, los colores, etc.

Textura suciedad: Nos da la posibilidad de crear texturas con efecto de «suciedad». Permite personalizar el ruido y su densidad, como así también los colores.

Editor sombras: Con esta herramienta se pueden aplicar efectos de sombras muy cool. Podemos personalizar la altura y el ancho de la sombra, el radio, el color, y un par de cosas más.

En fin, es un set de herramientas muy útiles que deberían tener en sus marcadores.

Enlace: CSS Matic

Visto en CodigoGeek

La entrada CSS Matic: generar estilos CSS con degradados, esquinas redondeadas, texturas y sombras online se publicó primero en Punto Geek.

Hoy en día existen muchísimos sitios donde los diseñadores y creativos puedes subir y mostrar su trabajo a la comunidad como Behance, Dribbble o Loviv, la mayoría de los elementos subidos son interfaces de usuario o UI por su siglas en Inglés, estás interfaces solo se encuentran en formato imagen como JPG o PNG y raramente el diseñador sube el archivo fuente en formato PSD, así que si algunos de nosotros desea tener esa interfaz de usuarios, formulario o botón en nuestras aplicaciones podemos maquetar en HTML y CSS el archivo fuente PSD.

Para los que no tenemos tanto conocimiento de maquetación web a continuación les presento una lista de elementos de interfaces de usuario con su archivo PSD y su respectivo código fuente HTML y CSS para descargar gratuitamente y así poder usarlos en tus proyectos web:

Classic Web Buttons

Mini Drop-Down Menu: PSD | CSS

Profile Tooltip: PSD | CSS

Mini Social App: PSD | CSS

Vertical Navigation Menu: PSD | CSS

Settings Panel: PSD | CSS

Pueden encontrar la lista completa de elementos en DesignBeep

La entrada Elementos UI web y moviles gratuitos en PSD y HTML/CSS se publicó primero en Punto Geek.

Para el año 1994 se consolida la W3C, o el Consorcio Internacional de la Web, cuyo objetivo principal es brindar la Web para cualquier persona en el mundo en cualquier dispositivo, a los dos años, en 1996, nacen JavaScript y Flash que hacen la web un poco más interactiva y con más estilo, así como más dinámica, para el año 1998 surge CSS o Hojas de estilo en cascada, convirtiendo la Web en un lugar mucho más colorido y con mucho estilo, dejando de lado el diseño con tablas.

PHP fue lanzado en el mismo año, 1998, brindando la posiblidad de crear sitios web dinámicos desde el lado del servidor, durante 5 años no hubo mayores avances hasta que en el 2003 fue lanzado un borrador de la nueva versión de CSS, dando origen a diversas aplicaciones bajo el nombre de la Web 2.0, así fue hasta el año 2008 donde la web se volcó hacia los dispositivos móviles y por último, solo hace 3 años, en el 2010, surge HTML5, el nuevo estándar de HTML, el lenguaje con que todo empezó.

La entrada La evolución de la Web se publicó primero en Punto Geek.

Los iconos son parte fundamental en el diseño de las aplicaciones web, gracias a ellos las aplicaciones son más fáciles de utilizar, haciendolas mucho más amigable para los usuarios. Cuando se está diseñando una aplicación, o un nuevo dieño para nuestro sitio web o blog es muy díficil encontrar un buen paquete de iconos, a menos que tengas tu propio diseñador.

IcoMoon es una aplicación que te ayuda en esta tarea, permitiéndote crear fácilmente fuentes de iconos para utilizar en tu aplicación, así como CSS Sprites, que son utilizados para tener en una sola imagen todos los iconos, mejorando la velocidad de carga del sitio web o descargar todos los iconos en imágenes independientes en formato PNG y SVG.

La aplicación te da la posibilidad de editar el tamaño de los iconos y el color, y si estás creando una fuente, también puedes editar el carácter del icono, de igual forma puedes importar tus propios iconos para utilizarlos en la aplicación, lo mejor de todo es que puedes editar cada icono a tu gusto, cambiándole la rotación, invirtiéndolos, el tamaño y la posición.

La aplicación cuenta con varios paquetes con cientos de iconos para todos los gustos, y también otros pagos que tienen todavía más iconos, pero con los paquetes gratuitos creo que es suficiente, una vez tengas tu paquete listo podrás descargarlos con formato PNG, SVG, como un Sprite o una fuente de iconos.

IcoMoon además de todo esto posee una extensión para Google Chrome con todas las opciones disponibles de forma offline.

La entrada Crear fuentes y sprites de iconos gratuitamente con IcoMoon se publicó primero en Punto Geek.

Visto en Geekosystem

La entrada La Mona Lisa recreada íntegramente en CSS se publicó primero en Punto Geek.

Uno de los hijitos (?) de Google cumplió tres años el día de ayer. Se trata nada mas y nada menos que de Chrome, su navegador web, que a decir verdad, ha dejado a todo mundo con un muy buen sabor de boca. Y de paso, gracias a su presencia, ha ayudado a que la evolución de los navegadores avance cada vez más y mejor.

Para celebrarlo Google ha creado una infografía interactiva, donde comenzando desde los años 90’s nos muestra el comienzo del protocolo HTTP, así como el nacimiento del HTML. De ahí en adelante van surgiendo los navegadores, desde Mosaic, hasta los que existen en la actualidad. Y para todos los curiosos, no sólo muestra los dibujos y etiquetas sobre la línea de tiempo, sino que al hacer click en cada uno de estos elementos, nos mostrará una pequeña descripción, a manera de resumen, con la opción de seguir leyendo más sobre el tema, u otras cosas que pueden descubrir.

Así pues, se vuelve una infografía bastante atractiva, ya sea para saciar la curiosidad, o como material de aprendizaje para las nuevas generaciones. Digo, no duden que algún día exista en las escuelas, así como Historia o Biología, una materia sobre Internet :)

Visto en: chrome.blogspot.com

La entrada Google nos muestra la evolución de Internet [Infografía interactiva] se publicó primero en Punto Geek.

Tag qualifying

.class {}

p.class {}

¿Cuál es la diferencia entre ambos?

El primero seleccionará todos los elementos que contengan el nombre de esa clase. El segundo seleccionará únicamente los elementos de esa clase que estén dentro de un elemento párrafo.

 El orden de los selectores importa

.class div { color:red }

div.class { color:green }

¿Por qué son diferentes?

En el primer ejemplo tenemos un espacio en blanco entre .class y div, indicando que estamos seleccionando «Cualquier div que sea descendiente de cualquier elemento cuya clase sea class». En el segundo caso se seleccionan los divs que sean de la clase class.

 La verdad detrás del uso de IDs

Al CSS no le importa mucho si utilizas clases o IDs, siempre y cuando les apliques algún estilo. En teoría con los IDs es más rápido, pero en la práctica no notarías la diferencia.

Si trabajas con Javascript, debes asegurarte que no haya IDs repetidos. Aparte  Javascript sí trabaja más rápido con IDs.

Los IDs tienen un mayor valor para CSS, si aplicas un estilo a un elemento que tiene una clase y un ID, lo que se tomará en cuenta será lo especificado por el ID.

Hovers

div:hover div { color:green; }

:hover es un selector que se aplica sólo cuando el mouse pasa por encima de un elemento en particular. Lo extraño es que no necesariamente se debe dar estilo al elemento que está activando el hover. En el ejemplo superior se está dando estilo a los divs descendientes del elemento div que está siendo cubierto por el mouse, pero no a él mismo.

Los espacios en blanco no importan

Esto:

div{color:red}

Es lo mismo que:

div      {

color        :          red;

}

Para lo único que se ocupan espacios es para especificar la descendencia de los selectores, por ejemplo

ulli { } no es lo mismo que ul li { } . Y claro, también se necesitan en caso de que quieras darle cierto orden a tu código CSS.

Sobre la escritura de clases

div { font-size:18px; font-weight:bold;font-size:22px;}

En caso de haber repetido alguna propiedad CSS aplicará como estilo la última listada, en el ejemplo el texto del div sería de 22px.

El orden en CSS importa

Si tienes dos selectores con las mismas especificaciones, como los siguientes:

.red { color:red; }

.green { color:green; }

Y después son aplicados al mismo elemento, el último selector será el que se aplique. El nombre de las clases dentro del llamado que se hizo en HTML no importa.

<div class=»red green»> Será VERDE</div>

<div class=»green red»> Será VERDE</div>

Visto en: css-tricks

La entrada Pequeños errores al iniciarse en CSS se publicó primero en Punto Geek.

Muy buena herramienta, así lo definiría en tres palabras. Se trata de un editor en línea que permite no sólo escribir el código, sino también compartirlo, y aún mejor, ver la previsualización de lo que estamos haciendo. Bastante útil creo yo, sobretodo en el ámbito educativo, pues el maestro puede proporcionar a los alumnos cierto código, y luego estos jugar con él e interpretarlo. O bien, pasarles un código que tenga errores, y que ellos los detecten, o etc. Y obviamente, también para los profesionales que quieren compartir el trabajo con otros colaboradores, para pulir aún más el código o lo que se pueda presentar.

En fin, que si andas metido en el desarrollo web Front End te vendrá bastante bien la herramienta, pues como sus creadores la describen es «Un campo de juego para desarrolladores web, una herramienta que puede ser utilizada de diferentes maneras. Uno puede utilizarla como editor en línea para crear snippets de HTML, CSS y JavaScript. El código puede ser compartido con otros, publicado en un blog, etc. Además, los desarrolladores de JavaScript pueden detectar bugs fácilmente»

Web: jsfiddle

Visto en: wwwhatsnew

La entrada JsFiddle – Edita, testea y comparte HTML, CSS y Javascript se publicó primero en Punto Geek.

Desde WordPress 3.0 hay una nueva función que nos permite agregar estilos personalizados al editor visual (TinyMCE) de WordPress. Esta es una función que muy pocos conocen, pero si prueban de escribir un post con el tema por defecto TwentyTen, verán que el estilo del editor visual es bastante distinto.

Lo que se puede hacer aplicando estilos personalizados al editor visual es interesante, podemos darle estilos a los encabezados, a las fuentes, formatear las imágenes con bordes o espacios, especificar el espaciado entre párrafos, etc. Con esto podemos darle al post que estamos escribiendo un estilo mucho más parecido al del tema real que tenemos instalado.

El primer paso es crear un archivo con todo el CSS que dará el estilo al editor visual. Este archivo tiene que ser creado por nosotros a nuestro gusto, pero les pueden mirar el CSS del editor visual del tema TwentyTen y editarlo a gusto cambiándole tipografías, encabezados y lo que deseen. A este archivo le tienen que dar el nombre de editor-style.css y subirlo a la carpeta raíz del theme.

El segundo paso es editar el archivo functions.php del tema (si no existe tienen que crearlo) y pegar la siguiente función, puede ser al final del archivo si lo desean:

 <?php add_editor_style(); ?>

Ese código le indicará a WordPress que en el esditor visual tiene que cargar un CSS específico. Ahora cuando vayan a escribir un post verán que el estilo que tiene es que ustedes le aplicaron mediante CSS.

La entrada Añadir un CSS personalizado al editor visual de WordPress se publicó primero en Punto Geek.