Aprende como se crea un triángulo con CSS

triangulo_css

¿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

extractCSS: Obtén la estructura, id’s, clases y estilos en línea de cualquier HTML

Screenshsdfot_61

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

UIBox: Colección de elementos de interfaz de usuarios

tdScreenshot_45

 

 

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.

Curso gratis de HTML y CSS para crear tu web desde cero

Maquetando el monstruo web

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.

Convierte de PX a EM de todo tu CSS con Pixem

Convertir PX to EM

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

Documentación de HTML, CSS y jQuery en un solo lugar

6-30-2013 2-26-32 PM

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

Comprende mejor la etiqueta background de CSS3

4-27-2013 3-55-53 PM

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

Crea botones con CSS3 válido gráficamente con CSSButton

CSS Button

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

13 herramientas online para minificar código PHP, CSS y JavaScript

compressed-archiveMinificar código puede ser de muchísima utilidad para optimizar nuestro sitio web ya que los archivos serán más livianos y por ende se mejorará la velocidad de carga.

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
  2. UglifyJS JavaScript minification
  3. Minify JavaScript Online
  4. Online Javascript minifier

Visto en I Love Free Software – 123

Browserhacks: Encuentra la solución a problemas de CSS en todos los navegadores

3-13-2013 7-44-36 PM

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