desarrollo - catalinatics5.webnode.com.co · cascading style sheets (hojas de estilo en cascada)....

Introducción CSS

Intro

ducc

ión

CSS

2016

Desarrollo

Fase

Des

arro

llo

Introducción CSSPag 2

INTRODUCCIÓN CSS

Introducción.

CSS Cascading Style Sheets (Hojas de Estilo en Cascada) es un lenguaje de hojas de estilo creado para controlar el aspecto de los documentos, es la mejor forma de separar los contenidos de su aspecto, es imprescindible para crear páginas de web profesionales, separar los contenidos y aspecto gráficos presenta muchas ventajas ya que obliga a crear documentos HTML bien definidos y con significado completo permitiendo así, mejor accesibilidad, reduce complejidad de su mantenimiento y permite la visualización del mismo documento en diferentes dispositivos como (pc, tablets, dispositivos móviles, etc).

Para crear una página web lo primero que se hace es en HTML marcar el contenido y definir su funcionalidad, una vez listo el documento HTML se utiliza CSS para definir el aspecto visual (colores, fuentes, distribución, etc).

En este OVA aprenderás los conceptos básicos de CSS con todos sus elementos, estructuras y correcta aplicación junto a las novedades que permite la versión CSS3.


Estructura de contenidos.

Mapa de Contenido.

Desarrollo de Contenidos.

1. CSS.

1.1 Estructura CSS. 1.2 Formas de insertar CSS en un documento HTML. 1.3 Selectores. 1.4 Etiquetas de tipo BLOQUE e INLINE. 1.5 Propiedades CSS.

2. Novedades CSS3.

2.1 Compatibilidad de CSS3 con los navegadores. 2.2 Background CSS3. 2.3 Border. 2.4 Text. 2.5 Transform. 2.6 Perspectiva en CSS3. 2.7 Transiciones en CSS3. 2.8 Animaciones en CSS3. 2.9 Columnas múltiples. 2.10 Opacity.

Glosario.

Bibliografía.

Actividades de Afianzamiento.


Mapa de Contenido.

CSS

Introducción a

Función de CSS en el diseño web

Comprender

Estructura CSS Integrador CSS con HTML Selectores Etiquetas Propiedades Novedades CSS3

con como tipo de como

Hojas de estilo CSS externa.Estilo CSS incrustado.

Estilos CSS inline.

Selector Universal.Selector de Etiqueta.

Selector Clase.Selector ID.

Bloque Inline. Tipo.Bloque.Lista.Fondo.Borde.

Compatibilidad.Background CSS3.

Border.Text.

Transform.Perspectiva en CSS3.Transiciones en CSS3.Animaciones en CSS3.Columnas Múñtiples.

Opacity.


Desarrollo de Contenidos.

1. CSS. Cascading Style Sheets (Hojas de Estilo en Cascada).

Es la sigla de Cascading Style Sheets (Hojas de Estilo en Cascada). Es un mecanismo simple para dar estilo y diseño a los contenidos web como el tipo de letra, color de fondo etc.

Al estructurar un sitio web, se utiliza en primer lugar el HTML para etiquetar todo contenido dentro de la página: encabezados, párrafos, textos, vínculos, imágenes, listas, etc.Luego de tener todo el contenido debidamente estructurado y maquetado en HTML se crea el CSS para definir las propiedades de aspecto de cada elemento como el color, tamaño de fuente, justificación de texto, posición, etc.

El CSS fue publicado en 1996 por la W3C, actualmente se encuentra en la versión 3.0 en la que se pueden generar animaciones, además de incluir más propiedades para modificar.

1.1. Estructuración del CSS.

El CSS se trabaja por medio de reglas las cuales se dividen en dos partes:

Selector= Determina a que parte del documento HTML se le aplicará la regla.

Declaración=Especifica la modificación visual que se le hará al selector.

La declaración indica cual es la modificación y el selector dice a quien se le debe hacer. En un documento HTML pueden existir infinitas reglas CSS y la misma regla se le puede aplicar a varios selectores y el mismo selector puede modificarse con diferentes reglas.


Estructura de la regla CSS:

Especificación de los términos de la gráfica.

Regla CSS: Varias reglas CSS componen una hoja de estilos CSS, las reglas se componen por el selector y las declaraciones entre “{}” llaves.

Selector: indica a que elemento se le aplica la regla CSS.

Declaración: Se compone en pareja propiedad: valor donde indica que se modifica en el selector, una declaración puede contener más de una pareja propiedad: valor separándose entre ellas por un punto y coma(;).

Propiedad: Es la característica a modificar en el selector ejemplo (color), cuando una propiedad tiene un nombre con más de una palabra se separa por guión (font-family).

Valor: Establece el nuevo valor de la propiedad modificada ejemplo (color: verde).

Veamos la siguiente gráfica donde se aplica una regla CSS, para aclarar conceptos. Modificaremos en la etiqueta <p> del documento el color y la fuente.

Selector { propiedad : valor ; }

Selector Declaración

Reglas CSS

Separación de paresUnión de parejas

p { color : #ff0000 ; font-family : Arial ; }

Selector Declaración

Reglas CSS

ValorPropiedad ValorPropiedad


1.2. Formas de insertar CSS en un documento HTML.

Existen tres maneras de utilizar el CSS en un documento Html· External style sheet(Hojas de estilos externas)· Internal style sheet(Hojas de estilos incrustadas en el HEAD)· Inline style (Estilos se definen en la etiqueta)

1.2.1. Hojas de estilos CSS externa.

Todas las reglas CSS se determinan en un archivo guardado con extensión (.CSS), para luego ser vinculada mediante la etiqueta HTML <link>.Un archivo CSS se puede vincular a cuantos HTML se quiera y un HTML puede contener cuantos archivos CSS sean necesarios.

Los archivos CSS se vinculan en el <HEAD> del HTML de la siguiente manera:

El archivo CSS se puede hacer en cualquier editor de texto guardándolo con la extensión .CSS.

1.2.2. Estilos CSS Incrustados en el <head>.

Se incrustan en el <head> usando la etiqueta <style> con el atributo type=“text/css”. Pero esos estilos solo funcionarán para ese documento HTML en específico.

<head> <link rel="stylesheet" type="text/css" href="miArchivo.css" /> </head>

<head> <style type=”text/css”> /*estilos incrustados*/ </style> </head>

< >HTML CSS < > + CSSHTML


1.2.3. Estilos CSS Inline.

El estilo inline es de los menos utilizados ya que pierde muchas ventajas del CSS, sería casi que modificar etiqueta por etiqueta similar al HTML, se debe usar el atributo style con el que cuenta la mayoría de las etiquetas y con el que se puede hacer CSS

1.3. Selectores.

1.3.1 Selector Universal.

El selector universal es representado por el asterisco (*), este permite crear una regla global para todo el documento, es usado generalmente para formatear las márgenes y medidas que traen por defecto. Ejemplo:

Aunque utilizarlo es fácil, no es muy común usarlo ya que es poco probable que una regla sea necesaria para todos los elementos.

1.3.2. Selector de Etiqueta.

Es el más común a utilizar ya que todas las etiquetas HTML pueden ser seleccionadas para su modificación, la regla CSS se aplicará automáticamente al crear la etiqueta en el HTML.

Para aplicar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >).A continuación se aclararán los términos con el siguiente ejemplo:

<p style="color:#0000ff;margin-left:20px">Este es el parrafo.</p>

*{ margin:0px; padding:0px }

Modificamos el color de la etiqueta . <p>

Nota:recordemos que en CSS al utilizar una etiqueta de selector sólo indicamos el nombre de la etiqueta sin los símbolos <>.

