Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Borde y Sombreado con css
#1
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
Hoy les explico como hacer un buen efecto en CSS3.

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

Dado un div cualquiera aplicamos la propiedad border-radius

Código:
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

[Imagen: screen.gif]

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

Código:
.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

Código:
.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.
#2
Edito el tema para agregar las etiquetas correspondientes a los códigos.
#3
Faltaría también la variante para Opera: -o-border-radius, o por regla general: -o-*.
"Digo lo que pienso y cargaré con la culpa, piensa lo que digo y quédate con la disculpa" ♫
#4
Es grandioso lo que se puede hacer con el css, sinceramente estoy viendo muchas cosas en la red he visto iphones y tal diseñados completamente en css sin imagenes es increible. Gracias por este aporte.
#5
muy bueno lo usare Gran sonrisa me gusto
#6
Da un bonito efecto Sonrisa Gracias...
[Imagen: qkoii.png]
#7
Que muy bien el efecto del resultado esta muy interesante lo que se puede hacer con css
#8
Lastiima que aun no se estándarizan del todo los navegadores por eso tenemos que poner los codigos para webkit, moz y o


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Imagen con borde flash dindong1 5 880 03-01-2012, 01:52 AM
Último mensaje: djblack120



Usuarios navegando en este tema: 1 invitado(s)