235
MANUAL PRÁCTICO DE CSS INCLUYE LAS NUEVAS PROPIEDADES CSS3 Editado por: JRLópez

MANUAL PRÁCTICO DE CSS

Embed Size (px)

Citation preview

Page 1: MANUAL PRÁCTICO DE CSS

MANUAL PRÁCTICO DE CSS

INCLUYE LAS NUEVAS PROPIEDADES CSS3

Editado por: JRLópez

Page 2: MANUAL PRÁCTICO DE CSS

ÍNDICE

1 - ¿Qué son las hojas de estilo (CSS)?....................................................................................................................1

2 - Definición de estilos a nivel de marca HTML.....................................................................................................1

3 - Definición de estilos a nivel de página...............................................................................................................2

4 - Propiedades relacionadas a fuentes..................................................................................................................3

5 - Agrupación de varias marcas HTML con una misma regla de estilo..................................................................6

6 - Definición de varias reglas para una misma marca HTML.................................................................................7

7 - Propiedades relacionadas al texto.....................................................................................................................8

8 - Más propiedades relacionadas al texto...........................................................................................................11

9 - Herencia de propiedades de estilo..................................................................................................................12

10 - Definición de un estilo en función del contexto............................................................................................15

11 - Definición de hojas de estilo en un archivo externo......................................................................................17

12 - Definición de estilos por medio de clases......................................................................................................18

13 - Definición de estilos por medio de Id............................................................................................................20

14 - Propiedades relacionadas al borde de una marca HTML...............................................................................21

15 - Más propiedades relacionadas al borde de una marca HTML.......................................................................23

16 - Propiedades relacionadas al padding de una marca HTML...........................................................................25

17 - Propiedades relacionadas al margen de una marca HTML............................................................................26

18 - Propiedades relacionadas a listas..................................................................................................................27

19 - Propiedades relacionadas al fondo (background).........................................................................................30

20 - Propiedades relacionadas a fuentes (FORMATO RESUMIDO).......................................................................33

21 - Propiedades relacionadas al border (FORMATO RESUMIDO).......................................................................33

22 - Propiedades relacionadas al padding (FORMATO RESUMIDO).....................................................................34

23 - Propiedades relacionadas al margin (FORMATO RESUMIDO).......................................................................35

24 - Propiedades relacionadas al fondo (background) (FORMATO RESUMIDO)...................................................36

25 - El selector universal *....................................................................................................................................37

26 - Pseudoclases.................................................................................................................................................38

27 - Eliminar el subrayado a un enlace <a> por medio de las pseudoclases.........................................................40

28 - Creación de un menú vertical configurando las pseudoclases......................................................................41

29 - Creación de un menú horizontal con una lista..............................................................................................43

30 - Propiedades relacionadas a la dimensión de un objeto en la página............................................................45

Page 3: MANUAL PRÁCTICO DE CSS

31 - Unidades de medida (px, cm, mm, em etc.)..................................................................................................46

32 - Formas para indicar el color..........................................................................................................................48

33 - Definir un cursor para un control HTML........................................................................................................49

34 - Aplicación de hojas de estilo a un formulario................................................................................................51

35 - Definiendo reglas de estilo a una tabla.........................................................................................................52

36 - Posicionamiento relativo (position: relative).................................................................................................54

37 - Posicionamiento absoluto (position: absolute).............................................................................................56

38 - Posicionamiento absoluto y propiedad z-index.............................................................................................57

39 - Posicionamiento fijo (position: fixed)............................................................................................................58

40 - Disposición de 2 columnas (position: absolute)............................................................................................64

41 - Propiedad float aplicada a una imagen.........................................................................................................67

42 - Propiedad float aplicada a otros elementos HTML....................................................................68

43 - Propiedad clear.............................................................................................................................................69

44 - Disposición de 2 columnas (propiedad float)................................................................................................73

45 - Disposición de 2 columnas, cabecera y pie....................................................................................................75

46 - Disposición de 3 columnas, cabecera y pie....................................................................................................77

47 - Diseño de ancho fijo......................................................................................................................................78

48 - Diseño de ancho líquido................................................................................................................................84

CSS31. Bordes redondeados (border-radius)..........................................................................................88

2. Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)...............90

3. Sombras (box-shadow)....................................................................................................................92

4. Sombras múltiples (box-shadow).................................................................................................94

5. Sombras interiores (box-shadow)................................................................................................96

6. Sombras con transparencias (box-shadow)..............................................................................97

7. Sombras de texto (text-shadow)..................................................................................................99

8. Transformaciones 2D: rotación (transform:rotate)..............................................................101

9. Transformaciones 2D: punto de origen (transform-origin)...............................................105

10. Transformaciones 2D: escalado (transform:scale)...............................................................110

11. Transformaciones 2D: translación (transform:translate)...................................................113

12. Transformaciones 2D: torcer (transform:skew)....................................................................116

13. Transformaciones 2D: múltiples transformaciones en forma simultanea...................120

Page 4: MANUAL PRÁCTICO DE CSS

14. Opacidad (opacity)..........................................................................................................................121

15. Opacidad (color)...............................................................................................................................128

16. Múltiples columnas (column-count)...........................................................................................131

17. Múltiples columnas dinámicas (column-width).....................................................................133

18. Múltiples columnas y su separación (column-gap)..............................................................136

19. Múltiples columnas y línea separadora (column-rule)........................................................138

20. Importar una fuente no disponible en el navegador (@font-face).................................144

21. Imágenes de fondo (background-image)................................................................................148

22. Imágenes de fondo en diferentes posiciones (background-position)............................151

23. Imágenes de fondo en diferentes posiciones (background-position)............................154

24. Imágenes de fondo (background-size).....................................................................................157

25. Imágenes de fondo (background-origin)..................................................................................160

26. Transiciones de una propiedad (transition)............................................................................164

27. Transiciones de múltiples propiedades (transition).............................................................166

28. Transiciones (funciones de transición).....................................................................................168

29. Transiciones (tiempo de demora en iniciar la transición)..................................................171

30. Transiciones (otra sintaxis para hacer lo mismo).................................................................173

31. Animaciones (sintaxis básica).....................................................................................................177

32. Animaciones (animation-iteration-count y animation-direction).....................................180

33. Animaciones (animation-timing-function y animation-delay)..........................................183

34. Animaciones (animation-play-state).........................................................................................186

35. Animaciones (definición de más de 2 keyframes)................................................................190

Page 5: MANUAL PRÁCTICO DE CSS

1 - ¿Qué son las hojas de estilo (CSS)?

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitios web se concentraban más en su contenido que en su presentación.HTML no pone mucha atención en la apariencia del documento. CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general.

Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1, CSS2 y CSS3 del World Wide Web Consortium (W3C), es un estándar aceptado por toda la industria relacionada con la Web, o por lo menos, gran parte de navegadores (es verdad el IExplorer de Microsoft nos puede dar un dolor de cabeza con los navegadores antiguos). Podemos visitar W3C

Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css

En este curso veremos las tres metodologías, pero pondremos énfasis en la tercera forma, que es la más adecuada para separar el contenido de la página y la forma como se debe representar la misma por medio de la hoja de estilo.

El curso brinda un concepto teórico corto, luego un problema resuelto que invito a ejecutar, modificar y jugar con el mismo. Por último, y lo más importante, un ejercicio propuesto que nos permitirá saber si podemos aplicar el concepto.

2 - Definición de estilos a nivel de marca HTML.

Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca HTML. Se define en la propiedad style los estilos a definir para dicha marca.

Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos.

La sintaxis para definir un estilo a una marca HTML es la siguiente:

<!DOCTYPE html><html><head></head><body><h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo.</h1></body>

1

Page 6: MANUAL PRÁCTICO DE CSS

</html>

Por defecto, todo navegador tiene un estilo definido para cada marca HTML, lo que hacemos con la propiedad style es redefinir el estilo por defecto. En este problema definimos que la marca h1 defina como color de texto el rojo y como color de fondo el amarillo:<h1 style="color:#ff0000;background-color:#ffff00">

Este mensaje es de color rojo sobre fondo amarillo.

</h1>

Veremos más adelante que hay muchas propiedades en CSS. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto).Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.

Cuando definimos estilos directamente en las marcas HTML, tenemos que tener en cuenta que el estilo se aplica únicamente a la marca donde inicializamos la propiedad style, es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada marca:<h1 style="color:#ff0000;background-color:#ffff00">

Primer título

</h1>

<h1 style="color:#ff0000;background-color:#ffff00">

Segundo título

</h1>

Como podemos observar, más allá que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada marca HTML.

Problema:Crear una página HTML y definir tres mensajes entre las marcas h1, h2 y h3. Definir el mismo color para el texto de cada bloque y colores diferentes para el fondo de los mismos (cada marca HTML debe tener definida la propiedad style).

3 - Definición de estilos a nivel de página.

Es la definición de estilos en una sección de la cabecera de la página HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.El problema del concepto anterior donde debíamos crear un estilo similar para la marca h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.

Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.

<!DOCTYPE html><html><head><title>Problema</title>

2

Page 7: MANUAL PRÁCTICO DE CSS

<style type="text/css">h1 {color:#ff0000;background-color:#ffff00}</style></head><body><h1>Primer título</h1><h1>Segundo título</h1></body></html>

Podemos observar que en la cabecera de la página definimos la sección:<style type="text/css">

h1 {color:#ff0000;background-color:#ffff00}

</style>

Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más eficiente que definir los estilos directamente sobre las marcas HTML.

Podemos definir estilos para muchas marcas en la sección style:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">>h1 {color:#ff0000}h2 {color:#00ff00}h3 {color:#0000ff}</style></head><body><h1>rojo</h1><h2>verde</h2><h3>azul</h3></body></html>

Problema: Definir un estilo diferente para las marcas h1,h2,h3,h4,h5 y h6. Mostrar mensajes utilizando estas marcas a las que se le han definido estilos (por ahora sólo conocemos el color de texto y fondo).

4 - Propiedades relacionadas a fuentes.

Contamos con una serie de propiedades relacionadas a fuentes:font-family

font-size

3

Page 8: MANUAL PRÁCTICO DE CSS

font-style

font-weight

font-variant

Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; }h2 { font-family:verdana; font-size:20px; }</style></head><body><h1>Titulo de nivel 1</h1><h2>Titulo de nivel 2</h2></body></html>

Como podemos observar, hemos definido dos reglas de estilos para las marcas h1 y h2, eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la página que se utilicen dichas marcas HTML.La primera regla definida para la marca h1 es:h1 {

font-family:times new roman;

font-size:30px;

font-style:italic;

font-weight:bold;

}

Recordemos que para definir la regla de estilo debemos indicar el nombre de la marca HTML a la que definiremos el estilo y luego, entre paréntesis, todas las propiedades y sus valores separados por punto y coma.La primera propiedad inicializada es font-family, algunas de las fuentes más comunes que puede acceder el navegador son:Arial

4

Page 9: MANUAL PRÁCTICO DE CSS

Arial Black

Arial Narrow

Courier New

Georgia

Impact

Tahoma

Times New Roman

Verdana

En caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para esa marca HTML.

Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):font-family: verdana, arial, georgia;

La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamaño de la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en píxeles: font-size:30px;

La tercera propiedad es font-style, que puede tener los siguientes valores :normal

italic

oblique

La última propiedad es font-weight, pudiendo tomar los siguientes valores:normal

bold

bolder

lighter

100

200

300

400

500

5

Page 10: MANUAL PRÁCTICO DE CSS

600

700

800

900

Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos).

La segunda regla define sólo dos propiedades relacionadas a la fuente:h2 {

font-family:verdana;

font-size:20px;

}

Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien elegirá los valores correspondientes.

Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:small-caps

normal

Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.

Problema: Definir reglas para las marcas HTML: h1,h2,h3,h4,h5 y h6. Inicializar la propiedad font-size con valores decrecientes para cada una de las marcas (40,30,25,20,15 y 10 píxeles). Inicializar la propiedad font-family para las tres primeras marcas con los valores: Arial, Arial Black y Arial Narrow.

5 - Agrupación de varias marcas HTML con una misma regla de estilo.

Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML.Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3 luego podemos implementarlo de la siguiente manera:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">h1,h2,h3 { font-family:verdana; color:#0000ff;}</style>

6

Page 11: MANUAL PRÁCTICO DE CSS

</head><body><h1>Título de nivel 1</h1><h2>Título de nivel 2</h2><h3>Título de nivel 3</h3></body></html>

Es decir, separamos por coma todas las marcas a las que se aplicará la misma regla de estilo:h1,h2,h3 {

font-family:verdana;

color:#0000ff;

}

Problema: Definir la misma fuente, color y tamaño de fuente para las marcas p (párrafo) y h6 (tener en cuenta que cuando vea la página el texto que se encuentra en la marca h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight (ya que la marca h6 es de tipo bold y la marca p tiene por defecto normal)

6 - Definición de varias reglas para una misma marca HTML.

En algunas circunstancias, es necesario desglosar la inicialización de propiedades en distintas reglas.Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta, luego podemos implementarlo de la siguiente manera:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">h1,h2,h3,h4,h5,h6 { font-family:Verdana;}h1 { font-size:40px;}h2 { font-size:30px;}h3 { font-size:25px;}h4 { font-size:20px;}h5 {

7

Page 12: MANUAL PRÁCTICO DE CSS

font-size:15px;}h6 { font-size:10px;}</style></head><body><h1>Título de nivel 1</h1><h2>Título de nivel 2</h2><h3>Título de nivel 3</h3><h4>Título de nivel 4</h4><h5>Título de nivel 5</h5><h6>Título de nivel 6</h6></body></html>

Es decir, podemos inicializar un conjunto de marcas HTML con una serie de propiedades de estilo comunes. Luego agregamos en forma individual las propiedades no comunes a dichas marcas:h1,h2,h3,h4,h5,h6 {

font-family:Verdana;

}

h1 {

font-size:40px;

}

Es decir, a la marca h1 realmente le hemos definido 2 propiedades: font-family y font-size. Lo mismo para las otras marcas HTML.

Problema: Definir para la marca <h6> el mismo tamaño de fuente (12px) que la marca <p> (párrafo) pero color azul para el título y gris claro (color:#aaaaaa) para el párrafo. Agrupar las dos marcas para la definición de la fuente y posteriormente agregar a cada marca el valor respectivo para el color del texto.

7 - Propiedades relacionadas al texto.

A una de estas propiedades ya la vimos cuando comenzamos con los primeros conceptos: color, nos permite definir el color del texto, lo podemos indicar por medio de tres valores hexadecimales que indican la mezcla de rojo, verde y azul. Por ejemplo si queremos rojo puro debemos indicar:color:#ff0000;

Si queremos verde puro:color:#00ff00

Si queremos azul puro:color:#0000ff

8

Page 13: MANUAL PRÁCTICO DE CSS

Luego si queremos amarillo debemos mezclar el rojo y el verde:color:#ffff00

Hay muchos programas que nos permiten seleccionar un color y nos descomponen dicho valor en las proporciones de rojo,verde y azul.

Otra forma de indicar el color, si tenemos los valores en decimal, es por medio de la siguiente sintaxis:color:rgb(255,0,0);

Es decir, por medio de la función rgb (red,green,blue), indicamos la cantidad de rojo, verde y azul en formato decimal.

La segunda propiedad relacionada al texto es text-align, que puede tomar alguno de estos cuatro valores:left

right

center

justify

Si especificamos:text-align:center;

El texto aparecerá centrado. Si queremos justificar a derecha, emplearemos el valor right y si queremos a la izquierda, el valor será left.

La tercera propiedad relacionada al texto que podemos emplear es text-decoration que nos permite entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte superior, los valores posibles de esta propiedad son:none

underline

overline

line-through

Como ejemplo, definiremos estilos relacionados al texto para las marcas de cabecera h1,h2 y h3:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">h1 { color:#ff0000; text-align:left; text-decoration:underline;}h2 {

9

Page 14: MANUAL PRÁCTICO DE CSS

color:#dd0000; text-align:center; text-decoration:underline;}h3 { color:#aa0000; text-align:right; text-decoration:underline;}</style></head><body><h1>Título de nivel 1.<h1><h2>Título de nivel 2.<h2><h3>Título de nivel 3.<h3></body></html>

Es decir, para los títulos de nivel 1 tenemos la regla:h1 {

color:#ff0000;

text-align:left;

text-decoration:underline;

}

Es decir, color de texto rojo intenso, el texto debe aparecer de izquierda a derecha y subrayado.Luego para la marca h2 tenemos:h2 {

color:#dd0000;

text-align:center;

text-decoration:underline;

}

El color sigue siendo rojo pero un poco más oscuro, el texto debe aparecer centrado y subrayado.Y por último:h3 {

color:#aa0000;

text-align:right;

text-decoration:underline;

10

Page 15: MANUAL PRÁCTICO DE CSS

}

Para los títulos de nivel tres, el texto es rojo más oscuro, alineado a derecha y subrayado.

Problema: Definir para la marca de párrafo (p) el color verde puro, texto centrado. Imprimir varios párrafos para ver los resultados según la regla de estilo definida. Que valor debemos definir para que el texto aparezca con color rojo oscuro.

8 - Más propiedades relacionadas al texto.

Vimos en el concepto anterior las propiedades:color

text-align

text-decoration

Ahora veremos el objetivo de las siguientes propiedades que nos faltan:letter-spacing

word-spacing

text-indent

text-transform

La propiedad letter-spacing y word-spacing permiten indicar el espacio que debe haber entre los caracteres y entre las palabras.La propiedad text-indent, indenta la primera linea de un texto. A partir de la segunda línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación es hacia la izquierda.Por último, la propiedad text-transform puede inicializarse con alguno de los siguientes valores:none - capitalize - lowercase - uppercase

Cada uno de estos valores transforman el texto como sigue:capitalize: Dispone en mayúsculas el primer caracter de cada palabra.lowercase: Convierte a minúsculas todas las letras del texto.uppercase: Convierte a mayúsculas todas las letras del texto.none: No provoca cambios en el texto.

El siguiente ejemplo define reglas para las marcas h1 y p:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize;

11

Page 16: MANUAL PRÁCTICO DE CSS

}p { text-indent:20px;}</style></head><body><h1>Este es un título de nivel 1</h1><p>Todo el texto siguiente se encuentra encerrada en la marca de párrafo y con el objetivo de ver el efecto de la propiedad text-indent.La propiedad text-indent podemos inicializarla con un valor positivo, como es el caso actual o podemos inicializarla con un valor negativo lo que provocará que el texto de la primera línea del párrafo comience en una columna inferior al de todo el bloque. </p></body></html>

La cabecera de nivel uno, tiene la siguiente regla:h1 {

letter-spacing:10px;

word-spacing:30px;

text-transform:capitalize;

}

Es decir que las letras deben tener una separación de 10 pixeles, las palabras deben estar separadas por 30 pixeles y por último deben disponerse en mayúsculas la primera letra de cada palabra.Para la marca p tenemos la siguiente regla:p {

text-indent:20px;

}