p {color:#FF0000;}

CSS


Luego en el documento HTML al usar la etiqueta <p> en cada párrafo ya estará la modificación del color que se aplicó en la regla CSS.

Los selectores se pueden agrupar en el caso de que se quiera aplicar la misma regla a varios elementos.

Lo anterior se podría resumir agrupando selectores separándolos con una coma(,)

1.3.3. Selectores de clase.

permite crear una regla con el nombre que se quiera (teniendo en cuenta de no utilizar ñ, tildes, caracteres especiales o dejar espacio entre palabras), la clase debe ser aplicada explícitamente en una etiqueta.

La especialidad de las clases es que se puede aplicar solo a un elemento o a varios si es necesario.

Para crear una clase se utiliza como prefijo el punto (.)

.resaltado { color:#FF0000; }

Luego para aplicarla se llama a través del atributo class que contienen la mayoría de las etiquetas.

h1{color:#0000ff;} h2{color:#0000ff;} h3{color:#0000ff;} h4{color:#0000ff;}

h1,h2,h3,h4{color:#0000ff;}

<p class=“resaltado”> este párrafo a diferencia de los otros esta resaltado</p>

<p>este párrafo vuelve a ser normal</p> <p class=“resaltado”> este otro párrafo vuelve a estar resaltado</p>


1.3.4. Selectores ID.

son reglas aplicables sólo a un elemento del HTML, que se aplican a un elemento que tenga el identificador (ID).

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo “id”; el valor del id es el nombre que usted le da; en un documento HTML no pueden existir etiquetas con el mismo nombre de ID.

La forma de crear un Selector ID es similar a las clases, solo que el prefijo es el numeral (#) en vez del punto (.)

Para crearlo es así

1.4. Etiquetas de tipo Block e Inline.

En HTML existen dos formas de identificar ciertas etiquetas los elementos de bloque (block) y los elementos en línea (inline).

Elementos Bloque: la principal característica es que son mostrados con un salto de línea antes y después. También pueden tener anidados otros elementos de bloque y/o elementos en línea.

Etiquetas Bloque más comunes: <p>, <ul>, <ol>, <h1-h6>, <fieldset>, <hr>, <div> entre otras.

Elementos en Línea: son mostrados en el lugar que aparecen en el flujo del texto, los elementos en línea sólo deberían tener anidados otros elementos en línea.

Etiquetas Inline más comunes: <a>, <br>, <span>, <img>, <tt>, <i> ,<b> entre otras.

Nota: Esta diferencia no es tan marcada en HTML5.

#cuadro { widht : 200px; }

Para usarla:

<p id=“cuadro”> Hola </p>


Ejemplo de aplicación HTML Y CSS.

Vamos a aplicar un estilo CSS incrustado con cada uno de los selectores.

<html><head><title>Mi primer CSS</title><style type="text/css">h1{color:#F00;}p{color:#006600;}.textoAzul{color:#0033CC;font-family:Arial;}#textoNaranja{color:#FF6600;}</style></head><body><h1>Este encabezado es de color Rojo</h1><p>El color de este texto es verde</p><p class="textoAzul">yo soy de color azul y fuente Arial que provienen de una clase</p><p id="textoNaranja">yo tengo el texto naranja por una regla de un selector ID</p></body></html>

1.5. Propiedades CSS.

Propiedades de texto CSS cuenta con una gran cantidad de propiedades para modificar la apariencia del texto, se pueden dividir en dos, de tipo y bloque.

1.5.1 Propiedades de tipo.

FONT-FAMILY: Modifica el tipo de letra.

FONT-WEIGHT: Establece el grosor de la tipografía.

FONT-VARIANT: Estilo alternativo de letra.

FONT-SIZE: Establece el tamaño de la fuente.

FONT-STYLE: Establece el estilo de la fuente.


p{font-family:Georgia,"Times New Roman", Times, serif;}

COLOR: Modifica el color de texto.

TEXT-DECORATION: Implementa una decoración en el texto.

LINE-HEIGHT: Especifica el alto de línea.

TEXT-TRANSFORM: Controla la capitalización de texto.

FONT-FAMILY:

Especifica la tipografía a utilizar por el documento.

La propiedad font-family puede tener varios valores como una especie de reserva por si el navegador no identifica la primera fuente, cambiará el texto por la segunda fuente, el nombre de la fuente se separa por comas (,).

Es recomendable empezar como valor la fuente deseada y al final dejar una fuente genérica.

Si el nombre de la fuente tiene más de dos palabras esta se escribe entre comillas.

Ejemplo:

Si el navegador no interpreta a Georgia la fuente cambiará a Times New Roman e irá pasando hasta la fuente final.

Esta es la lista de las fuentes más utilizadas.

font-family: Arial, Helvetica, sans-serif;font-family: "Times New Roman", Times, serif;font-family: "Courier New", Courier, monospace;font-family: Georgia, "Times New Roman", Times, serif;font-family: Verdana, Arial, Helvetica, sans-serif;


FONT-WEIGHT:

Establece el grosor de la tipografía según los siguientes valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit.

Ejemplo:

FONT-VARIANT:

esta propiedad tiene dos valores normal y small-caps.

Normal: es el valor que trae por defecto.

Small-caps: Convierte la tipografía que está en minúscula a mayúscula y si estuviera en mayúscula la hace un poco más grande.

Ejemplo:

p{font-weight:800;}

p{font-variant:small-caps;}

FONT-SIZE:

Establece el tamaño de la fuente especificando el valor numérico o el valor en texto:

Valores texto: small, medium, large, x-large, xx-large, x-small, xx-small, larger, smaller.

Valores numéricos: A los valores numér icos se les puede especificar el tamaño de la unidad (en Pixeles (px), Porcentaje (%), puntos (pt) y emes (em)).

colorHexadecimal{color:#0099CC;}c o l o r I n g l e s { c o l o r : r e d ; }colorRgb{color:rgb(0,255,0);}


Ejemplo:

Muestras:

Nota: es ideal manejar los tamaños de importancia de texto con la ayuda de las etiquetas <h1-6> y <p>antes de entrar a modificar el font-size.

FONT-STYLE:

Modifica el estilo de presentación de la fuente sus posibles valores normal, italic, oblique:

Normal: Valor por defecto.

Italic: Texto en itálica.

Oblique: Oblicuo, este es muy similar a la itálica.

Ejemplo:

COLOR:

cambia el color de texto según el valor, los valores se pueden ingresar de tres formas: Nombre en inglés, hexadecimal o los valores en rgb.

p{font-size:9px;}

p{font-style:italic;}


Ejemplo:

TEXT-DECORATION:

Establece la decoración del texto ya sea subrayado, tachado, parpadeante, con una línea superior y ninguna decoración.

Los valores son los siguientes: none, underline, overline, line-through, blink.

Ejemplo:

LINE-HEIGHT:

Modifica el alto de línea de texto según el valor suministrado, el cual se puede especificar con números, números y la medida en (px,pt,%,em).

Si se pone como valor “normal” regresa al alto de línea por defecto.

Ejemplo

TEXT-TRANSFORM:

Modifica la capitulación del texto según el valor.

Los valores son:

· none: Valor por defecto.· capitalize: Transforma la primera letra de cada palabra en mayúscula

colorHexadecimal{color:#0099CC;}colorIngles{color:red;}colorRgb{color:rgb(0,255,0);}

p{text-decoration:blink;}a{text-decoration:none;}

p{line-height:30px;}


· uppercase: Transforma todos los caracteres en mayúsculas.· lowercase: Transforma tolos los caracteres a minúscula.

Ejemplo:

Crear una clase por propiedad anteriormente vista y luego aplicarlas en párrafos de texto.

Ejemplo de una aplicación.

1.5.2. Propiedades de Bloque.

WORD-SPACING: Especifica el espacio en blanco entre palabras.

LETTER-SPACING: Especifica el espacio en blanco entre letras.

VERTICAL-ALIGN: Establece la alineación vertical de un elemento.

TEXT-ALIGN: Especifica la alineación horizontal del texto en un elemento.

TEXT-INDENT: Especifica la sangría de la primera línea en un texto de bloque.

DISPLAY: Define como cierto elemento de HTML que se debe mostrar.

- EJERCICIO DE APLICACIÓN CSS.

<html><head><title>Ejecicio de tipos</title><style type="text/css">.textoTachado{text-decoration:line-through;}</style></head><body><p class="textoTachado">este texto esta tachado</p></body></html>

p{text-transform:lowercase;}


WORD-SPACING:

Esta propiedad aumenta o disminuye el espacio en blanco entre las palabras según el valor que tenga.

El valor se especifica por medio de números y sus unidades en (px,pt,cm,em).

Ejemplo:

LETTER-SPACING:

La propiedad letter-spacing aumenta o disminuye el espacio en blanco entre las letras según el valor que tenga.

El valor se especifica por medio de números y sus unidades en (px,pt,cm,em).

Ejemplo:

p{word-spacing:10px;}

p{letter-spacing:4em;}

VERTICAL-ALIGN:

Establece la alineación vertical de un elemento según su valor tomando como referencia el contenedor del elemento.

Sus posibles valores son:

· Longitud en números: números y sus unidades en (px,%,cm,em).

· Baseline: Alinear la línea base del elemento con la base del elemento padre.

· Sub: Alinea el elemento como lo fue el subíndice.


· Super: Alinea el elemento como lo fue el superíndice.

· Top: La parte superior del elemento se alinea con la parte superior del elemento más alto en la línea.

· Text-top: La parte superior del elemento se alinea con la parte superior de

la fuente del elemento padre.

· Middle: El elemento se pone en el centro del elemento primario.

· Bottom: La parte inferior del elemento está alineado con la parte inferior de la fuente del elemento padre.

· Text-bottom: La parte inferior del elemento está alineado con la parte inferior de la fuente del elemento padre.

Ejemplo:

TEXT-ALIGN:

Define la justificación del texto según su valor.

Los posibles valores son: left, right, center y justify.

Ejemplo:

TEXT-INDENT:

especifica la sangría de la primera línea en un texto de bloque según su valor en números y sus unidades en (px,%,cm,em,pt).

Ejemplo

p{vertical-align:30px;}

p{text-align:justify;}

p{text-indent:50px;}


WHITE-SPACE:

Controla los espacios en blanco de un texto según sus valores.

Los valores que maneja son estos.

· Normal: comportamiento por defecto.

· Pre: se respetan los espacios en blanco y las nuevas líneas. Si la línea es muy larga, se sale del espacio asignado para ese contenido.

· Nowrap: elimina los espacios en blanco y las nuevas líneas. Si la línea es muy larga, se sale del espacio asignado para ese contenido.

· Pre-wrap: se respetan los espacios en blanco y las nuevas líneas, pero

ajustando cada línea al espacio asignado para ese contenido.

· Pre-line: elimina los espacios en blanco y respeta las nuevas líneas, pero ajustando cada línea al espacio asignado para ese contenido.

Ejemplo:

DISPLAY: Cambia el comportamiento del elemento HTML, según lo indique el valor.

Entre sus valores más utilizados son:

· inline: El elemento se comporta como uno de tipo Inline.

· block: El elemento se comporta como uno de tipo bloque.

· list-item: Se muestra el elemento como un ítem de lista.

· none: El elemento Html no se muestra en pantalla.

Ejemplo

p{white-space:pre-line;}

p{display:none;}


- EJERCICIO DE APLICACIÓN CSS

Crear una clase por propiedad anteriormente vista y luego aplicarlas en párrafos de texto.


1.5.3. Propiedades de lista.

LIST-STYLE-TYPE: especifica el tipo de marcador de ítems de lista en una lista.

LIST-STYLE-IMAGE: especifica la imagen de viñeta.

LIST-STYLE-POSITION: especifica si la viñeta es interior o exterior de la caja de contenido.

LIST-STYLE-TYPE:

Especifica el estilo de viñeta que tendrá la lista según el valor indicado.

Los posibles valores son:

<html><head><title>Texto en CSS </title><style type="text/css">.separaLetras{letter-spacing:15px;}.separaPalabras{word-spacing:30px;}</style></head><body><p class="separaLetras">Las letras estan separadas en este parrafo</p><p class="separaPalabras">en este parrafo las palabras estan separadas</p></body></html>


· None: No muestra ninguna viñeta en la lista.

Valores gráficos:

· Disc: Muestra un círculo relleno, este es el valor por defecto del <ul>.

· Circle: Muestra un círculo sin relleno.

· Square: Muestra un pequeño cuadro.

Valores numéricos: · Decimal: El marcador de viñeta es un número, es el valor por defecto del

<ol>.

· Decimal-leading-zero: El marcador de viñeta es un numero con un cero a la izquierda (01,02,03,etc).

· Lower-roman: El marcador es la menor romana (i, ii, iii, iv, v, etc.).

· Upper-roman: El marcador es la mayor romana (I, II, III, IV, V, etc.).

· Armenian: EL marcador es la numeración armenia.

· Georgian: El marcador es la numeración georgiana.

· Hebrew: El marcador es la numeración Hebrea.

· Hiragana: El marcador es la numeración Hiragana.

· Katakana: El marcador es la numeración Katana.

I, II, III, IV, V, VI, VII,


Valores alfanuméricos: · Upper-latin: El marcador son caracteres latinos en mayúscula.

· Lower-alpha: El marcador son caracteres alfabéticos en minúscula.

· Lower-greek: El marcador son caracteres griegos.

· Lower-latin: El marcador son caracteres latinos en minúscula.

· Upper-alpha: El marcador son caracteres alfabéticos en mayúscula.

Ejemplo.

LIST-STYLE-IMAGE:

Permite reemplazar las viñetas estandarizadas por una imagen personalizada, indicando como valor la ruta de la imagen.

Item 1Item 2Item 3

Ejemplo:

LIST-STYLE-POSITION:

Muestra las viñetas en la parte exterior o inferior según el valor indicado.


· Inside: Viñeta interior.

· Outside: Viñeta Exterior.

ol{list-style-type:lower-alpha;}

ol{list-style-image:url(estrella.gif);}


Ejemplo.

- EJERCICIO DE APLICACIÓN CSS

Crear una clase por propiedad anteriormente vista y luego aplicarlas en listas diferentes.


botón 1

botón 2

botón 3

botón 1

botón 2

botón 3

Outside: Inside:

ul{list-style-position: inside;}

<html><head><title>listas en CSS </title><style type="text/css">.armenia{list-style-type:armenian;}.katana{list-style-type:katakana;}</style></head><body><h3>lista armenia </h3><ul class="armenia"><li>item 1</li><li>item 2</li><li>item 3</li></ul><h3>lista Katana</h3><ul class="katana"><li>item 1</li><li>item 2</li><li>item 3</li></ul></body></html>


1.5.4. Propiedades de Fondo.

BACKGROUND-COLOR: Define el color de fondo de un elemento HTML.

BACKGROUND-IMAGE: Define la imagen de fondo de un elemento HTML.

BACKGROUND-REPEAT: Controla el tipo de repetición de la imagen de fondo.

BACKGROUND-ATTACHMENT: Controla si la imagen de fondo se mueve o permanece fija cuando se hace scroll en la ventana del navegador.

BACKGROUND-POSITION: Controla la posición de la imagen de fondo.

BACKGROUND-COLOR:

Define el color de fondo de la mayoría de los elementos HTML según el valor.

Las 3 formas más utilizadas para indicar el color son:

Ejemplo:

BACKGROUND-IMAGE:

Establece una o varias imágenes de fondo en un elemento HTML.

El fondo de un elemento es el tamaño total del elemento, incluido el relleno y el borde (pero no la margen) Ver Modelo de Cajas.

Por defecto, una imagen de fondo se ubica en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente.

Ejemplo: Si la imagen de fondo es más grande que el contenedor.

p{background-color:#446633;}

body{background-color:#006633;}/*hexadecimal*/h3{background-color:red;}/*nombre en inglés*/ul{background-color:rgb(13,255,0);}/*valor en rgb*/


Ejemplo: Si la imagen es más pequeña que el contenedor.

Imagen Original. Contenedor background-image: url(”imagen.jpg”);

Imagen Original. Contenedor background-image: url(”imagen2.jpg”);

Imagen Original. Contenedor background-image: url(”imagen.jpg”);

Imagen Original. Contenedor background-image: url(”imagen2.jpg”);


background-image utiliza como valor la url del sitio donde se encuentra la imagen.

Ejemplo:

BACKGROUND-REPEAT:

Controla el tipo de repetición de la imagen de fondo según el valor, solo se puede determinar uno de los siguientes valores.

· repeat: Valor por defecto, repite la imagen en “X” y “Y”.

· repeat-x: Repite la imagen solo en el eje “X”.

· repeat-y: Repite la imagen solo en el eje “Y”.

· no-repeat: No repite la imagen ni en “ x “ o en “ y “.

Ejemplo de uso:

Imagen repitiéndose en “x” en el contenedor.

body{background-image:url(foto.png);}

Imagen Original. Contenedor la imagen se repite en X

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

}background-repeat: repeat-x;


Imagen repitiéndose en “Y” en el contenedor.

Imagen no-repeat

Ejemplo:



}background-repeat:repeat-y;



}background-repeat: no-repeat;

body{background-repeat: repeat-x;}


BACKGROUND-ATTACHMENT:

Controla si la imagen de fondo se mueve o permanece fija cuando se hace scroll en la ventana del navegador.

Sus valores son.

· Fixed: El fondo permanece estático, aunque se desplace el contenido de la pagina.

· Scroll: Valor por defecto, la imagen de fondo se desplaza con el scroll de la página.

Ejemplo:

BACKGROUND-POSITION:

Controla la posición de la imagen de fondo, según el valor.


· Left top: posiciona la imagen en la parte superior izquierda.

· Left center: posiciona la imagen en la parte izquierda y al medio.

· Left bottom: posiciona la imagen en la parte inferior izquierda.

· Right top: posiciona la imagen en la parte superior derecha.

· Right center: posiciona la imagen en la parte derecha y al medio.

· Right bottom: posiciona la imagen en la parte inferior derecha.

· Center top: posiciona la imagen en la parte central superior.

· Center center: posiciona la imagen en la parte central en el medio.

body{background-image:url(dracula.jpg);background-attachment:fixed;}


· Center bottom: posiciona la imagen en la parte central inferior.

Ejemplos gráficos:

También se pueden pasar los valores por coordenadas en (Pixeles “px” o Porcentajes “%”) donde el primer valor será la posición horizontal y el segundo valor la posición vertical.

Ejemplo:

Left top. Left center. Left bottom.

Right top. Right center. Right bottom.

Center top. Center center. Center bottom.

Posición Horizontal (x). Posición Vertical (y).

body{background-image:url('bola.gif');background-repeat:no-repeat;background-position: 10px 200px;}


1.5.5. Propiedades de Cuadro.

WIDTH: Define el ancho del elemento HTML.

HEIGHT: Define el alto del elemento HTML.

MARGIN: Especifica las márgenes del elemento HTML.

PADDING: Especifica el relleno del elemento HTML.

BORDER: Especifica el borde del elemento HTML.

FLOAT: Posiciona un elemento HTML de forma flotante.

CLEAR: No reconoce elementos flotantes.

WIDTH:

Define el ancho de los elementos html tomando como valor la media en (Pixel, Picas, Porcentaje, Emes, Equix, etc) o poner el valor en auto y el navegador lo calcula de manera automática.

Ejemplo:

HEIGHT:

Define el alto de los elementos html tomando como valor la media en (Pixel, Picas, Porcentaje, Emes, Equix, etc) o poner el valor en auto y el navegador lo calcula de manera automática.

Ejemplo:

Ejemplo combinando width y height:

p{width:300px;}

p{height:300px;}


MARGIN:

Define la margen de los elementos HTML tomando como valor la media en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

La margen se puede especificar de diferentes formas, si coloca un solo valor la margen es global, es decir para todos los lados del elemento.

También se puede especificar cuánto de margen se quiere en cada lado, dándole los valores en el orden de las manecillas del reloj, empezando desde las 12 (arriba, derecha, inferior, izquierda).

p{width:100px;height:100px;background-color:#00CC33;}

Este es unpárrafo con

ancho y alto.

{margin:100px;}

Elemento HTML

100px100px

100px100px

100px100px 100px100px

{margin:40px 50px 70px 30px;}

Superior. Derecha. Inferior. Izquierda.

Elemento HTML

40px40px

70px70px

30px30px 50px50px


Existen otras propiedades para modificar la margen del elemento HTML.

Margin-top: Especifica la margen superior del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Margin-right: Especifica la margen derecha del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Margin-bottom: Especifica la margen inferior del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Margin-left: Especifica la margen izquierda del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Ejemplo:

PADDING:

Define el relleno de los elementos HTML tomando como valor la media en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

El padding aumenta el ancho y el alto del elemento HTML.

El padding (relleno) se puede especificar de diferentes formas, si coloca un solo valor el relleno será global, es decir para todos los lados del elemento.

p{margin-left:30px;margin-right:45px;margin-bottom:50px;margin-top:90px;}

Elemento HTML sin Padding.

Elemento HTML con Padding.


También se puede especificar cuánto de relleno se quiere en cada lado, dándole los valores en el orden de las manecillas del reloj empezando desde las 12 (arriba, derecha, inferior, izquierda).

Existen otras propiedades para modificar el padding del elemento HTML.

Padding-top: Especifica el relleno superior del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Padding-right: Especifica el relleno derecha del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Padding-bottom: Especifica el relleno inferior del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Padding-left: Especifica el relleno del elemento según el valor en (Pixel, Picas, Porcentaje, Emes, Equis, etc).

Ejemplo:

Elemento HTML con 20 px Padding.

20px

20px

20px

20px

{padding:20px;}

Elemento HTML con Padding.

10px

30px

70px 40px

{padding:10px 40px 30px 70px;}

.caja{padding-top:10px;padding-left:45px;padding-right:33px;padding-bottom:50px;}


BORDER :

Define el borde de un elemento HTML especificándole el color, estilo y tamaño del borde separados por un espacio, en caso que no especifique alguno de los tres valores, CSS le dará un valor por defecto, el tamaño del borde aumenta el alto y ancho del elemento HTML.

Ejemplo:

Si no se declaran algunos de los valores, CSS lo pondrá por defecto.

En el siguiente ejemplo pondrá el valor de tamaño de manera automática.

p{border:5px #006666 solid;}

Grosor. Color. Estilo de Borde.

Párrafo con borde.

p{border:#FF0000 solid;}

Color. Estilo de Borde.

Párrafo con borde.

El valor por defecto de color es el negro y el del estilo de borde es none.

Valores de estilo de borde:

-None: No se muestra ningún borde.

-Hidden: Esconde los bordes, su visualización en el navegador es muy parecida al none.

-Dotted: Borde punteado alrededor del cuadro.

-Dashed: Borde discontinuo.

-Solid: Borde continuo, formado por una línea recta continua.


-Double: Borde doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco.

-Groove: Borde hundido, en la interfaz de usuario parece que se encuentra por debajo del nivel de la superficie de la pantalla.

-Ridge: Borde saliente, en la interfaz de usuario parece saldrá del nivel de la pantalla.

-Inset: Borde hundido, hacer parecer al elemento que tiene el borde como si estuviera por debajo del nivel normal de la pantalla.

-Outset: Borde saliente, hacer parecer al elemento que tiene el borde como si estuviera por encima del nivel normal de la pantalla.

CSS tiene otras propiedades que permiten modificar el borde de manera más segmentada.

Border-style: Define el estilo de borde según el valor (none, solid, inset, ouset, dotte, etc).

Border-color: Define el color del borde según el valor; se pueden pasar los valores en: Ingles, valor RGB o Hexadecimal.

Border-widht: Define el ancho de borde según el valor, este se puede pasar en medidas (px, em, pt, etc) o con valores predeterminados:

· Thin: línea delgada.

· Medium: línea mediana.

· Thick: línea gruesa.

Otras propiedades de borde en CSS.

-Border-left: Define el borde del elemento HTML solo en el lado izquierdo.

-Border-top: Define el borde del elemento HTML solo en el lado superior.

-Border-right: Define el borde del elemento HTML solo en el lado derecho.

-Border-bottom: Define el borde del elemento HTML solo en el lado inferior.


-Border-left-style: Define el estilo de borde solo en el lado izquierdo.

-Border-left-color: Define el color de borde solo en el lado izquierdo.

-Border-left-width: Define el ancho de borde solo en el lado izquierdo.

-Border-right-style: Define el estilo de borde solo en el lado derecho.

-Border-right-color: Define el color de borde solo en el lado derecho.

-Border-right-width: Define el ancho de borde solo en el lado derecho.

-Border-top-style: Define el estilo de borde solo en el lado superior.

-Border-top-color: Define el color de borde solo en el lado superior.

-Border-top-width: Define el ancho de borde solo en el lado superior.

-Border-bottom-style: Define el estilo de borde solo en el lado inferior.

-Border-bottom-color: Define el color de borde solo en el lado inferior.

-Border-bottom-width: Define el ancho de borde solo en el lado inferior.

Float.

FLOAT:

En Html los elementos se van presentado en un mismo flujo uno tras otro, lo que hace la propiedad float es sacarlo de este flujo y ponerlo a flotar según el valor especificado.

Valores float:

Left: Flota el elemento HTML a la izquierda.

Right: Flota el elemento HTML a la derecha.

None: No flota el elemento HTML.

Ejemplo float.


CLEAR: Cuando un elemento esta flotando el siguiente en el flujo pasa a ocupar su lugar, el clear no permite que esto ocurra. Tiene los siguientes valores:

Left: no ocupa el lugar de otro elemento que este flotando a la izquierda.

Right: no ocupa el lugar de otro elemento que este flotando a la derecha.

Both: no ocupa el lugar de otro elemento sin importar para donde este flotando.

Float.

Vista lateral.

Float.

Clear. Clear.

Al decirle al elemento amarillo que flote, sale del flujo normal y el azul pasa a ocupar su posición, no se alcanza a ver porque el amarillo queda sobre el.

Supongamos que se mira desde otro punto de vista.


2. Novedades CSS 3.

CSS 3 es una actualización de la versión del lenguaje CSS, que permite crear diseños más dinámicos y elaborados, ofrece más soporte a diferentes necesidades web.

EL CSS 3, trae nuevos mecanismos y propiedades que permiten un mayor control de la parte gráfica por parte del programador, sin tener que utilizar Hacks o trucos.

Con CSS3, se pueden crear bordes redondeados, añadir sombra a los diferentes elementos, utilizar una imagen como borde, etc.

En este documento se verán las nuevas propiedades y herramientas de CSS tales como:

· Fondos y bordes.

· Modelado de cajas.

· Aplicaciones de texto.

· Transformaciones 2d y 3d.

· Animaciones.

· Múltiples capas.

· Interfaz de Usuario.

· Selectores.

Nota: La forma de aplicar el CSS sobre el HTML no cambia en absoluto, el CSS3 tan solo es una actualización del lenguaje CSS.

2.1. Compatibilidad de CSS3 con los navegadores.

Cuando el CSS3 se estableció muchas de sus propiedades no eran compatibles con los navegadores, para solucionar esto se crearon unos prefijos para ayudar al navegador a soportar las nuevas propiedades.


-moz- para Mozilla.

-webkit- para Chrome y Safari.

-o- para Opera.

-ms- Microsoft Explorer.

Claro que la rápida actualización de los navegadores, hace que estos prefijos no sean necesarios, igual es recomendable manejarlos porque muchos usuarios no cuentan con la última actualización de los navegadores.

Ejemplo de uso del prefijo.

Simplemente se especifica la propiedad y luego se vuelve a especificar pero esta vez con el prefijo del navegador al que le quiero dar soporte.

En la actualidad los últimos navegadores soportan la gran mayoría de las propiedades CSS3.

2.2. Background CSS3.

Nuevas propiedades de manejo de fondos.

Multiples fondos en CSS.

Background-origin.

Background-clip.

Background-size.

2.2.1. Multiples fondos en CSS.

CSS3 permite poner varias imágenes de fondo en un mismo contenedor, a través de la propiedad background o background-image, solo se tienen que escribir los valores de las diferentes imágenes y luego separarla por comas(,).

border-radius:25px;-moz-border-radius:25px


Es decir se llama una imagen y se especifica su comportamiento, luego separamos con una coma (,) y se llama la otra imagen.

Ejemplo : se utilizarán dos imágenes como fondo en el body.

Código CSS:

Resultado Navegador:

Nota: Las imágenes que se van vinculando se ubican de modo que la primera aparece sobre las siguientes, por eso la imagen de la paloma esta sobre las nubes.

Imagen 1 (avion.png) Imagen 2 (nubes_h.png)

body{background:url(avion.png) top right no-repeat,url(nubes_h.png) repeat-x;}

Imagen 1.

Imagen 2.


2.2.2. Background-origin.

La propiedad background-origen especifica el área de posicionamiento de las imágenes de fondo.

La imagen de fondo puede ser ubicada dentro del contenido, el padding, o el border del elemento contenedor.

Border.

Padding.

Contenido.

Sus posibles valores son

· Border-box : La imagen se ubica desde el borde.

· Padding-box : La imagen se ubica desde el padding de la pagina.

· Content-box: La imagen se ubica desde el contenido.

Ejemplo Código:

#caja{width:245px;

height:164px;background-color:#999999;padding:30px;background-image:url(escenario.jpg);background-repeat:no-repeat;border:10px dotted #000;background-origin:content-box;}


VISTA EN EL NAVEGADOR.

2.2.2. Background-clip.

Especifica el área de pintura del contenedor creando una algo similar a una máscara sobre él, la única parte del elemento que no se recorta es el borde.


· Border-box : el color de fondo se pinta desde el borde.

· Padding-box : el color de fondo se pinta desde el padding.

· Content-box: el color de fondo se pinta desde el contenido.

Nota: Si se tiene una imagen con origen posicionada en el borde y se hace un clip al contenido, la imagen se recortará.

Ejemplo:

#caja{width:245px;height:164px;background-color:#999999;padding:30px;background-image:url(escenario.jpg);background-repeat:no-repeat;border:10px dotted #000;background-clip:content-box;background-origin:border-box;}


VISTA EN EL NAVEGADOR.

2.2.3. Background-size.

Background-size: Medida / porcentaje / cover / contain; Especifica el tamaño de la imagen de fondo según el valor de la propiedad.

El valor del tamaño se puede especificar con las medida web, porcentajes o los valores predeterminados de background-size como son el cover y el contain.


MEDIDAS WEB.

PORCENTAJES.

COVER.

CONTAIN.

MEDIDAS WEB Y PORCENTAJES:

se pueden especificar las medidas de dos maneras:

Background-size:50px; si se especifica un solo valor este se tomara para ambos (Ancho y Alto).


Background-size:50px 200px; Si se especifican dos valores, el primer valor es el Ancho de la imagen y el segundo valor es el Alto.

Los porcentajes se aplican de igual manera, solo debemos tener en cuenta que el porcentaje será tomado con base en el contenedor del background-image.

COVER:

Escala la imagen al tamaño necesario para cubrir todo el contenedor donde se está especificando el background-image.

CONTAIN:

Escala la imagen al tamaño necesario para que pueda verse completa en el contenedor que se está especificando el background-image.

2.3. Border.

Nuevas propiedades de manejo de borde.

Border-radius.

Border-image.

Box-shadow.

2.3.1. Border-radius.

border-radius: medida| porcentaje;

El border-radius permite crear elementos de bordes redondeados, su forma de uso es fácil solo se debe poner como valor de la propiedad una medida o porcentaje.


Los valores de border-radius se pueden determinar de dos formas:

Si se especifica un solo valor, este será equivalente a los 4 lados. border-radius:10px;

Ejemplo:

Vista navegador:

Especificar el valor de radio lado por lado, estos valores se dan en el siguiente orden (superior izquierda, superior derecha) luego (inferior izquierda, inferior derecha).

Vista navegador:

#div{width:150px;height:100px;border-radius:10px; /*esto crea un radio de borde de 10px para todos los lados */background-color:#006666;padding:5px;color:#FFFFFF;

}

El div tiene bordes redondos.

border-radius:10px 5px 35px 60px;ejemplo #div{

width:150px;height:100px;border-radius:10px 5px 35px 60px;background-color:#990000;padding:5px;color:#FFFFFF;}


Propiedades específicas para modificar el de border-radius.

border-top-left-radius: Modifica el borde superior izquierdo.

border-top-right-radius: Modifica el borde superior derecho.

border-bottom-right-radius: Modifica el borde inferior derecho.

border-bottom-left-radius: Modifica el borde inferior izquierdo.

2.3.2. Border-image.

Define una imagen como borde del elemento, a la fecha de la creación de este documento (2012), solo el navegador GOOGLE CHROME es compatible para el uso de esta propiedad.

MOZILLA, SAFARI Y OPERA, necesitan el prefijo para ser compatible.

EXPLORER, no soporta el border-image.

Nota: los navegadores están en constantes actualizaciones, revise sí ya la propiedad esta soportada en su navegador.

El border-image necesita varios valores para funcionar correctamente.

border-image: source slice width outset repeat;

border-image: Imagen desplazamientoImagen(#) ancho desbordamiento repetición;

El div tiene bordes redondos diferentes.

border-image:url(border.jpg)30 30 repeat;

Ruta Imagen. Ancho Imagen.

Repetición.Desplazamiento interno de la imagen.


-Primer valor source (imagen): Se establece la ruta de la imagen.

-Segundo valor slice (desplazamiento): Indica la forma de desplazar la imagen del borde hacia a dentro.(Requiere un poco de práctica entender bien el comportamiento, se recomienda usar como valor el alto de la imagen).

-Tercer valor width (Ancho): El ancho de la imagen en el borde.(Requiere un poco de práctica entender bien el comportamiento, se recomienda usar como valor el ancho de la imagen).

-Cuarto valor ouset (desbordamiento):

-Quinto valor repeat (repetición): establece la forma de repetición de la imagen, tiene tres posibles valores.

-Stretch: La imagen se expande para rellenar el área.

-Repeat: La imagen se repite en mosaico para rellenar el área (en ocasiones la imagen queda recortada en medio de la repetición).

-Round: La imagen se dispone en un mosaico repetido para rellenar el área. A diferencia de repeat, Este calcula cuantas veces se puede repetir acomodando el tamaño para que se establezcan los mosaicos necesarios.

Ejemplo:

Imagen (florLis.png).

30px Ancho, 30px Alto.

Código:

#DivCaja{width:300px;height:100px;background-color:#CCC;padding:5px;border-width:30px;border-image:url(border.jpg)30 30 round;-moz-border-image:url(borde.png)30 30 round;/*firefox*/-webkit-border-image:url(borde.png)30 30 round;/*safari*/-o-border-image:url(borde.png)30 30 round;/*opera*/

}


Vista navegador:

CSS3 además cuenta con unas propiedades independientes para cada uno de los valores del borde.(todavía no son compatibles con varios navegadores).

-Border-image-source: Para indicar la URL de la imagen.

-Border-image-slice: Indica el espacio de la imagen que será visible como borde.

-Border-image-width: Especifica el ancho del borde.

-Border-image-outset: Especifica el área de donde hasta donde se expande la imagen más alla del elemento.

-Border-image-repeat: Especifica el modo de repetición de la imagen.

2.3.3. Box-shadow.

Propiamente no es un borde de la caja, genera una sombra alrededor del elemento. Nota : en algunos navegadores necesita el prefijo para funcionar.

Box-shadow necesita varios valores para poder funcionar correctamente:

box-shadow: h-shadow v-shadow blur spread color inset;


box-shadow: sombraHorizontal sombraVertical Desenfoque Difuminar color posición;

-Primer valor (sombra horizontal) : Establece la posición de la sombra horizontal en medidas web.

-Segundo valor (sombra vertical) : Establece la posición de la sombra vertical en medidas web.

-Tercer valor (desenfoque) : Establece el desenfoque de la sombra en medidas web.

-Cuarto valor (Difuminado): Establece el desenfoque de la sombra en medidas web.

-Quinto valor (color): indica el color de la sombra en valores Hexadecimal, RGB y el nombre del color en inglés.

-Sexto valor (posición de sombra). Es opcional, tiene el valor intset que establece la parte interior de la caja, si el valor no se declara la sombra estará en el exterior de la caja.

Código:

Nota: si el nivel del blur es muy alto pasaría a verse más como un resplandor.

box-shadow:2px 10px 10px 10px #333 inset;

Sombra Vertical. Difuminar.

Color.Sombra Horizontal.

Posición sombra.

Desenfoque.

#DivCaja{width:300px;height:100px;background-color:#CCC;padding:5px;box-shadow:12px 12px 2px 2px #039;

}

Vista código.


2.4. Text. Nuevas propiedades de manejo de texto:

Text-shadow

Word-wrap

Text-overflow

@font-face

2.4.1. Text-shadow.

Especifica una sombra sobre el texto, es ideal para títulos más no para bloques de texto. A la fecha de la creación del documento (2012), Internet Explorer no soporta el text-shadow.

Esta propiedad necesita varios valores para funcionar

Text-shadow: h-shadow v-shadow blur color;Text-shadow: sombraHorizontal sombraVertical desenfoque color;

Primer valor (sombra Horizontal): Establece la posición de la sombra horizontal en medidas web.

Segundo valor (sombra vertical) : Establece la posición de la sombra vertical en medidas web.

Tercer valor (desenfoque) : Establece el desenfoque de la sombra en medidas web.

Cuarto valor (color): indica el color de la sombra en valores Hexadecimal, RGB y el nombre del color en inglés.

Código:

h1{text-shadow:2px 3px 1px rgb(255,0,0);}


Vista navegador:

Nota: si el nivel del blur es muy alto pasaría a verse más como un resplandor.

2.4.2. Word-wrap.

En ocasiones el texto de una página web contiene palabras muy largas que no caben en su contenedor y se desbordan de manera horizontal o modificar el tamaño de ancho de la caja.

Ejemplo:

Esto puede dañar la maquetación de la página.

La propiedad word-wrap evitará que esto pase.

Cuenta con los siguientes valores:

normal: valor por defecto, deja el comportamiento normal de la caja.

break-word: Permite a las palabras demasiado largas romperse y bajar a otro renglón para no romper con la caja.

Ejemplo Código:

Conociendo más sobre CSS

Si una persona grita,haaaaaaaaaaaaaaa!!!

.cuadro{width:100px;height:100px;border:1px solid #000;word-wrap:break-word;}

Vista Navegador:

Si una persona grita,haaaaaaaaaaaaaaa!!!


2.4.3 Text-Overflow.

Especifica lo que debe pasar cuando un texto se desborda de su elemento contenedor.

Text-overflow: clip|ellipsis|string;

Estos son sus dos valores más utilizados.

Clip: Corta el texto donde termina el recuadro.

Ellipsis: Corta y representa el texto cortado con puntos suspensivos(…).

Ejemplo Código:

2.4.4 @font-face.

Si la fuente tipográfica utilizada en el diseño no está instalada en el computador del usuario, esta no se visualizará en el navegador y será reemplazada por otra que el computador crea pertinente.

Antes del CSS3 los diseños tipográficos se limitaban a las fuentes estándar que se encuentran en la mayoría de los computadores.

Con CSS3, los diseñadores Web pueden utilizar cualquier tipo de fuente que el diseño requiera.

@font-face permite vincular una fuente que se encuentre en un servidor, para luego ser descargada en el navegador del usuario, cuando sea necesaria.

Este texto supera el tama

Este texto supera el ta...

.claseRecorte{width:150px;border:#000000 1px solid;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}


Primero se define un nombre de la fuente (Por Ejemplo: MiFuente), a continuación de esto se selecciona el archivo.

Luego para utilizar la fuente en un elemento HTML la llamamos a través del font-family.

Nota: Recuerde que algunas fuentes tienen archivos independientes para (italic, bold).

2.5. Transform.

CSS3 permite transformar las cajas y su contenido, para diseñar nuevos efectos visuales, con el uso de la propiedad transform.

@font-face define las fuentes que serán utilizadas en el documento, permitiendo enriquecer el diseño y funcionalidad.

Firefox, Chrome, Safari, Opera permiten fuentes de extensión. .Ttf (True Type Fonts) y .Otf (fuentes OpenType).

Internet Explorer 9 sólo es compatible con fuentes de tipo. EOT (Embedded OpenType).El modo de implementar @font-face es la siguiente.

@font-face{font-family: MiFuente;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}

div{font-family:MiFuente;}


Los valores de la propiedad transform son:

Translate(valorX , valorY).

Rotate(numerodeg).

Scale(valorX , valorY).

Skew(value).

Matrix(value).

2.5.1. Translate.

Traslada al elemento de su punto original al punto específico según los valores otorgados a la izquierda (“X”) y superior (“Y”).

Código:

Nota: En este documento la representación de la vista del navegador se mostrará el elemento original de forma opaca para hacer la comparación del cambio y comprenderlo mejor.

Vista en el navegador:

#caja{width:100px;height:100px;background-color:#906;transform:translate(50px,50px);-ms-transform:translate(50px,50px); /* IE 9 */-webkit-transform:translate(50px,50px);/*Safari y Chrome */-o-transform: translate(50px,50px); /* Opera */-moz-transform: translate(50px,50px); /* Firefox *//*el elemento se moverá 50 pixeles a la izquierda y 50 pixeles abajo del top*/}

Original.

Transformado.


2.5.2. Rotate

Se rota al elemento en el sentido de las manecillas del reloj según el valor especificado, si se especifica un valor negativo rotará en sentido contrario a las manecillas del reloj.

Al valor se le debe agregar la palabra deg que es la abreviación de degrees (grados en inglés).

Ejemplo:

Vista Navegador:

2.5.3. Scale(x,y).

Aumenta o disminuye el tamaño del elemento según los valores especificados (x,y).

El valor se especifica en números enteros, este número indica cuantas veces aumenta o disminuye el tamaño que ya está establecido en el elemento.

Ejemplo: si el valor es 2, el elemento aumentará dos veces su tamaño.

#caja{width:100px;height:100px;background-color:#906;transform: rotate(40deg);-ms-transform: rotate(40deg); /* IE 9 */-webkit-transform: rotate(40deg); /* Safari y Chrome */-o-transform: rotate(40deg); /* Opera */-moz-transform: rotate(40deg); /* Firefox */

}

Transformado.Original.

Original.


Código:

Vista del Navegador:

2.5.4. Skew(ejeX, ejeY).

El elemento se inclina según los valores dados en el eje horizontal “X” y el eje vertical “Y”.


Código:

#caja{width:100px;height:100px;background-color:#906;transform:scale(3,2);-ms-transform:scale(3,2); /* IE 9 */-webkit-transform:scale(3,2); /* Safari y Chrome */-o-transform:scale(3,2); /* Opera */-moz-transform:scale(3,2); /* Firefox */

}

Transformado.

#caja{width:100px;height:100px;background-color:#906;transform:skew(40deg,30deg);-ms-transform: skew(40deg,30deg);/*IE9 */-webkit-transform: skew(40deg,30deg);/*Safari y Chrome*/-o-transform: skew(40deg,30deg);/*Opera*/-moz-transform: skew(40deg,30deg);/*Firefox*/

}



2.5.5. Matriz. (1,2,3,4,5,6).

El método matriz permite combinar varios de los valores de transform, se le deben pasar 6 valores numéricos.

Los primeros valores son de modificación de escala y los últimos de posición. (Practica modificando el css para ver diferentes resultados).

Los últimos dos valores requieren las medidas en pixeles, solo para firefox.

Código:


Original. Transformado.

Ejemplo #caja{width:100px;height:100px;background-color:#906;transform:matrix(0.8,0.5,-0.5,0.8,3,3));-ms-transform:matrix(0.8,0.5,-0.5,0.8,3,3);/*IE9 */-webkit-transform:matrix(0.8,0.5,-0.5,0.8,3,3);/*Safari y Chrome*/-o-transform:matrix(0.8,0.5,-0.5,0.8,3,3);/*Opera*/-moz-transform:matrix(0.8,0.5,-0.5,0.8,3px,3px);/*Firefox*/

}


Original.

Original.


2.5.6. Transform 3D.

El método transform también permite modificar el eje “Z” de la profundidad el cual visualmente le agrega un efecto 3d.

Permite que la rotación se realice sobre el propio eje del elemento generando un efecto visual de 3d.

Valores 3d de transform especiales para esto son:

RotateX ()

RotateY ()

Estos valores a la fecha de la creación de este documento (2012), no funcionan para OPERA y EXPLORER.

RotateX (numero+deg)

Rota al elemento en su propio eje “x”, según el valor especificado.


Ejemplo:

Vista en el Navegador:

#caja{width:100px;height:100px;background-color:#906;transform:rotateX(120deg);-webkit-transform:rotateX(120deg);/* Safari y Chrome */-moz-transform:rotateX(120deg); /*Firefox */}


Transformado.

Original.


LRotateY (numero+deg).

Rota al elemento en su propio eje “y”, según el valor especificado.


Ejemplo:


Valores 3d del transform

La propiedad transform cuenta con otros valores para el manejo del 3d, su manejo es similar a las anteriormente vistas, solo que en estas propiedades también se especifica el eje “z”.

Estos valores a la fecha de la creación de este documento (2012), no son validos en algunos Navegadores.

TranslateX (valor X ): Traslada al elemento de su punto original al punto especifico según el valor otorgado en el eje “X”.

TranslateY (valor Y ): Traslada al elemento de su punto original al punto especifico según el valor otorgado en el eje “Y”.

#caja{width:100px;height:100px;background-color:#906;transform:rotateX(60deg);-webkit-transform:rotateX(60deg);/* Safari y Chrome */-moz-transform:rotateX(60deg); /*Firefox */}


Original.

Transformado.


TranslateZ (valor Z ): Traslada al elemento de su punto original al punto especifico según el valor otorgado en el eje “Z”.

Translate3d(valor X, valor Y, valor Z):Traslada al elemento de su punto original al punto específico según los valores otorgados a la izquierda (“X”), superior (“Y”) y profundidad (“Z”).

ScaleX(valor X): Aumenta o disminuye el tamaño del elemento según el valor otorgado en ancho. (Eje “X”).

ScaleY(valor Y): Aumenta o disminuye el tamaño del elemento según el valor otorgado en alto. (Eje “Y”).

ScaleZ(valor Z): Aumenta o disminuye el tamaño del elemento según el valor otorgado en la profundidad. (Eje “Z”).

Scale3d(valor X, valor Y, valor Z): Aumenta o disminuye el tamaño del elemento según los valores otorgados en, “X”, “Y” y “Z”.

RotateZ (numero+deg) : Rota al elemento en su propio eje “Z”, según el valor especificado. Al valor se le debe agregar la palabra deg que es la abreviación de degrees (grados en inglés).

2.6. Perspectiva.

2.6.1. Perspective(valor).

La propiedad perspectiva cambia el punto de vista de los elementos modificando su perspectiva.Nota: La propiedad sólo afecta a la perspectiva 3D de elementos transformados.

La propiedad perspective a la fecha de la creación de este documento (2012) solo es compatible con CHROME y SAFARY a través del prefijo –webkit-.

Al definir la propiedad perspectiva de un elemento, son los elementos anidados en el los que reciben la vista en perspectiva, no el propio elemento.


Elemplo: se tiene un div1 contendor de un div2, al aplicar la propiedad al div 1 esta se verá reflejada en el div 2.


2.6.2. Perspective-origin(x, y).

Esta propiedad cambia el punto fuga del elemento cambiado el origen de la perspectiva.

Este punto se define con las coordenadas de los ejes (x , y).

Ejemplo :

#div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;perspective:150;-webkit-perspective:150;/* Safari y Chrome */}#div2{padding:50px;border: 1px solid black;background-color: red;-webkit-transform: rotateX(45deg);/* Safari y Chrome */}

Div 1 sin perspectiva.

Div 2 Perspectiva.




2.7. Transiciones en CSS3.

Las transiciones en CSS3 son efectos que permiten a un elemento poco a poco cambiar de un estilo a otro.

Ciertas transiciones son respuesta a eventos automáticos o desencadenados por el usuario, es decir el evento de un click sobre un elemento puede desencadenar una transición.

Estas transiciones no son compatibles con las últimas versiones de internet Explorer (7 y 8).

#div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;perspective:150;perspective-origin: 2% 80%; /* Safari y Chrome */-webkit-perspective:150;/* Safari y Chrome */-webkit-perspective-origin: 2% 80%; /* Safari y Chrome */}#div2{padding:50px;border: 1px solid black;background-color: red;-webkit-transform: rotateX(45deg);/* Safari y Chrome */}


Div 2 Perspectiva.



Para los otros navegadores es necesario el uso del prefijo.

Para aplicar las transiciones en CSS se deben declarar dos cosas:

Especificar la propiedad CSS a la que se le desea agregar un efecto.

Especificar la duración del efecto. (Si la duración no se especifica, la transición no se ejecuta, ya que el valor predeterminado es 0).

La transición se iniciará cuando la propiedad especificada cambie de valor. Un ejemplo muy común de cambio de propiedad CSS sería cuando un usuario pasa el ratón sobre un elemento (div:hover).

Ejemplo de uso:

Se crea un div y se especifica que la transición comenzará cuando el ancho del documento cambie.

Luego se aplica al div la pseudoclase: hover en la que se modificará el ancho del div.


Nota: Se recomienda ejecutar cada ejemplo en el navegador, ya que es la mejor forma de ver las animaciones de la transición.

#caja1{width:100px;height:100px;background-color:green;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}

#caja1:hover{width:200px;}

Simulación de transición.

A. B. C. D.


2.7.1. Transition.

Indica a que propiedad del elemento se le aplicará una transición al momento del cambio.

Modo de uso

Transition: propiedad duración (estilo de efecto “opcional”) (retardo “opcional”);

Se especifica la propiedad, la duración de la transición, que estilo de efecto tendrá y en cuanto tiempo se ejecutará una vez realizado el evento, los dos últimos son opcionales.

La propiedad transition es la forma corta de declarar una transición, ya que CSS cuenta con una propiedad específica que declara cada uno de estos valores anteriormente vistos.

2.7.2 Transition-property - transition-duration.

transition-property Especifica a que propiedad del elemento se le aplicará la transición, si la propiedad no sufre ninguna modificación la transición nunca se ejecutará.

transition-duration Especifica cuál será el tiempo de duración de la transición.Es necesario que ambas propiedades transition-property y transition-duration estén declaradas para su correcto funcionamiento.

Ejemplo:

Efecto.

transition:width 2s ease-in 3s

Duración. Retardo.

Propiedad.


2.7.3. Transition-timing-function.

Especifica qué tipo de velocidad tendrá el efecto que tiene la transición.

Los posibles valores son:

2.7.4 Transition-delay.

Específica el tiempo de espera para iniciar la transición una vez se ha presentado el evento. Es decir retarda el inicio de la transición según el valor en segundos.

#caja1{width:100px;height:100px;background:red;transition-property: width;transition-duration: 2s;-moz-transition-property: width; /* Firefox 4 */-moz-transition-duration: 2s; /* Firefox 4 */-webkit-transition-property: width; /* Safari y Chrome */-webkit-transition-duration: 2s; /* Safari y Chrome */-o-transition-property: width; /* Opera */-o-transition-duration: 2s; /* Opera */}

Linear: El efecto de transición tiene la misma velocidad de principio a fin (equivalente en cubic-bezier (0,0,1,1)).

Ease: El efecto de transición tiene un comienzo lento, luego rápido y termina lentamente (equivalente en cubic-bezier (0.25,0.1,0.25,1)).

Ease-in: El efecto de transición tiene un comienzo lento (equivalente en cubic-bezier (0.42,0,1,1)).

Ease-out: El efecto de transición tiene un final lento (equivalente en cubic-bezier (0,0,0.58,1)).

Ease-in-out: El efecto de transición tiene un comienzo y final lento (equivalente en cubic-bezier (0.42,0,0.58,1)).

Cubic-bezier(n,n,n,n): Permite definir la curva de velocidad por parte del programador, con valores numéricos entre un rango de 0 y 1.


Ejemplo:

La transición esperará dos segundos para iniciar.

2.8. Animaciones en CSS.

Css3 trae una nueva forma de hacer animaciones web, sin tener que recurrir a lenguajes complementarios como JAVASCRIPT.

La base de la animación en CSS es por fotogramas claves, es decir que en la programación se indica el punto clave de la animación y el código completará la secuencia automáticamente.

Ejemplo, se determina el punto inicial y punto final de la animación, el navegador se encarga de completar la secuencia de transición.

Los fotogramas clave le indican a la animación qué cambios debe tener, en este caso tenemos un fotograma clave que indica cómo se inicia y un fotograma clave indicando como termina, como resultado se tiene un círculo que se desplaza de un lado a otro cambiando de color.

Si indicamos más fotogramas claves la animación tendrá más movimientos y transiciones y se hará más compleja.

#caja1{width:100px;height:100px;background-color:green;transition-property:width;transition-duration:5s;transition-delay:2s;}

Fotograma Clave.

Fotograma Clave.


Para crear animaciones en CSS primero se deben especificar los fotogramas claves, luego se implementan en algún selector para poder ejecutar la animación.

Esto significa que se pueden utilizar los mismos fotogramas claves para mover diferentes elementos.

Nota: Para entender bien los conceptos es necesario ejecutar los ejemplos en el navegador.

2.8.1. Fotogramas Clave.

Los fotogramas clave cambian en cierta forma al momento de crearse ya que no se declaran con un selector sino a unas palabras clave, también llevarán llaves ({}) interiores por lo que se debe tener mucho cuidado al abrir y cerrar llaves.

Fotograma Clave.

Fotograma Clave.

Fotograma Clave.


Su creación también necesita prefijo para los diferentes navegadores.

Esta propiedad no es compatible con las últimas versiones de internet Explorer (7 y 8). Su sintaxis es la siguiente.

CSS cuenta con dos palabras clave a la hora de crear @keyframes.

From: Es el primer fotograma, las propiedades con las que inicia la animación.

To: Es el fotograma final, las propiedades con las que termina la animación.

Dado el caso que se necesiten más fotogramas, se especifican con el valor en porcentaje.

El valor del porcentaje indica a partir de qué momento en la animación se presentará el cambio del fotograma, teniendo como el principio el 0% y el final 100%.

En el código anterior indicamos en que porcentaje de la animación se presentan los cambios, es decir que al 25% el color de fondo estará amarillo.

@keyframes miAnimacion {

from {background-color:#FF0000;}

to {background-color:#0000FF;}

Fotogramas Claves. Nombre Animación.

Propiedad Inicial.

Propiedades a Animar.

Propiedad Final.

@keyframes colorFondo{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:red;}}

Porcentaje de laAnimación.


También se puede declarar los @keyframes mezclando los porcentajes y el (from, to).

Ejemplo:

Luego de tener los fotogramas claves definidos, se llama la animación en el selector que se quiere implementar la propiedad animation.

2.8.2. Animation.

animation es la propiedad que define cual animación que se va a ejecutar y en que selector.

Para su uso es necesario el prefijo de los diferentes navegadores.

Esta propiedad no es compatible con las últimas versiones de internet Explorer (7 y 8).

@keyframes miAnimacion{from {background:red;}30% {background:yellow;}73% {background:blue;}to {background:red;}}@-moz-keyframes miAnimacion {from {background:red;}30% {background:yellow;}73% {background:blue;}to {background:red;}}@-webkit-keyframes miAnimacion {from {background:red;}25% {background:yellow;}50% {background:blue;}to {background:red;}}@-o-keyframes miAnimacion {from {background:red;}25% {background:yellow;}50% {background:blue;}to {background:red;}}


Su sintaxis es:

animation: nombreAnimación Duración (estilo de efecto “opcional”) (retardo “opcional”) (repetición “opcional”) (flujo de Dirección “opcional”);

La duración se especifica con valores numéricos seguidos de letra (“s”) para segundo o las letras (“ms”) para milisegundos.

Como mínimo se tienen que declarar dos valores en animation, cual es la animación y cuál es su duración.

Nota: si la propiedad animation no tiene una duración especificada, no se reproducirá, porque el valor por defecto es 0.

Ejemplo:

animation:myFirst 5s linear 1s 3 alternate;

Flujo de Dirección.Duración. Retardo.

Nombre Animación. Estilo de efecto Repetición.

/*Se crea la animación*/@keyframes cambioColor{from {background-color:red; left:0px}30% {background-color:yellow; left:30px }73% {background-color:blue; left:60px }to {background-color:red; left:0px }}/*Se implementa la animación en un div de id cuadro*/#cuadro{

width:50px;height:50px;background-color:red;

position:absolute;animation:cambioColor 4s;

/*Recuerde el uso de los prefijos para los navegadores*//*La animación será cambio de color y durara 4 segundos*/}


2.8.3. Animation-name y animation-duration.

animation-name llama a la animación @keyFrame que debe ser usada en el elemento y animation-duration define cuántos segundos (s) o milisegundos (ms) debe durar la animación al completar un ciclo.

Animation-duration: se le indica el valor en números seguidos de letra (“s”) para segundo o las letras (“ms”) para milisegundos.

Las dos propiedades requieren el uso de prefijos para los navegadores.

Ejemplo:

2.8.4. Animation-timing-function.

Especifica qué tipo de velocidad tendrá el efecto que tiene la animación. Los posibles valores son:

#cuadro{position:relative;width:500px;height:300px;-moz-animation-name:myanimation;-moz-animation-duration:125ms;}

Linear: El efecto de transición tiene la misma velocidad de principio a fin (equivalente en cubic-bezier (0,0,1,1)).

Ease: El efecto de transición tiene un comienzo lento, luego rápido y termina lentamente (equivalente en cubic-bezier (0.25,0.1,0.25,1)).

Ease-in: El efecto de transición tiene un comienzo lento (equivalente en cubic-bezier (0.42,0,1,1)).

Ease-out: El efecto de transición tiene un final lento (equivalente en cubic-bezier (0,0,0.58,1)).

Ease-in-out: El efecto de transición tiene un comienzo y final lento (equivalente en cubic-bezier (0.42,0,0.58,1)).

Cubic-bezier(n,n,n,n): Permite definir la curva de velocidad por parte del programador, con valores numéricos entre un rango de 0 y 1.


Ejemplo:

2.8.5. Animation-delay.

Específica cuánto debe ser la espera para iniciar la animación, se le indica el valor en números seguidos de letra (“s”) para segundos o las letras (“ms”) para milisegundos.

Ejemplo:

#cuadro{position:relative;width:500px;height:300px;-moz-animation-name:myanimation;-moz-animation-duration:5s;-moz-animation-timing-function:ease-in;}

#cuadro{position:relative;width:500px;height:300px;-moz-animation-name:myanimation;-moz-animation-duration:6s;-moz-animation-timing-function:ease-in;-moz-animation-delay:4s;/*la animación comienza después de 4 segundos*/}

#cuadro{position:relative;width:500px;height:300px;-moz-animation-name:myanimation;-moz-animation-duration:6s;-moz-animation-timing-function:ease-in;-moz-animation-delay:4s;


2.8.6. Animation-iteration-count.

Indica cuántas veces debe reproducirse la animación, tiene dos formas de especificar la cantidad de repeticiones.

Valor numérico (2,3,4…etc): se indica el número de veces que se repite la animación. infinite: se repite infinitamente la animación.

Ejemplo:

2.8.7 Animation-direction.

Especifica si la animación debe revertirse. Tiene dos posibles valores. normal: valor por defecto, la animación transcurre en su flujo normal.

alternate: la animación correrá en reversa en una vez terminada la animación en su flujo normal.

#cuadro{width:5%;height:5%;top:0px;left:0px;position:absolute;background-color:#00FF00;-webkit-animation:cuadritoLoco;-webkit-animation-duration:5s;-webkit-animation-iteration-count:2;

/* la animación se reproducirá dos veces */}

Fotograma Final.

Fotograma Inicial.

Mitadde Animación.

animation-direction:alternate;


Ejemplo:

Nota: para que funcione la propiedad animation-direction, la animación debe repetirse más de una vez.

2.8.8. Animation-play-state.

La propiedad de animación-play-state especifica si la animación está en ejecución o en pausa, tiene dos valores:

Fotograma Final.

Fotograma Inicial. Mitad

de Animación.

animation-direction:alternate;

@-webkit-keyframes cuadritoLoco{from{top:0%; left:0%;}25%{top:95%; left:0%;}50%{top:95%; left:95%;}75%{top:0%; left:95%;}to{top:0%; left:0%;}}

#cuadro{width:5%;height:5%;top:0px;left:0px;position:absolute;background-color:#00FF00;-webkit-animation:cuadritoLoco;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;}


Paused: la animación se detiene.

Running: la animación se reproduce normalmente.

Nota: Esta propiedad funciona realmente bien con ayuda de javaScript, ya que se puede cambiar el valor de la propiedad desde el navegador.

(object.style.animationPlayState="paused").

2.9. Columnas múltiples.

En Css3 se puede crear texto de varias columnas estilos periódicos sin tener que recurrir a varios divs o tablas, simplemente utilizando las propiedades de manejo de columnas múltiples.

Propiedades de columnas múltiples:

· Column-count.

· Column-gap.

· Column-rule.

Las propiedades de columnas múltiples a la fecha de la creación de este documento (2012) requieren prefijos para los diferentes navegadores y no es compatible con las versiones de internet Explorer (7 y 8).

2.9.1. Column-count.

Especifica el número de columnas en el que debe ser dividido el texto, se puede aplicar a párrafos desde una clase o a un elemento que contenga varios párrafos.


Ejemplo código:


2.9.2. Column-gap.

La propiedad column-gap específica la separación entre las columnas, es decir se puede modificar el tamaño del medianil.

Ejemplo código:

Vista en el navegador, en este caso la separación entre columnas es de 10 pixeles.

#caja{-moz-column-count:3;width:800px;text-align:justify;

}

#caja{-moz-column-count:3;-moz-column-gap:10px;width:800px;text-align:justify;

}


2.9.3. Column-rule.

Esta es la manera rápida de modificar el ancho, el estilo y color del espacio que se encuentra entre las columnas (medianil).

Sintaxis:

column-rule: ancho estilo color;

Ejemplo código:

#caja{-moz-column-count:3;-moz-column-gap:20px;-moz-column-rule:3px solid #ff0000; /* Firefox */width:800px;text-align:justify;

}

sdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajs

sdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajsdnlkasjndlkajsnfksnadlfknasdlñkfsdnajs



2.9.4. Column-rule-width.

Específica el ancho de regla que se dibuja entre las dos columnas (medianil), se debe procurar no sobrepasar el ancho del column-gap ya que el divisor se montaría en el texto.

Sintaxiscolumn-rule-width: valor|thin|medium|thick;

Valor: se especifica el valor en medidas web.

Thin: Define una línea delgada.

Medium: Define una línea de grosor medio.

Thick: Define una línea de grosor ancho.

para poder visualizar la propiedad column-rule-width se debe especificar la propiedad column-rule-style.

2.9.5. Column-rule-style.

Especifica el estilo de la regla que se dibuja entre las dos columnas (medianil), sus posibles valores son similares a los de border.


Sintaxis:

column-rule-style:

none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

2.9.6. Column-rule-color.

Especifica el color de la regla que se dibuja entre las dos columnas (medianil).

Sintaxis:

Column-rule-color: valor;

Valor: el valor se puede especificar con el nombre de color en inglés, el valor hexadecimal o en rgb().

Ejemplo:

-None: No se muestra ningún borde.

-Hidden: Esconde los bordes, su visualización en el navegador es muy parecida al none.

-Dotted: Borde punteado alrededor del cuadro.

-Dashed: Borde discontinuo.

-Solid: Borde continuo, formado por una línea recta continua.

-Double: Borde doble, formado por dos l íneas rectas continuas separadas entre sí por un espacio en blanco.

-Groove: Borde hundido, en la interfaz de usuario parece que se encuentra por debajo del nivel de la superficie de la pantalla.

-Ridge: Borde saliente, en la interfaz de usuario parece saldrá del nivel de la pantalla.

-Inset: Borde hundido, hacer parecer al elemento que tiene el borde como si estuviera por debajo del nivel normal de la pantalla.

-Outset: Borde saliente, hacer parecer al elemento que tiene el borde como si estuviera por encima del nivel normal de la pantalla.


2.9.7. Column-span.

Especifica cuántas columnas debe extenderse el elemento HTML a lo largo de las diferentes columnas, esta propiedad se declara en un elemento HTML complementario por ejemplo el título del artículo.

La propiedad column-span a la fecha de la creación de este documento (2012) solo funciona para GOOGLE CHROME y OPERA con ayuda del prefijo.

Sintaxis: column-span: 1|all;

1: el elemento HTML se ubica en la primera columna (valor por defecto).

all: el elemento HTML se extiende por todas las columnas.

Ejemplo código:

#caja{-moz-column-count:3;-moz-column-gap:20px;-moz-column-rule-width:3px; /* Firefox */-moz-column-rule-style:double;-moz-column-rule-color:#ff0000;width:800px;text-align:justify;

}

#caja{-webkit-column-count:3;-webkit-column-gap:20px;-webkit-column-rule-width:3px; /* CHORME */-webkit-column-rule-style:double;-webkit-column-rule-color:#ff0000;width:800px;text-align:justify;

}#caja h1{

-webkit-column-span:all;}



