• Follow us on Twitter
  • Join our Facebook Group
  • Add me on Linkedin
  • RSS
JCDESIGNER, Juan Carlos Rivas, Diseñador con 6 años de experiencia multimedia close

  • Perfil
  • Servicios
  • Portafolio
  • Contacto
  • Blog

Blog

Latest news from around the world

CSS Drop Shadow, sombra con CSS

0 Comments/ in Blog / by jcdesigner
junio 22, 2010

Parte de las innovaciones que trae  CSS3 son los efectos de sombra, esto nos ahorrará mucho trabajo del que se hacía con photoshop al tener que estar cortando imágenes con el efecto de sombra ya aplicado, de ahora en adelante solo bastará con escribir unas lineas de css y ya podremos hacer el mismo efecto, pero al igual que muchas cosas nuevas que aparecen este solo es compatible con los últimos navegadores.

Las dos variantes de drop shadow son una dedicada a texto que es text-shadow, y para los divs y párrafos utilizaremos box-shadow, ambos con uso similar pero con sus diferencias.

Text-shadow

Esta propiedad de css3 es utilizada del la siguiente manera:


.texto-sombra{
font:bold 24px Arial, Helvetica, sans-serif;
color:#FF9900;
text-shadow: 2px 2px 2px #000;
}

Resultado del css

La propiedad text-shadow como su nombre lo dice solamente afecta al texto, no puede afectar a cajas o divs, los dos primeros atributos son para el deplazamiento vertical y horizontal, el tercero es el radio del desenfoque y el último el color de la sombra.

Ejemplo con texto seleccionable:

Text shadow

El siguiente es box-shadow que afecta a las cajas sea párrafos y divs:

Box-shadow

La utilizamos de la siguiente forma:

font:bold 36px Arial, Helvetica, sans-serif;
color:#fff;
background:#FF9900;
padding:20px;
width:250px;
-moz-box-shadow: 3px  3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;


Aplicandolo en directamente en el html editable el resultado sería el siguiente:

box shadow

La utilización al igual que en el en anterior, las dos variantes del principio son para desplazamiento vertical y horizontal, el tercero es para el radio de la sombra y el último es para el color de la sombra. La propiedad -moz es para Firefox, -webkit es para Safari y Chrome, y la final es para los navegadores que ya admiten la propiedad.

Este ejemplo también puede mezclarse con la otra propiedad nueva que es border-radius:

box shadow

Tags: css, css3, dropshadow, html, shadow, tip, tips, web, webdesign
← Template Agency travel version HTML
Border-radius, bordes redondeados con css →
Related Posts
Soluciones Creativas
Diseño de web site para el Reportero Ciudadano
Border-radius, bordes redondeados con css
Template Agency travel version HTML
Comments

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Deja un comentario Cancelar respuesta

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blogroll

  • Diseño 3d El Salvador
  • Diseño web Cadiz
  • Fotografía y video profesional
  • Ilustración El Salvador
  • Posicionamiento web

Reciente

  • Las tareas del estudiante de diseño
  • Media center Grupo Dutriz
  • Infográfico sobre la población salvadoreña
  • Rediseño revista Ella
  • Estilos diferentes por categoría en WordPress
Seguir a @jcdesigner

Buscar

Portafolio

  • El Gráficofebrero 5, 2013 - 5:00 pm
© Copyright - DISEÑO GRÁFICO, EL SALVADOR, DISEÑO WEB, CENTROAMÉRICA - JCDESIGNER - UX DESIGN