Es decir, la primera línea del párrafo deberá imprimirse 20 píxeles a la derecha donde normalmente debería aparecer.

Problema: Definir las marcas de cabecera h1,h2 y h3 con valores decrecientes para las propiedades:letter-spacingword-spacingLuego inicializar la propiedad text-transform para que el texto siempre salga en mayúsculas.

9 - Herencia de propiedades de estilo.

Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que en su raiz podemos identificar la marca body del cual se desprenden otras marcas contenidas en esta sección, como podrían ser las marcas

12

Page 17: MANUAL PRÁCTICO DE CSS

h1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcas HTML como podrían ser em,b,i,pre etc.Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos los vistos hasta el momento se heredan), es decir si definimos la propiedad color para la marca h1, luego si dicha marca incorpora un texto con la marca b (bold) en su interior, la propiedad color de la marca b tendrá el mismo valor que la propiedad h1 (es decir la marca b hereda las propiedades de la marca h1)

Con un ejemplo veremos el resultado de la herencia de propiedades entre las marcas HTML:

<html><head><title>Problema</title><style type="text/css">body { color:#0000ff; font-family:verdana;}</style></head><body><h1>Este es un título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1><p>Todo este párrafo debe ser de color azul ya que lo hereda de la marca body.</p></body></html>

En este ejemplo hemos definido la siguiente regla para la marca body:body {

color:#0000ff;

font-family:verdana;

}

Inicializamos la propiedad color con el valor de azul y la fuente de tipo verdana. Con esto todas las marcas contenidas en el body que no redefinan estas dos propiedades recibirán los valores aquí definidos. En este ejemplo la cabecera de primer nivel es decir h1, el párrafo y el hipervínculo tienen como color el azul y la fuente es de tipo verdana.

Ahora bien en muchas situaciones podemos redefinir propiedades para marcas contenidas, veamos como podemos hacer que el texto contenido en las marcas em y p aparezcan de color distinto:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">body { color:#0000ff; font-family:verdana;

13

Page 18: MANUAL PRÁCTICO DE CSS

}em { color:#008800;}p { color:#999999;}</style></head><body></body><h1>Este es un título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1><p>Todo este párrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p></html>

Ahora hemos definido tres reglas, la primera igual que el problema anterior, define la propiedad color en azul y la fuente de tipo verdana para la marca body:body {

color:#0000ff;

font-family:verdana;

}

La segunda regla define la propiedad color en verde para la marca em, con esto no heredará el color azul de la marca body (que es la marca padre):em {

color:#008800;

}

Algo similar hacemos con la marca p para indicar que sea de color gris:p {

color:#999999;

}

Pero podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la sobreescribe.

Problema: Confeccione una página que define una regla para la marca body e inicialice las propiedades color, font-family. Luego defina reglas de estilo para las marcas h1,h2 y h3 que redefinan la fuente con los valores: Times New Roman, Courier y Arial. Imprima tres títulos, cada uno con las marcas h1,h2 y h3. Por último imprima un párrafo.

14

Page 19: MANUAL PRÁCTICO DE CSS

10 - Definición de un estilo en función del contexto.

Este otro recurso que provee las css es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. Sólo en ese caso el estilo para dicha marca se activará.Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo, luego la sintaxis del problema es:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">p b{ color:#0000ff;}h1 b{ color:#ff0000;}</style></head><body><h1>Acá tenemos un título de nivel uno, luego un bloque con la marca bold debe aparecer <b>así</b></h1><p>Luego si escribimos un párrafo y encerramos un bloque con la marca bold debe aparecer <b>así</b></p></body></html>

Es importante analizar la sintaxis para la definción de estilos en función del contexto. Tenemos:p b{

color:#0000ff;

}

Estamos diciendo que todas los bloques de la página que contengan la marca b (bold) y que estén contenidas por la marca p (párrafo) se pinten de azul. Si bien hay dos bloques en la página que están encerrados por la marca b, solo uno se pinta de color azul, el otro bloque se pinta de color verde, ya que tenemos:h1 b{

color:#ff0000;

}

Es decir, activar el color rojo para el contenido encerrado por la marca b, siempre y cuando se encuentre contenido por la marca h1.

15

Page 20: MANUAL PRÁCTICO DE CSS

No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando por coma las marcas HTML:h1,b{

color:#ff0000;

}

Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo.

Se pueden definir estilos en función del contexto, con mayor precisión, como por ejemplo:div h1 em {

color:#ff0000;

}

Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por la marca em siempre y cuando esté contenida en un bloque con la marca h1 y esta a su vez dentro de un div.La página completa queda codificada de la siguiente forma:

<!DOCTYPE html><html><head><title>Problema</title><style type="text/css">div h1 em { color:#ff0000;}</style></head><body><div><h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1></div><h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1></body></html>

Problema: Definir distintas escalas de grises para los bloques encerrados por la marca HTML em que se encuentren contenidos por las marcas h1,h2,h3,h4,h5 y h6.

Una escala de grises que podemos utilizar es: color:#dddddd; color:#cccccc; color:#bbbbbb; color:#aaaaaa color:#999999 color:#888888;

16

Page 21: MANUAL PRÁCTICO DE CSS

Aparecen los bloques de más claro a más oscuro (cuando los tres valores son iguales (rojo,verde,azul) estamos en presencia de un gris (salvo el #000000 y el #ffffff))

11 - Definición de hojas de estilo en un archivo externo.

Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que serán empleados sólo por esa página.Ahora veremos que la metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css.Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora) pero estarán separadas del archivo HTML.La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las páginas del sitio web. Veremos que esto será muy provechoso cuando necesitemos hacer cambios de estilo (cambiando las reglas de estilo de este archivo estaremos cambiando la apariencia de múltiples páginas del sitio).También tiene como ventaja que al programador le resulta más ordenado tener lo referente a HTML en un archivo y las reglas de estilo en un archivo aparte.Otra ventaja es que cuando un navegador solicita una página, se le envía el archivo HTML y el archivo CSS, quedando guardado este último archivo en la caché de la computadora, con lo cual, en las sucesivas páginas que requieran el mismo archivo de estilos, ese mismo archivo se rescata de la caché y no requiere que el servidor web se lo reenvíe (ahorrando tiempo de transferencia).Ahora veremos la primera página HTML que tiene asociada una hoja de estilo en un archivo externo. El archivo HTML es (pagina.html):

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><h1>Definición de hojas de estilo en un archivo externo.</h1><p>Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que serán empleados solo por esa página.Ahora veremos que la metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css.</p></body></html>

El archivo que tiene las reglas de estilo es (estilos.css):

body { background-color:#eafadd;}

17

Page 22: MANUAL PRÁCTICO DE CSS

h1 { color:#0000cc; font-family:times new roman; font-size:25px; text-align:center; text-decoration:underline;}p { color:#555555; font-family:verdana; text-align:justify;}

Como podemos observar, para indicar el archivo de estilos externo, debemos agregar en la cabecera (head) del archivo HTML la siguiente marca:<link rel="StyleSheet" href="estilos.css" type="text/css">

La propiedad href hace referencia al archivo externo que afectará la presentación de esta página. En la propiedad type, indica al navegador cual es el formato de archivo. El atributo rel se usa para definir la relación entre el archivo enlazado y el documento HTML.

Sólo queda probar esta página funcionando.

De ahora en más nos acostumbraremos a trabajar con hojas de estilo definidas en un archivo externo, que es en definitiva la forma más común de desarrollar un sitio web aplicando CSS.

Problema: Crear una página web que contenga una cabecera de nivel 1 (h1), luego una cabecera de nivel 2 (h2) y un párrafo.

Definir reglas de estilo para las tres marcas h1,h2 y p. Inicializar propiedades vistas en conceptos anteriores. Intentar el planteo de una página que muestre el contenido de la forma más clara posible.

12 - Definición de estilos por medio de clases.

En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML, en esos casos conviene plantear una regla de estilo con un nombre genérico que posteriormente se puede aplicar a varias marcas de HTML.Para conocer la sintaxis para la definición de clases veamos un ejemplo, la pagina.html es:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><h1 class="resaltado">Titulo de nivel 1</h1><p>Este párrafo muestra el resultado de aplicar la clase .resaltado en la última

18

Page 23: MANUAL PRÁCTICO DE CSS

<span class="resaltado">palabra.</span></p></body></html>

La hoja de estilo externa (estilos.css) es:body {

background-color:#eeeeee;

}

.resaltado{

color:#000000;

background-color:#ffff00;

font-style:italic;

}

La sintaxis para definir una clase aplicable a cualquier marca HTML es:.resaltado{

color:#000000;

background-color:#ffff00;

font-style:italic;

}

Es decir, la inicializamos con el caracter punto y seguidamente un nombre de clase. Dentro definimos las reglas de estilo como hemos venido trabajando normalmente.El nombre de la clase no puede comenzar con un número.Luego, para indicar que una marca sea afectada por esta regla:<h1 class="resaltado">Titulo de nivel 1</h1>

Es decir, agregamos la propiedad class y le asignamos el nombre de la clase (sin el punto).Podemos inicializar tantas marcas HTML con esta regla como necesitemos:<p>

Este parrafo muestra el resultado de aplicar la clase .resaltado en la última

<span class="resaltado">palabra.</span>

</p>

Aca definimos la propiedad class a la marca span y le asignamos la misma clase aplicada anteriormente a la marca h1.

19

Page 24: MANUAL PRÁCTICO DE CSS

Problema:Problema 1:Definir en la hoja de estilo estas dos clases:.subrayado { color:#00aa00; text-decoration:underline;}.tachado { color:#00aa00; text-decoration:line-through;}Luego, en la página html, definir un título con nivel h1 (subrayar todo el título). Luego un párrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca span para asignar estilos a una palabra).

Problema 2:Definir estas dos reglas en la hoja de estilo externa. Luego crear una página HTML que contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en un párrafo distinto. Asignar los estilos .pregunta y .respueta.pregunta { font-family:verdana; font-size:14px; font-style:italic; color:#0000aa;}.respuesta { font-family:verdana; font-size:12px; font-style:normal; text-align:justify; color:#555555;}

13 - Definición de estilos por medio de Id.

La diferencia fundamental en la definición de un estilo por medio de Id con respecto a las clases, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML, ya que todos los Id que se definen en una página HTML deben ser distintos.La sintaxis para definir un estilo por medio de Id es:#cabecera {

font-family:Times New Roman;

font-size:30px;

text-align:center;

color:#0000ff;

background-color:#bbbbbb;

20

Page 25: MANUAL PRÁCTICO DE CSS

}

Es decir, utilizamos el carácter numeral (#) para indicar que se trata de un estilo de tipo Id.Luego, sólo una marca HTML dentro de una página puede definir un estilo de este tipo:<div id="cabecera">

Hay que tener en cuenta que sólo una marca puede definir la propiedad id con el valor de cabecera.Los dos archivos completos del ejemplo entonces quedan (pagina1.html):

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="cabecera"><h1>Título de la cabecera</h1></div></body></html>

Y el archivo de estilos (estilos.css) es:

#cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb;}

Problema:Definir tres estilos de tipo Id (cabecera, cuerpo y pie), luego definir en el archivo HTML tres areas (div) inicializando el atributo Id con los nombres de estilo creados.

14 - Propiedades relacionadas al borde de una marca HTML.

Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página HTML genera una caja. Imaginemos los controles que hemos creado h1,h2,h3,p,em, etc.; si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectángulo.Podemos acceder a las propiedades del borde de ese rectángulo mediante las CSS; las propiedades más importantes a las que tenemos acceso son:border-width

border-style

border-color

Veamos un ejemplo que inicialice estas propiedades:

<!DOCTYPE html><html>

21

Page 26: MANUAL PRÁCTICO DE CSS

<head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css">

</head><body><p class="pregunta">¿Quién descubrió América y en que año fue?</p><p class="respuesta">Colón en 1492</p></body></html>.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000;}.respuesta { border-width:1px; border-style:dashed; border-color:#000000;}

Como podemos ver, hemos definido dos clases .pregunta que inicializa el color de fondo en amarillo y luego define el ancho del borde en un pixel, el estilo es sólido y el color de la línea de borde es negro.Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML:<p class="pregunta">Quién descubrió América

y en que año fue?</p>

Al segundo estilo definido lo hemos hecho con la clase .respuesta.respuesta {

border-width:1px;

border-style:dashed;

border-color:#000000;

}

En ésta hemos cambiado el estilo de borde.Disponemos de los siguientes estilos de borde:none

hidden

dotted

dashed

22

Page 27: MANUAL PRÁCTICO DE CSS

solid

double

groove

ridge

inset

outset

Problema: Inicializar las marcas h1,h2 y h3 con bordes de 2 pixeles, color azul y diferentes estilos para cada una. Crear una página HTML que los utilice.Ej:

h1 { border-width:2px; border-style:solid; border-color:#0000ff;}

15 - Más propiedades relacionadas al borde de una marca HTML

Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el grosor, estilo y color del borde de una marca HTML. Pero podemos ir un paso más allá, las CSS nos permiten modificar independientemente cada uno de los cuatro bordes del rectángulo.Contamos con las siguientes propiedades:border-top-width

border-right-width

border-bottom-width

border-left-width

border-top-style

border-right-style

border-bottom-style

border-left-style

border-top-color

border-right-color

23

Page 28: MANUAL PRÁCTICO DE CSS

border-bottom-color

border-left-color

Un ejemplo inicializando estas propiedades:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><h1 class="titulopagina">El blog del pensador</h1></body></html>

y el archivo de estilos:

.titulopagina { background-color:#ffffcc; text-align:center; font-family:verdana; font-size:40px;

border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px;

border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted;

border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;}

Es decir, esta metodología de inicializar el borde de un control HTML, tiene utilidad si los mismos varían en grosor, estilo o color.

Veremos más adelante que hay otras formas de inicializar los bordes de las marcas que reducen el texto a tipear, pero no son las más adecuadas cuando uno está comenzando a estudiar CSS.

Problema: Crear una clase .titulosecundario que inicialice el borde superior e inferior con ancho de 2 pixeles y los bordes laterales con cero pixel. A su elección queda el estilo y color.

24

Page 29: MANUAL PRÁCTICO DE CSS

16 - Propiedades relacionadas al padding de una marca HTML.

El padding (almohadilla) suma espacio entre el contenido de la marca HTML y el borde (recordar propiedad border)

Podemos configurar los 4 en caso que tengan el mismo valor accediendo a la propiedad:padding

o podemos configurar en forma independiente cada lado:padding-top

padding-right

padding-bottom

padding-left

Veamos un ejemplo, la pagina.html:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><pre class="codigofuente">public class Rectangulo{ //atributos int alto; int ancho; boolean relleno; //métodos public int devolverArea(){ return alto*ancho; } public void rellenar(boolean r){ relleno=r; } public void cambiarTamano(int an, int al){ ancho=an; alto=al; } public Rectangulo() {// constructor alto=20; ancho=10; relleno=false; }}//fin clase Rectangulo

25

Page 30: MANUAL PRÁCTICO DE CSS

</pre></body></html>

El archivo estilos.css es:

.codigofuente { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00;

padding:20px;}

Con la marca HTML pre, se respetan los espacios y retornos de carro que hayamos puesto en el texto fuente. Este estilo de texto es muy adecuado cuando queremos mostrar el código fuente de un programa.

Problema: Definir una clase titulo que fije los padding de izquierda y derecha con 20 pixeles y el superior e inferior en 10. Escribir un texto dentro de la marca h1.

17 - Propiedades relacionadas al margen de una marca HTML.

Otra serie de propiedades relacionadas al contorno de una marca HTML son:margin

margin-top

margin-right

margin-bottom

margin-left

El margen está después del borde.

Veamos un ejemplo, la página HTML muestra dos párrafos con cero pixeles de margen:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><p>Primer párrafo</p><p>Segundo párrafo</p></body></html>

26

Page 31: MANUAL PRÁCTICO DE CSS

La hoja de estilo:

p { background-color:#ffffaa; margin:0px;}

Pruebe modificar el valor para la propiedad margin y vea el resultado de la página.

El modelo final de caja se puede resumir con esta imagen:

Problema: Disponer títulos de primer y segundo nivel con un margen de 5 pixeles.

18 - Propiedades relacionadas a listas.

Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML ul (Unordered List), y cada item de la lista con la marca HTML li (List Item).

Las CSS nos permiten configurar las listas por medio de tres propiedades:list-style-type

list-style-position

list-style-image

A list-style-type puede asignársele alguno de estos valores:none

disc

circle

square

decimal

27

Page 32: MANUAL PRÁCTICO DE CSS

decimal-leading-zero

lower-roman

upper-roman

lower-alpha

upper-alpha

Los valores de list-style-position:inside

outside

Los valores de list-style-image:none

url

Veamos un ejemplo que prueba todos los valores posibles que puede tomar la propiedad list-style-type:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><ul class="vacio"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="circulorelleno"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="circulovacio"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="cuadrado"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="decimal"><li>Brasil</li>

28

Page 33: MANUAL PRÁCTICO DE CSS

<li>Uruguay</li><li>Argentina</li></ul><ul class="romanominuscula"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="romanomayuscula"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="letrasminusculas"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul><ul class="letrasmayusculas"><li>Brasil</li><li>Uruguay</li><li>Argentina</li></ul></body></html>

Luego la hoja de estilo es:

ul.vacio{ list-style-type:none;}ul.circulorelleno{ list-style-type:disc;}ul.decimal{ list-style-type:decimal;}ul.romanominuscula{ list-style-type:lower-roman;}ul.romanomayuscula{ list-style-type:upper-roman;}ul.circulovacio{ list-style-type:circle;}ul.cuadrado{ list-style-type:square;}ul.letrasminusculas{

29

Page 34: MANUAL PRÁCTICO DE CSS

list-style-type:lower-alpha;}ul.letrasmayusculas{ list-style-type:upper-alpha;}

Lo que podemos ver es que cuando definimos las clases, le antecedemos al punto, el nombre de la marca donde se aplica dicha clase (en este caso ul, es decir que esta clase sólo tiene sentido aplicarla a dicha marca).

Problema: Confeccionar dos lista de lenguajes de programación. Agrupar los lenguajes estructurados y los lenguajes orientados a objetos. Aplicar estilos distintos a cada lista.

19 - Propiedades relacionadas al fondo (background)

Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de fondo del contenido de una marca HTML (body, h1, h2, p, etc.).Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un archivo de imagen. Las propiedades relacionadas al background y sus valores son:background-color

background-image

background-repeat

background-position

background-attachment

Veamos un ejemplo de disponer una imagen sobre el fondo de la página:

<!DOCTYPE html><html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html>

La hoja de estilo queda:

body { background-image:url(fondo.jpg);}

La única propiedad que hemos inicializado es background-image indicando el nombre del archivo de imagen a mostrar.La imagen se repite en x e y hasta llenar la página por completo, ya que por defecto background-repeat está inicializada con el valor repeat, probar de modificar el estilo primero con:

body {

30

Page 35: MANUAL PRÁCTICO DE CSS

background-image:url(fondo.jpg);

background-repeat:repeat-x;

}

Luego con:body {

background-image:url(fondo.jpg);

background-repeat:repeat-y;

}

Y por último:body {

background-image:url(fondo.jpg);

background-repeat:no-repeat;

}

Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1,h2,h3,p, etc.).

La última propiedad background-position podemos indicar la posición de la imagen según los siguientes valores:top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat con el valor no-repeat.

31

Page 36: MANUAL PRÁCTICO DE CSS

Por ejemplo:body {

background-image:url(fondo.jpg);

background-repeat:no-repeat;

background-position:20% 50%;

}

Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba.La siguiente regla:body {

background-image:url(fondo.jpg);

background-repeat:no-repeat;

background-position:400px 10px;

}

Dispone la imagen 400 pixeles desde la derecha y 10 píxeles desde arriba.La regla:body {

background-image:url(fondo.jpg);

background-repeat:no-repeat;

background-position:top right;

}

Dispone la imagen en la parte superior a la derecha.

Problema: Definir la imagen fondo.jpg como fondo de la página, luego inicializar y probar la propiedad background-attachment con los dos valores posibles (scroll/fixed).body { background-image:url(fondo.jpg); background-repeat:no-repeat; background-attachment:scroll;/*luego probar con fixed*/}Para probar el efecto que produce esta propiedad debe ingresar en el body de la página un texto muy grande que llene toda la página y permita hacer scroll (de no hacer esto no verá la diferencia entre un valor y otro del background-attachemnt).

32

Page 37: MANUAL PRÁCTICO DE CSS

20 - Propiedades relacionadas a fuentes (FORMATO RESUMIDO)

Vimos anteriormente una serie de propiedades relacionadas a la fuente:font-family

font-size

font-style

font-weight

font-variant

En situaciones donde necesitemos inicializar varias de estas propiedades CSS nos permite utilizar una propiedad que engloba a todas estas:font

Podemos indicar en cualquier orden font-weight, font-style, font-variant y luego los valores obligatorios font-size y font-family en ese orden.Como ejemplo tenemos:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><p>Hola Mundo</p></body></html>

Luego el archivo de estilos:

p { font:bold italic 25px verdana;}

Es importante recordar que font-size y font-family deben ser los últimos valores inicializados y en ese orden. No debemos separar por coma.

Problema: Definir formatos reducidos para la propiedad font de las marcas h1,h2 y h3. Luego probar con tres títulos los resultados obtenidos.

21 - Propiedades relacionadas al border (FORMATO RESUMIDO)

Podemos inicializar todos los bordes con una sola propiedad:border

33

Page 38: MANUAL PRÁCTICO DE CSS

Debemos indicar el border-width border-style border-colorNo debemos separarlas por coma.Por otro lado podemos inicializar cada borde con:border-top

border-right

border-bottom

border-left

Debemos indicar el border-(top/right/bottom/left): width border-style border-color

Un ejemplo nos permitirá ver esta otra forma de inicializar los bordes de una marca HTML:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><h1 class="tituloprincipal">Propiedad border</h1><p class="comentarios">Debemos indicar el border-width border-style border-color</p></body></html>

Y la hoja de estilo definida para esta página es:

h1.tituloprincipal{ border:5px solid #ff0000;}p.comentarios{ border-top:1px solid #ffff00; border-bottom:1px solid #ffff00;}

Tener en cuenta que cuando le antecedemos el nombre de la marca HTML al nombre de la clase: h1.tituloprincipal estamos indicando que dicha clase sólo se puede aplicar a dichas marcas. De todos modos, si le sacamos el nombre de la marca HTML funciona igual.

Problema: Confeccionar una página que disponga una línea en la parte inferior y superior de los títulos de nivel 1,2 y 3. Inicializar las propiedades border-top y border-bottom para dicho cometido.

22 - Propiedades relacionadas al padding (FORMATO RESUMIDO)

Podemos inicializar el padding de una marca HTML en forma resumida con:padding:padding-top padding-right padding-bottom padding-left

si indicamos un único valor se aplica a los cuatro lados:padding: 1px

34

Page 39: MANUAL PRÁCTICO DE CSS

si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho.Veamos un ejemplo:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad padding.Esto es una prueba para ver el funcionamiento de la propiedad padding.Esto es una prueba para ver el funcionamiento de la propiedad padding.Esto es una prueba para ver el funcionamiento de la propiedad padding.Esto es una prueba para ver el funcionamiento de la propiedad padding.Esto es una prueba para ver el funcionamiento de la propiedad padding.Esto es una prueba para ver el funcionamiento de la propiedad padding.</p></body></html>

Luego el archivo CSS:

p.comentarios { background-color:#dddddd; padding:5px 30px;}

Con este ejemplo, el párrafo tiene 5 píxeles de separación con el borde en la parte inferior y superior, y a la izquierda y derecha tiene 30 píxeles

Problema: Definir tres clases distintas con formatos diferentes para expresar el padding. Aplicar las clases a tres párrafos.

23 - Propiedades relacionadas al margin (FORMATO RESUMIDO)

El funcionamiento y sintaxis es similar al visto para el padding:margin margin-top margin-right margin-bottom margin-left

si indicamos un único valor se aplica a los cuatro lados: margin: 1px si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho.Un ejemplo para ver la sintaxis:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body>

35

Page 40: MANUAL PRÁCTICO DE CSS

<h1>Titulo Principal</h1></body></html>

Y la hoja de estilo:

h1 { margin:70px 20px;}

Problema:Confeccionar una página con títulos de nivel h1,h2 y h3. Definir distintos márgenes del lado izquierdo.Tener en cuenta que podemos definir el mismo nombre de clase si se aplica a marcas HTML distintas:h1.margenizquierdo { margin:0px 0px 0px 50px;}h2.margenizquierdo { margin:0px 0px 0px 70px;}

24 - Propiedades relacionadas al fondo (background) (FORMATO RESUMIDO)

La propiedad background resume las propiedades vistas anteriormente:background background-color

background-image

background-repeat

background-attachment

background-position

Un ejemplo que inicializa esta propiedad con algunos valores en forma simultánea:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body></body></html>

La hoja de estilo es:

body { background: #ffffee url(fondo.jpg) repeat-x; }

No es obligatorio inicializar todos los valores.

Problema: Confeccionar una página que inicialice el fondo de la marca h1 con una imagen.

36

Page 41: MANUAL PRÁCTICO DE CSS

25 - El selector universal *

Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el selector universal. Utilizamos el carácter asterisco para hacer referencia a este selector.Veamos un ejemplo:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><h1>Título de nivel 1</h1><h2>Título de nivel 2</h2><p>Esto esta dentro de un párrafo</p></body></html>

Luego en la hoja de estilo definimos:

* { color:#0000aa; margin:0px; padding:0px;}

Esto significa que todas las marcas se imprimen de color azul con cero píxel de margin y padding, salvo que otra regla lo cambie, Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla.En realidad, en forma tácita lo hemos estado utilizando, cuando definimos una clase sin indicar el tipo de marca HTML donde actuará:.pregunta {

background-color:#ffff00;

border-width:1px;

border-style:solid;

border-color:#000000;

}

Podemos expresar la regla anterior perfectamente como:*.pregunta {

background-color:#ffff00;

border-width:1px;

border-style:solid;

border-color:#000000;

37

Page 42: MANUAL PRÁCTICO DE CSS

}

Es decir que podemos asignar esta regla a cualquier marca HTML.Esto nos permite comprender, cuando definimos una regla que sólo se puede utilizar en un sólo tipo de marcas:p.pregunta {

background-color:#ffff00;

border-width:1px;

border-style:solid;

border-color:#000000;

}

Esta regla sólo se puede utilizar en las marcas de párrafo.

Problema: Defina cuatro propiedades para el selector universal y luego implemente una página HTML que pruebe su funcionamiento.

26 - Pseudoclases

Las pseudoclases son unas clases especiales, que se refieren a algunos estados del elemento HTML, las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla).La sintaxis varía con respecto al concepto de clase visto anteriormente:a:pseudoclase {

propiedad: valor;

}

Es decir separamos el nombre de la marca HTML con dos puntos.Para la marca HTML <a> tenemos 4 pseudoclases fundamentales:link - Enlace sin ingresar

visited - Enlace presionado

hover - Enlace que tiene la flecha del mouse encima

active - Es la que tiene foco en ese momento (pruebe de tocar la tecla tab)

Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental para su funcionamiento (debe respetarse el orden: link-visited-hover-active)Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener un enlace:

<!DOCTYPE html><html><head><title>Problema</title>

38

Page 43: MANUAL PRÁCTICO DE CSS

<link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><a href="http://www.google.com">Google</a><a href="http://www.yahoo.com">Yahoo</a><a href="http://www.bing.com">Bing</a></body></html>

La hoja de estilo es:a:link{

background-color:#00ff00;

color:#ff0000;

}

a:visited{

background-color:#000000;

color:#ffffff;

}

a:hover{

background-color:#ff00ff;

color:#fffff;

}

a:active{

background-color:#ff0000;

color:#ffff00;

}

Apenas ejecute la página los tres enlaces deben aparecer de color rojo con fondo verde:a:link{

background-color:#00ff00;

color:#ff0000;

}

39

Page 44: MANUAL PRÁCTICO DE CSS

Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color amarillo con fondo rojo:a:active{

background-color:#ff0000;

color:#ffff00;

}

Si pasamos la flecha del mouse sobre algún enlace veremos que aparece de color blanco con fondo lila:a:hover{

background-color:#ff00ff;

color:#fffff;

}

Por último todos los enlaces que hayamos hecho clic deberán aparecer de color blanco con fondo negro:a:visited{

background-color:#000000;

color:#ffffff;

}

Problema: Definir la propiedad font-size con un valor distinto cuando la flecha del mouse está sobre el link.

27 - Eliminar el subrayado a un enlace <a> por medio de las pseudoclases

Otra actividad común en algunos sitios es eliminar el subrayado a los enlaces. A esto lo podemos hacer configurando una propiedad de las pseudoclases.La solución de este problema es:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><a href="http://www.google.com">Google</a><a href="http://www.yahoo.com">Yahoo</a><a href="http://www.bing.com">Bing</a></body></html>

La hoja de estilo es:

a:link {

40

Page 45: MANUAL PRÁCTICO DE CSS

text-decoration: none;}a:visited { text-decoration: none;}

Es decir, configuramos la propiedad text-decoration con el valor none, por defecto está configurada con el valor underline.Tener en cuenta que podemos agrupar la regla de esta forma:a:link, a:visited {

text-decoration: none;

}

Problema: Configurar los enlaces que aparezcan con una línea tachada en lugar de subrayado.

28 - Creación de un menú vertical configurando las pseudoclases.

Un recurso muy útil es disponer un menú en una página, si no requerimos uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML (en otros casos se requiere además de JavaScript).Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de párrafos que contienen un hipervínculo cada uno. Cuando la flecha del mouse se encuentra sobre el hipervínculo cambiamos el color del fondo y la letra del hipervínculo.El problema resuelto es:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="menu"><p><a href="http://www.google.com">Google</a></p><p><a href="http://www.yahoo.com">Yahoo</a></p><p><a href="http://www.bing.com">Bing</a></p><p><a href="http://www.altavista.com">Altavista</a></p></div></body></html>

La hoja de estilo asociada a esta página es:

#menu { font-family: Arial;}

#menu p { margin:0px; padding:0px;

41

Page 46: MANUAL PRÁCTICO DE CSS

}

#menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eeeeee; text-align:center;}

#menu a:link, #menu a:visited { color: #ff0000; text-decoration: none;}

#menu a:hover { background-color: #336699; color: #ffffff;}

Podemos decir que definimos un estilo por medio de un Id llamado menu. Definimos una regla para este Id:#menu {

font-family: Arial;

}

La segunda regla:#menu p {

margin:0px;

padding:0px;

}

Estamos indicando que todos los párrafos contenidos en el estilo #menu deben tener cero en margin y padding.Luego las anclas definidas dentro del estilo #menu definen las siguientes características:#menu a {

display: block;

padding: 3px;

width: 160px;

background-color: #f7f8e8;

border-bottom: 1px solid #eeeeee;

42

Page 47: MANUAL PRÁCTICO DE CSS

text-align:center;

}

El valor block para la propiedad display permite que el ancla ocupe todo el espacio del párrafo, indistintamente del largo del hipervínculo.Otra propiedad nueva es width, esta fija el tamaño máximo que puede tener el hipervínculo antes de provocar un salto de línea.Por último inicializamos las pseudoclases:#menu a:link, #menu a:visited {

color: #ff0000;

text-decoration: none;

}

#menu a:hover {

background-color: #336699;

color: #ffffff;

}

Estamos definiendo el mismo color de texto para los vínculos seleccionados como aquellos que no han sido seleccionados:#menu a:link, #menu a:visited {

color: #ff0000;

Por último cambiamos el color de fondo de la opción que tiene la flecha del mouse encima:#menu a:hover {

background-color: #336699;

Problema: Modificar la hoja de estilo del menú desarrollado anteriormente para que cada opción aparezca una línea de color negro que la recuadre.

29 - Creación de un menú horizontal con una lista.

Otro estilo de menú muy común es donde las opciones se encuentran una al lado de otra.Veamos el código para la implementación de un menú horizontal:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body>

43

Page 48: MANUAL PRÁCTICO DE CSS

<ul id="menuhorizontal"><li><a href="http://www.google.com">Google</a></li><li><a href="http://www.yahoo.com">Yahoo</a></li><li><a href="http://www.bing.com">Bing</a></li><li><a href="http://www.altavista.com">Altavista</a></li></ul></body></html>

El archivo de estilos es:

#menuhorizontal { float:left; width:100%; padding:0px; margin:0px; list-style-type:none;}#menuhorizontal a { float:left; width:100px; text-decoration:none; text-align:center; color:#ff0000; background-color:#f7f8e8; padding:3px 5px; border-right:1px solid white;}#menuhorizontal a:hover { background-color:#336699;}#menuhorizontal li { display:inline;}

Como queremos que se localice a la izquierda inicializamos la propiedad float con el valor left, tanto para el id menuhorizontal como para la marca a que se encuentra en el id menuhorizontal. Fijamos la propiedad width del id menuhorizontal con el valor de 100% para que ocupe toda la línea. El ancho de cada opción es de 100px que lo indicamos en la propiedad width de la marca a.Cuando inicializamos la propiedad padding con:padding:3px 5px;

estamos fijando una separación de 3 pixeles en la parte superior e inferior y 5 pixeles a izquierda y derecha.Separamos cada opción por una línea blanca de un pixel: border-right:1px solid white;

Otra forma de expresar los colores es utilizar una serie de nombres predefinidos (white, red, green, blue, etc.) de todos modos, lo más seguro para que entiendan todos los navegadores, es indicando los valores de rojo, verde y azul como hemos venido trabajando.Luego con:#menuhorizontal li {

44

Page 49: MANUAL PRÁCTICO DE CSS

display:inline;

}

Indicamos que todos los list item (li) se muestren en la misma línea, ya que por defecto este tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo. Fácilmente esta propiedad la podemos entender si inicializamos la marca p (párrafo) con el siguiente valor:p {

display:inline;

}

Luego si en la página HTML imprimimos dos párrafos, los mismos deberían aparecer en la misma línea.

Problema: Implemente un menú horizontal y un menú vertical a la izquierda.

30 - Propiedades relacionadas a la dimensión de un objeto en la página.

Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML.width

height

Veamos un ejemplo:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="cabecera">Blog del Programador</div></body></html>

Solamente hemos definido un div donde mostramos la cabecera de una página. La hoja de estilo definida:

#cabecera { width:100%; height:100px; background-color:#ffee00; color:#0000aa; text-align:center; font-family:Times New Roman; font-size:50px; font-weight:bold;

45

Page 50: MANUAL PRÁCTICO DE CSS

}

La propiedad width la inicializamos con el valor 100%, lo que significa que ocupará todo el ancho de la página (podemos inicializarlo en pixeles si lo necesitamos). Luego a la propiedad height la inicializamos en 100 píxeles.

El resto de propiedades son las ya vistas en conceptos anteriores.

Es decir que las propiedades width y height nos permiten dar una dimensión a la marca HTML ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes.

Problema: Crear una página HTML que muestre dos párrafos, a uno de ellos aplicarle el siguiente estilo:.parrafoestrecho { width:200px; text-align:justify;}Recordar que para aplicar esta clase a un párrafo debemos inicializar la propiedad class de la marca p (ej. <p class="margenestrecho">bla bla</p>)

31 - Unidades de medida (px, cm, mm, em etc.)

Hasta ahora siempre que hemos especificado tamaños de letra, margin, padding, border etc. lo hemos hecho a través de pixeles. Esto debido a que la forma más sencilla de imaginar un tamaño, por lo menos para los que estamos trabajando todo el día en una computadora, es el tamaño de un pixel del monitor.Veremos que hay varias unidades de medida para indicar tamaños y que algunas son más indicadas para algunas situaciones que otras.

Disponemos de las siguientes unidades de medida:px (pixeles)

em (altura de la fuente por defecto)

ex (altura de la letra x)

in (pulgadas)

cm (centímetros)

mm (milímetros)

pt (puntos, 1 punto es lo mismo que 1/72 pulgadas)

pc (picas, 1 pc es lo mismo que 12 puntos)

% (porcentaje)

Un ejemplo que muestra una serie de párrafos asignando la propiedad font-size con distintos valores y unidades de medida:

<!DOCTYPE html>

46

Page 51: MANUAL PRÁCTICO DE CSS

<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><p class="pixel1">Este texto tiene 12 px<p><p class="pixel2">Este texto tiene 15 px</p><p class="em1">Este texto tiene 1 em</p><p class="em2">Este texto tiene 1.5 em</p><p class="ex1">Este texto tiene 1 ex</p><p class="ex2">Este texto tiene 1.5 ex</p><p class="in1">Este texto tiene 1 in</p><p class="in2">Este texto tiene 1.5 in</p><p class="cm1">Este texto tiene 1 cm</p><p class="cm2">Este texto tiene 1.5 cm</p><p class="mm1">Este texto tiene 10 mm</p><p class="mm2">Este texto tiene 15 mm</p><p class="pt1">Este texto tiene 10 pt</p><p class="pt2">Este texto tiene 15 pt</p><p class="pc1">Este texto tiene 1 pc</p><p class="pc2">Este texto tiene 1.5 pc</p><p class="porcentaje1">Este texto tiene 150%</p><p class="porcentaje2">Este texto tiene 200%</p></body></html>

La hoja de estilo correspondiente es:

.pixel1 { font-size:12px;}.pixel2 { font-size:15px;}.em1{ font-size:1em;}.em2{ font-size:1.5em;}.ex1{ font-size:1ex;}.ex2{ font-size:1.5ex;}.in1{ font-size:1in;}

47

Page 52: MANUAL PRÁCTICO DE CSS

.in2{ font-size:1.5in;}.cm1{ font-size:1cm;}.cm2{ font-size:1.5cm;}.mm1{ font-size:10mm;}.mm2{ font-size:15mm;}.pt1{ font-size:10pt;}.pt2{ font-size:15pt;}.pc1{ font-size:1pc;}.pc2{ font-size:1.5pc;}.porcentaje1{ font-size:150%;}.porcentaje2{ font-size:200%;}

Los especialistas sobre el tema recomiendan utilizar em como medida cuando la salida es el monitor. Si utilizamos pixeles hay navegadores antiguos que no permiten cambiar el tamaño de texto.

Problema: Cree un div y disponga una serie de párrafos. Defina como padding 2em. Luego pruebe distintos tamaños de fuente y vea como varía el padding del div.

32 - Formas para indicar el color.

Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales (rojo,verde,azul) precedido por el caracter #:background-color:#ff0000;

Ahora veremos otras sintaxis para indicar el color:

background-color:rgb(255,0,0);

48

Page 53: MANUAL PRÁCTICO DE CSS

Utilizando la función rgb pasando como parámetro la cantidad de rojo,verde y azul en formato decimal (un valor entre 0 y 255).También con la función rgb podemos indicar un porcentaje entre 0% y 100% para cada componente:background-color:rgb(100%,0%,0%)

Por último en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores:background-color:#ffaaff;

Lo podemos indicar con esta otra sintaxis:background-color:#faf;

Es decir si cada valor hexadecimal está formado por el mismo caracter podemos utilizar esta sintaxis simplificada indicando un caracter solamente. Es decir a este color no lo podemos representar con la sintaxis indicada:background-color:#ffaafa

Ya que los últimos 2 caracteres, fa, son distintos.

Problema: Utilizando la sintaxis simplificada para indicar las proporciones de rojo, verde y azul. pintar el fondo de 16 párrafos. Comenzar por el valor #000 hasta el #fff.

Hacer que los párrafos estén sin margen entre si.

33 - Definir un cursor para un control HTML.

Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a mostrar cuando la flecha del mouse se encuentra sobre el control HTML.Los valores que podemos asignarle a esta propiedad son:crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize49

Page 54: MANUAL PRÁCTICO DE CSS

text

wait

help

auto

default

Veamos un ejemplo para configurar la propiedad cursor para la marca ancla:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><p>Este texto tiene por mostrar las anclas con un cursor distinto al que está definido por defecto:</p><a href="http://www.google.com">google.com</a><br><a href="http://www.yahoo.com">yahoo.com</a><br><a href="http://www.bing.com">bing.com</a></body></html>

La hoja de estilo es:

a { cursor:help;}

Problema: Disponer los nombres de los valores que puede adoptar la propiedad cursor. Luego definir dicho cursor para cada valor de propiedad.Recordemos que la propiedad cursor puede adoptar los siguientes valores:crosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelpauto

50

Page 55: MANUAL PRÁCTICO DE CSS

default

34 - Aplicación de hojas de estilo a un formulario.

Un formulario es el elemento esencial para el envío de datos al servidor por parte del visitante del sitio.Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de reglas de estilo a las diferentes marcas HTML que intervienen:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="contenedorform"><form method="post" action="#"><label>Ingrese nombre:</label><input type="text" name="nombre" size="30"><br><label>Ingrese mail:</label><input type="text" name="mail" size="45"><br><label>Comentarios:</label><textarea name="comentarios" cols="30" rows="5"></textarea> <br><input class="botonsubmit" type="submit" value="confirmar"></form></div></body></html>

La hoja de estilo que se aplica es:

#contenedorform { width:500px; margin-left:20px; margin-top:10px; background-color:#ffe; border:1px solid #CCC; padding:10px 0 10px 0;}

#contenedorform form label { width:120px; float:left; font-family:verdana; font-size:14px;}.botonsubmit {

51

Page 56: MANUAL PRÁCTICO DE CSS

color:#f00; background-color:#bbb; border: 1px solid #fff;}

Podemos observar que definimos un div contenedor y dentro de este el formulario. Para que los textos aparezcan a la izquierda, definimos una serie de label que las flotamos a izquieda, por lo que los controles del formulario aparecerán a derecha todos encolumnados.

Problema: Crear un formulario que solicite el ingreso del nombre de una persona y su edad. Aplicar el estilo 'campo' a los dos controles de tipo text..campo { color:#0a0; background-color:#ff1;}

35 - Definiendo reglas de estilo a una tabla.

Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><table><caption>cantidad de lluvia caida en mm.</caption><thead><tr><th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th></tr></thead><tbody><tr><th>Córdoba</th><td>210</td><td>170</td><td>120</td></tr><tr><th>Buenos Aires</th><td>250</td><td>190</td><td>140</td></tr><tr><th>Santa Fe</th>

52

Page 57: MANUAL PRÁCTICO DE CSS

<td>175</td><td>140</td><td>120</td></tr></tbody></table></body></html>

La hoja de estilo definida a esta tabla es:

caption{ font-family:arial; font-size:15px; text-align: center; margin: 0px; font-weight: bold; padding:10px;}

table{ border-collapse: collapse;}

th{ border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 0.5em; background-color:#6495ed;;}

thead th{ background-color: #6495ed; color: #fff;}

tbody th{ font-family:arial; font-weight: normal; background-color: #6495ed; color:#ff0;}

td { border: 1px solid #000; padding: .5em; background-color:#ed8f63;

53

Page 58: MANUAL PRÁCTICO DE CSS

width:100px; text-align:center;}

La marca caption dentro de una tabla es el título que debe aparecer arriba.La propiedad border-collapse puede tomar dos valores: collapse o separate. Separate deja las celdas con unos pixeles de separación, no así collapse.El resto es la definición de una serie de reglas para las marcas th, th dentro de la marca tbody, th dentro de la marca thead y por último td.

Problema: Definir una tabla de varias filas y columnas. Aplicar estilos a las marcas th y td.

36 - Posicionamiento relativo (position: relative)

La propiedad position determina el punto de referencia donde se debe localizar cada elemento HTML. Por defecto esta propiedad se inicializa con el valor static.Con el valor por defecto static, cada elemento HTML se localiza de izquierda a derecha y de arriba hacia abajo.El segundo valor posible para esta propiedad es relative. En caso de fijar la propiedad position con el valor relative, podemos modificar la posición por defecto del elemento HTML modificando los valores left y top (con valores positivos o inclusive negativos)El posicionamiento relativo mueve un elemento (div, h1, p etc.) en relación a donde se dispondría en el flujo normal. Es decir deja espacio libre.Veamos un ejemplo con tres div, de los cuales el segundo lo desplazamos 20 pixeles a nivel de columna y 5 pixeles a nivel de fila:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="caja1"><p>Esta es la primer caja.</p><p>No se desplaza.</p></div><div id="caja2"><p>Esta es la segunda caja.</p><p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición por defecto.</p></div><div id="caja3"><p>Esta es la tercer caja.</p><p>No se desplaza.</p></div></body></html>

La hoja de estilo asociada es:

54

Page 59: MANUAL PRÁCTICO DE CSS

#caja1,#caja2,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em;}#caja2 { position:relative; left:15px; top:5px;}

Repasemos un poquito, recordemos que cuando un conjunto de elementos tienen los mismos valores para una serie de propiedades los podemos agrupar separándolos por coma, esto sucede para los tres Id #caja1,#caja2 y #caja3 que tienen los mismos valores para las propiedades background-color, font-family y font-size:#caja1,#caja2,#caja3 {

background-color:#f99;

font-family:verdana;

font-size:1.3em;

}

Luego como debemos inicializar la propiedad position sólo para el Id #caja2 lo hacemos en forma separada:#caja2 {

position:relative;

left:15px;

top:5px;

}

Acá es donde inicializamos la propiedad position con el valor relative y desplazamos el elemento 15 píxeles a la derecha y 5 píxeles hacia abajo. Tengamos en cuenta que si asigno un valor muy grande a la propiedad top se superpone este elemento con el contenido del tercer div.

Problema: Disponer dos párrafos, desplazar el segundo párrafo hasta que quede casi superpuesto al primer párrafo.

55

Page 60: MANUAL PRÁCTICO DE CSS

37 - Posicionamiento absoluto (position: absolute)

El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la página. El valor que debemos asignar a la propiedad position es absolute.Hay que tener en cuenta que no se reserva espacio en el flujo del documento como pasaba con el posicionamiento relativo (recordemos que con este posicionamiento podemos desplazar el elemento a cuarquier parte de la página, pero el espacio por defecto para dicho elemento queda vacío).El posicionamiento es siempre con respecto a la página.Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="caja1"><p>Esta es la primer caja.</p><p>No se desplaza.</p></div><div id="caja2"><p>Esta es la segunda caja.</p><p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en píxeles).</p></div><div id="caja3"><p>Esta es la tercer caja.</p><p>No se desplaza.</p></div></body></html>

La hoja de estilo definida:

#caja1,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em;}#caja2 { background-color:#ff0; font-size:1.3em; position:absolute; left:40px; top:30px;}

Como vemos inicializamos la propiedad position con el valor absolute y fijamos como coordenada para la caja la columna 40 y la fila 30 (en píxeles).

56

Page 61: MANUAL PRÁCTICO DE CSS

Problema: Disponer dos div con coordenadas absolutas, uno que represente la cabecera de la página (50 píxeles de alto) y otro la primer columna de la izquierda.

38 - Posicionamiento absoluto y propiedad z-index

Hemos visto que cuando disponemos uno o más elementos con la propiedad position con valor absolute los mismos salen del flujo del resto de elementos de la página.

Ahora veamos que pasa si disponemos una serie de elementos con posición absoluta y se superponen. En esta situación debemos inicializar la propiedad z-index con un valor entero, el mismo indica cual tiene prioridad para visualizarse. El valor más grande indica cual tiene prioridad para visualizarse. Es decir que el navegador imprime los elementos con posición absoluta del valor más bajo al más alto.

Problema

Mostrar tres div de color rojo, verde y azul con posiciones absolutas e indicando coordenadas que se superpongan. Inicializar la propiedad z-index de cada elemento de tal manera que quede más al frente el div de color verde, luego el azul y finalmente el rojo.

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="caja1"><p>Esta es la primer caja.</p></div><div id="caja2"><p>Esta es la segunda caja.</p></div><div id="caja3"><p>Esta es la tercer caja.</p></div></body></html>

Definimos los tres div dentro de la página.

Luego la hoja de estilo que debemos definir es:

#caja1{ position:absolute; background-color:red; left:10px; top:10px; width:200px; height:200px; z-index:2;}

#caja2{

57

Page 62: MANUAL PRÁCTICO DE CSS

position:absolute; background-color:green; left:50px; top:50px; width:200px; height:200px; z-index:3;}

#caja3{ position:absolute; background-color:blue; left:30px; top:30px; width:200px; height:200px; z-index:1;}

Hemos definido los tres div con la propiedad position con el valor absolute. Luego vemos que aquel que tiene color verde (green) le asignamos a la propiedad z-index un valor 3 (el número puede ser cualquiera siempre y cuando sea el mayor de los z-index asignado a los otros dos div)

Problema:

Mostrar 3 div con posiciones absolutas. Mostrarlos uno arriba de otro. Hacerlos de distintos tamaños. Mostrar más arriba el más pequeño y así sucesivamente.

39 - Posicionamiento fijo (position: fixed)

Esta es otra forma de disponer un elemento dentro de la página. La posición fija (fixed) ajusta el elemento en una coordenada fija con respecto a la ventana del navegador. Es una variante del posicionamiento absoluto. Recordemos que con el posicionamiento absoluto se dispone un elemento en una coordenada exacta con respecto a la página, pero con el posicionamiento fijo la posición es con respecto a la ventana del navegador. En pocas palabras con el posicionamiento fijo si hacemos scroll de la página el elemento con el valor fixed en la propiedad position permanece siempre en el mismo lugar.

Problema

Disponer dos div con posicionamiento fijo, uno en la parte superior y otro a la izquierda de la ventana.

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="barrasuperior">Div superior</div><div id="barralateral">Div lateral

58

Page 63: MANUAL PRÁCTICO DE CSS

</div><div id="contenido">Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -

59

Page 64: MANUAL PRÁCTICO DE CSS

Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -

60

Page 65: MANUAL PRÁCTICO DE CSS

Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -

61

Page 66: MANUAL PRÁCTICO DE CSS

Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -Aquí el contenido - Aquí el contenido - Aquí el contenido - Aquí el contenido -

</div></body></html>

La hoja de estilo a aplicar a esta página es:

* { margin:0; padding:0;}

#barrasuperior{ position:fixed; left:0px; width:100%; height:50px; background-color:black;

62

Page 67: MANUAL PRÁCTICO DE CSS

color:white;}

#barralateral{ position:fixed; left:0px; top:50px; width:200px; height:100%; background-color:#eee;}

#contenido{ padding-top:70px; padding-left:220;}

Hemos definido tanto para la barrasuperior como para la barralateral el valor fixed para la propiedad position: position:fixed;

La barra superior comienza en la columna cero a nivel de píxeles y tiene un ancho de 100 por ciento (es decir ocupa siempre todo el ancho del navegador y una altura de 50 px):

left:0px;

width:100%;

height:50px;

La barra lateral definimos los siguientes valores:

left:0px;

top:50px;

width:200px;

height:100%;

Hay que tener en cuenta que el elemento HTML con la propiedad fixed sale del flujo normal de los elementos de la página (igual como ocurre con el valor absolute), luego por eso definimos para el Div de contenido un padding para la parte superior e izquierdo donde se encuentran los div fixed:

padding-top:70px;

padding-left:220;

Problema:

Crear una página que disponga dos div con posicionamiento fijo. Uno a la derecha y otro en la parte inferior de la página.#barrainferior{ position:fixed; bottom:0px;

63

Page 68: MANUAL PRÁCTICO DE CSS

width:100%; height:50px; background-color:black; color:white;}

#barralateralderecha{ position:fixed; right:0px; top:0px; width:200px; height:100%; background-color:#eee;}

40 - Disposición de 2 columnas (position: absolute)

Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos).Una solución para crear una página con dos columnas es utilizar el posicionamiento absoluto:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="columna1">Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido

64

Page 69: MANUAL PRÁCTICO DE CSS

de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.</div><div id="columna2">Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.

</div></body></html>

La hoja de estilo para esta página es:

* { margin:0px; padding:0px;}#columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55;}#columna2 { margin-left:220px; margin-right:20px;

65

Page 70: MANUAL PRÁCTICO DE CSS

margin-top:10px; background-color:#ffffbb;}

La primera regla de disponer el selector universal, es decir afecta a todas las marcas HTML, es sacar el margen y padding (generalmente dispondremos esta regla):* {

margin:0px;

padding:0px;

}

Ahora la regla definida para la primer columna es:#columna1 {

position:absolute;

top:0px;

left:0px;

width:200px;

margin-top:10px;

background-color:#ffff55;

}

Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar la posición del div en la página por medio de las propiedades top y left, en esta caso lo posicionamos en la columna 0 y fila 0 y además inicializamos la propiedad width, con lo cual le estamos indicando que esta columna tendrá siempre 200 píxeles de ancho.Además inicializamos la propiedad margin-top con 10 píxeles, recordemos que todos los elementos tienen margin y padding cero.Ahora veamos cómo inicializamos la segunda columna:#columna2 {

