15 geniales generadores HTML5 y CSS3
HTML5 y CSS3 son excelentes idiomas para comenzar a aprender, y siempre he pensado que una de las mejores formas de comenzar a aprender es simplemente sumergirse y manipular el código. Como probablemente podría decir, aquí es donde intervienen los generadores. Son una excelente forma de generar código, jugar con él y aprender.
No solo eso, son increíblemente útiles porque muchas veces como desarrollador o diseñador encontramos que estamos haciendo cosas una y otra vez. Bueno, los generadores pueden sacar ese borde y hacer esas pequeñas cosas para ti cada vez.
Como ejemplo, tengo un fragmento de texto expansor que crea una plantilla HTML5 sobre la que escribí aquí . Ahora, text-expander es genial pero no resuelve todas las necesidades, y en este caso hay una gran necesidad de generadores, así que me tomé el tiempo para encontrar 20 de mis favoritos y describir por qué me gustan.
Diré que la mayor parte de esta lista se centrará en los generadores de CSS3, simplemente porque tienen más demanda que los generadores de HTML5, y aprenderemos por qué. Nota: haga clic en las imágenes para abrir los sitios web.
Generadores CSS3
Hay una connotación algo negativa cuando se trata de estos generadores, y tengo que decir que como diseñador y desarrollador no hay nada negativo en usar uno. Es un gran ahorro de tiempo, y honestamente conozco a tres desarrolladores que escribieron sus propios generadores solo porque querían ayudar a la comunidad. Así que ten en cuenta que no es como si estuvieras usando algo tabú hecho por AOL; estos son generadores muy naturales y orgánicos que han surgido cuando los necesitábamos. Entonces, ¿por qué no compartir parte de la riqueza? Repasemos algunos de mis favoritos y por qué podría disfrutarlos.
Generadores generales
Esta sección se centrará en los generadores que se ocupan de las necesidades y usos de amplio espectro. Estos cubrirán casi todo lo que pueda necesitar o desee en un generador, pero por su propia naturaleza pueden ser peores en detalles. Es por eso que daré tantas opciones más adelante en este artículo para tipos específicos.
CSS3.me
Este es uno de los generadores exactos a los que me refería. Este fue creado por uno de mis diseñadores favoritos, Eric Hoffman y es asombroso Muy simple, minimalista y elegante, pero a la vez muy funcional. Te da la posibilidad de cambiar y establecer el radio del borde, la sombra paralela, el degradado y la opacidad; es bastante funcional.
Nota: Eche un vistazo al sitio de Eric; es un gran ejemplo de primer diseño móvil. Él es también un diseñador en Zendesk , así que envíale un poco de amor si alguna vez has disfrutado de ese producto.
CSS3 Maker
Muchas veces las personas encontrarán generadores que aman y se quedarán con ellos. Y eso es exactamente lo que sucedió con un cliente con el que había trabajado anteriormente con respecto a este generador. Él estaba absolutamente enamorado de él, y puedo ver por qué, seguramente es funcional. Puede que no sea lo más hermoso que se haya hecho, pero parece tener todas las comodidades.
Puede hacer trabajos de @ font-face, trabajos de animación, sombras de cuadros, sombras de texto, rotación de texto, transiciones, degradados, radio de borde y mucho más. Es uno que normalmente he marcado, pero rara vez uso simplemente por lo bien que lo hacen los generadores más pequeños en cada una de sus categorías respectivas. Pero sin duda es un buen generador para probar si lo necesitas y no te gusta saltar a muchos otros.
Generador CSS3
Este es otro buen general que proporciona mucha funcionalidad. Me gusta esta porque tiene menús desplegables agradables y fáciles, y una funcionalidad fácil de usar. El diseño también es bastante agradable. También ofrece una buena funcionalidad de tamaño de cuadro. Éste ofrece una gran capacidad para hacer lo siguiente: radio de borde, sombra de caja, sombra de texto, RGBA, columnas múltiples, tamaño de caja, contorno, transiciones, transformaciones, gradientes de selectores. Creo que este es uno de mis favoritos, porque el diseño y la IU están muy limpios. Normalmente uso este cuando me olvido de cssmaker.
Generadores de botones
Creador de botones CSS3-Tricks
Uno de los primeros fabricantes de botones que vi en el día realmente me hizo encogerme. Era muy lineal, no tenía IU (irónicamente) y en general era un producto horriblemente diseñado. Como nota al margen, voy a hablar de algo similar a continuación, pero por ahora voy a mostrar uno que encontré en css3tricks y es realmente una buena
Uno de los puntos clave para referencia aquí es el hecho de que es casi totalmente controlable por un control deslizante de arrastrar y soltar, que es realmente agradable. Solo espere hasta que tenga que ingresar todo manualmente con el teclado y deseará tener un buen deslizador de arrastre. Como nota final, CSS3 Tricks es un sitio maravilloso con un montón de contenido bien organizado y reflexivo que a todos les gustaría echar un vistazo.
CSS3 Button.net
Y ahora llegamos al generador al que me refería. El diseño puede faltar, pero ofrece muchas más opciones que el anterior, que irónicamente a menudo funciona. A veces le gustaría la facilidad de uso y, a veces necesita alguna opción seria cuando se trata de generadores, y estos dos últimos realmente afectan a ambos puntos.
Este ofrece la posibilidad de agregar múltiples sombras de texto, sombras internas, bordes y colores de fuente, mientras que el último realmente no entró en tantos detalles. Puede ser difícil de entender al principio, pero lo obtendrá si solo juega con él durante unos minutos. Encuentro que este es el más útil si está acostumbrado a la interfaz de usuario de Windows, y como resultado, he tenido clientes que me dicen que este era su favorito porque llevan años metidos en XP y no saben nada mejor. Y ahora estoy seguro de que algunos de ustedes se están preguntando, pero honestamente, cómo funciona, algunos clientes quieren enlaces a generadores para aprender por sí mismos después de impresionarlos. Usualmente los relaciono con Lynda , TeamTreehouse y algunos de estos generadores por si acaso.
Generador de botones CSS3
Esto es realmente divertido. Te da un gran botón para manipular, también en un color retroradio. Luego puede manipular la sombra, el borde, el color y, además, le da la capacidad de editar el sobrevuelo. Me gusta esta porque la encontré hace un tiempo cuando comencé a usar CSS, y realmente me dio una idea de lo que puede hacer. Los controles deslizantes de arrastrar y soltar son ideales para las personas que son nuevas en los idiomas, ya que puede ver lo que puede hacer de inmediato. Ahora, diré, ya no uso este particularmente, a la luz de otros que han surgido, pero es un gran recuerdo.
Imagen de borde y generadores de radio
Imagen de borde
Nada supera a border-image.com cuando se trata de tomar una imagen específica y luego replicarla para encontrar el estilo de borde correcto. Sin embargo, asegúrese de no infringir los derechos de autor y usar la imagen de otra persona sin atribución.
Pero digamos que dibujaste una flecha o un triángulo y quisieras encontrar un generador para repetirlo en el borde de tu sitio o incluso en el borde de un elemento. Bueno, nada es mejor que este sitio cuando se trata de esa necesidad. Puede manipular el desplazamiento, el tamaño y la repetición que tiene la imagen.
Tan pronto como llegue al sitio, verá una imagen de ejemplo en la que cargó, pero en realidad es mucho más útil de lo que se muestra en la imagen. A menudo lo usaré para diseños en fondos que quiero repetir y / o ver cómo se vería muy rápido, antes de replicar la totalidad del fondo en Photoshop. Puede usarlo para cualquier cosa relacionada con imágenes repetidas, realmente.
Radio de la frontera
Esta es una pequeña y excelente herramienta que a menudo encuentro muy práctica. Con eso, todo lo que haces es simplemente establecer la cantidad de un borde redondeado que deseas en cada esquina. Muy práctico, muy simple. Y luego, simplemente marque el tipo de prefijo del navegador que desea incluir y el boom hecho. Es una hermosa interfaz de usuario con toda honestidad. Debería haber exámenes en cursos de informática en los que todo lo que haces es tratar de encontrar algo tan simple y funcional como este.
Generadores de gradiente CSS3
Color Gradiente Editor Zilla
Esto se anuncia como el mejor editor de degradado de CSS3, y por buenas razones. De hecho, es tan asombroso que es el único editor de degradado que incluiré aquí. Tiene un montón de características, y es muy útil y fácil de usar. Simplemente arrastre un poco los lápices negro y azul y verá rápidamente lo que hacen. También hacen un editor de navegador en Cromo o Firefox eso es realmente útil para los diseñadores que trabajan en la web. También asegúrese de jugar con los presets en este caso, porque a menudo esos son lo suficientemente buenos, quien los eligió hizo un gran trabajo.
Generadores tipográficos / Editores
@Fontface Generator
Este es un producto realmente interesante. Lo que hace es que le permite cargar fuentes que haya elegido de la Web o que pueda tener en la computadora, y luego le brinda un archivo de salida listo para trabajar en la web. Sin embargo, obtienes más de una cosa, obtienes algunas cosas. Obtendrá el CSS para las propiedades de @ font-face dada la fuente que elija, y un archivo HTML que muestre la fuente y sus muchos usos. En realidad, es una gran herramienta para verificar el potencial completo de una fuente si no está seguro, y especialmente si no tiene tiempo para generar un sitio web completo con esa fuente antes de tomar una decisión.
Generador inverso de CSS3
CSS3 por favor
Este es un producto realmente fascinante. Básicamente, lo que hace es que le da un conjunto de cuadros y todo el CSS para él, y luego le da la posibilidad de activar y desactivar las secciones para ver qué hacen. Entonces, básicamente, puedes aplicar ingeniería inversa al CSS3 para descubrir qué hace, y luego puedes ver lo que estás haciendo. Esta es una forma excelente de aprender CSS3 si le interesa, pero piensa que los generadores son un poco complicados.
Generadores de sombras de CSS3
Webestools Shadow Generator
Me gusta mucho este generador de sombras, porque entra en detalles y profundidad con respecto a las sombras que los otros generadores simplemente no tienen. Puede que no se vea como el producto mejor diseñado de todos los tiempos, pero sin duda es increíble. Tiene sombras insertadas, sombras iniciales y la capacidad de manipular desplazamientos, establecer colores y hacer casi cualquier cosa que se pueda hacer con el código, pero en cambio con una agradable barra de arrastre. Oh, cómo me encanta la barra de arrastre. Verifique esto si necesita ver en general cómo se verá su idea paralela antes de codificarla.
Generadores HTML5
Los generadores HTML5 son un poco difíciles de encontrar, y la razón de eso es probablemente debido a la genialidad Boilerplate HTML5 es. No hablaremos de eso, porque no es específicamente un generador, así que lo resumiré aquí: básicamente es una plantilla HTML5 ya llena y lista para que trabajes, así que échale un vistazo si no lo has visto Es bastante impresionante en realidad. Mucha gente lo usa como una plantilla inicial para sus sitios, y por buenas razones. Ahora volvemos a los generadores. Encontrar uno de calidad es realmente bastante difícil, pero he logrado encontrar algunos que mostraré, y luego tengo algunos más generalizados que tocan todos los temas de este artículo.
Shikiryu HTML5 Generator
Shikiryu's HTML5 Generator es mucho más complejo. Puede agregar características que le permitan hacer cosas dentro de Blueprint (mixins, etc.) y de tipo sofisticado, por lo que en realidad es bastante útil. Me gusta porque es un poco más semántica que las otras opciones y, al mismo tiempo, le permite agregar aplicaciones de terceros realmente populares que a las personas les encanta usar.
Cambiar a HTML5 Generator
Este es un generador interesante. Lo que hace es que te permite generar un marco rápido y fácil para construir sitios, pero a diferencia de HTML5 Boilerplate, nos permite elegir exactamente qué selectores preferiríamos ver en nuestro marco. De hecho, he tendido a usar esto para generar código en lugar de HTML5 Boilerplate cuando necesito algunos selectores o elementos más de los que ofrece. Ahora, no sigue exactamente todos los principios de marcado semántico bellamente diseñados, como hace HTML5 Boilerplate, pero hace un trabajo lo suficientemente bueno, y puede entrar y hacer el resto si realmente necesita usarlo.
Quackit HTML5 Generator
Este da un paso atrás, y en lugar de solo darte un grupo de código que es bastante genérico y básico, te permite ingresar tu propia información. Esto es realmente útil, y he encontrado que otros que son más nuevos en los sitios web realmente lo aman. Ellos especialmente lo adoran, he encontrado que genera el HTML base estándar para que luego lo veas como lo desees con CSS. Entonces, si estás aprendiendo CSS, y todavía eres un poco confuso en HTML (aunque no estoy seguro de por qué sería ese el caso), entonces puedes hacerlo de esta manera.
Y eso terminará. Estos generadores son increíbles para trabajar de una manera rápida y ágil, pero en lugar de para los empresarios son para diseñadores. Y eso es realmente genial en mi opinión. Tenga una idea rápida para un radio de borde (¿con tabuladores quizás?), O una sombra, o un degradado de color, o una plantilla html5 con plano incluido - bueno, estos están hechos para usted entonces. Sin embargo, tome nota de que esta no era una lista exhaustiva, pero fueron algunos de mis favoritos y que mis colegas en el pasado han usado. Realmente disfruto de usar muchos de estos, y espero que tú también.