2.9.8. Column-width.

Especifica el ancho de las columnas con base en su elemento contenedor, el número de columnas dependerá del ancho del elemento contenedor y el ancho que se especifica en la columna.

Sintaxis: Column-width: valor | auto;

Valor: se especifica el valor en medidas web.

Auto: el valor lo especifica de manera automática el navegador (valor por defecto).

Ejemplo código:

#caja{-webkit-column-width:100px;width:800px;

}



2.10. Opacity. La propiedad opacity especifica una transparencia en el elemento al que se le aplica.

El valor de la opacidad va desde “0 “(total transparencia) y “1” (Sin transparencia).

Ejemplo Código: Se harán tres divs con las mismas características solo se modificará la propiedad opacity.

#caja{width:100px;height:100px;background-color:#906;opacity:0.8;

}#caja2{

width:100px;height:100px;background-color:#906;opacity:0.6;

}#caja3{

width:100px;height:100px;background-color:#906;opacity:0.3;

}




Glosario.

Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.

Valor: establece el nuevo valor de la característica modificada en el elemento.


Bibliografía.

CSS Tutorial, En w3school, Escuela de desarrollo, Recuperado el 15 de junio de 2013, Dionible: http://www.w3schools.com/css3/

Curso CSS3, En Cristalab, Recursos de Diseño Web, Recuperado el 15 de junio de 2013, Dionible: http://www.cristalab.com/css3/

