Pesquisar

Mostrando postagens com marcador sombras. Mostrar todas as postagens
Mostrando postagens com marcador sombras. Mostrar todas as postagens

"Sombras con CSS"

Sombras com CSS

La propiedad box-shadow nos permite añadir sombra a una imagen, párrafo o bloque (DIV).
El problema es que esta propiedad no está disponible en todos los navegadores y debemos añadir la propiedad que cada navegador va incorporando.
Estos datos son proporcionados por Vagabundia y es cuestión de recordarlos.

Firefox 3.5 en adelante:

-moz-box-shadow: 5px 5px 5px #C0C0C0;

WebKit, Chrome y Safari:
-webkit-box-shadow: 5px 5px 5px #C0C0C0;

Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";

Internet Explorer en general:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);


Para versiones de Internet Explorer anteriores a la 8 es necesario añadir width o height.
Podemos añadir los estilos de la sombra directamente donde vamos a añadirla.
Esto sería el contenido del bloque
<div style="-moz-box-shadow: 0px 0px 8px #C0C0C0; border: 1px solid rgb(204, 204, 204); margin-bottom: 1.5em; padding: 1px;"><div style="padding: 0.5em; text-align: center;">Esto sería el contenido del bloque</div></div>

También podemos añadirlos a la hoja de estilos antes de ]]></b:skin>

.sombra-div {
height:30px;
padding: 10px;
width: 450px;
font-size: 18px;
margin: 10px auto;
text-align: center;
border: 1px solid #C0C0C0;
background-color:#F0C2D1;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

Donde queremos mostrar el DIV añadimos:

<div class="sombra-div">
Esto sería el contenido del bloque
</div>

Si lo que añadimos es una imagen:

.sombra-image {
padding: 0.1em;
width: 200px;
height: 210px;
background-color:#FFF;
border: 1px solid #C0C0C0;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

<div class="sombra-image"><img src="url-imagen" border="0" /></div>

O un texto cualquiera


Aquí cualquier texto


.sombra-tex {
text-shadow: 2px 3px 4px #000;
color: #F0C2D1;
font-size: 48px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

<p class="sombra-tex">Aquí cualquier texto </p>


Sorte Bilosony2 ™





fonte e créditos: 









Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

"Alô Negócios !!!…buscas populares"

Alô Negócios !!!…buscas populares