• Home
  • 1000 Efectos jQuery
  • 1000 Estilos Css
  • Foro
  • Freelance
  • Herramientas Web
  • Tu Granito de Arena!!
  • ZoneArtCss Móvil

Sombra a las Imagenes y Texto solo con CSS

Obtén una cuenta de @zoneartcss.com gratuita
Registrarse
Ver correo
Nov 10


Sombras con css

Sombra a imagenes y texto con CSS

Con este ejemplo podemos crear un recuadro con sombra para poder resaltar div con contenidos ya sea de texto o de imágenes.

Solo tenemos que seguir los siguientes pasos.

Paso 1

<div id="contenido">
   <div id="sombra">
      <div id="text">Aquí colocas tu texto.</div>
   </div>
</div>

Paso 2

<style type="text/css">
body{
   margin:0;
   padding:0;
   text-align:center;
   font-family:"Trebuchet MS", Arial, Verdana;
   font-size:12px;
}
#contenido{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   width:500px; 
}
 
#sombra{
   margin:10px;
   background:#CCCCCC; /* Color de la sombra */
   border: solid 1px #CCCCCC; /* Color del borde */
   width: 500px;
}
 
#text{
   border:solid 1px #CCCCCC;
   margin:-10px 2px 2px -10px; /* Aqui están los famosos márgenes negativos*/
   padding:2px;
   background:#FFFFFF; /* Le damos un color de fondo */
}
</style>

Para las imagenes solo modificamos en del contenedor

#contenedor{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   /* width:500px; */ float: left; 
}

Saludos






Compartir   votar
¿Te gusto este tema?
Recibe en tu correo las ultimas actualizaciones

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.
Posted in CSS, Tips. on Martes, Noviembre 10th, 2009 by miguelortega Tags: CSS, div, efecto sombra, shadows CSS, shadows no js, sobra a div, sombra div css, sombra imagen css, sombra texto css, sombras con css, sombras sin javascript

Leave a Reply

Security Code:

ZoneArtCSS | Tu lugar: Del Arte CSS

  • Buscador
  • Suscribete
    Escribe tu correo:

    Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.








  • Lo Último

    Un Administrador de Proyectos para un Diseñador WebUn Administrador de Proyectos para un Diseñador Web   39 Iconos Sociales para tu Sitio Web39 Iconos Sociales para tu Sitio Web   Editor de código online Editor de código online   Iconos para Redes SocialesIconos para Redes Sociales   ¿Cuantos usuarios online soporta tu sitio Web?¿Cuantos usuarios online soporta tu sitio Web?  


  • Ideas
  • Archivos
  • Comentarios
  • Populares
ajax alex aguiar cms codigo CSS Curl diseño efecto estilo facebook facil firefox fireworks fix flash gallery google gratis html ie6 i hate photoshop images Javascript jQuery js libreria liz palacios manual menu miguel ortega miguelortega Mootools php plugin problema solucion style Themes para dedalus tutorial Twitter video video tutorial web wordpress zoneartcss
  • Julio 2010
  • Junio 2010
  • Mayo 2010
  • Abril 2010
  • Marzo 2010
  • Febrero 2010
  • Enero 2010
  • Diciembre 2009
  • Noviembre 2009
  • Octubre 2009
  • Septiembre 2009
  • Agosto 2009
  • Julio 2009
  • Junio 2009
  • Navegar por internet gratis desde celular o móvil con telcel  629
    fernando, gabo, Andres, Roberto, miguelortega, Roberto [...]
  • Filtrar palabras de un post de formulario con PHP  2
    zonarock, dante
  • Simple Inicio de Sesión con Php y Mysql  3
    audio rodriguez, bk7, argos
  • Tu Granito de Arena!!  3
    miguelortega, edardo, la nena
  • CSS text-shadow  4
    miguelortega, Carlos, Luis, uJuan
  • Navegar por internet gratis desde celular o móvil con telcel {630}
  • Popin - Plugin jQuery para Pop-Ups {27}
  • Crear tu aplicación del facebook {18}
  • Personalizar en menú que sale cuando das clic secundario con JavaScript {16}
  • Beautiful Slide con jQuery {12}


  • Categorías
  • RSS Twitter
    Zoneartcss
    • Buen día a todos !! Espero que sea un excelente viernes :) hace 1 hora desde TweetDeck
    • ahora zoneartcss.com ya tiene su versión para celulares, :) hace 23 horas desde TweetDeck
    • ZoneArtCss.com Versión Móvil http://goo.gl/fb/7sXzh 11:01:31 PM Julio 28, 2010 desde Google
    • Traductor con jQuery http://goo.gl/fb/oOXwj 10:47:11 PM Julio 28, 2010 desde Google
  • Enlaces
    • Alex Aguiar
    • Bienes Raices en Mérida
    • Blog SexyTec
    • Desarrollo Web
    • Descargas para Celular
    • Frogx3
    • Hosting en Mexico
    • Noticias en Cozumel
    • Playeras y Uniformes
    • SexyTec.net
    • WebAdictos
  • Home
  • 1000 Efectos jQuery
  • 1000 Estilos Css
  • Foro
  • Freelance
  • Herramientas Web
  • Tu Granito de Arena!!
   

Back to Top

© Copyright ZoneArtCSS | Tu lugar: Del Arte CSS. All rights reserved.
Designed by FTL Wordpress Themes brought to you by Smashing Magazine

  • Blogalaxia
  • http://www.wikio.es