margin-left:220px;

margin-right:20px;

margin-top:10px;

background-color:#ffffbb;

}

66

Page 71: MANUAL PRÁCTICO DE CSS

Esta regla no inicializa la propiedad position, por lo que el div ocupa la posición que le corresponde por defecto, es decir, empieza en la coordenada 0,0 de la página. El truco está en inicializar la propiedad margin-left con un valor mayor a 200, que es el ancho de la columna1.

El resto de propiedades que inicializamos son el margin-top, para que sea igual que la primera columna y el margin-right, para que no quede el texto pegado a la derecha.

Problema: Crear una página con dos columnas y disponer en la primera columna un menú de opciones (como el visto en conceptos anteriores).

41 - Propiedad float aplicada a una imagen.

La propiedad float saca del flujo un elemento HTML. Esta propiedad admite tres valores:left

right

none

Cuando aplicamos esta propiedad a la marca img, podemos hacer que el texto envuelva a la imagen.Veamos un ejemplo:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><link </head><body><img src="../imagen1.png"><p>El texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagenEl texto envuelve a la imagen.El texto envuelve a la imagen

67

Page 72: MANUAL PRÁCTICO DE CSS

El texto envuelve a la imagen.El texto envuelve a la imagen </p></body></html>

La hoja de estilo:

img { float:right;}

Es importante hacer notar que si no la flotamos a la imagen solo habrá una línea de texto a la derecha de la imagen.

Problema: Inicializar la siguiente regla:span { float:left; font-size:300%;}Confeccionar una página en la que la primera letra de cada oración aparezca con el triple de tamaño y además el texto envuelva a la letra.

42 - Propiedad float aplicada a otros elementos HTML

La propiedad float permite como hemos visto con las imágenes tomar un elemento HTML y colocarlo lo más a la izquierda o derecha. Luego los otros elementos siguen el flujo alrededor del elemento que está flotante. Podemos flotar cualquier elemento HTML

Normalmente cuando se utiliza la propiedad float, también debe inicializar la propiedad width para fijar el ancho del elemento.

Cuando se define un elemento que flote el alto del mismo afecta como se disponen los demás elementos de la página, será distinto si es un texto que envolverá al elemento flotante o si se trata de una imagen o div.

Problema

Mostrar una poesía y disponer la primer letra de cada párrafo que flote a izquierda.

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body>

<p><span class="letra">A</span>quí me pongo a cantar <br> Al compás de la vigüela; <br> Que el hombre que lo desvela <br> Una pena extraordinaria, <br>Como la ave solitaria <br>

68

Page 73: MANUAL PRÁCTICO DE CSS

Con el cantar se consuela.</p>

<p><span class="letra">P</span>ido a los Santos del Cielo<br> Que ayuden mi pensamiento; <br> Les pido en este momento <br> Que voy a cantar mi historia,<br> Me refresquen la memoria <br> Y aclaren mi entendimiento. </p>

<p><span class="letra">V</span>engan, santos milagrosos,<br> Vengan todos en mi ayuda,<br> Que la lengua se me añuda <br> Y se me turba la vista. <br> Pido a mi Dios que me asista<br> En una ocasión tan ruda. </p>

</body></html>

La hoja de estilo queda definida:

.letra { float:left; font-size:3em;}