Manual de CSS3, En Desarrollo Web, Comunidad de desarrollo, Recuperado el 15 de junio de 2013, Dionible: http://www.desarrolloweb.com/manuales/css3.html

CSS3, en Programandola, Formación para desarrolladores, recuperado el 15 de junio de 2013.Dionible: http://programando.la/


Actividades de Afianzamiento.

Luego de haber estudiado detenidamente la información de este objeto de aprendizaje, lea cuidadosamente y resuelva las siguientes preguntas de selección múltiple con única respuesta.

1. @font-face se utiliza para

a. Incluir imágenes por medio de CSS.b. Para definir la estructura del documento CSS.c. Para vincular fuentes desde el servidor al cliente. d. Ninguna de la anteriores.

2. El prefijo –ms- que se usa para compatibilidad con el navegador

a. Google Crhome.b. Mozilla Firefox.c. Interene Explorer.d. Safari.

3. La estructura correcta de una sentencia CSS es

a. Selector { propiedad:valor;}.b. Propiedad{selecator:valor;}.c. Selector { propiedad:valor}.d. { Selector = propiedad:valor;}.

4. Para hacer relacionar un documento CSS desde HTML se una la etiqueta

a. <file>.b. <css>.c. <src>.d. <link>.


5. El siguiente codigo CSS body{ color:red; bgcolor:#000;}nos muestra como resultado

a. El cuerpo del docuemnto color rojo y el texto color negro.b. El cuerpo del documento color azul y el texto rojo. c. El cuerpo del docuemnto color negro y el texto rojo.d. El codigo CSS esta mas escrito.

6. Si quiero centrar el texto de mi etiqueta <p> debo en CSS utilizar la siguiente linea de código

a. <p>center.b. p{ text-align: center;}.c. p{ center: true;}.d. Ninguna de la anteriores.

Respuestas: 1 (c). 2 (c). 3(a). 4(d). 5(c). 6(b).


Control De Documento.

Construcción Objeto De Aprendizaje.

INTRODUCCIÓN CSS.

Experto Temático:

Asesor Pedagógico:

Producción Multimedia:

Programador:

Líder Experto Temático:

Líder línea de producción:

Luis Antonio Suárez Martínez.Maria Teresa Camargo Serrano.

Jesualdo Morantes Meza.

Oscar Ivan Uribe Ortiz.

Roberto Chajin Ortiz.

Tatiana Acosta Patiño.

Santiago Lozada Garcés.

Introducción CS

S2013

CSS Cascading Style Sheets (Hojas de Estilo en Cascada) es un lenguaje de hojas de estilo creado para controlar el aspecto de los documentos, es la mejor forma de separar los contenidos de su aspecto, es imprescindible para crear páginas de web profesionales, separar los contenidos y aspecto gráficos presenta muchas ventajas ya que obliga a crear documentos HTML bien definidos y con significado completo permitiendo así, mejor accesibilidad, reduce complejidad de su mantenimiento y permite la visualización del mismo documento en diferentes dispositivos como (pc, tablets, dispositivos móviles, etc).

En este OVA aprenderás los conceptos básicos de CSS con todos sus elementos, estructuras y correcta aplicación junto a las novedades que permite la versión CSS3.

desarrollo - catalinatics5.webnode.com.co · cascading style sheets (hojas de estilo en cascada)....

Documents