50+ Useful CSS Tools And Generators for Developers. Jul 11 2011 CSS tools are essential for web developers because they act like a sort of magic lamp that can simplify the job at hand. Most development tools are time savers that are there to help developers create stylish, functional and optimized websites with a few shortcuts. CSS tools and generators are available in such large numbers that a developer can choose from a range of them to make their projects go smoother. Here is the collection of around 50 useful and handy CSS tools and generators that every developer should know about.
Enjoy! CSS Colors Tools Color Scheme DesignerThis tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen. Ultimate CSS Gradient GeneratorIt is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.
CSS Layouts Tools CSS Grids Tools (rb) CSS3 Pie: CSS3 en Internet Explorer 6, 7 y 8. CSS3 viene con interesantes características: esquinas redondeadas, sombras, gradientes y más. CSS3 promete hacer todo esto. Sin embargo, como todos sabemos, la falta de soporte de Internet Explorer limita el uso de estas nuevas características. Ante este problema, surge CSS3 Pie... CSS3 Pie es un comportamiento adjunto a IE, el cual, cuando es aplicado a un elemento, permite a IE reconocer y mostrar el número de propiedades CSS3. Por ejemplo, si tenemos el siguiente CSS: El resultado será una caja con unas ligeras esquinas redondeadas en casi todos los navegadores modernos, excepto, por supuesto, Internet Explorer 6, 7 y 8, el cual mostrará una caja con esquinas cuadradas.
Ahora observaremos el mismo efecto de esquinas redondeadas en IE. Border-radius box-shadow border-image multiple background images linear-gradient as background image El archivo PIE.htc lo podemos descargar desde el siguiente enlace. Descargar | PIE.htcDemo | CSS3 Pie. Layer Styles. LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop | Blog de diseño web, tecnología y comunicación.
En Blog — Diseño Web — Photoshop inShare2 Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes. Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.
Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9. Obviamente, esta herramienta utiliza HTML5. CSS3.0 Maker | css3 generator. Liffect - effect for lists. Completa colección de herramientas CSS para diseñadores web | CSSmatic. CSS Type Set.