Definimos la clase letra e inicializamos la propiedad float con el valor left y definimos el tamaño de fuente con 3em (es decir tres veces más grande que el valor de la fuente que tiene por defecto el párrafo.

43 - Propiedad clear

La propiedad clear se emplea combinándola con otros elementos que se hayan definido la propiedad float. La propiedad clear define que un elemento HTML no permite que flote en el caso que el elemento anterior se haya definido con dicha propiedad.

También se puede definir que no flote a izquierda o derecha únicamente.

Los valores posibles que podemos asignarle a la propiedad clear son:

both

left

right

none

Implementaremos un problema para mostrar los resultados empleando la propiedad float únicamente y el resultado que se logra empleando la propiedad clear luego.

Problema69

Page 74: MANUAL PRÁCTICO DE CSS

Mostrar cuatro div flotando a izquierda de 250 píxeles. Hacer que los div de la izquierda tengan más texto que los de la derecha.

El archivo HTML queda:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="caja1"><p>caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 </p></div><div id="caja2"><p>caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 </p></div><div id="caja3"><p>caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3 caja3</p></div><div id="caja4"><p>caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4

70

Page 75: MANUAL PRÁCTICO DE CSS

caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4</p></div></body></html>

La hoja de estilo definida para esta página es:

#caja1 { float:left; width:250px; background-color:#ffc; margin:10px;}

#caja2 { float:left; width:250px; background-color:#ffc; margin:10px;}

#caja3 { float:left; width:250px; background-color:#ffc; margin:10px;}

#caja4 { float:left; width:250px; background-color:#ffc; margin:10px;}

Cuando ejecutamos esta página el resultado es:

71

Page 76: MANUAL PRÁCTICO DE CSS

Como vemos cuando el div debe disponerse más abajo busca el primer espacio libre de derecha a izquierda.

Supongamos que queremos mostrarlo lo más a la izquierda posible, es decir que comience una nueva fila en pantalla. Para ello cuando definimos el estilo para la caja4 aparece la propiedad clear:

#caja4 {

float:left;

clear:left;

width:250px;

background-color:#ffc;

margin:10px;

}

Con este cambio ahora el resultado en pantalla es el siguiente:72

Page 77: MANUAL PRÁCTICO DE CSS

44 - Disposición de 2 columnas (propiedad float)

Una segunda forma de implementar una página con dos columnas es utilizar la propiedad float. Disponemos dos div. Al primero lo flotamos hacia la izquierda con un width fijo y el segundo se acomoda inmediatamente a la derecha.Veamos un ejemplo:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="columna1">Aquí el contenido de la columna 1.

73

Page 78: MANUAL PRÁCTICO DE CSS

Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.</div><div id="columna2">Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.</div></body></html>

La hoja de estilo:

* { margin:0; padding:0;

74

Page 79: MANUAL PRÁCTICO DE CSS

}#columna1 { float:left; width:200px; background-color:#ff5; border:1px solid #555;}#columna2 { margin-left:210px; background-color:#ffb; border:1px solid #555;}

La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos envuelva a la columna uno en caso de ser más larga inicializamos margin-left con 210 pixeles.

Problema: Disponga un menú horizontal en la segunda columna del problema resuelto.

45 - Disposición de 2 columnas, cabecera y pie.

Una estructura muy común en la web es la disposición de una cabecera de página, seguida de dos columnas y un pie de página. La implementación de esta estructura de página es la siguiente:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="contenedor"><div id="cabecera"><h1>Aca el título de la página</h1></div><div id="columna1"><p>columna1. columna1. columna1.</p></div><div id="columna2"><h2>Título de la columna</h2><p>Contenido de la columna2. </p></div><div id="pie">Pié de página.</div></div></body></html>

La hoja de estilo definida para esta página es la siguiente:

* {

75

Page 80: MANUAL PRÁCTICO DE CSS

margin:0px; padding:0px;}#contenedor{ width:100%; margin:0px; border:1px solid #000; line-height:130%; background-color:#f2f2f2; }#cabecera{ padding:10px; color:#fff; background-color:#becdfe; clear:left;}#columna1{ float:left; width:200px; margin:0; padding:1em;}#columna2{ margin-left:210px; border-left:1px solid #aaa; padding:1em;}#pie { padding:10px; color:#fff; background-color:#becdfe; clear:left;}

Hay algunas propiedades claves que debemos analizar en la regla #contenedor: width:100%;

Con esto estamos indicando que siempre ocupe todo el espacio en ancho del navegador, indistintamente de la resolución de pantalla o el tamaño de ventana del navegador.Luego, tanto para la cabecera como para el pie, tenemos: clear:left;

La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Eso es lo que queremos para la cabecera y el pie.

76

Page 81: MANUAL PRÁCTICO DE CSS

Problema: Codifique el problema visto anteriormente para mostrar dos columnas, cabecera y pie de página. Luego asigne a la propiedad width, de la regla contenedor, el valor: width:780px;¿Cuál es el resultado?

46 - Disposición de 3 columnas, cabecera y pie.

Una modificación al concepto anterior nos permite agregar una tercera columna flotando a derecha, lo único que hay que tener cuidado es que dentro del HTML debemos disponer los div de la columna 1 y 3 en primer lugar, ya que son los que se flotan, y por último, la columna 2, que es la central:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body><div id="contenedor"><div id="cabecera"><h1>Aca el título de la página</h1></div><div id="columna1"><p>columna1. </p></div><div id="columna3"><p>columna3.</p></div><div id="columna2"><h2>Título de la columna</h2><p>Contenido de la columna2.</p></div><div id="pie">Pié de página.</div></div></body></html>

La hoja de estilo es:

* { margin:0px; padding:0px;}#contenedor{ width:100%; margin:0px; border:1px solid #000; line-height:130%;

77

Page 82: MANUAL PRÁCTICO DE CSS

background-color:#f2f2f2; }#cabecera{ padding:10px; color:#fff; background-color:#becdfe; clear:left;}#columna1{ float:left; width:200px; margin:0; padding:1em;}#columna2{ margin-left:210px; margin-right:230px; border-left:1px solid #aaa; border-right:1px solid #aaa; padding:1em;}#columna3{ float:right; width:200px; margin:0; padding:1em;}#pie { padding:10px; color:#fff; background-color:#becdfe; clear:left;}

Problema: Codifique nuevamente la sintaxis para disponer tres columnas, cabecera y pie de página. Luego defina la propiedad width del contenedor con 780px. Disponga un menú en la columna uno y otro en la columna tres.

47 - Diseño de ancho fijo

El diseño de una página de ancho fijo no cambia la disposición de los elementos HTML a medida que el visitante modifica la ventana del navegador (agranda o achica) Cuando el espacio asignado no entra en la ventana aparece la barra de scroll.

Las medidas normalmente se indican en píxeles.78

Page 83: MANUAL PRÁCTICO DE CSS

Problema

Implementar una página con un diseño de ancho fijo de 960 píxeles que se muestre centrado en la página. Disponer una cabecera con un menú, el cuerpo principal con tres columnas y finalmente un pie de página.

El archivo html es el siguiente:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body>

<div id="cabecera"> <ul> <li><a href="">Opcion 1</a></li> <li><a href="">Opcion 2</a></li> <li><a href="">Opcion 3</a></li> </ul></div>

<div class="columna1"> <p> columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 </p></div><div class="columna2"> <p>

79

Page 84: MANUAL PRÁCTICO DE CSS

columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 </p></div><div class="columna3"> <p> columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3

80

Page 85: MANUAL PRÁCTICO DE CSS

columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 </p></div>

<div id="pie"> <p>Copyright</p></div></body>

Luego la hoja de estilo que se aplica a la página es:

* { margin:0; padding:0;}

body { width: 960px; margin: 0 auto;}

#cabecera{ background-color: #eee; padding: 10px; margin: 10px;}

#pie { background-color: #eee; padding: 10px; margin: 10px; clear:both;}

.columna1, .columna2, .columna3 { background-color: #eee; width: 280px; float: left; margin: 10px; padding: 10px;}

li { display: inline; padding: 5px;}

En el elemento body indicamos en píxeles el ancho de la página y que aparezca centrado:

body {

width: 960px;

margin: 0 auto;

}

81

Page 86: MANUAL PRÁCTICO DE CSS

Las columnas son de 280 píxeles de ancho más el margin y padding y las flotamos a izquierda:

.columna1, .columna2, .columna3 {

background-color: #eee;

width: 280px;

float: left;

margin: 10px;

padding: 10px;

}

Para el pie de página no nos olvidamos de inicializar la propiedad clear:

#pie {

background-color: #eee;

padding: 10px;

margin: 10px;

clear:both;

}

Luego si accedemos a esta página desde un navegador y el ancho de la ventana del navegador supera los 960 píxeles veremos un espacio en blanco a ambos lados:

82

Page 87: MANUAL PRÁCTICO DE CSS

Si por el contrario abrimos la página y la ventana del navegador en ancho es más pequeña a 960 píxeles aparece la barra de scroll en la parte inferior:

Como ventajas del diseño de ancho fijo podemos nombrar: tenemos mayor control sobre el aspecto y la posición de los elementos HTML en la página, podemos controlar los largos de las líneas de texto sin tener en cuenta el tamaño de la ventana del usuario, el tamaño de las imágenes es la misma en relación al resto de la página.

Como desventajas del empleo de este tipo de diseño es que podemos tener grandes espacios vacíos a izquierda y derecha en monitores grandes y en dispositivos con anchos pequeño nos obligará hacer constantemente scroll a izquierda y derecha.

83

Page 88: MANUAL PRÁCTICO DE CSS

48 - Diseño de ancho líquido

Cuando empleamos diseño de ancho líquido los elementos se contraen o expandes según el ancho de la ventana del navegador.

El diseño líquido requiere emplear porcentajes para especificar el ancho de cada div de forma que el diseño se estira o contrae para adaptarse al tamaño de la ventana del navegador.

Problema

Implementar una página con un diseño de ancho líquido. Disponer una cabecera con un menú, el cuerpo principal con tres columnas y finalmente un pie de página.

El archivo html es el siguiente:

<!DOCTYPE html><html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"></head><body>

<div id="cabecera"> <ul> <li><a href="">Opcion 1</a></li> <li><a href="">Opcion 2</a></li> <li><a href="">Opcion 3</a></li> </ul></div>

<div class="columna1"> <p> columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1

84

Page 89: MANUAL PRÁCTICO DE CSS

columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 columna1 </p></div><div class="columna2"> <p> columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 columna2 </p></div><div class="columna3"> <p> columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3

85

Page 90: MANUAL PRÁCTICO DE CSS

columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 columna3 </p></div>

<div id="pie"> <p>Copyright</p></div></body>

Como podemos observar la estructura de la página HTML no sufre cambios con respecto al diseño con ancho fijo. Donde si podemos observar cambios es en la hoja de estilo:

* { margin:0; padding:0;}

body { width: 90%; margin: 0 auto;}

#cabecera{ background-color: #eee; padding: 10px; margin: 10px;}

#pie { background-color: #eee; padding: 10px; margin: 10px; clear:both;}

.columna1, .columna2, .columna3 { background-color: #eee; width: 31%; float: left; margin: 1%;}

li { display: inline; padding: 5px;}

86

Page 91: MANUAL PRÁCTICO DE CSS

En el elemento body normalmente definimos un ancho de alrededor de 90% para dejar un pequeño espacio a izquierda y derecha de la ventana del navegador. Con (margin: 0 auto;) estamos centrando el contenido:

body {

width: 90%;

margin: 0 auto;

}

En las columnas ahora tenemos que indicar un ancho en porcentajes para cada una de ellas:

.columna1, .columna2, .columna3 {

background-color: #eee;

width: 31%;

float: left;

margin: 1%;

}

Como ventajas este diseño podemos nombrar: La página se amplia para ocupar toda ventana del navegador por lo que hay más espacio en una pantalla grande, si el visitante del sitio tiene una pantalla pequeña la página puede contrato para ajustarlo sin el usuario tenga que hacer scroll izquierda y derecha.

Como desventajas de este diseño podemos nombrar: La página puede verse muy distinta en pantalla muy grandes o muy pequeñas, en pantalla muy grandes las líneas de texto pueden ser muy largas por lo que se hace muy dificultoso la lectura, de forma similar si el ancho es muy estrecho también su lectura, algunos elementos pueden salir de su espacio asignado.

FUENTE: http://www.cssya.com.ar

87

Page 92: MANUAL PRÁCTICO DE CSS

CSS31. Bordes redondeados (border-radius)

La propiedad border-radius permite crear esquinas redondeadas. Especificamos en píxeles u otra medida el radio de redondeo de la o las esquinas.

Podemos indicar un único valor que se asignará a los cuatro vértices:#recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

También podemos indicar el redondeo de cada vértice en forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda):#recuadro2{ border-radius: 20px 40px 60px 80px; background-color:#aa0; width:200px; padding:10px; margin-top:10px;}

88

Page 93: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title> <style type="text/css"> #recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}#recuadro2{ border-radius: 20px 40px 40px 20px; background-color:#aa0; width:200px; padding:10px; margin-top:50px;}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

89

Page 94: MANUAL PRÁCTICO DE CSS

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

2. Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)

Si tenemos que redondear solo alguno de los cuatro vértices podemos utilizar alguna de las siguientes propiedades:border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius

Con esta definición de la propiedades border-top-left-radius y border-bottom-right-radius deben aparecer redondeados los vértices superior izquierdo e inferior derecho:#recuadro1{ border-top-left-radius: 20px; border-bottom-right-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

El segundo ejemplo muestra redondeado solo el vértice superior derecho:#recuadro2{ border-top-right-radius: 40px; background-color:#aa0; width:200px;

90

Page 95: MANUAL PRÁCTICO DE CSS

padding:10px; margin-top:10px;}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ border-top-left-radius: 20px; border-bottom-right-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro2{ border-top-right-radius: 40px; background-color:#aa0; width:200px; padding:10px; margin-top:50px;}

body { background:white; margin:50px;}

91

Page 96: MANUAL PRÁCTICO DE CSS

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

3. Sombras (box-shadow)

La propiedad box-shadow permite definir una sombra a un objeto de la página. Debemos definir tres valores y un color, por ejemplo:#recuadro1{ box-shadow: 30px 10px 20px #aaa; border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

92

Page 97: MANUAL PRÁCTICO DE CSS

La propiedad tiene 3 valores y un color, los valores son los siguientes:

- El desplazamiento horizontal de la sombra, positivo significa que la sombra se encuentra a la derecha del objeto, un desplazamiento negativo pondrá la sombra a la izquierda.

- El desplazamiento vertical, uno negativo la sombra será en la parte superior del objeto, uno positivo la sombra estará por debajo.

El tercer parámetro es el radio de desenfoque, si se pone a 0 la sombra será fuerte y con color liso, más grande el número, más borrosa será.

El último valor es el color a aplicar a la sombra.

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css"> #recuadro1{ box-shadow: 30px 10px 20px #aaa; border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro2{ box-shadow: -10px -10px 20px #aaa;

93

Page 98: MANUAL PRÁCTICO DE CSS

border-radius: 20px; background-color:#aa0; width:200px; padding:10px; margin-top:50px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

4. Sombras múltiples (box-shadow)

Con la propiedad box-shadow podemos aplicar múltiples sombras a un objeto. Para esto debemos aplicar la siguiente sintaxis:box-shadow: [desplazamiento en x] [desplazamiento en y] [desenfoque] [color] , [desplazamiento en x] [desplazamiento en y] [desenfoque] [color] etc.

Por ejemplo si queremos que aparezca una sombra de color rojo en la parte superior izquierda y una sombra verde en la parte inferior derecha podemos aplicar lo siguiente:#recuadro1{ box-shadow: -30px -30px 20px #f00, 30px 30px 20px #0f0; border-radius: 20px; background-color:#ddd; width:200px; padding:10px;

94

Page 99: MANUAL PRÁCTICO DE CSS

}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css"> #recuadro1{ box-shadow: -30px -30px 20px #f00, 30px 30px 20px #0f0; border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

body { background:white; margin:50px;}</style> </head>

<body> <div id="recuadro1"> <h3>Recuadro 1</h3>

95

Page 100: MANUAL PRÁCTICO DE CSS

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

5. Sombras interiores (box-shadow)

Otra posibilidad de la propiedad box-shadow es la de implementar la sombra interior al objeto, para esto debemos anteceder a los valores la palabra inset. Por ejemplo si queremos un recuadro con sombra interior de color rojo y sombra exterior de color amarilla podemos aplicar los siguientes valores:#recuadro1{ box-shadow: inset 0px 0px 40px #f00, 0px 0px 40px #ff0; border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css"> #recuadro1{ box-shadow: inset 0px 0px 40px #f00, 0px 0px 40px #ff0;

96

Page 101: MANUAL PRÁCTICO DE CSS

border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

6. Sombras con transparencias (box-shadow)

Otra posibilidad que podemos aplicar a la propiedad box-shadow es definir un valor de transparencia de la sombra. Para esto debemos utilizar la función rgba, ejemplo: box-shadow: 30px 30px 30px rgba(255,0,0,0.3);

Mediante la función rgba indicamos el color de la sombra con los primeros tres parámetros (en este ejemplo 255 de rojo, 0 de verde y 0 de azul), luego el cuarto parámetro es el índice de transparencia (donde 0 indica que es totalmente transparente la sombra y 1 es totalmente opaca, podemos utilizar cualquier valor entre 1 y 0)

Para confeccionar un recuadro con sombra de color rojo con un índice de transparencia del 50% luego debemos especificarlo de la siguiente manera:#recuadro1{ box-shadow: 30px 30px 30px rgba(255,0,0,0.5); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

97

Page 102: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css"> #recuadro1{ box-shadow: 30px 30px 30px rgba(255,0,0,0.5); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3>

98

Page 103: MANUAL PRÁCTICO DE CSS

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

7. Sombras de texto (text-shadow)

Es importante tener en cuenta que esta propiedad no la soporta el Internet Explorer 9.

La propiedad text-shadow nos permite definir una sombra a un texto, la sintaxis más común es:Elemento { text-shadow: desplazamientoX desplazamientoY radio-de-desenfoque color; }

La propiedad tiene 4 valores que son los siguientes:

- El desplazamiento horizontal de la sombra, un desplazamiento negativo pondrá la sombra a la izquierda.

- El desplazamiento vertical, un valor negativo dispone la sombra en la parte superior del texto, uno positivo la sombra estará por debajo del texto.

- El tercer parámetro es el radio de desenfoque, si se pone a 0 la sombra será fuerte y con color liso, más grande el número, más borrosa será.

- El último parámetro es el color de la sombra.

Por ejemplo si queremos que un texto tenga una sombra en la parte inferior a derecha con un pequeño desenfoque de color gris luego debemos implementar el siguiente código:#titulo1 { text-shadow: 5px 5px 5px #aaa;}

SI queremos que la sombra se disponga en la parte superior izquierda de cada letra luego debemos definir los siguientes valores:#titulo2 { text-shadow: -5px -5px 5px #aaa;}

Otra sintaxis de text-shadow es aplicar varias sombras al texto, por ejemplo:#titulo3 { text-shadow: 3px 3px 5px #f00,

99

Page 104: MANUAL PRÁCTICO DE CSS

6px 6px 5px #0f0, 9px 9px 5px #00f;}

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css"> #titulo1 { text-shadow: 5px 5px 5px #aaa;}

#titulo2 { text-shadow: -5px -5px 5px #aaa;}

#titulo3 { text-shadow: 3px 3px 5px #f00, 6px 6px 5px #0f0, 9px 9px 5px #00f;}

