13Jun 2010 10 Comments */?>

Esquinas redondeadas y degradados con CSS3

Categorías: Tutoriales - Tags: , ,

Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.

Esquinas redondeadas

Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.

1
<div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div>

Dado un div cualquiera aplicamos la propiedad border-radius

1
2
3
4
5
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

Degradados y sombras con CSS3

Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.

Aplicando sombras al DIV y letras

1
2
3
4
5
6
7
8
9
10
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}

Y por último le aplicamos un degradado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
 
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}

Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.

Ver Ejemplo online
Descargar código del ejemplo

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: JcubeiT - Plugin JQuery para hacer cubos con HTML5 | Timersys()

  • Ecron

    Tengo una pregunta en cuanto a los comandos del CSS3 que has descrito.

    ¿Es totalmente necesario usar tres elementos que describen lo mismo? Me refiero, por ejemplo, a los "box-shadow:", "-webkit-box-shadow:" y "-moz-box-shadow:". ¿Por qué no basta con poner "box-shadow" para que cualquier navegador lo interprete bien?

    Muchas gracias 😉

    • Es necesario siempre y cuando quieras que te funcione en todos los navegadores -moz para Mozilla Firefox -webkit para navegadores que utilizan webkit como Safari. Saludos

  • Ecron

    Entonces… ¿Para qué navegador va destinada la orden "box-shadow"? No lleva ningun prefijo tipo "-moz" o "-webkit"…

    Entiendo que se haga asi, por ejemplo, para el degradado, ya que cada tipo de navegador tiene su sintaxis diferente, pero no entiendo por qué se hace para órdenes tipo "border-radius" y "box-shadow".

    ¿Me lo puedes explicar, por favor?

    Muchas gracias 😉

    • box-shadow es el standar CSS3 que en un futuro va a ser soportada por todos los navegadores . De momento creo que el último Opera lo soporta, sino habría que usar o-box-shadow.
      Como bien decis cada navegador tiene su sintaxis y esa es la forma de usarlo tanto en box-shadow como border-radius etc
      Lo que se trata es de que nuestros diseños luzcan igual en todos los navegadores. Saludos

  • Ecron

    Ok, muchas gracias por la aclaración 😉

  • Jhon

    ok,muchas gracias me sirvio mucho. XD

  • Omar

    porque descargo el ejemplo y resulta ver que en IE 8 no funciona????

    • IE9 lo soporta bien, pero para los bordes redondeados tienes que usar un HTC para que se vea el border-radius. saludos

  • David

    -moz- firefox
    -o- opera
    -webkit- safari o chrome
    -ms- IE 9+
    y si no pones nada es para otros navegadores q dudo lo soporten aunque deberian ponerlo n_n