CSS Archives - Punto Geek

Grandients Party, degradados en CSS listos para usar

23 enero, 2018 por Juanguis

Gradients_Party
Los degradados son un recurso muy interesante en el diseño, ya que gracias a ellos podemos dar estilos muy sofisticados y agradables a la vista. Obviamente son mucho más atractivos que los colores planos y aburridos.

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.

60 modelos de degradados en CSS para usar gratis en tus diseños

23 enero, 201818 junio, 2017 por Juanguis

Los degradados son uno de los recursos de diseño más estéticos, pueden usarse en botones, en fondos, o para usar como fondos en imágenes. Le dan a nuestros diseños un toque muy elegante y sofisticado. Por eso, hoy quiero compartir con ustedes una colección de degradados en CSS muy buena.

Degradados CSS

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í.

Sombras para texto en CSS: 41 modelos gratis y listos para usar

12 junio, 2017 por Juanguis

Hoy en día, gracias a CSS, se puede hacer cualquier cosa. Y en este caso les quiero dejar una colección de efectos de sombras en CSS para que puedan aplicarle a sus textos y darles mejor estilo.

Sombras CSS para texto

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.

Más de 840 plantillas responsive en HTML5 y CSS para descargar gratis

14 enero, 2015 por Juanguis

Cuando no tenemos muchos conocimientos de diseño web, lo mejor siempre es partir de alguna plantilla ya armada y retocarla modificándoles cosas a nuestro gusto, así nos ahorramos mucho trabajo, tiempo y dinero. Por eso hoy les quiero dejar una web muy útil en la cual encontrarán más de 840 plantillas HTML5 y CSS completamente gratuitas para descargar y usar en los proyectos que quieran.

plantillas html5 gratis

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

Enjoy CSS: Generador avanzado de CSS3

29 septiembre, 2014 por Juanguis

¿Eres desarrollador web y estás cansado de olvidar prefijos? ¿Estás cansado de olvidar el orden de las propiedades? ¿Estás cansado de no tener una forma rápida y fácil de ver los diferentes estados de un elemento? ¿Estás cansado de no poder alinear verticalmente ese texto rápidamente? Si respondiste si alguna de estas preguntas Enjoy CSS es definitivamente para ti.

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

NTH-Test: Aprende fácilmente como utilizar CSS nth-child y nth-of-type

27 diciembre, 2013 por Juanguis

Nth-test

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

Mario Bros creado con SCSS

5 diciembre, 2013 por Juanguis

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

Genericons: Colección de iconos en alta resolución

2 noviembre, 2013 por Juanguis

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

Herramientas online para probar código en vivo

26 octubre, 2013 por Juanguis

stoy seguro que se han encontrado con la situación de necesitar probar un segmento de código rápidamente para ver que tal funciona o tal vez porque se te ocurrió una idea genial y quieres implementarla al vuelo, o también porque no estás en tu computador de trabajo y necesitas algo similar a tu IDE o Editor de código para jugar un rato con algo de código.

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.

Todos los mouse de Apple hechos con CSS

21 octubre, 2013 por Juanguis

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