# data[].attributes.body
Control del tamaño desde CSS o desde HTML

Hemos visto cómo controlar el tamaño de la imagen desde el propio código HTML, incluyendo en la etiqueta de imagen los atributos width y height.

Con el código CSS también podemos controlar el tamaño de las imágenes mediante las propiedades width (ancho) y height (alto) las cuales veremos a continuación. Estas propiedades nos permiten mostrar la imagen con cualquier anchura y altura, independientemente de su altura o anchura real.
Propiedades width y height

Las Propiedades width y height Se emplean no sólo con imágenes, sino que pueden emplearse también para definir el ancho y el alto de otras partes del documento, bien sea párrafos, columnas, etc. Esto lo veremos en temas posteriores. De momento vamos a definir estas propiedades.

La propiedad width

width | Anchura
Valores | <medida> | <porcentaje> | auto | inherit
Descripción | Establece la anchura de un elemento
Valor inicial | auto
se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla

La Propiedad height

height | Altura
Valores | <medida> | <porcentaje> | auto | inherit
Descripción | Establece la altura de un elemento
Valor inicial | auto
se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla

# data[].attributes.body
Tooltip básico

Crea una información sobre herramientas que aparece cuando el usuario mueve el mouse sobre un elemento.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* POSICION DEL TOOLTIP */
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
</style>
</head>
<body style="text-align:center">

<h2>Tooltip básico</h2>
<div class="tooltip">Situate sobre mí
	<span class="tooltiptext">Tooltip text</span>
</div>

<p>Ten en cuenta que la posición del texto de información sobre herramientas
no es muy buena. Vuelve al tutorial y continúa leyendo sobre
cómo colocar el Tooltip de una manera deseable.</p>

</body>
</html>

# data[].attributes.body
CSS permite animaciones HTML sin usar Javascript o Flash.

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation

Que son las animaciones CSS

Una animación permite que un elemento cambie gradualmente de un estilo a otro. Puedes cambiar tantas propiedades CSS como desees, tantas veces como desees. Para usar la animación CSS, primero debes especificar algunos fotogramas clave para la animación. Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos.

La regla @keyframes

Cuando especificas estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente del estilo actual al nuevo estilo en ciertos momentos. Para que una animación funcione, debe vincular la animación a un elemento. El siguiente ejemplo vincula la animación "example" al elemento <div>. La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de "rojo" a "amarillo".

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}

@keyframes example {
	from {background-color: red;}
	to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>Animaciones CSS</h1>
<div></div>
<p><b>Observación: </b>cuando una animación termina vuelve a su estado original</p>
</body>
</html>

# data[].attributes.body
Las transiciones CSS te permiten cambiar los valores de propiedad sin problemas, durante un período determinado. En este capítulo miraremos las siguientes propiedades:

transition

transition-delay

transition-duration

transition-property

transition-timing-function

Como usar transiciones CSS

Para generar una transición debemos seguir dos pasos:

la propiedad CSS a la que desea agregar un efecto

la duración del efecto

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
	width: 100px;
	height: 100px;
	line-height: 100px;
	color: yellow;
	background: red;
	transition: width 2s;
	text-align: center;
}

div:hover {
	width: 300px;
}
</style>
</head>
<body>
<h1>La propiedad transition</h1>
<p>Pasa el cursor sobre el elemento div a continuación para ver el efecto de transición:</p>
<div>Hola que tal</div>
</body>
</html>

# data[].attributes.body
Con la propiedad transform podemos usar los siguientes métodos:

translate()

rotate()

scaleX()

scaleY()

scale()

skewX()

skewY()

skew()

matrix()

El método translate()

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
	width: 300px;
	height: 100px;
	background-color: yellow;
	border: 1px solid black;
	transform: translate(50px, 100px);
}
</style>
</head>
<body>
<h1>El método translate()</h1>
<div>
El elemento div será movido 50px hacia la derecha y 100 hacia abajo de su posición actual
</div>
</body>
</html>

El método rotate()

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

El método scale()

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2,3);
}
</style>
</head>
<body>

<h1>El método scale()</h1>

<p>El método scale() incrementa o decrementa el tamaño de un elemento.</p>

<div>
Este elemento div es dos veces su ancho original y tres veces su altura original.
</div>

</body>
</html>

scaleX()

Ejm

div {  transform: scaleX(2);
}

scaleY()

Ejm

div {
transform: scaleY(3);
}

# data[].attributes.body
¿Que es?
Los gradientes nos permiten añadir efectos de colores degradados en nuestros diseños. Los gradientes están disponibles desde CSS3 y se configuran como fondos, por lo que tendremos que usar la propiedad “background“. Disponemos de dos tipos de gradientes: lineal y radial.

1. Gradiente lineal
El gradiente lineal se define mediante la función linear-gradient() y permite crear fondos degradados en una dirección específica. El formato es el siguiente:

background: linear-gradient(dirección|ángulo, color, color, color...);
background: linear-gradient(dirección|ángulo, color tamaño, color tamaño, color tamaño...);
background: linear-gradient(color, color, color…);

2. Gradiente radial
El gradiente radial nos permite crear degradados con formas circulares. El formato para los gradientes radiales es muy parecido al anterior. En este caso, debemos usar la función radial-gradient() y un nuevo atributo para la forma.

background: radial-gradient(forma, color, color, color...);
background: radial-gradient(forma tamaño, color, color, color...);
background: radial-gradient(forma, color tamaño, color tamaño, color tamaño...);
background: radial-gradient(color, color, color...);

# data[].attributes.body
La versión CSS 3 incluirá una propiedad llamada box-shadow para crear este tipo de sombras.

A continuación se muestra la regla CSS 3 necesaria para crear una sombra gris muy difuminada y que se visualice en la esquina inferior derecha de un elemento:

.elemento {
  box-shadow: 2px 2px 5px #999;
}

La sintaxis completa de la propiedad box-shadow es muy compleja y se define en el borrador de trabajo del módulo de fondos y bordes de CSS3. A continuación se muestra su sintaxis simplificada habitual:

box-shadow: <medida> <medida> <medida>? <medida>? <color>

La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.

La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.

La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.

La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.

El color indicado es directamente el color de la sombra que se muestra.

La siguiente regla CSS muestra una sombra en los navegadores Firefox y Safari:

.elemento {
  -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
}

# data[].attributes.body
Las fuentes web permiten a los diseñadores usar fuentes que no están instaladas en la computadora del usuario. Cuando hayas encontrado/comprado la fuente que deseas usar, simplemente incluye el archivo de fuente en tu servidor web y se descargará automáticamente al usuario cuando lo necesite.
Para usar la fuente para un elemento HTML, consulta el nombre de la fuente (myFirstFont) a través de la propiedad font-family.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
@font-face {
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

* {
	font-family: myFirstFont;
}
</style>
</head>
<body>
<h2>La regla @font-face</h2>
<div>
Con CSS, los sitios web pueden usar fuentes distintas a las fuentes
 "seguras para la web" preseleccionadas.
</div>
</body>
</html>

Usando texto en negrita

Debe agregar otra regla @font-face que contenga descriptores para texto en negrita.

Ejm

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

# data[].attributes.body
Propiedades:

desbordamiento de texto

ajuste de línea

salto de palabra

modo de escritura

desbordamiento de texto

<!DOCTYPEhtml>
<html lang="es">
<cabeza>
<estilo>
p.texto1 {
	espacios en blanco: nowrap;
	ancho: 200px;
	borde: 1px sólido #000000;
	desbordamiento: oculto;
	desbordamiento de texto: clip
}

p.texto2 {
	espacios en blanco: nowrap;
	ancho: 200px;
	borde: 1px sólido #333333;
	desbordamiento: oculto;
	desbordamiento de texto: puntos suspensivos;
}
</estilo>
</cabeza>
<cuerpo>
<h2>La propiedad text-overflow</h2>
<p class="text1">Este es un texto largo que no cabe en el cuadro</p>

<h2>desbordamiento de texto: puntos suspensivos;</h2>
<p class="text2">Este es un texto largo que no cabe en el cuadro</p>
</cuerpo>
</html>

ajuste de línea

<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
p.prueba {
ancho: 11em;
borde: 1px sólido #000000;
ajuste de palabra: ruptura de palabra;
}
</estilo>
</cabeza>
<cuerpo>

<h1>La propiedad de ajuste de palabra</h1>

<p class="test">Este párrafo contiene una palabra muy larga:
esta es una palabra muy muy muy muy muy larga. La palabra larga se dividirá y pasará a la siguiente línea.</p>

</cuerpo>
</html>

salto de palabra

<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
p.prueba1 {
ancho: 140px;
borde: 1px sólido #000000;
separación de palabras: guardar todo;
}

p.prueba2 {
ancho: 140px;
borde: 1px sólido #000000;
ruptura de palabra: ruptura total;
}
</estilo>
</cabeza>
<cuerpo>

<h1>La propiedad de separación de palabras</h1>
<p class="test1">Este párrafo contiene algo de texto. Esta línea se dividirá en guiones.</p>

<p class="test2">Este párrafo contiene algo de texto. Las líneas se romperán en cualquier carácter.</p>

</cuerpo>
</html>

modo de escritura

<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
p.prueba1 {
modo de escritura: horizontal-tb;
}

intervalo.prueba2 {
modo de escritura: vertical-rl;
}

p.prueba2 {
modo de escritura: vertical-rl;
}
</estilo>
</cabeza>
<cuerpo>
<h1>La propiedad del modo de escritura</h1>
<p class="test1">Algo de texto con el modo de escritura predeterminado.</p>
<p>Algún texto con un elemento span con un modo de escritura <span class="test2">vertical-rl</span>.</p>
<p class="test2">Algo de texto con modo de escritura: vertical-rl.</p>
</cuerpo>
</html>