h1 { font-size:50px;}

body { background:white; margin:20px;}

</style>

</head> <body>

<h1 id="titulo1">Titulo sombreado</h1><h1 id="titulo2">Titulo sombreado</h1><h1 id="titulo3">Titulo sombreado</h1></body> </html>

100

Page 105: MANUAL PRÁCTICO DE CSS

8. Transformaciones 2D: rotación (transform:rotate)

Las transformaciones todavía no están definidas como un estándar en todos los navegadores, por lo que es necesario agregar el prefijo del navegador que la implementa:Elemento { -ms-transform: función de transformación(valor(es)); /* Internet Explorer */ -webkit-transform: función de transformación(valor(es)); /* WebKit */ -moz-transform: función de transformación(valor(es)); /* Firefox */ -o-transform: función de transformación(valor(es)); /* Opera */}

Tengamos en cuenta que la propiedad de transformación 2D definitiva será:Elemento { transform: función de transformación(valor(es));}La primer función de transformación que veremos será la de rotar un elemento HTML.La función de rotación se llama rotate y tiene un parámetro que indica la cantidad de grados a rotar. La rotación es en el sentido de las agujas del reloj. Podemos indicar un valor negativo para rotar en sentido antihorario.

Para rotar un recuadro 45 grados en sentidos de las agujas de un reloj y que funcione en la mayoría de los navegadores deberemos implementar el siguiente código:#recuadro1{ -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

Tengamos en cuenta que se ejecuta la propiedad -ms-transform, -webkit-transform etc. según el navegador que está procesando la página, inclusive hemos agregado la propiedad transform: rotate(45deg) que será la que en un futuro todos los navegadores interpretarán.

El resultado visual es el siguiente:

101

Page 106: MANUAL PRÁCTICO DE CSS

Otra cosa importante para notar es que el punto de rotación coincide con el centro del recuadro (es como clavar una alfiler en el centro del recuadro y luego rotar el recuadro en el sentido de las agujas del reloj.

También podemos rotar en sentido antihorario indicando el valor del grado con un valor negativo:#recuadro2{ -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

También podemos observar que cuando la rotación se ejecuta no ocupa más espacio el elemento HTML sino que se solapa eventualmente con otros elementos de la página:

102

Page 107: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-radius: 20px;

103

Page 108: MANUAL PRÁCTICO DE CSS

background-color:#ddd; width:200px; padding:10px;}

#recuadro2{ -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

104

Page 109: MANUAL PRÁCTICO DE CSS

9. Transformaciones 2D: punto de origen (transform-origin)

Como vimos en el punto anterior cuando rotamos un elemento HTML siempre hay un punto fijo (por defecto es el punto central del recuadro)

Podemos variar dicho punto y ubicar por ejemplo en cualquiera de los cuatro vértices del recuadro con la siguiente sintaxis:Elemento { transform-origin: left top; }

Elemento { transform-origin: right top; }

Elemento { transform-origin: left bottom; }

Elemento { transform-origin: right bottom; }

Por ejemplo si queremos dejar fijo el vértice superior izquierdo y seguidamente rotar 10 grados en sentido horario luego debemos codificar:#recuadro1{ -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);

-ms-transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

Como podemos ver es como disponer un alfiler en el vértice superior izquierdo y seguidamente rotar en el sentido de las agujas de un reloj 10 grados:

105

Page 110: MANUAL PRÁCTICO DE CSS

Con lo visto podemos disponer el punto de origen en cinco lugares (el centro y los cuatro vértices), pero podemos trasladar a cualquier punto dentro del recuadro el punto del origen con las siguientes sintaxis: transform-origin: 0% 50%;

El primer valor representa las "x" y el segundo valor representa las "y".

Si queremos disponer el punto de origen en el vértice superior derecho podemos hacerlo como ya conocemos:Elemento { transform-origin: right top; }

O mediante porcentajes:Elemento { transform-origin: 100% 0%; }

Luego podemos mediante porcentajes en x e y desplazar el punto de origen a cualquier parte dentro del elemento HTML (div en este caso)

Por ejemplo si queremos disponer el punto de origen en la mitad del lado izquierdo:#recuadro2{ -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);

-ms-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%;

border-radius: 20px;

106

Page 111: MANUAL PRÁCTICO DE CSS

background-color:#ddd; width:200px; padding:10px; margin-top:50px;}

El punto rojo indica el "punto de origen":

Otra posibilidad es indicar el punto con alguna medida permitida en CSS (px, em etc.), por ejemplo podemos indicar que el punto de origen este 20 píxeles en x y 40 en y:#recuadro3{ -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);

-ms-transform-origin: 20px 40px; -webkit-transform-origin: 20px 40px; -moz-transform-origin: 20px 40px; -o-transform-origin: 20px 40px; transform-origin: 20px 40px;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:50px;}

107

Page 112: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);

-ms-transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro2{ -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);

-ms-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:50px;}

108

Page 113: MANUAL PRÁCTICO DE CSS

#recuadro3{ -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);

-ms-transform-origin: 20px 40px; -webkit-transform-origin: 20px 40px; -moz-transform-origin: 20px 40px; -o-transform-origin: 20px 40px; transform-origin: 20px 40px;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:50px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro3"> <h3>Recuadro 3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>

109

Page 114: MANUAL PRÁCTICO DE CSS

</div>

</body> </html>

10. Transformaciones 2D: escalado (transform:scale)

Otra función de transformación 2D es el escalado, esta función permite agrandar o reducir el tamaño del elemento. La primer sintaxis que podemos utilizar es la siguiente:Elemento { transform: scale(valorx ,valory); }

El primer parámetro indica la escala para x (con el valor 1 el elemento queda como está, con un valor mayor crece y con un valor menor decrece), el segundo parámetro es para la escala en y.

Por ejemplo si queremos que sea del doble de ancho y la mitad de altura luego será:Elemento { transform: scale(2 ,0.5); }

Un recuadro escalado con 20% menos de ancho y 20% más de alto (definiendo el punto de origen en el vértice superior izquierdo:#recuadro1{ -ms-transform: scale(0.8 , 1.2); -webkit-transform: scale(0.8 , 1.2); -moz-transform: scale(0.8 , 1.2); -o-transform: scale(0.8 , 1.2); transform: scale(0.8 , 1.2);

-ms-transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

110

Page 115: MANUAL PRÁCTICO DE CSS

Si tenemos que escalar solo en x o en y podemos utilizar alguna de las dos funciones scaleX o scaleY.

Elemento { transform: scaleX(2); }Elemento { transform: scaleY(0.5); }

Otra posibilidad es utilizar un valor negativo, lo que nos permite tener una reflexión del elemento. Por ejemplo un recuadro con reflexión en y:#recuadro2{ -ms-transform: scale(1.20 ,-1); -webkit-transform: scale(1.20 ,-1); -moz-transform: scale(1.20 ,-1); -o-transform: scale(1.20 ,-1); transform: scale(1.20 ,-1);

border-radius: 20px 40px 40px 20px; background-color:#aa0; width:200px; padding:10px; margin-top:70px;}

Cuya imagen es:

111

Page 116: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -ms-transform: scale(0.8 , 1.2); -webkit-transform: scale(0.8 , 1.2); -moz-transform: scale(0.8 , 1.2); -o-transform: scale(0.8 , 1.2); transform: scale(0.8 , 1.2);

-ms-transform-origin: left top; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top;

border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro2{ -ms-transform: scale(1.20 ,-1); -webkit-transform: scale(1.20 ,-1); -moz-transform: scale(1.20 ,-1); -o-transform: scale(1.20 ,-1); transform: scale(1.20 ,-1);

112

Page 117: MANUAL PRÁCTICO DE CSS

border-radius: 20px 40px 40px 20px; background-color:#aa0; width:200px; padding:10px; margin-top:70px;}

body { background:white; margin:20px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

11. Transformaciones 2D: translación (transform:translate)

La función translate permite desplazar un elemento HTML indicando una medida (en porcentaje, píxeles, em, etc.) la sintaxis es:Elemento { transform: translate(valorx ,valory); }

Por ejemplo si queremos trasladar 25 píxeles en "x" y 10 píxeles en "y" luego debemos codificar:#recuadro1{ -ms-transform: translate(25px,10px); -webkit-transform: translate(25px,10px); -moz-transform: translate(25px,10px); -o-transform: translate(25px,10px); transform: translate(25px,10px);

border-radius: 20px;

113

Page 118: MANUAL PRÁCTICO DE CSS

background-color:#ddd; width:200px; padding:10px;}

Si vemos el primer recuadro tiene aplicada la traslación:

También disponemos de las funciones translateX y translateY para los casos donde solo debemos trasladar en x o y:Elemento { transform: translateX(valor); }

Elemento { transform: translateY(valor); }

114

Page 119: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -ms-transform: translate(25px,10px); -webkit-transform: translate(25px,10px); -moz-transform: translate(25px,10px); -o-transform: translate(25px,10px); transform: translate(25px,10px);

border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro2{ border-radius: 20px; background-color:#aa0; width:200px; padding:10px; margin-top:50px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> 115

Page 120: MANUAL PRÁCTICO DE CSS

<h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

12. Transformaciones 2D: torcer (transform:skew)

La función skew permite torcer el elemento HTML en x e y, la sintaxis es la siguiente:Elemento { transform: skew(gradosx ,gradosy); }

Por ejemplo si queremos torcer en x 15 grados un recuadro luego debemos codificar:#recuadro1{ -ms-transform: skew(15deg,0deg); -webkit-transform: skew(15deg,0deg); -moz-transform: skew(15deg,0deg); -o-transform: skew(15deg,0deg); transform: skew(15deg,0deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

Si queremos torcer en y 15 grados un recuadro luego debemos codificar:#recuadro2{ -ms-transform: skew(0deg,15deg); -webkit-transform: skew(0deg,15deg); -moz-transform: skew(0deg,15deg);

116

Page 121: MANUAL PRÁCTICO DE CSS

-o-transform: skew(0deg,15deg); transform: skew(0deg,15deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:50px;}

Por último si aplicamos tanto en x e y tenemos:#recuadro3{ -ms-transform: skew(15deg,15deg); -webkit-transform: skew(15deg,15deg); -moz-transform: skew(15deg,15deg); -o-transform: skew(15deg,15deg); transform: skew(15deg,15deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:70px;}

117

Page 122: MANUAL PRÁCTICO DE CSS

También disponemos de las funciones skewX y skewY para los casos donde solo debemos torcer en x o y:Elemento { transform: skewX(grados); }

Elemento { transform: skewY(grados); }

Los grados también pueden ser un valor negativo.

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -ms-transform: skew(15deg,0deg); -webkit-transform: skew(15deg,0deg); -moz-transform: skew(15deg,0deg); -o-transform: skew(15deg,0deg); transform: skew(15deg,0deg); border-radius: 20px; background-color:#ddd; width:200px;

118

Page 123: MANUAL PRÁCTICO DE CSS

padding:10px;}

#recuadro2{ -ms-transform: skew(0deg,15deg); -webkit-transform: skew(0deg,15deg); -moz-transform: skew(0deg,15deg); -o-transform: skew(0deg,15deg); transform: skew(0deg,15deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:50px;}

#recuadro3{ -ms-transform: skew(15deg,15deg); -webkit-transform: skew(15deg,15deg); -moz-transform: skew(15deg,15deg); -o-transform: skew(15deg,15deg); transform: skew(15deg,15deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px; margin-top:70px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3>

119

Page 124: MANUAL PRÁCTICO DE CSS

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro3"> <h3>Recuadro 3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

13. Transformaciones 2D: múltiples transformaciones en forma simultanea

La sintaxis de css3 nos permite definir en la propiedad transform múltiples transformaciones en forma simultanea (debemos dejar al menos un espacio en blanco entre cada llamada a una función de transformación):Elemento { transform: rotate(grados) scale(valorx ,valory) translate(valorx ,valory) skew(gradosx ,gradosy); }

Por ejemplo apliquemos múltiples transformaciones a un recuadro:#recuadro1{ -moz-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); -ms-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); -webkit-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); -o-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

120

Page 125: MANUAL PRÁCTICO DE CSS

#recuadro1{ -moz-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); -ms-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); -webkit-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); -o-transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); transform: rotate(15deg) scale(0.9,0.6) translate(10px,10px) skew(5deg,0deg); border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

14. Opacidad (opacity)

La opacidad es una característica de los objetos de no dejar pasar la luz (mientras un objeto es más opaco significa que no deja pasar la luz) Un elemento HTML dispone de la propiedad opacity para definir cual es su opacidad. La sintaxis es la siguiente:Elemento { opacity: valor; }

El valor es un número comprendido entre 0 y 1. El 0 significa que es totalmente transparente (luego no se verá nada en pantalla, pero el espacio ocupado por el elemento HTML queda reservado), el 1 significa que es totalmente opaco (no deja pasar la luz)

Veamos tres recuadro con una imagen de fondo y un texto en su interior con diferentes niveles de opacidad (tengamos en cuenta que cuando le asignamos una opacidad a un elemento HTML luego todos los elementos contenidos en dicho elementos heredan dicha opacidad):#recuadro1 { background-image: url("foto1.jpg"); opacity:0.3;

121

Page 126: MANUAL PRÁCTICO DE CSS

color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

Ahora con una opacidad mayor:#recuadro2 { background-image: url("foto1.jpg"); opacity:0.6; color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

122

Page 127: MANUAL PRÁCTICO DE CSS

Finalmente con una opacidad de 0.9 (casi no deja pasar nada de luz):#recuadro3 { background-image: url("foto1.jpg"); opacity:0.9; color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

123

Page 128: MANUAL PRÁCTICO DE CSS

Veamos que pasa si no disponemos opacidad en el recuadro y el texto tiene un color de fondo:#recuadro4 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

.texto4 { background-color:yellow;}

124

Page 129: MANUAL PRÁCTICO DE CSS

Y luego definiendo una opacidad en el párrafo:

#recuadro5 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

.texto5 { background-color:yellow; opacity:0.2;}

125

Page 130: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1 { background-image: url("foto1.jpg"); opacity:0.3; color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

#recuadro2 { background-image: url("foto1.jpg"); opacity:0.6; color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;

126

Page 131: MANUAL PRÁCTICO DE CSS

}

#recuadro3 { background-image: url("foto1.jpg"); opacity:0.9; color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

#recuadro4 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

#recuadro5 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:30px;}

.texto4 { background-color:yellow;}

.texto5 { background-color:yellow; opacity:0.2;}

body { background:white; margin:50px;}

</style>

</head> <body>

127

Page 132: MANUAL PRÁCTICO DE CSS

<div id="recuadro1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro4"><p class="texto4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro5"><p class="texto5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div></body> </html>

15. Opacidad (color)

En CSS3 aparece una variante de la asignación del color mediante la función rgba.Elemento { color: rgba(rojo,verde,azul,opacidad); }

Para definir un color debemos indicar cuatro valores, los tres primeros son valores enteros entre 0 y 255, que indican la cantidad de rojo, verde y azul. El cuarto valor es un número entre 0 y 1 que indica la opacidad que se aplica al color. Si indicamos un 1 se grafica totalmente opaco (es el valor por defecto) un valor menor hará más transparente el gráfico.

Veamos un ejemplo primero dispondremos un texto dentro de un recuadro que tiene una imagen y no utilizaremos la función rgba para definir la opacidad, sino utilizaremos la función rgb para definir solo el color:#recuadro1 { background-image: url("foto1.jpg"); color:#f00; width:700px;

128

Page 133: MANUAL PRÁCTICO DE CSS

height:450px; border-radius:15px; font-size:45px;}

.texto1 { color:rgb(255,255,0);}

Y ahora si utilizaremos la función nueva rgba:

#recuadro2 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:45px; margin-top:10px;}

.texto2 { color:rgba(255,255,0,0.5);}

129

Page 134: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:45px;}

#recuadro2 { background-image: url("foto1.jpg"); color:#f00; width:700px; height:450px; border-radius:15px; font-size:45px; margin-top:10px;}

130

Page 135: MANUAL PRÁCTICO DE CSS

.texto1 { color:rgb(255,255,0);}

.texto2 { color:rgba(255,255,0,0.5);}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"><p class="texto1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"><p class="texto2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div></body> </html>

16. Múltiples columnas (column-count)

Otra novedad que nos trae CSS3 es permitir disponer un bloque de texto en múltiples columnas con la única indicación de la cantidad de columnas que queremos que lo divida:Elemento { column-count: cantidad de columnas; }

Por ejemplo para generar un cuadro con tres columnas debemos implementar el siguiente código:#recuadro1{ -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px;}

131

Page 136: MANUAL PRÁCTICO DE CSS

Tenemos que anteceder los prefijos -moz, -webkit para que funcionen con el Firefox y Chrome. El Opera ya implementa la propiedad definitiva column-count y hasta la versión 9 de IExplorer no ha implementado el column-count.

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px;}

body { background:white; margin:50px;}

</style>

132

Page 137: MANUAL PRÁCTICO DE CSS

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

17. Múltiples columnas dinámicas (column-width)

Con la propiedad column-width también generamos múltiples columnas. Tiene sentido emplearla cuando nuestro diseño es flexible, es decir que si modificamos el tamaño de la ventana del navegador su contenido se relocaliza.

Con la propiedad column-width especificamos el ancho de la columna en píxeles, porcentaje etc. y luego se generan tantas columnas como entren en el contenedor.

La sintaxis es la siguiente:Elemento { column-width: ancho; }

Si queremos crear un recuadro con texto y que cada columna ocupe 150 píxeles luego codificamos:#recuadro1{ -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; border-radius: 20px; background-color:#ddd; padding:10px;}

El resultado puede variar dependiendo las dimensiones de la ventana del navegador (siempre y cuando hayamos creado una página web fluida, es decir sin un ancho fijo):

133

Page 138: MANUAL PRÁCTICO DE CSS

Una mejora a la disposición del texto dentro de las columnas es inicializar la propiedad text-indent y margin:#recuadro2 p { text-indent: 1em; margin: 0; text-align: justify;}

Luego el resultado gráfico queda:

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

134

Page 139: MANUAL PRÁCTICO DE CSS

#recuadro1{ -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; border-radius: 20px; background-color:#ddd; padding:10px;}

#recuadro2{ -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; border-radius: 20px; background-color:#ddd; padding:10px; margin-top:10px;}

#recuadro2 p { margin: 0; text-indent: 1em; text-align: justify;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

135

Page 140: MANUAL PRÁCTICO DE CSS

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

18. Múltiples columnas y su separación (column-gap)

El CSS3 nos permite especificar la separación entre las columnas. Su sintaxis es:Elemento { column-gap: valor; }

Podemos utilizar cualquier unidad para indicar la separación entre columnas (px, em etc.)

Si queremos una separación de 40 píxeles entre columnas luego debemos codificar:#recuadro1{ -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px;}

136

Page 141: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px;}

body { background:white; margin:50px;}

</style>

</head>

137

Page 142: MANUAL PRÁCTICO DE CSS

