¡estas sombras son algo interesante! ¡miralas! ...

sombra en un cuadro

1•valores positivos vertical y horizontalmente;
2•valores negativos vertical y horizontalmente;

1•

2•

1• <img style="box-shadow: 4px 4px 6px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

2• <img style="box-shadow: -4px -4px 6px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• Si arrastra la ventana de código por la esquina inferior derecha, puede cambiar su tamaño
3•Radio de desenfoque y radio de extensión. ¿Cuál es la diferencia?
• radio de desenfoque

• <img style="box-shadow: 4px 4px 0px 5px#989898;" src="https://img0.liveinternet.ru/images/attach/d/4/162/649/162649794_449621855_7620306381357873_7792634976361745766_n.jpg" width="300" height="200" border="0" />

• <img style="box-shadow: 4px 4px 10px 5px#989898;" src="https://img0.liveinternet.ru/images/attach/d/4/162/649/162649794_449621855_7620306381357873_7792634976361745766_n.jpg" width="300" height="200" border="0" />

• radio de extensión - espesor de la sombra

Vemos que la sombra se dispersa sobre un área grande.

• <img style="box-shadow: 4px 4px 10px 0px#989898;" src="https://img0.liveinternet.ru/images/attach/d/4/162/649/162649794_449621855_7620306381357873_7792634976361745766_n.jpg" width="300" height="200" border="0" />

• <img style="box-shadow: 4px 4px 10px 10px#989898;" src="https://img0.liveinternet.ru/images/attach/d/4/162/649/162649794_449621855_7620306381357873_7792634976361745766_n.jpg" width="300" height="200" border="0" />

4•text-shadow

La sintaxis es muy similar a box-shadow: los valores son similares, pero no hay sombra extendida: el grosor de la sombra..

&<*p style="Código de fuente">Tu entrada<*/p> ¡Hola a todos!

letra!

• <*p style="text-shadow: 4px 4px 10px#ffff66;">¡Hola a todos!<*/p>

texto aqui!

• <p style="text-shadow: 4px 4px 5px#000000;"><font size="+5"><font face="Silver Age"> <text size="5"><text color="#ffcc66">texto!</text></text> </font></font></p>

fuente ABAJO

AQUI

• Cómo hacer un elemento convexo
• en este marco eliminamos la etiqueta rgba(*,*,*,.*) - obtenemos este efecto

TEXTO AQUI

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: inset -3px -3px 8px, inset 3px 3px 8px, 3px 3px 8px -3px;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">tu texto</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• en este marco guardamos la etiqueta rgba(*,*,*,.*) - obtenemos este efecto

TU TEXTO

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">texto aqui</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

•¿Qué pasa si hacemos una imagen como fondo?
1•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="imagen aqui" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;" background="https://img-fotki.yandex.ru/get/27579/112265771.a30/0_ce0c2_4eb29b5b_XL.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

2•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset -3px -3px 8px, inset 3px 3px 8px, 3px 3px 8px -3px;" background="https://img-fotki.yandex.ru/get/64120/112265771.a30/0_ce0a3_b8f12477_XL.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

•Bloque multicapa usando box-shadow

TEXTO AQUI

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: 6px 6px #989898, 12px 12px #6c6666;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">texto</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

1•
<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 6px 6px #99ff00, 12px 12px #009900;" background="https://img-fotki.yandex.ru/get/64120/112265771.a30/0_ce0a3_b8f12477_XL.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

2•
<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset -13px -13px 18px, inset 13px 13px 18px, 13px 13px 18px -13px;" background="https://img-fotki.yandex.ru/get/64120/112265771.a30/0_ce0a3_b8f12477_XL.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

Efecto de sombra de bloque

TEXTO AQUI

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">texto aqui</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>


<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);" background="https://img-fotki.yandex.ru/get/64624/112265771.a30/0_ce0b5_58955284_XL.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

•si eliminamos rgba(*,*,*,.*)



<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="о" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px ;" background="https://img1.liveinternet.ru/images/attach/d/4/162/164/162164869_433257750_7160967540625095_2240295657155309939_n.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• Sombra alrededor

texto

<center><table width="500" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="500" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);" background="Фон под текст" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:22px;text-shadow:1px 1px 1px #000000;">texto<table></td></tr></table></center>


<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);" background="https://img0.liveinternet.ru/images/attach/d/4/162/164/162164872_433902921_7160968410625008_7296804957653692537_n.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>


<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px ;" background="https://img0.liveinternet.ru/images/attach/d/4/162/164/162164872_433902921_7160968410625008_7296804957653692537_n.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>
disfruta