Cuando empecé a usar las hojas de estilo en cascada (css) las aplicaciones web que permitian de una forma online generar cuadros con esquinas rodondeadas, fondos, sombras me ayudaron a aprender a usar las etiquetas del sistema de maquetación y diseño web. A lo largo de los años estas páginas se han ido adaptando a las nuevas versiones de CSS y de las iniciales con bordes redondeadas con imagenes se ha pasado a las que usan las nuevas propiedades de la versión 3 de css o a usar canvas svg.
Hasta lograr que todos los navegadores se adapten al estandar css3, ha sido necesario utilizar las distintas etiquetas css, que permitian que en cada navegador el mismo diseño de una página web, se viese correctamente:
-ms-border-radius: 10px; //para Internet Explorer 8 o superior
-moz-border-radius: 10px; //para Mozilla Firefox
-webkit-border-radius: 10px; //para WebKit y Safari
-o-border-radius: 4px; //para Opera
-khtml-border-radius: 10px; //para Konqueror
border-radius: 10px; //estandar CSS3 (el que ahora sirve para todos)
Este listado con distintos sistemas de generación de bordes redondeados, es el homenaje a las excelentes aplicaciones web, que siguen operativas hoy y que a lo largo del tiempo me han permitido conocer el funcionamiento de las etiquetas css o que de una forma rápida me evitan complicaciones y me ofrecen el código para mis diseños web.
- CSS Border Radius Generator: Bordes redondeados en css compatibles para WebKit y Gecko, además de en css3.
- Rounded Corner and Gradient Generator: Bordes redondeados css y relleno en gradientes con imágenes gif.
- Spiffy Box: Bordes redondeado y fondo en una imagen png.
- CSS Rounded Box Generator: Bordes redondeados con imágenes gif en las esquinas.
- Cornershop: Bordes redondeados con gif, con color de relleno y color de página plano.
- SitePoint tools: Bordes redondeados con imágenes gif, permite definir las etiquetas de encabezado h1, h2, h3… del contenido de la caja.
- CSS3 Rounded Corner Generator: Bordes redondeados con tipo y grosor de linea personalizable en css con código compatible para Firefox 3.5+, Safari 3.0+, Opera 10.5+, Chrome 4.1+, IE 9.0+
- Ultimate CSS Gradient Generator: Generador de colores de relleno en gradiento con distintos ángulos en css3, con código compatible para Ie.
- Gradient Rounded Corner Generator: Bordes redondeados, con grosor y color de linea. Color de relleno en gradiente con imagen png.
Y mis favoritos:
- Rounded corner generator: Bordes redondeados en CSS y SVG.
- CSS3 Generator: Bordes redondeados, sombra, color de relleno en gradiente y opacidad, usando css3.
- CSS 3.0 Border Radius: Bordes redondeados en css3, ofrecen código con compatibilidad para terminales móviles iOS y BlackBerry. Además ofrecen varias herramientas online css para gradientes, animacion, transición, sombras, opacidad…
- css3 generator tool: Completísimo generador css3 de bordes redondeados, color de relleno en gradiente, transformación, sombras de fondo y texto, RGBA, Transición, rotación, outline y columnas para el texto interior.
- Css3 Pie: Bordes redondeados, relleno en gradiente y sombra con css3 y código compatible incluso para Ie6.
- Css3 Please: Edita desde el código css3 todas las propiedades de bordes redondeados, color de relleno en gradiente, transformación, sombras de fondo y texto, RGBA, transición, rotación, opacidad y comprueba el resultado en tiempo real.
- Button Maker: Creador de botones con bordes redondeados, relleno con color en gradiente con el framework javascript jQuery.
4 COMENTARIOS
Información Bitacoras.com…
Valora en Bitacoras.com: Cuando empecé a usar las hojas de estilo en cascada (css) las aplicaciones web que permitian de una forma online generar cuadros con esquinas rodondeadas, fondos, sombras me ayudaron a aprender a usar las etiquetas del siste…..
Muy interesante esta información gracias por permitirnos conocerla.
[…] Todo empezó con los bordes redondeados, ahora las etiquetas CSS3 permite generar fácilmente animaciones y efectos hover (al posicionar el puntero del ratón encima de algo). Crearlos es muy rápido con los asistentes de código y herramientas web. […]
[…] Programación JQGrid Demos for ASP.NET MVC Iconos Free icons! Icon Archive Search html CSS Bordes redondeados CSS online ene 12 2012 Cuando empecé a usar las hojas de estilo en cascada ( css ) las aplicaciones web que […]