<body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

19. Múltiples columnas y línea separadora (column-rule)

Podemos configurar una línea separadora entre las columnas cuando utilizamos múltiples columnas. La sintaxis es la siguiente:Elemento { column-rule: grosor estilo color; }

Con el siguiente ejemplo veamos los distintos valores de esta propiedad. Definimos una línea de un píxel, con trazo sólido de color rojo:#recuadro1{ -moz-column-rule: 1px solid #f00; -webkit-column-rule: 1px solid #f00; column-rule: 1px solid #f00; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px;}

138

Page 143: MANUAL PRÁCTICO DE CSS

Otro ejemplo utilizando línea punteada:#recuadro2{ -moz-column-rule: 3px dotted #f00; -webkit-column-rule: 3px dotted #f00; column-rule: 3px dotted #f00; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px; margin-top:10px;}

139

Page 144: MANUAL PRÁCTICO DE CSS

Hay tres propiedades que permiten asignar en forma independiente el grosor, estilo y color del separador:Elemento { column-rule-width: grosor; column-rule-style: estilo; column-rule-color: color;}

Por ejemplo si queremos definir un separador con línea discontinua de 2 píxeles de color azul:#recuadro3{ -moz-column-rule-width: 2px; -webkit-column-rule-width: 2px; column-rule-width: 2px; -moz-column-rule-style: dashed; -webkit-column-rule-style: dashed; column-rule-style: dashed; -moz-column-rule-color: #00f; -webkit-column-rule-color: #00f; column-rule-color: #00f;

-moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px; margin-top:10px;}

140

Page 145: MANUAL PRÁCTICO DE CSS

Si queremos una línea doble debemos indicar en el estilo el valor double:#recuadro4{ -moz-column-rule: 4px double #aaa; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px; margin-top:10px;}

141

Page 146: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title> <style type="text/css"> #recuadro1{ -moz-column-rule: 1px solid #f00; -webkit-column-rule: 1px solid #f00; column-rule: 1px solid #f00; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px;}#recuadro2{ -moz-column-rule: 3px dotted #f00; -webkit-column-rule: 3px dotted #f00; column-rule: 3px dotted #f00; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px; margin-top:10px;}#recuadro3{ -moz-column-rule-width: 2px; -webkit-column-rule-width: 2px; column-rule-width: 2px; -moz-column-rule-style: dashed; -webkit-column-rule-style: dashed; column-rule-style: dashed; -moz-column-rule-color: #00f; -webkit-column-rule-color: #00f; column-rule-color: #00f; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px; margin-top:10px;

142

Page 147: MANUAL PRÁCTICO DE CSS

}#recuadro4{ -moz-column-rule: 4px double #aaa; -moz-column-count:3; -webkit-column-count:3; column-count:3; border-radius: 20px; background-color:#ddd; width:600px; padding:10px; margin-top:10px;}

body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>

143

Page 148: MANUAL PRÁCTICO DE CSS

</div> <div id="recuadro3"> <h3>Recuadro 3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro4"> <h3>Recuadro 4</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

20. Importar una fuente no disponible en el navegador (@font-face)

En CSS3 se especifica una nueva sintaxis para importar fuentes no disponibles en el navegador y que se descargan de un servidor web.

El problema actual es que hay varios formatos de fuentes que son apoyados por distintos navegadores. El IE8 e inferiores solo admite el formato EOT que es propietario. El formato True Type es ampliamente soportado por navegadores modernos. Otros formatos son el OpenType, SVG y WOFF.

Esta diversidad de formatos de fuente hace necesario que indiquemos la mayor cantidad de formatos de fuentes posibles para nuestro sitio.

Para importar una fuente que será utilizada por una página web tenemos que utilizar la regla @font-face, en la misma indicamos el nombre de la fuente a importar y la dirección web de donde la debe descargar el navegador, la sintaxis es:@font-face {

144

Page 149: MANUAL PRÁCTICO DE CSS

font-family: [nombre de la fuente]; src: local(""), url("nombrearchivo.woff") format("woff"), url("nombrearchivo.otf") format("opentype"), url("nombrearchivo.svg#nombre de la fuente") format("svg");}Podemos descargar una fuente del sitio www.fontsquirrel.com

para probar la importación de fuentes (hay una sección donde podemos descargar varios formatos para la misma fuente)

Veamos un ejemplo de utilizar una fuente descargada del sitio mencionado anteriormente:<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

@font-face { font-family: "Ubuntu"; src: url("Ubuntu-Title-webfont.eot") format("eot"), url("Ubuntu-Title-webfont.woff") format("woff"), url("Ubuntu-Title-webfont.ttf") format("truetype"), url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");}

#recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro1 p { font-family:Ubuntu; color:#ff0000; font-size:20px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3>

145

Page 150: MANUAL PRÁCTICO DE CSS

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

El resultado tipográfico de importar esta fuente es:

En la regla @font-face hacemos referencia a cuatro fuentes con distintos formatos y definimos su nombre en la propiedad font-family:@font-face { font-family: "Ubuntu"; src: url("Ubuntu-Title-webfont.eot") format("eot"), url("Ubuntu-Title-webfont.woff") format("woff"), url("Ubuntu-Title-webfont.ttf") format("truetype"), url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");}

Ahora podemos utilizar la fuente "Ubuntu" que acabamos de crear:#recuadro1 p { font-family:Ubuntu; color:#ff0000; font-size:20px;}

Con lo anterior indicamos que los párrafos contenidos en #recuadro1 deben utilizar la fuente Ubuntu.

146

Page 151: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

@font-face { font-family: "Ubuntu"; src: url("Ubuntu-Title-webfont.eot") format("eot"), url("Ubuntu-Title-webfont.woff") format("woff"), url("Ubuntu-Title-webfont.ttf") format("truetype"), url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");}

#recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro1 p { font-family:Ubuntu; color:#ff0000; font-size:20px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

147

Page 152: MANUAL PRÁCTICO DE CSS

</body> </html>

21. Imágenes de fondo (background-image)

La propiedad brackground-image permite insertar un conjunto de imágenes dentro de un elemento. Para ello debemos especificar sus nombres:Elemento { background-image: url("imagen1", url("imagen2", ...); }

La primera imagen que se dibuja es la que indicamos al final de la lista.

Por ejemplo vamos a mostrar una imagen de fondo con formato jpg y sobre esta una de tipo png, la primera:

y la imagen png es:

Luego la página que muestra superpuestas las dos imágenes en un recuadro es:<!DOCTYPE html> <html> <head> <title>Prueba</title>

148

Page 153: MANUAL PRÁCTICO DE CSS

<style type="text/css">

#recuadro1{ background-image: url("logo1.png"), url("foto1.jpg"); background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> </div>

</body> </html>

El resultado es:

Para esto definimos:#recuadro1{ background-image: url("logo1.png"), url("foto1.jpg"); background-repeat: no-repeat;

149

Page 154: MANUAL PRÁCTICO DE CSS

width:700px; height:450px;}

El recuadro coincide con el tamaño de la imagen "foto1.jpg" (700*450) Luego la imagen "logo1.png" es de 150*150 píxeles.

Como vemos primero se dibuja la imagen "foto1.jpg" (que es la última) y luego sobre esta la imagen "logo1.png". Otro cosa importante es inicializar la propiedad background-repeat con el valor no-repeat. En caso de no inicializar dicha propiedad tendremos a la imagen logo1.png repetida dentro del recuadro:

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-image: url("logo1.png"), url("foto1.jpg"); background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;

150

Page 155: MANUAL PRÁCTICO DE CSS

}

</style>

</head> <body>

<div id="recuadro1"> </div>

</body> </html>

22. Imágenes de fondo en diferentes posiciones (background-position)

Podemos mediante la propiedad background-position indicar la posición de la imagen con respecto al contenedor.

La sintaxis es la siguiente:Elemento { background-image: url("imagen1", url("imagen2", ...); background-position: posx posy , posx posy;}

El par de valores que indicamos coincide con la posición de las imágenes que especificamos en la propiedad background-image.

Implementaremos una página que muestre una imagen de 700*400 y dentro de esta otra imagen que se ubique en los cuatro vértices de la imagen más grande.

Utilizaremos las imágenes:

151

Page 156: MANUAL PRÁCTICO DE CSS

y la imagen:

La página es:<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> </div>

</body> </html>

Hay que recordar que la primer imagen que se muestra es la que especificamos última en la propiedad background-image. Luego en la propiedad background-position indicamos en el mismo orden la ubicación de cada image. La primera la ubicamos en el vértice superior izquierdo ya que especificamos los valores 0% 0%. La segunda imagen la especificamos en el vértice superior derecho con los valores 100% 0%. Así indicamos las

152

Page 157: MANUAL PRÁCTICO DE CSS

otras dos imágenes. La quinta imagen no es necesario indicar el background-position ya que el ancho y alto coincide con los valores asignados a las propiedades width y height.#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; background-repeat: no-repeat; width:700px; height:450px;}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css"> #recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;}

</style>

</head> <body>

153

Page 158: MANUAL PRÁCTICO DE CSS

<div id="recuadro1"> </div>

</body> </html>

23. Imágenes de fondo en diferentes posiciones (background-position)

Podemos mediante la propiedad background-position indicar la posición de la imagen con respecto al contenedor.

La sintaxis es la siguiente:Elemento { background-image: url("imagen1", url("imagen2", ...); background-position: posx posy , posx posy;}

El par de valores que indicamos coincide con la posición de las imágenes que especificamos en la propiedad background-image.

Implementaremos una página que muestre una imagen de 700*400 y dentro de esta otra imagen que se ubique en los cuatro vértices de la imagen más grande.

Utilizaremos las imágenes:

y la imagen:

154

Page 159: MANUAL PRÁCTICO DE CSS

La página es:<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> </div>

</body> </html>

Hay que recordar que la primer imagen que se muestra es la que especificamos última en la propiedad background-image. Luego en la propiedad background-position indicamos en el mismo orden la ubicación de cada image. La primera la ubicamos en el vértice superior izquierdo ya que especificamos los valores 0% 0%. La segunda imagen la especificamos en el vértice superior derecho con los valores 100% 0%. Así indicamos las

155

Page 160: MANUAL PRÁCTICO DE CSS

otras dos imágenes. La quinta imagen no es necesario indicar el background-position ya que el ancho y alto coincide con los valores asignados a las propiedades width y height.#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; background-repeat: no-repeat; width:700px; height:450px;}EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1">

156

Page 161: MANUAL PRÁCTICO DE CSS

</div>

</body> </html>

24. Imágenes de fondo (background-size)

Esta propiedad nos permite escalar una imagen dispuesta en el fondo. La sintaxis es:Elemento { background-size: ancho alto; }

Estas longitudes se las puede especificar en píxeles, porcentajes etc.

Por ejemplo si queremos mostrar tres imágenes dentro de un div con distintos tamaño:<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("foto1.jpg");

background-position: 0% 0%, 50% 50%;

background-size: 30px 30px, 250px 250px, 700px 450px;

background-repeat: no-repeat; width:700px; height:450px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> </div>

</body> </html>

157

Page 162: MANUAL PRÁCTICO DE CSS

Podemos ver que dibujamos tres imágenes "foto1.jpg" aparece en el fondo y luego dos veces mostramos "logo1.png" y le damos como tamaño al primero 30*30 píxeles y al segundo 250*250.#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("foto1.jpg");

background-position: 0% 0%, 50% 50%;

background-size: 30px 30px, 250px 250px, 700px 450px;

background-repeat: no-repeat; width:700px; height:450px;}

Si queremos que una imagen tome el tamaño por defecto que tiene la imagen sin reescalar podemos utilizar la palabra clave "auto", por ejemplo para mostrar la primer imagen con el tamaño original podemos escribir:#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("foto1.jpg");

background-position: 0% 0%, 50% 50%;

background-size: 30px 30px, 250px 250px, auto auto;

background-repeat: no-repeat; width:700px; height:450px;}

Si utilizamos como unidad porcentajes, la dimensión se basa en el elemento contenedor.

Así un ancho y un alto de 50%, por ejemplo, hará que el fondo de la imagen llenar el recipiente 1/4:

#recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("foto1.jpg");

background-position: 0% 0%, 50% 50%;

background-size: 50% 50%, 250px 250px, auto auto;

158

Page 163: MANUAL PRÁCTICO DE CSS

background-repeat: no-repeat; width:700px; height:450px;}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title> <style type="text/css"> #recuadro1{ background-image: url("logo1.png"), url("logo1.png"), url("foto1.jpg"); background-position: 0% 0%, 50% 50%; background-size: 30px 30px, 250px 250px, 700px 450px; background-repeat: no-repeat; width:700px; height:450px;}body { background:white;

159

Page 164: MANUAL PRÁCTICO DE CSS

margin:50px;}</style> </head> <body> <div id="recuadro1"> </div>

</body> </html>

25. Imágenes de fondo (background-origin)

La propiedad background-origin establece el punto donde se comienza a dibujar el fondo. Pudiendo ser en el borde, la almohadilla o el contenido (border-box, padding-box o content-box)Elemento { background-origin: border-box/padding-box/content-box; }

Un ejemplo de disponer en tres recuadros imágenes de fondo inicializando la propiedad background-origin con los tres valores posibles:<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-origin: border-box; border: 20px solid #eee; padding: 20px; background-image: url("casa.png"); background-color:#ff0; background-repeat: no-repeat; width:300px; height:200px;}

#recuadro2{ background-origin: padding-box; border: 20px solid #eee; padding: 20px; background-image: url("casa.png"); background-color:#ff0; background-repeat: no-repeat; width:300px; height:200px; margin-top:50px;}

#recuadro3{ background-origin: content-box;

160

Page 165: MANUAL PRÁCTICO DE CSS

border: 20px solid #eee; padding: 20px; background-image: url("casa.png"); background-color:#ff0; background-repeat: no-repeat; width:300px; height:200px; margin-top:50px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div><div id="recuadro2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

Con background-origin: border-box; el resultado es:

161

Page 166: MANUAL PRÁCTICO DE CSS

Con background-origin: padding-box; el resultado es:

Con background-origin: content-box; el resultado es:

162

Page 167: MANUAL PRÁCTICO DE CSS

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ background-origin: border-box; border: 20px solid #eee; padding: 20px; background-image: url("casa.png"); background-color:#ff0; background-repeat: no-repeat; width:300px; height:200px;}

#recuadro2{ background-origin: padding-box; border: 20px solid #eee; padding: 20px; background-image: url("casa.png"); background-color:#ff0; background-repeat: no-repeat; width:300px; height:200px; margin-top:50px;}

163

Page 168: MANUAL PRÁCTICO DE CSS

#recuadro3{ background-origin: content-box; border: 20px solid #eee; padding: 20px; background-image: url("casa.png"); background-color:#ff0; background-repeat: no-repeat; width:300px; height:200px; margin-top:50px;}

body { background:white; margin:50px;}

</style>

</head> <body>

<div id="recuadro1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div><div id="recuadro2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

<div id="recuadro3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

26. Transiciones de una propiedad (transition)

Las transiciones en css3 permiten modificar el valor de una propiedad de un elemento HTML en forma gradual durante un tiempo determinado de un estado inicial a un estado final.

La sintaxis más simple para definir una transición de una propiedad es:Elemento { transition: [nombre de propiedad] [duración de la transición] ;

164

Page 169: MANUAL PRÁCTICO DE CSS

}

Por ejemplo crearemos dos recuadro y cuando pasemos la flecha del mouse sobre el mismo cambiaremos su tamaño. El primer recuadro lo haremos sin transición:#recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; padding:10px;}

#recuadro1:hover{ width:300px;}

Cuando probamos la página veremos que el recuadro1 cambia el ancho del recuadro de 200 píxeles a 300 píxeles en forma instantanea al pasar la flecha del mouse.

Ahora si definimos la propiedad transition indicando que actúe sobre la propiedad width y que el cambio lo realice en 1 segundo:#recuadro2{ border-radius: 20px; background-color:#ff0; width:200px; padding:10px; transition:width 1s; -moz-transition:width 1s; -ms-transition:width 1s; -webkit-transition:width 1s; -o-transition:width 1s;}

#recuadro2:hover{ width:300px;}

Luego tenemos la siguiente sintaxis: transition:width 1s;

Como vemos indicamos que la transición afecta a la propiedad width y que el cambio se realice en 1 segundo. Debemos agregar la propiedad con cada prefijo de navegador hasta que se estabilice su uso.

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ border-radius: 20px; background-color:#ddd;

165

Page 170: MANUAL PRÁCTICO DE CSS

width:200px; padding:10px;}

#recuadro1:hover{ width:300px;}

#recuadro2{ border-radius: 20px; background-color:#ff0; width:200px; padding:10px; transition:width 1s; -moz-transition:width 1s; -ms-transition:width 1s; -webkit-transition:width 1s; -o-transition:width 1s;}

#recuadro2:hover{ width:300px;}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> <div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

27. Transiciones de múltiples propiedades (transition)

También podemos hacer transiciones de múltiples propiedades, para ello indicamos cada transición separada por coma:Elemento {

166

Page 171: MANUAL PRÁCTICO DE CSS

transition: [nombre de propiedad] [duración de la transición], [nombre de propiedad] [duración de la transición], [nombre de propiedad] [duración de la transición] ;}

Por ejemplo si queremos que el recuadro modifique su ancho y cambie de color luego debemos codificar lo siguiente:#recuadro1{ border-radius: 20px; background-color:#ff0; width:200px; padding:10px; transition:width 1s, background-color 8s; -moz-transition:width 1s, background-color 8s; -ms-transition:width 1s, background-color 8s; -webkit-transition:width 1s, background-color 8s; -o-transition:width 1s, background-color 8s;}

#recuadro1:hover{ width:300px; background-color: #f00;}

Como vemos en la propiedad transition indicamos la propiedad width con una duración de un segundo y la propiedad background-color con un valor de 8 segundos. Esto significa que cuando dispongamos la flecha del mouse dentro del div se lanzarán ambas transiciones que tienen duraciones distintas (cambiará de 200 píxeles a 300 píxeles en el lapso de un segundo y también cambiará del color amarillo al rojo en forma gradual en un lapso de 8 segundos)

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title> <style type="text/css"> #recuadro1{ border-radius: 20px; background-color:#ff0; width:200px; padding:10px; transition:width 1s, background-color 8s; -moz-transition:width 1s, background-color 8s; -ms-transition:width 1s,

167

Page 172: MANUAL PRÁCTICO DE CSS

background-color 8s; -webkit-transition:width 1s, background-color 8s; -o-transition:width 1s, background-color 8s;}#recuadro1:hover{ width:300px; background-color: #f00;}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

28. Transiciones (funciones de transición)

Un tercer parámetro opcional de la propiedad transition es indicar una "función de transición" que nos permite seleccionar la velocidad durante la transición:Elemento { transition: [nombre de propiedad] [duración de la transición] [función de transición];}

Los valores posibles que podemos especificar son: ease : Define un efecto de transición con un comienzo lento, luego rápido y finalmente

