Etiquetas

Ejemplos practico...box-shadow CSS3


Es fácil darle un aspecto atractivo  a nuestros textos con sobras en una  sola linea de código  desde el head con el estylo  para h1 dentro del body .



<html>

<head>
<style type="text/css">
h1{

text-shadow:4px 4px 4px black;
}
</style>


</head>
<body>
<h1>Ayudar </h1>

</body>
</html>












También .



<html>

<head>
<style type="text/css">
h1{

text-shadow:4px 4px 4px darkgray;
font-family:Inpact,sans-serif;
font-size:50px;
margin:10px;
padding:10px;
}
</style>


</head>
<body>
<h1>Hola estas en mi blog </h1>

</body>
</html>





especificando el tipo de fuente .


font-family:Inpact,sans-serif;
su tamaño 

font-size:50px;
margen
margin:10px;
padding

padding:10px;

Donde
la primera coordenada es distancia horizontal ,la segunda distancia vertical , la tercera es el difuminado de la sombra   finalizando con el color darkgray;


text-shadow:4px 4px 4px darkgray;




También de esta  manera .

<html>

<head>
<style type="text/css">
h1{
color:white;
text-shadow:black 1px 1px 2px, navy 0 0 0.3em;
font-family:Inpact,sans-serif;
font-size:50px;
margin:10px;
padding:10px;
}
</style>


</head>
<body>
<h1>Hola estas en mi blog </h1>

</body>
</html>





Lo único distinto en este ejercicio son las medidas en   em 
text-shadow:black 1px 1px 2px, navy 0 0 0.3em;

Las medidas en em son el ultimo grito en flexibilidad web cuesta un poco al principio pero después es fácil  
por ejemplo .


1px  son 0.063em.
10px son 0.625em.

y así sucesivamente  aquí te dejo una herramienta   muy útil ,convierte los pixeles en em .


Etiquetas:

Comentarios

Publicar un comentario