Herramientas para ayudar y simplificar el desarrollo de CSS3

Herramientas para ayudar y simplificar el desarrollo de CSS3

CSS3 está llevando el desarrollo y diseño web a un nivel superior. En este artículo, he recopilado algunos ejemplos de técnicas de CSS3 que probablemente llegará a ser muy popular cuando CSS3 será totalmente compatible con la mayoría de los navegadores.

Modernizr

Modernizr is una librería JavaScript que te ayudará a integrar HTML5 y css3 en tu página web y que sea compatible con todos los navegadores posibles.

Modernizr detecta el soporte para CSS3 y añade clases a los elementos de tu html, aportando compatibilidad con diferentes navegadores.

Sin duda una librería que está siendo muy popular e integrada por empresas tan conocidas como twitter, Google o Microsoft, entre otros.

Visitar: Modernizr

CSS3 Please

CSS3 Please otra site a tener en cuenta que te permite copiar y pegar muchas de las comunes declaraciones de CSS3. Tiene un interface donde puedes probar y “jugar” con nuevas funcionalidades de CSS3 como rotar un elemento, estirar, mover o escalar y puedes ver en el momento el código CSS3 que se va generando.

Visitar: CSS3 Please

CSS3 Guía de referencia

Como no siempre es útil tener a mano una guía de referencia donde poder recordar las propiedades y sintaxis cuando no te acuerdes.

guía de referencia de CSS3 en la sección de guías de referencia

CSS3 Pie

Internet Explorer 6 hasta 8 casi no tiene soporte para CSS3, el problema es habrá usuarios que usen éstos navegadores o clientes que quieran que sus web sean modernas y que funcionen en todos los navegadores posibles. CSS3 Pie te permite tener la mayoría de las funcionalidades sobre IE.

Visitar: CSS3 Pie

CSS3 Builder

Con esta herramientas, puedes diseñar complejas cajas en CSS3 usando un interface muy parecida a como se haría creando la caja con efectos de Photoshop. Algo a tener en cuenta para ahorrar tiempo.

Visitar: CSS3 Builder

CSS3 Drop shadow generator

Esta herramienta es muy similar a CSS3 builder, solo que usa sliders para visualizar el diseño de los degradados de sombras que vayas generando. Una vez terminado, copia el código CSS que se ha creado automáticamente y listo!

Visitar: CSS3 Drop shadow generator

Cascader

Esta no es una herramienta específica para CSS3 pero me ha parecido muy interesante y creo que puede ser útil, por lo que es diga de mencionar! Cascader te permite meter una cadena de código HTML con estilos CSS inline, y lo que hace es limpiar el código HTML, sacando los estilos en linea, formatearlos en una hoja de estilos y generando sus respectivas clases en el HTML.
No sería lo ideal para empezar a hacer tu CSS, pero te puede salvar cuando tienes de arreglar algún entuerto o marrón que te hayan dejado.

Visitar: Cascader

Border Radius.com

border-radius es una de las propiedades más populares de CSS3. Esta herramienta te permite crear rápidamente una caja con bordes redondeados siguiendo los estándares de CSS3 y generando un código apropiado.

Visitar: Border Radius.com

Button Maker

Con CSS3 puedes crear botones muy útiles, llamativos y cool stuff!! Esta herramienta te permite diseñar este tipo de botones de manera super sencilla: Escoge los colores, ajusta el radio, bordes, degradados, fuente, etc.. copia y pega tu código CSS.

Visitar: Button Maker

Tags de búsquedas:

como se copia el codigo del css button desinger en la web,herramientas de css3,simplificador de css3

Noticias relacionadas »

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

10$ gratis con Digital Ocean »

Este blog está funcionando con Digital Ocean,
para todos los lectores 10$ gratis! para probar el cloud a través del siguiente enlace.


Ir a Digital Ocean

¡Comparte este artículo! »

Sígueme en Facebook »

  • Pedro Ventura (3 días)
    Hola Eli, Esos tags de búsquedas se incluyen automáticamente en…
  • reformas piso zaragoza (5 días)
    Fantastico post. Gracias por compartirlo...Espero màs... Saludos
  • Pedro Ventura (5 días)
    Hola Roy, Puedes consultar las comisiones en su página oficial:…
  • Roy (5 días)
    Supongo que la plataforma indica la comision que cobran. De…
  • eli (6 días)
    si los libros que recomiendas están en inglés, pq entre…
  • Curro (2 semanas)
    Gracias pive muy buen trabajo con este post, esta curradisimo,…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

profile for Pedro Ventura on Stack Exchange, a network of free, community-driven Q&A sites

Leer entrada anterior
propiedades y métodos del objeto window de Javascript

Es el objeto que esta más alto dentro de toda la jerarquía y el encargado de representar la ventana del...

Cerrar