termina lento (cuando no definimos la función de transición elige esta por defecto) linear : Define un efecto de transición con la misma velocidad de inicio a fin. ease-in : Define un efecto de transición con un comienzo lento. ease-out : Define un efecto de transición con un final lento. ease-in-out : Define un efecto de transición con un comienzo lento y un final lento.

La sintaxis luego si queremos aplicar la función de transición linear será:#recuadro2{ margin: 5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 2s linear; -moz-transition:width 2s linear;

168

Page 173: MANUAL PRÁCTICO DE CSS

-ms-transition:width 2s linear; -webkit-transition:width 2s linear; -o-transition:width 2s linear;}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title> <style type="text/css"> #recuadro1{ margin: 5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 2s ease; -moz-transition:width 2s ease; -ms-transition:width 2s ease; -webkit-transition:width 2s ease; -o-transition:width 2s ease;}#recuadro1:hover{ width:300px;}#recuadro2{ margin: 5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 2s linear; -moz-transition:width 2s linear; -ms-transition:width 2s linear; -webkit-transition:width 2s linear; -o-transition:width 2s linear;}#recuadro2:hover{ width:300px;}#recuadro3{ margin: 5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 2s ease-in;

169

Page 174: MANUAL PRÁCTICO DE CSS

-moz-transition:width 2s ease-in; -ms-transition:width 2s ease-in; -webkit-transition:width 2s ease-in; -o-transition:width 2s ease-in;}#recuadro3:hover{ width:300px;}#recuadro4{ margin: 5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 2s ease-out; -moz-transition:width 2s ease-out; -ms-transition:width 2s ease-out; -webkit-transition:width 2s ease-out; -o-transition:width 2s ease-out;}#recuadro4:hover{ width:300px;}#recuadro5{ margin: 5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 2s ease-in-out; -moz-transition:width 2s ease-in-out; -ms-transition:width 2s ease-in-out; -webkit-transition:width 2s ease-in-out; -o-transition:width 2s ease-in-out;}#recuadro5:hover{ width:300px;}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>ease</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>

170

Page 175: MANUAL PRÁCTICO DE CSS

</div> <div id="recuadro2"> <h3>linear</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> <div id="recuadro3"> <h3>ease-in</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> <div id="recuadro4"> <h3>ease-out</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> <div id="recuadro5"> <h3>ease-in-out</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

29. Transiciones (tiempo de demora en iniciar la transición)

El cuarto parámetro opcional de la propiedad transition es indicar un tiempo de espera hasta que se inicie la transición:Elemento { transition: [nombre de propiedad] [duración de la transición] [función de transición] [tiempo de inicio];}

Es decir indicamos la cantidad de milisegundos o segundos hasta que se inicia el proceso de transición.

Por ejemplo si queremos que la transición comience en 1 segundo la sintaxis será la siguiente:#recuadro1{ border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 1s ease 1s; -moz-transition:width 1s ease 1s; -ms-transition:width 1s ease 1s; -webkit-transition:width 1s ease 1s; -o-transition:width 1s ease 1s;}

171

Page 176: MANUAL PRÁCTICO DE CSS

Puede ser muy útil si queremos encadenar transiciones, por ejemplo si queremos que el elemento modifique su ancho y luego al finalizar el cambio del ancho modifique su color:#recuadro2{ margin:5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 1s ease, background-color 1s ease 1s; -moz-transition:width 1s ease, background-color 1s ease 1s; -ms-transition:width 1s ease, background-color 1s ease 1s; -webkit-transition:width 1s ease, background-color 1s ease 1s; -o-transition:width 1s ease, background-color 1s ease 1s;}

#recuadro2:hover{ width:300px; background-color:#ff0;}EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title> <style type="text/css"> #recuadro1{ margin:5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition:width 1s ease 1s; -moz-transition:width 1s ease 1s; -ms-transition:width 1s ease 1s; -webkit-transition:width 1s ease 1s; -o-transition:width 1s ease 1s;}#recuadro1:hover{ width:300px;}#recuadro2{ margin:5px; border-radius: 20px; background-color:#eee; width:200px;

172

Page 177: MANUAL PRÁCTICO DE CSS

padding:10px; transition:width 1s ease, background-color 1s ease 1s; -moz-transition:width 1s ease, background-color 1s ease 1s; -ms-transition:width 1s ease, background-color 1s ease 1s; -webkit-transition:width 1s ease, background-color 1s ease 1s; -o-transition:width 1s ease, background-color 1s ease 1s;}#recuadro2:hover{ width:300px; background-color:#ff0;}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> <div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div>

</body> </html>

30. Transiciones (otra sintaxis para hacer lo mismo)

Hemos visto que la propiedad transition podemos indicarle hasta cuatro parámetros. Los dos primeros son obligatorios y los otros son opcionales.

CSS3 dispone de otras cuatro funciones para indicar cada uno de estos valores en forma independiente:Elemento { transition-property: [nombre de propiedad]; transition-duration: [duración de la transición]; transition-timing-function: [función de transición]; transition-delay: [tiempo de inicio];

173

Page 178: MANUAL PRÁCTICO DE CSS

}

Por ejemplo si queremos modificar el ancho de un elemento cuando disponemos la flecha del mouse y que dure 1 segundo y se lance luego de medio segundo la sintaxis es la siguiente:#recuadro1{ margin:5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 0.5s; -moz-transition-property: width; -moz-transition-duration: 1s; -moz-transition-timing-function: linear; -moz-transition-delay: 0.5s; -ms-transition-property: width; -ms-transition-duration: 1s; -ms-transition-timing-function: linear; -ms-transition-delay: 0.5s; -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0.5s; -o-transition-property: width; -o-transition-duration: 1s; -o-transition-timing-function: linear; -o-transition-delay: 0.5s;}

#recuadro1:hover{ width:300px;}

Si queremos luego modificar más de una propiedad debemos indicarlos separando por coma:#recuadro2{ margin:5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition-property: width, background-color; transition-duration: 1s, 1s; transition-timing-function: linear, linear; transition-delay: 0s, 1s; -moz-transition-property: width, background-color; -moz-transition-duration: 1s, 1s; -moz-transition-timing-function: linear, linear; -moz-transition-delay: 0s, 1s; -ms-transition-property: width, background-color; -ms-transition-duration: 1s, 1s; -ms-transition-timing-function: linear, linear;

174

Page 179: MANUAL PRÁCTICO DE CSS

-ms-transition-delay: 0s, 1s; -webkit-transition-property: width, background-color; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: 0s, 1s; -o-transition-property: width, background-color; -o-transition-duration: 1s, 1s; -o-transition-timing-function: linear, linear; -o-transition-delay: 0s, 1s;}

#recuadro2:hover{ width:300px; background-color:#ff0;}

Es importante el orden de las propiedades definidas en "transition-property", en este ejemplo definimos los valores "width y background-color", luego por ejemplo en la propiedad "transition-delay" el valor de cero segundos se aplica a la propiedad width y el de 1 segundo a la propiedad "background-color".

EJEMPLOS:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ margin:5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 0.5s; -moz-transition-property: width; -moz-transition-duration: 1s; -moz-transition-timing-function: linear; -moz-transition-delay: 0.5s; -ms-transition-property: width; -ms-transition-duration: 1s; -ms-transition-timing-function: linear; -ms-transition-delay: 0.5s; -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear;

175

Page 180: MANUAL PRÁCTICO DE CSS

-webkit-transition-delay: 0.5s; -o-transition-property: width; -o-transition-duration: 1s; -o-transition-timing-function: linear; -o-transition-delay: 0.5s;}

#recuadro1:hover{ width:300px;}

#recuadro2{ margin:5px; border-radius: 20px; background-color:#eee; width:200px; padding:10px; transition-property: width, background-color; transition-duration: 1s, 1s; transition-timing-function: linear, linear; transition-delay: 0s, 1s; -moz-transition-property: width, background-color; -moz-transition-duration: 1s, 1s; -moz-transition-timing-function: linear, linear; -moz-transition-delay: 0s, 1s; -ms-transition-property: width, background-color; -ms-transition-duration: 1s, 1s; -ms-transition-timing-function: linear, linear; -ms-transition-delay: 0s, 1s; -webkit-transition-property: width, background-color; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: 0s, 1s; -o-transition-property: width, background-color; -o-transition-duration: 1s, 1s; -o-transition-timing-function: linear, linear; -o-transition-delay: 0s, 1s;}

#recuadro2:hover{ width:300px; background-color:#ff0;}body { background:white; margin:50px;}</style> </head> <body>

176

Page 181: MANUAL PRÁCTICO DE CSS

<div id="recuadro1"> <h3>Recuadro 1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> <div id="recuadro2"> <h3>Recuadro 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p></div> </body> </html>

31. Animaciones (sintaxis básica)

Las animaciones en css3 nos permiten hacer cosas que con las transiciones no alcanzamos y nos quedamos cortos.

La sintaxis básica para una animación:Elemento { animation-name: [nombre de la animación]; animation-duration: [tiempo de duración]; }

@ keyframes [nombre de la animación] { from { [propiedades y valores del estado inicial de la animación] } to { [propiedades y valores del estado final de la animación] }}

Veamos un ejemplo donde emplearemos la sintaxis expuesta, a este momento solo el FireFox, Chrome y Opera implementan las animaciones. Mostraremos un recuadro con un texto que parta de la columna 30px y avance hasta la columna 300px y que cambie del color gris al color amarillo:#recuadro1{ left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -o-animation-name: animacion1; -o-animation-duration: 4s;}

177

Page 182: MANUAL PRÁCTICO DE CSS

@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-webkit-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-o-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

Como podemos ver inicializamos las propiedades animation-name con el nombre de la animación: -moz-animation-name: animacion1; -webkit-animation-name: animacion1; -o-animation-name: animacion1;

Y la propiedad animation-duration con el tiempo duración de la animación: -moz-animation-duration: 4s; -webkit-animation-duration: 4s; -o-animation-duration: 4s;

La sintaxis para especificar la animación propiamente dicha es idéntica para cada navegador pero como debemos utilizar el prefijo luego creamos tres:@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }

178

Page 183: MANUAL PRÁCTICO DE CSS

}

En la parte del from indicamos el estado inicial del elemento (en este caso 30 píxeles respecto a la izquierda y de color gris (#ddd)), luego en la sección del to indicamos los valores finales que debe tomar el elemento (300 píxeles respecto a la izquierda y de color amarillo(#ff0))

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -o-animation-name: animacion1; -o-animation-duration: 4s;}

@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-webkit-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px;

179

Page 184: MANUAL PRÁCTICO DE CSS

background-color:#ff0; }}

@-o-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

body { background:white; margin:50px;}

</style>

</head> <body> <div id="recuadro1"> <h3>Título</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></div>

</body> </html>

32. Animaciones (animation-iteration-count y animation-direction)

Otras dos propiedades muy importantes para crear animaciones con css3 son animation-iteration-count y animation-direction:Elemento { animation-iteration-count: [cantidad de veces a repetir la animación o "infinite"]; animation-direction: ["normal" o "alternate"]; }

Si queremos que la animación se repita solo tres veces luego indicamos en la propiedad animation-iteration-count dicho valor: -moz-animation-iteration-count: 3;

En cambio si queremos que se repita siempre luego especificamos el valor "infinite": -moz-animation-iteration-count: infinite;

La propiedad animation-direction indica como debe repetirse la animación, puede tomar el valor "normal" con lo que la animación cada vez que finaliza comienza desde el principio. Pero si inicializamos con el valor "alternate" cuando finaliza la animación comienza desde el final hasta el principio:

180

Page 185: MANUAL PRÁCTICO DE CSS

-moz-animation-direction: alternate;

El ejemplo del concepto anterior que muestra un recuadro con un texto que se desplaza de izquierda a derecha cambiando su color, pero ahora indicando que se repita en forma indefinida y con el valor "alternate" en la propiedad animation-direction:#recuadro1{ left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate;}

@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-webkit-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-o-keyframes animacion1 { from { left:30px; background-color:#ddd; }

181

Page 186: MANUAL PRÁCTICO DE CSS

to { left:300px; background-color:#ff0; }}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate;}@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}@-webkit-keyframes animacion1 { from { left:30px;

182

Page 187: MANUAL PRÁCTICO DE CSS

background-color:#ddd; } to { left:300px; background-color:#ff0; }}@-o-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Título</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></div> </body> </html>

33. Animaciones (animation-timing-function y animation-delay)

Similar a las transiciones disponemos de dos propiedades para definir la función de transición y el tiempo que debe esperar para comenzar la animación:Elemento { animation-timing-function: [función de transición]; animation-delay: [tiempo de demora para iniciar la animación];}

Los valores posibles para la propiedad animation-timing-function: ease : Define un efecto de animación con un comienzo lento, luego rápido y finalmente

termina lento (cuando no definimos la función elige esta por defecto) linear : Define un efecto de animación con la misma velocidad de inicio a fin. ease-in : Define un efecto de animación con un comienzo lento. ease-out : Define un efecto de animación con un final lento. ease-in-out : Define un efecto de animación con un comienzo lento y un final lento.

El problema del concepto anterior definimos la función de animación "linear" y un tiempo de retardo de 2 segundos:#recuadro1{

183

Page 188: MANUAL PRÁCTICO DE CSS

left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-timing-function: linear; -o-animation-delay: 2s;}

@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-webkit-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

@-o-keyframes animacion1 { from { left:30px; background-color:#ddd; }

184

Page 189: MANUAL PRÁCTICO DE CSS

to { left:300px; background-color:#ff0; }}EJEMPLO:<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-timing-function: linear; -o-animation-delay: 2s;}@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}

185

Page 190: MANUAL PRÁCTICO DE CSS

@-webkit-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}@-o-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; }}body { background:white; margin:50px;}</style> </head> <body> <div id="recuadro1"> <h3>Título</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></div> </body> </html>

34. Animaciones (animation-play-state)

La propiedad animation-play-state nos permite cambiar el estado de la animación, los valores posibles son "running" y "paused", es decir ejecutándose o pausada. La sintaxis luego es:Elemento { animation-play-state: [running o paused];}

Por defecto una animación comienza con esta propiedad con el valor "running".

El siguiente ejemplo muestra un recuadro que cuando disponemos la flecha del mouse en su interior se activa la animación cambiando por esquinas redondeadas y el color interior:#recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; height:100px;

186

Page 191: MANUAL PRÁCTICO DE CSS

padding:8px; -moz-animation-play-state:paused; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-play-state:paused; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-play-state:paused; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate;}

#recuadro1:hover { -moz-animation-play-state:running; -webkit-animation-play-state:running; -o-animation-play-state:running;}

@-moz-keyframes animacion1 { from { border-radius:0px; background-color:#ddd; } to { border-radius:40px; background-color:#ff0; }}

@-webkit-keyframes animacion1 { from { border-radius:0px; background-color:#ddd; } to { border-radius:40px; background-color:#ff0; }}

@-o-keyframes animacion1 { from { border-radius:0px; background-color:#ddd; } to { border-radius:40px; background-color:#ff0;

187

Page 192: MANUAL PRÁCTICO DE CSS

}}EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:8px; -moz-animation-play-state:paused; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-play-state:paused; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-play-state:paused; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate;}

#recuadro1:hover { -moz-animation-play-state:running; -webkit-animation-play-state:running; -o-animation-play-state:running;}

@-moz-keyframes animacion1 { from { border-radius:0px; background-color:#ddd; } to { border-radius:40px; background-color:#ff0; }}

188

Page 193: MANUAL PRÁCTICO DE CSS

@-webkit-keyframes animacion1 { from { border-radius:0px; background-color:#ddd; } to { border-radius:40px; background-color:#ff0; }}

@-o-keyframes animacion1 { from { border-radius:0px; background-color:#ddd; } to { border-radius:40px; background-color:#ff0; }}

body { background:white; margin:50px;}

</style>

</head> <body> <div id="recuadro1"> <h3>Título</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></div>

</body> </html>

189

Page 194: MANUAL PRÁCTICO DE CSS

35. Animaciones (definición de más de 2 keyframes)

Hasta ahora hemos indicado en la animación solo 2 keyframes (el inicial y el final), pero para animaciones más complejas es posible que necesitemos más de 2 keyframes, para esto tenemos la siguiente sintaxis:@-moz-keyframes [nombre de la animación] { 0%{ [propiedades y valores] } [valor en porcentaje]%{ [propiedades y valores] } [valor en porcentaje]%{ [propiedades y valores] } 100%{ [propiedades y valores] }}

Por ejemplo si queremos 5 frames claves que nos permitan desplazar un recudrado sobre un perímetro de un rectángulo luego tenemos que especificar los siguientes frames:#recuadro1{ left:30px; top:30px; position:relative; border-radius: 20px; background-color:#ddd; width:100px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite;}

@-moz-keyframes animacion1 { 0%{ left:30px; top:30px; } 25%{ left:300px; top:30px; } 50%{ left:300px;

190

Page 195: MANUAL PRÁCTICO DE CSS

top:200px; } 75%{ left:30px; top:200px; } 100%{ left:30px; top:30px; }}

@-webkit-keyframes animacion1 { 0%{ left:30px; top:30px; } 25%{ left:300px; top:30px; } 50%{ left:300px; top:200px; } 75%{ left:30px; top:200px; } 100%{ left:30px; top:30px; }}

@-o-keyframes animacion1 { 0%{ left:30px; top:30px; } 25%{ left:300px; top:30px; } 50%{ left:300px; top:200px; } 75%{ left:30px; top:200px; } 100%{ left:30px;

191

Page 196: MANUAL PRÁCTICO DE CSS

top:30px; }}

EJEMPLO:

<!DOCTYPE html> <html> <head> <title>Prueba</title>

<style type="text/css">

#recuadro1{ left:30px; top:30px; position:relative; border-radius: 20px; background-color:#ddd; width:100px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -o-animation-name: animacion1; -o-animation-duration: 4s; -o-animation-iteration-count: infinite;}

@-moz-keyframes animacion1 { 0%{ left:30px; top:30px; } 25%{ left:300px; top:30px; } 50%{ left:300px; top:200px; } 75%{ left:30px; top:200px;

192

Page 197: MANUAL PRÁCTICO DE CSS

} 100%{ left:30px; top:30px; }}

@-webkit-keyframes animacion1 { 0%{ left:30px; top:30px; } 25%{ left:300px; top:30px; } 50%{ left:300px; top:200px; } 75%{ left:30px; top:200px; } 100%{ left:30px; top:30px; }}

@-o-keyframes animacion1 { 0%{ left:30px; top:30px; } 25%{ left:300px; top:30px; } 50%{ left:300px; top:200px; } 75%{ left:30px; top:200px; } 100%{ left:30px; top:30px;

193

Page 198: MANUAL PRÁCTICO DE CSS

}}

body { background:white; margin:50px;}

</style>

</head> <body> <div id="recuadro1"> <h3>Título</h3></div> </body> </html>

FUENTE: http://www.cssya.com.ar/css3ya/

194