Pesquisar

Mostrando postagens com marcador css. Mostrar todas as postagens
Mostrando postagens com marcador css. 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:

Sobre: ..." A tag span e caracteres Unicode"

  Sobre: ..."  A tag span e caracteres Unicode"

 :::

 

"  A tag span e caracteres Unicode"

"  ...sobre uma forma de estilo mais conhecido como caracteres especiais Unicodevão do qual falamos em outra ocasião".   
...e é muito fácil se usarmos o rótulo ..
mostrar esse personagem teria que escrever a próxima
Se usarmos a tag span assim:


style = " vertical -align: <span middle; color:#990000;" font-size:20px;>&#9658;</ Span>


Teríamos esse resultado


Basta pensar na cor e tamanho que gostaríamos, adicionar estilos e antes da tag de fechamento span adicionar o personagem vai usar.



     ®

fonte: 
 






Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

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

Alô Negócios !!!…buscas populares