Css

Published on January 2017 | Categories: Documents | Downloads: 65 | Comments: 0 | Views: 536
of 70
Download PDF   Embed   Report

Comments

Content

CSS

Tabla de contenido
1. CSS
2. Introducción
i. ¿Qué es CSS?
ii. Navegadores
iii. Funcionamiento
3. Estructura
i. Sintaxis
ii. Comentarios
4. Selectores
i. Selectores básicos
5. Valores y unidades
i. Unidades de medida
ii. Unidades absolutas
iii. Unidades relativas
iv. Colores
6. Textos, fuentes y listas
i. Tipografías
ii. Tamaño
iii. Estilos
iv. Color
v. Espacio entre letras y palabras
vi. Espacio entre renglones
vii. Alineación del texto
viii. Decoración y transformación de texto
ix. Listas
7. Modelo de cajas
i. Modelo de cajas
ii. Alto y ancho
iii. Márgenes
iv. Relleno
8. Fondos y bordes
i. Fondos
ii. Color de fondo
iii. Imagen de fondo
iv. Repetición de imagen
v. Posicionamiento
vi. Bordes
vii. Color
viii. Estilo
9. Tipografía web
i. Tipografía web
ii. FontSquirrel Kit
iii. GoogleFonts
10. Gradientes
i. Gradientes
11. Flexbox
i. Flexbox
ii. Sintaxis
iii. Propiedades
2

CSS

12. Transiciones y transformaciones
i. Transiciones
ii. Transformaciones
13. Animaciones
i. Animaciones
14. Media queries
i. Media queries

3

CSS

¿Qué es CSS?
CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web
Consortium (W3C) con el fin de separar la estructura de la presentación.

CSS

4

CSS

Introducción
¿Qué es CSS?
Navegadores
Funcionamiento

Introducción

5

CSS

¿Qué es CSS?
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje de hojas de estilos creado
para controlar la apariencia de los documentos definidos con HTML.
Una vez creados los contenidos, se utiliza el lenguaje CSS para aplicar diseño en cada elemento: color, tamaño y tipo de
letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
1970 - Aparecen las primeras hojas de estilos.
1995 - W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML.
1996 - W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1".
Al día de la fecha, CSS va por el nivel 3.

¿Qué es CSS?

6

CSS

Navegadores
A la hora de armar tu propio sitio web, es imprescindible conocer el soporte de CSS en cada uno de los navegadores que
hay en el mercado.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores más utilizados por los
usuarios:
Navegador

Motor

Google
Chrome

WebKit

Completo desde la
versión 85 del motor

Completo

Todos los selectores, pseudo-clases y
muchas propiedades

Internet
Explorer

Trident

Completo desde la
versión 7.0 del
navegador

Completo

Todos los selectores, pseudo-clases y
muchas propiedades a partir de la versión
10.0 del navegador

Firefox

Gecko

Completo desde la
versión 1.0 del
navegador

Completo

Todos los selectores, pseudo-clases y
muchas propiedades

Safari

WebKit

Completo desde la
versión 85 del motor

Completo

Todos los selectores, pseudo-clases y
muchas propiedades

Opera

Presto

Completo desde la
versión 1.0 del
navegador

Completo

Todos los selectores, pseudo-clases y
muchas propiedades

Navegadores

CSS 1

CSS 2.1

CSS 3

7

CSS

Funcionamiento
Existen tres maneras de agregar CSS al HTML, en línea, dentro del archivo HTML o un archivo externo.
Dentro del archivo HTML: Con un etiqueta <style type="text/css"></style>
Dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los
estilos de la página. Dicha etiqueta tiene que estar siempre dentro de la etiqueta <head> .
El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas
las páginas que incluyen el estilo que se va a modificar.
Archivo externo: En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML
enlazan mediante la etiqueta <link> . Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es
.css .

Se pueden crear todos los archivos CSS que sean necesarios.
Lo primero que hay que hacer es crear un archivo.css, esto se puede hacer desde cualquier editor de código, como
Sublime o Dreamweaver.
El modo de enlazar dicho archivo dentro del HTML es mediantes la etiqueta <link> y al igual que en el ejemplo anterior,
esta debe estar dentro de la etiqueta <head> .
Ejemplo:

Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los archivos CSS
externos enlazado.
La etiqueta
rel: indica el tipo de relación que existe entre el archivo que estamos linkeando (en este caso, el archivo CSS) y la
página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
type: indica el tipo de archivo que estoy linkeando. Sus valores están estandarizados y para los archivos CSS su valor
siempre es text/css.
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede
apuntar a un recurso interno o externo al sitio web.
Funcionamiento

8

CSS

media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los
medios CSS y su funcionamiento.
En línea: Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas
situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.
Ejemplo:

Funcionamiento

9

CSS

Estructura
Sintaxis
Comentarios

Estructura

10

CSS

Sintaxis
La sintaxis de CSS, es bastante sencilla. Tiene tres elementos importantes. Selectores, propiedades y valores.
Cada selector, “selecciona” cual es el elemento/etiqueta del HTML al que se le va a estar aplicando el diseño. La
propiedad es el aspecto de ese elector, como por ejemplo, el color, el color de fondo, los márgenes, tamaños de tipografía,
etc.
Los valores, son esos que aplicamos a cada una de estas propiedades.
Un archivo CSS, está compuesto por muchos selectores y cada selector puede tener más de una propiedad.
Ejemplo:

El modo de escribir CSS es el siguiente:
Primero seleccionamos la etiqueta a la cual le queremos aplicar el diseño, por ejemplo p, después abrimos una llave y
debajo escribimos la propiedad que le queremos aplicar, en nuestro caso sería font-size , justo después de la propiedad,
escribimos : (dos puntos) y el valor, 14px . Al terminar de escribir el valor, se agrega un ; (punto y coma) y finalmente se
cierra con la llave.
A medida que empezás a agregar más y más pares propiedad-valor para cada selector CSS es importante que te
acuerdes de poner punto y coma (;) al final de cada línea.
El punto y coma le indica a las CSS que es el fin de un par propiedad-valor y que es el momento de continuar con el
siguiente.

Sintaxis

11

CSS

Comentarios
Al igual que vimos en HTML, CSS también permite incluir comentarios entre sus reglas y estilos. Los navegadores ignoran
por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara
nuestros archivos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */ , tal y
como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */

Es importante ver, que la sintaxis de los comentarios en CSS, es muy diferente a los del HTML.

Comentarios

12

CSS

Selectores
Selectores básicos

Selectores

13

CSS

Selectores básicos
Selector de etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo
selecciona todos los párrafos de la página:
p { ... }

Se pueden aplicar los mismos estilos a dos etiquetas diferentes, encadenando los selectores. En el siguiente ejemplo, los
títulos de sección h1 y h2 comparten los mismos estilos:

CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Se pueden incluir todos los
selectores separados por una coma (,) y el resultado de la siguiente regla CSS es equivalente a las dos reglas anteriores:

Selector descendiente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se
encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos de la página que se encuentren dentro de un elemento
<p> :

p span { color: red; }

Selectores básicos

14

CSS

Si el código HTML de la página es el siguiente:

<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>

Este estilo, solo se le va a aplicar a todos los elementos <span> que estén dentro de un elemento <p> , pero si en otra
parte del sitio tenemos un elemento que no esté dentro de un elemento <p> , entonces este estilo no se le aplica.
Selector de clase
Si queremos aplicar estilos a un elemento en particular de nuestra página, el mejor modo es utilizar el atributo class de
HTML sobre ese elemento. De esta manera le podemos indicar directamente la regla CSS que le queremos aplicar.
Ejemplo:

<body>
<p>Loem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>

Supongamos que le queremos aplicar estilos CSS sólo al primer párrafo, ¿Cómo hacemos? El selector de tipo o etiqueta
<p> no se puede utilizar porque seleccionaría todos los párrafos. El selector descendente (body p) tampoco se puede

utilizar porque todos los párrafos se encuentran en el mismo sitio. Entonces, lo que hacemos, es agregar a la etiqueta <p>
el atributo llamado class:

<body>
<p class="destacado">Loem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>

En el archivo CSS, se crea una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento.
Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class
con un punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por
lo que solamente el primer párrafo cumple esa condición.
Este tipo de selectores se llaman selectores de clase. La principal característica de este es que en una misma página
HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo
Ver ejemplo:

Selectores básicos

15

CSS

Selector de ID
A veces, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase
para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso
El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id . Este tipo de selectores
sólo seleccionan un elemento de la página ya que el valor del atributo id no se puede repetir en dos elementos diferentes
dentro una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo del
numeral ( # ) en vez del punto ( . ) como prefijo del nombre de la regla CSS:
#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a
destacado ).

Herencia
Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se
establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el
valor de esa propiedad.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { color: blue; }
</style>
</head>

El selector body solamente establece el color de la letra para el elemento <body> . No obstante, la propiedad color es una
de las que se heredan de forma automática, por lo que todos los elementos descendientes de <body> muestran ese
mismo color de letra. Entonces, establecer el color de la letra en el elemento <body> de la página implica cambiar el color
de letra de todos los elementos de la página.
Selectores básicos

16

CSS

Selectores básicos

17

CSS

Valores y unidades
Unidades de medida
Unidades absolutas
Unidades relativas
Colores

Valores y unidades

18

CSS

Unidades de medida
Las medidas en CSS se emplean, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño
de letra del texto.
Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida.
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en
relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado.
Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el
valor indicado.

Unidades de medida

19

CSS

Unidades absolutas
Una medida indicada mediante unidades absolutas está completamente definida, ya que su valor no depende de otro valor
de referencia.
La principal ventaja de las unidades absolutas es que su valor es directamente el valor que se debe utilizar, sin necesidad
de realizar cálculos intermedios. El motivo de porque las unidades absolutas se usan poco es que no permiten adaptarse
al tamaño de la pantalla que utilice cada usuario.

Unidades absolutas

20

CSS

Unidades relativas
La unidades relativas, a diferencia de las absolutas, no están completamente definidas, ya que su valor siempre está
referenciado respecto a otro valor.
Las tres unidades de medida relativas más utilizadas son:
em , relativa respecto del tamaño de letra del elemento.

ex , relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de letra del elemento.

px , (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página HTML.

La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando. Si se utiliza una tipografía de 12
puntos, 1em equivale a 12 puntos. El valor de 1ex se puede aproximar por 0.5em .
Ejemplo: p { margin: 1em; }
La regla CSS anterior indica que los párrafos deben mostrar un margen de anchura igual a 1em.
El pixel es una unidad de medida un tanto especial. La consideramos una unidad relativa porque no tiene un valor absoluto
y único, sino que presenta variaciones según los dispositivos.
Las pantallas suelen tener una resolución expresada en píxeles, por ejemplo 1280 x 800 px, donde el primer valor indica el
número de puntos horizontales y el segundo valor el número de puntos verticales en que se divide la pantalla.
Unidad

Símbolo

Ejemplo

Porcentaje

%

#menu1 {width: 50%;}

Relativa al tamaño de letra

em

#menu1 {font-size: 2.65em;}

Relativo a la x minúscula

ex

#menu1 {font-size: 2.65ex;}

Pixel*

px

#menu1 {font-size: 24px;}

Unidades relativas

21

CSS

Colores
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal,
RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal.
Palabras clave
CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés
de cada color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,white, yellow

RGB decimal
El modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para
obtener ese color. La combinación de las letras de estos tres colores en inglés es RGB y así se denomina al sistema de
construcción de colores basado en indicar la proporción de cada uno de estos tres colores.
Por lo tanto, en el modelo RGB un color se define indicando sus tres componentes R (rojo), G (verde) y B (azul). Cada una
de las componentes puede tomar un valor entre cero y un valor máximo. La cantidad de cada color se expresa entre un
valor mínimo que es cero y un valor máximo que es 255.
El color rgb (0, 0, 0) es el negro y el color rgb (255, 255, 255) es el blanco. El color rojo será el rgb (255, 0, 0), el verde rgb
(0, 255, 0) y el azul (0, 0, 255).
RGB porcentual
Las componentes RGB de un color también se pueden indicar mediante un porcentaje. El funcionamiento y la sintaxis de
este método es el mismo que el del RGB decimal. La única diferencia es que en este caso el valor de las componentes
RGB puede tomar valores entre 0% y 100%. Por tanto, para transformar un valor RGB decimal en un valor RGB
porcentual, es preciso realizar una regla de tres considerando que 0 es igual a 0% y 255 es igual a 100%.
RGB hexadecimal
Para entender el modelo RGB hexadecimal, es preciso introducir un concepto matemático llamado sistema numérico
hexadecimal. Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números
(del 0 al 9). Por este motivo, se dice que utilizamos un sistema numérico decimal. Entre los sistemas numéricos
alternativos más utilizados se encuentra el sistema hexadecimal, que utiliza 16 símbolos para representar sus números.

Colores

22

CSS

Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la A a la F) para
representar los números. De esta forma, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B
equivale al número 11, la C al 12, la D al 13, la E al 14 y la F al número 15.
Para definir un color en CSS con el método RGB hexadecimal se deben realizar los siguientes pasos: - Determinar las
componentes RGB decimales del color original, por ejemplo: R = 47, G = 62, B = B0 - Transformar el valor decimal de cada
componente al sistema numérico hexadecimal.
Se trata de una operación exclusivamente matemática, por lo que puedes utilizar una calculadora. En el ejemplo anterior,
el valor hexadecimal de cada componente es: R = 47, G = 62, B = B0 - Para obtener el color completo en formato RGB
hexadecimal, se concatenan los valores hexadecimales de las componentes RGB en ese orden y se les añade el prefijo #.
De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.
Ejemplo: p { color: #4762B0; }
Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus
valores RGB hexadecimales, por lo que no tienes que hacer ninguna operación matemática:

Herramienta de color de Photoshop para definir los colores según los modelos RGB, CMYK, Lab, HSB y RGB hexadecimal
Se admiten algunas variantes a la hora de definir un color hexadecimal en CSS. Un color se puede designar con solo tres
símbolos en lugar de seis. En este caso se considera que es una abreviación de la repetición de esos símbolos, por
ejemplo #FFF se considera abreviación de #FFFFFF y #05F se considera abreviación de #0055FF.
También se admite el uso de letras en minúsculas en lugar de letras mayúsculas. De este modo, #ffffff equivale a #FFFFFF
ó #0dab4f equivale a #0DAB4F.

Colores

23

CSS

Textos, fuentes y listas
Tipografías
Tamaño
Estilos
Color
Espacio entre letras y palabras
Espacio entre renglones
Alineación del texto
Decoración y transformación de texto
Listas

Textos, fuentes y listas

24

CSS

Tipografías
CSS dispone de una serie de propiedades que permiten controlar la forma en que se muestra el texto.
Entre ellas vamos a ver algunas como el tamaño, el color, subrayado, interlineado, alineación, etc.
La primera que vamos a ver es la familia tipográfica que queremos utilizar para mostrar el texto, esta propiedad se llama
font-family .

Ejemplo: p { font-family: Arial; }
Por el momento, solo vamos a poder elegir algunas tipografías básicas, que son las que el usuario que va a estar
navegando mi web, tengas instaladas en su computadora. Por ejemplo, Helvetica, Arial, Times new roman y Verdana.
Como no sabemos exactamente cuales tipografías tiene instaladas el usuario, podemos elegir más de una de la siguiente
manera:
Ejemplo: p { font-family: Arial, Helvetica;}
De esta manera, el navegador probará en primer lugar con el primer tipo de letra indicado. Si el usuario la tiene instalada,
el texto se muestra con ese tipo de letra. Si el usuario no dispone del primer tipo de letra indicado, el navegador irá
probando con el resto de tipos de letra hasta que encuentre alguna fuente que esté instalada en el ordenador del usuario.
Para solucionar este problema se utilizan las familias tipográficas genéricas. Cuando la propiedad font-family toma un
valor igual a sans-serif , el diseñador no indica al navegador que debe utilizar la fuente Arial, sino que debe utilizar "la
fuente que más se parezca a Arial de todas las que tiene instaladas el usuario".
Ejemplo: p { font-family: Arial, Helvetica, sans-serif;}

Tipografías

25

CSS

Tamaño
La propiedad para definir el tamaño se llama font-size .
Este tamaño lo podemos definir con las unidades de medida relativas y absolutas que vimos anteriormente.
Continuando con el ejemplo anterior, el modo de configurar el tamaño de nuestro párrafo es el siguiente:
Ejemplo:
p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

De esta manera, le estamos diciendo que nuestro párrafo va a tener tipografía Arial y un tamaño de 14px.

Tamaño

26

CSS

Estilos
Itálica
La propiedad que nos permite elegir si queremos mostrar nuestro texto en itálica, se llama font-style. Funciona de la
misma manera que la etiqueta que vimos en HTML.
Se escribe de la siguiente manera:
p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; }

Negrita
Si queremos mostrar nuestro texto en negrita, la propiedad que vamos a utilizar, se llama font-weight . La palabra weight
en inglés, significa peso. En este caso, el valor para que nuestro texto se vea en negrita, se llama Bold y funciona igual
que la etiqueta <strong> del HTML.
Al ejemplo anterior, vamos a agregarle un titular h1 que queremos que siempre se muetre en negrita.
h1 { font-weight: bold; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; }

Estilos

27

CSS

Color
La propiedad básica que define CSS que se utiliza para establecer el color de la letra, se llama color.
Esta propiedad utiliza más de un valor para elegir el color del texto.
Como vimos antes en la parte de colores, uno de los modos es utilizar las palabras claves como: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,white, yellow
La desventaja de este método, es que contamos con una paleta de colores bastante reducida. Es por eso que
normalmente utilizamos el método del código Hexadecimal. Entonces, si queremos que todos nuestros <h1> se vean del
mismo color (en este caso gris), lo escribimos de la siguiente manera:
h1 { font-weight: bold; color: #cccccc; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; }

Algo importante a tener en cuenta es que la propiedad color, se hereda, por lo que si queremos que todos los textos de
nuestro sitio tengan el mismo color, basta con ponerlo en la etiqueta body.
body { color: #000; }

En el ejemplo anterior, todos los elementos de la página muestran el mismo color de letra salvo que establezcan de forma
explícita otro color. La única excepción de este comportamiento son los enlaces que se crean con la etiqueta <a> . Aunque
el color de la letra se hereda de los elementos padre a los elementos hijo, con los enlaces no sucede lo mismo, por lo que
es necesario indicar su color de forma explícita:
/* Establece el mismo color a todos los elementos de la página salvo los enlaces */

body { color: #000; }

/* Establece el mismo color a todos los elementos de la página, incluyendo los enlaces */

body, a { color:#000; }

Color

28

CSS

Espacio entre letras y palabras
CSS también permite controlar la separación entre las letras que forman las palabras y la separación entre las palabras
que forman los textos. La propiedad que controla la separación entre letras se llama letter-spacing y la separación entre
palabras se controla mediante word-spacing .
La siguiente imagen muestra la comparación entre un texto normal y otro con las propiedades letter-spacing y wordspacing aplicadas:

Esto se elige al igual que con font-size, con una unidad de medida. Como por ejemplo el pixel (px).
Ejemplo:
h1 { font-weight: bold; color: #cccccc; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; letter-spacing: 5px; word-spacing:
10px; }

Espacio entre letras y palabras

29

CSS

Espacio entre renglones
Siguiente en la misma línea, también podemos modificar el espaciado entre renglón y renglón (interlineado). La propiedad
en este caso, se llama line-height y quiere decir, la altura de la de línea.
Algo importante a tener en cuenta, es que a la hora de elegir el tamaño de interlineado, tenemos que tener en cuenta el
tamaño de tipografía que estamos utilizando, por ejemplo para una tipografía de 14px, un interlineado de 18px es
apropiado.
h1 { font-weight: bold; color: #cccccc; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; letter-spacing: 5px; word-spacing:
10px; line-height: 18px; }

Espacio entre renglones

30

CSS

Alineación del texto
Una de las propiedades más importantes con respecto al texto, es su alineación. Podemos elegir si queremos que el texto
se vea alineado a la izquierda, a la derecha, centrado o justificado.
La propiedad que define la alineación del texto se denomina text-align .
Los valores que utiliza CSS para definir esto, son los siguientes: la izquierda ( left ), a la derecha ( right ), centrado
( center ) y justificado ( justify ).
La siguiente imagen muestra el efecto de establecer el valor left , right , center y justify respectivamente a cada uno
de los párrafos de la página.
Ejemplo:
h1 { font-weight: bold; color: #cccccc; text-align: center; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; letter-spacing: 5px; word-spacing:
10px; line-height: 18px; text-align: left; }

En este caso, decidimos que todos nuestro títulos H1 estén alineados al centro y todos nuestros párrafos hacia la
izquierda.

Alineación del texto

31

CSS

Decoración y transformación de texto
Decoración del texto
Esta propiedad, nos permite decorar el texto, la misma se llama text-decoration .
Cuando hablamos de decorar el texto, nuestras opciones son: (subrayado, tachado, parpadeante, etc.)
El valor underline subraya el texto, hay que tener cuidado donde lo queremos agregar ya que puede confundir a los
usuarios haciéndoles creer que se trata de un enlace. El valor overline añade una línea en la parte superior del texto, un
aspecto que raramente utilizado. El valor line-through muestra el texto tachado con una línea continua, por lo que su uso
tampoco es muy habitual.
Transformación del texto
Una de las propiedades de CSS más desconocidas y que puede ser de gran utilidad en algunas circunstancias es la
propiedad text-transform , que puede variar de forma sustancial el aspecto del texto.
La propiedad text-transform permite mostrar el texto original transformado en un texto completamente en mayúsculas
( uppercase ), en minúsculas ( lowercase ) o con la primera letra de cada palabra en mayúscula ( capitalize ).
La siguiente imagen muestra cada uno de los posibles valores.

En nuestro ejemplo, vamos a elegir que todos los títulos sean mostrados en mayúscula.
Ejemplo:

Decoración y transformación de texto

32

CSS

h1 { font-weight: bold; color: #cccccc; text-align: center; text-transform: uppercase; }

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; letter-spacing: 5px; word-spacing:
10px; line-height: 18px; text-align: left; }

Decoración y transformación de texto

33

CSS

Listas
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño
círculo de color negro.
CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas.
La propiedad básica es la que controla el tipo de viñeta que se muestra y se denomina list-style-type .
En primer lugar, el valor none permite mostrar una lista en la que sus elementos no contienen viñetas, números o letras.
Se trata de un valor muy utilizado, ya que es imprescindible para los menús de navegación creados con listas.
El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos, numéricos y alfabéticos.
Los valores gráficos son disc , circle y square y muestran como viñeta un círculo relleno, un círculo vacío y un
cuadrado relleno respectivamente.
Los valores numéricos están formados por decimal , decimal-leading-zero , lower-roman , upper-roman , armenian y
georgian .

Por último, los valores alfanuméricos se controlan mediante lower-latin, lower-alpha, upper-latin, upper-alpha y lowergreek.
La siguiente imagen muestra algunos de los valores definidos por la propiedad list-style-type:

El siguiente ejemplo indica que no se debe mostrar ni viñetas automáticas ni viñetas personalizadas:
ul { list-style: none }

Cuando queremos personalizar el aspecto de las viñetas, se debe emplear la propiedad list-style-image, esta permite
mostrar una imagen propia en vez de una viñeta automática.
Las imágenes personalizadas se indican mediante la URL de la imagen.

Listas

34

CSS

Las reglas CSS correspondientes al ejemplo anterior se muestran a continuación:
ul.ok { list-style-image: url("imagenes/ok.png"); }

ul.flecha { list-style-image: url("imagenes/flecha.png"); }

ul.circulo { list-style-image: url("imagenes/circulo_rojo.png"); }

Listas

35

CSS

Modelo de cajas
Modelo de cajas
Alto y ancho
Márgenes
Relleno

Modelo de cajas

36

CSS

Modelo de cajas
El modelo de caja o (box-model) es el que condiciona el diseño de las páginas web.
En HTML, todos los elementos generan una caja que los contiene, sobre la cual, actúan los estilos.
Lógicamente las particularidades de cada caja varían en función del tipo de elemento que sea. Entonces, cada vez que se
inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características.
Cada una de las cajas está formada por cuatro partes.
De adentro hacia fuera, las cajas tienen contenido, padding, borde y margen.
Contenido (content): Es el contenido HTML del elemento, como los parrafos, las listas, las imágenes, etc.
Relleno (padding): Es el espacio libre (opcional) que existe entre el contenido y el borde.
Borde (border): Es la línea que encierra el contenido y su relleno.
Margen (margin): Es el espacio libre (opcional) entre la caja y el resto de las cajas adyacentes.

Modelo de cajas

37

CSS

Alto y ancho
Por default, si no le indicamos ningún ancho específico, el navegador va a hacer que la caja ocupe todo el ancho de la
ventana. Con respecto al alto, va a hacer que la caja ocupe el mínimo posible, por lo que el alto de la misma, va a
depender pura y exclusivamente del contenido que tenga.
Ancho
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width .
La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su
elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre.
El siguiente ejemplo establece como valor de ancho 200px para el elemento <div> caja:
#caja { width: 200px; }

<div id="caja">
...
</div>

Otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width .
La propiedad max-width define el ancho de una caja, sin darle un valor fijo. De esta manera le podemos dar un tamaño de
ancho máximo, lo que significa que si la ventana del navegador se achica o se agranda, la caja también lo hace, pero con
un ancho máximo de tope. O sea, no se va a agrandar más que el valor que le hayamos configurado en la propiedad maxwidth .

#caja { width: 200px; max-width: 800px; }

<div id="caja">
...
</div>

De la misma manera que definimos un ancho máximo, podemos definir un ancho mínimo. Lo que significa que la caja no
va a medir menos de lo que nosotros le hayamos configurado. Esta propiedad se llama min-width .
#caja { width: 200px; max-width: 800px; min-width: 400px; }

<div id="caja">
...
</div>

Para resumir, basándonos en el ejemplo anterior, nuestra caja no va a medir menos de 400px ni más de 800px, dentro de
esas medidas y dependiendo del tamaño de la ventana del navegador, nuestra caja es variable.
Altura
Al igual que sucede con width , la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma
como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el
valor auto a la altura.

Alto y ancho

38

CSS

El siguiente ejemplo establece como valor de alto 50px para el elemento <div> cabecera:
#cabecera { height: 50px; }

<div id="cabecera">
...
</div>

Otras dos propiedades relacionadas con la altura de los elementos: min-height y max-height .
Estas dos propiedad funcionan exáctamente igual que con el ancho. Nos permite definir topes máximos y mínimos en la
altura de nuestra caja.

Alto y ancho

39

CSS

Márgenes
CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.
Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:

Normalmente, las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles.
Las propiedades margin-top , margin-right , margin-bottom , margin-left se utilizan para definir el ancho de los márgenes
de cada uno de los lados del elemento por separado.
Puedes definir los 4 lados o solo aquellos que necesites.
En base a nuestro ejemplo anterior, vamos a definirle márgenes a nuestro div caja.
#caja { width: 200px; max-width: 800px; min-width: 400px; margin-top: 5px; margin-bottom: 5px; margin-left: 10px;
margin-right: 10px; }

Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento, CSS define una propiedad
especial que permite establecer los cuatro márgenes de forma simultánea.
Esta propiedad se llama margin . Entonces:
1) Si sólo se indica un valor, todos los márgenes tienen ese mismo valor.
Ejemplo: margin: 5px;
En este caso, nuestra caja va a tener un margen de 5px en sus cuatro lados.
2) Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes
izquierdo y derecho.
Ejemplo: margin: 5px 10px;
En este caso, nuestra caja va a tener un margen de 5px de arriba y de abajo y 10 px de la derecha y de la izquierda.
3) Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen
izquierdo.
Ejemplo: margin: 5px 10px 12px 15px;

Márgenes

40

CSS

En este caso, nuestra caja va a tener un margen de 5px de arriba, 10px de la derecha, 12px de abajo y 15px de la
izquierda.

Márgenes

41

CSS

Relleno
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un
elemento.
Cada una de estas propiedades establece la separación entre el contenido y los bordes laterales de la caja del elemento:

Al igual que con los márgenes, CSS también define una propiedad llamada padding para establecer los cuatro rellenos de
un elemento de forma simultánea.
Entonces, podemos escribir cada relleno por separado, definiendo su ubicación:
padding-top: 5px;

padding-bottom: 5px;

padding-left: 10px;

padding-right: 10px;

O podemos escribir los cuatro juntos con la propiedad padding por sí sola:
padding: 5px 10px 12px 15px;

Relleno

42

CSS

Fondos y bordes
Fondos
Color de fondo
Imagen de fondo
Repetición de imagen
Posicionamiento
Bordes
Color
Estilo

Fondos y bordes

43

CSS

Fondos
Unos de los atributos más utilizados es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen.
Este solamente se visualiza en el área ocupada por el contenido y su relleno.
Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento <body> .
CSS define cinco propiedades para establecer el fondo de cada elemento ( background-color , background-image ,
background-repeat , background-attachment , background-position )

Fondos

44

CSS

Color de fondo
La forma de indicar el color de fondo de una etiqueta desde CSS es con la propiedad background-color . Como valor,
podemos utilizar uno de los colores predeterminados, escribiendo simplemente la palabra, por ejemplo green o podemos
utilizar el sistema hexadecimal, escribiendo el código de color.
Ejemplo:
body { background-color: #F5F5F5; }

Color de fondo

45

CSS

Imagen de fondo
No solo podemos aplicar color, sino que además podemos aplicar una imagen como fondo de una etiqueta. La propiedad a
utilizar, en este caso, es background-image .
Las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa. Suele ser recomendable crear
una carpeta de imágenes que se encuentre en el mismo directorio que los archivos CSS y que almacene todas las
imágenes utilizadas en el diseño de las páginas.
CSS nos permite establecer de forma simultánea un color y una imagen de fondo. De hecho, es recomendable aplicar
ambas, ya que si por alguna razón, no se muestra la imagen de fondo, vamos a poder ver el color.
Ejemplo:
body { background-image: url("imagenes/fondo.jpg") }

Algo importante a tener en cuenta, son los formatos de imágenes que podemos utilizar para el fondo. Los mismos son:
JPG, PNG o GIF. En todos los casos, tienen que estar en modo RGB.

Imagen de fondo

46

CSS

Repetición de imagen
Normalmente, el navegador tiende a repetir la imagen de fondo como si fuera un mosaico. Cuando queremos tener un
fondo con líneas horizontales o puntos, podemos utilizar una imagen pequeña y hacer que la misma se repita en horizontal
y vertical. De esta manera vamos a conseguir un fondo prolijo y que se vea bien en todos los navegadores.
Para lograr esto, CSS introduce la propiedad background-repeat que permite controlar la forma de repetición de las
imágenes de fondo.
El valor repeat indica que la imagen se debe repetir en todas direcciones. El valor no-repeat muestra una sola vez la
imagen y esta no se repite en ninguna dirección. El valor repeat-x repite la imagen sólo horizontalmente y el valor repeat-y
repite la imagen solamente de forma vertical.
Ejemplo:
body { background-image: url("imagenes/fondo.jpg") repeat-x; }

En el ejemplo anterior, le estamos pidiendo que nuestra imagen fondo.jpg sea repetida de manera horizontal.

Repetición de imagen

47

CSS

Posicionamiento
Además de seleccionar el tipo de repetición de las imágenes de fondo, CSS permite controlar la posición de la imagen
dentro del fondo del elemento mediante la propiedad background-position .
En los casos que elegimos que la imagen no se repita, lo que sucede es que esta imagen se alinea con la esquina
superior izquierda de la caja. La propiedad background-position nos permite elegir la posición de dicha imagen dentro de
la caja.
Esta propiedad puede manejarse con palabras clave, como top , bottom , center , left y right . Estas también se
pueden combinar. Por ejemplo podemos decir que nuestra imagen de fondo esté alineada top center .
body { background-image: url("imagenes/fondo.jpg") repeat-x; background-position: top center; }

Lo que nos va a mostrar, es nuestra imagen alineada arriba al centro.
Otra opción es utilizar números, de esta manera vamos a poder indicar la coordenada exacta de la posición de la imagen
con respecto a la caja en donde está ubicada como fondo.
El modo de escribirlo es el siguiente:
body { background-image: url("imagenes/fondo.jpg") repeat-x; background-position: 10px 20px; }

Como pueden ver en el ejemplo, tenemos dos números, el primer número es la coordenada en X (horizontal) y el segundo
número es la coordenada en Y (vertical).

Posicionamiento

48

CSS

Bordes
CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede
establecer su grosor, color y estilo.
El grosor de los bordes, se indica mediante una unidad de medida, como el pixel. La propiedad que utilizamos para esto,
se llama border-width .
Como ya vimos antes, podemos utilizar esta propiedad indicando específicamente a que lado le queremos aplicar el estilo,
o podemos utilizar la propiedad por sí sola.
Ejemplo:
div { border-top-width: 10px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 5px; }

div { border-width: 10px; }

Si indicamos un solo valor, este se aplicará por igual a los cuatro bordes. Pero si se indican los cuatro valores, el orden de
aplicación es superior, derecho, inferior e izquierdo.

Bordes

49

CSS

Color
También podemos aplicarle color a nuestro borde. La propiedad que utilizamos es border-color . Funciona exactamente
de la misma manera que border-width , con la diferencia que para aplicarle un color debemos utilizar el código
hexadecimal que vimos anteriormente.
Ejemplo:
div { border-top-color: #CC0000; border-right-color: #CCC; border-bottom-color: #00FF00; border-left-color: #CCC; }

Color

50

CSS

Estilo
En este caso, CSS no da varias opciones. El estilo de nuestro borde puede ser punteado, sólido, con rayas, doble, etc.
Para poder seleccionar que estilo queremos, debemos utilizar uno los valores que CSS ya tiene definido.
Los valores son: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Los mismos se ven a de la siguiente manera:
Para establecer de forma simultánea los estilos de todos los bordes de una caja, utilizamos la propiedad llamada borderstyle.
Ejemplo:
div { border-top-style: dashed; border-right-style: double; border-bottom-style: dotted; border-left-style: solid; }

Al igual que sucede con los márgenes y los padding, CSS define una serie de propiedades de tipo"shorthand" que
permiten establecer todos los atributos de los bordes de forma simultánea. Esta propiedad global se llama border .
Ejemplo:
div { border: 1px solid #cccccc; }

De esta manera le estamos diciendo que nuestra caja va a tener un borde sólido, de 1px de grosor en sus cuatro lados y
de color gris.

Estilo

51

CSS

Tipografía web
Tipografía web
FontSquirrel Kit
GoogleFonts

Tipografía web

52

CSS

Tipofrafía Web
Hasta hace muy poco si queríamos que nuestros diseños se vieran más o menos igual para todos los usuarios había que
conformarse con las fuentes que ya sabíamos que estaban instaladas en la mayoría de los ordenadores.
CSS creo una regla llamada @font-face que enlaza directamente al archivo de una tipografía que esta subida a un
servidor. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografía.
A continuación verás los servicios mas usados.

Tipografía web

53

CSS

FontSquirrel Kit
Si no queremos usar nuestras propias fuentes FontSquirrel nos ofrece cientos de tipografías libres de derecho que no será
necesario convertir, porque se nos permite descargar el Kit o el paquete con todos los archivos y el código necesario.
Link: http://www.fontsquirrel.com/fonts

FontSquirrel Kit

54

CSS

GoogleFonts
Un servicio de Google para implementar @font-face, donde se puede elegir entre 500 tipografías distintas. La gran
ventaja, es que te proporcionan un código que debemos incluir en nuestro archivo css y de esta manera no es necesario
que la tipografía esté alojada en nuestro propio servidor.
Link: http://www.google.com/fonts/
¿Como hacer para incorporar una Googlefont a nuestro sitio?
1) Ingresamos a http://www.google.com/fonts/
En la columna de la derecha se muestra el número de fuentes disponibles, el buscador interno y diversos filtros. En la
zona central de la página vemos el listado de fuentes y una muestra.

Cuando encontremos la tipografía que nos guste, se debe hacer clic en la opción Quick-use que hay en la parte inferior del
cuadro. Tras esto, se muestra una página, donde se indican los pasos a seguir para usarla:
1. Elegir el estilo deseado. También se informa del impacto que tiene la fuente seleccionada en la carga de la página.
2. Elegir el juego de caracteres que deseamos.
3. Incluir en nuestro sitio web la fuente.
4. Especificar que queremos aplicar la fuente en los elementos deseados de un sitio web. Hacemos uso de CSS.

GoogleFonts

55

CSS

Por ejemplo, si decidimos usar la fuente “Euphoria Script”, creada por Sabrina López, incluiremos la siguiente línea de
código dentro del elemento <head> del documento HTML.
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>

Con esto ya hemos incluido de alguna forma la fuente “Euphoria Script” en nuestro sitio web. Ahora, podremos aplicarla a
los elementos que deseemos mediante la propiedad font-family de CSS, como se muestra en el siguiente ejemplo, que
aplica esta fuente al elemento <h1> .
h1 { font-family: 'Euphoria Script', cursive; }

Esta es la manera más utilizada para agregar fuentes a nuestro sitio web.

GoogleFonts

56

CSS

Gradientes
Gradientes

Gradientes

57

CSS

Gradientes
CSS3 ha agregado la opción de crear gradientes (fondos en degradé) sin la necesidad de usar imágenes.
Los gradientes en CSS son de dos tipos: lineales ( linear-gradient ) o radiales ( radial-gradient ). En el gradiente lineal, la
transformación de color va avanzando línea a línea, mientras que en el radial, la transformación de color se produce
debido a que sucesivos círculos concéntricos van cambiando de color.
La propiedad que utilizamos para realizar gradientes lineales, se llama linear-gradient y esta se agrega al atributo
background , que ya vimos con anterioridad.

Esta propiedad maneja dos opciones de parámetros, podemos elegir el punto de inicio o sea si queremos que lo aplique
arriba, abajo, a la derecha o a la izquierda de nuestra caja o podemos elegir los grados de inclinación que queremos que
tenga nuestro gradiente.
Los puntos de inicio pueden ser top , right , left o bottom .
Entonces, supongamos que queremos aplicarle a nuestra caja un gradiente que va de negro a gris desde la parte de arriba
de la misma. La sintaxis sería la siguiente:
div { background: linear-gradient (to top, #000, #ccc) }

Si lo que queremos es aplicar un gradiente de 90º, entonces la sintaxis sería así:
div { background: linear-gradient (90deg, #000, #ccc) }

Algunas cosas a tener en cuenta, la propiedad linear-gradient no genera un color de fondo, sino una imagen sin
dimensiones específicas, esta se va a adaptar automáticamente para cubrir todo el espacio disponible.
Por otro lado, no todos los navegadores soportan esta propiedad.

Gradientes

58

CSS

Flexbox
Flexbox
Sintaxis
Propiedades

Flexbox

59

CSS

Flexbox
El objetivo de FlexBox es crear un modelo de caja o contenedor optimizado para los distintos dispositivos.
Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor
posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el
espacio libre, o los comprime para evitar que rebasen el área prevista.

Flexbox

60

CSS

Sintaxis
Para comenzar a trabajar con las propiedades Flexbox, primero tenemos que establecer el contenedor Flexible o “Flex
Container”, para que todos los contenidos interiores, se comporten flexiblemente.
Esto lo hacemos con la propiedad display y el valor Flex. display: flex;
Para que podamos entender mejor, veamos la siguiente imagen:

Flex container: Es el contenedor principal flexible
Flex items: Son los hijos directos del flex container y automáticamente se vuelven items flexibles.
Main axis: Es el eje principal que atraviesa el elemento flex container horizontalmente y va de izquierda a derecha en su
flujo normal comenzando con start y terminando en el end main.
Cross axis: Es el eje vertical que atraviesa el elemento, el eje transversal y también consta de un start y end, va de arriba
a abajo del elemento.

Sintaxis

61

CSS

Propiedades
Flex-direction: Con flex-direction, vamos a poder establecer la dirección de los flex ítems en el eje principal dentro del flex
container. Podemos cambiar su orden, colocarlos en disposición de columnas e invertirlos en cualquier eje.
Flex-wrap: A veces cuando utilizamos las características Flexbox de CSS3 y el contenido es ejecutado en un viewport
pequeño el contenido que es flexible tratara de ajustarse y algunas veces este tendera a salirse de su contendor principal,
de su flex container.
Con flex-wrap vamos a controlar esta situación, si el contenido es mucho para mostrarse en una sola línea, en el eje
principal, esta propiedad utilizara el eje transversal para reordenar los ítems flexibles.
Justify-content: Esta propiedad nos va a permitir controlar la alineación de los elementos flexibles en el main axis o eje
principal.

Propiedades

62

CSS

Transiciones y transformaciones
Transiciones
Transformaciones

Transiciones y transformaciones

63

CSS

Transiciones
Las transiciones permiten controlar la velocidad a la que se van a modificar las propiedades de un elemento inclusive se
pueden aplicar curvas de aceleración permitiendo de esta forma crear animaciones.

Transiciones

64

CSS

Transformaciones
Las transformaciones CSS ofrecen la posibilidad de modificar el desplazamiento, escala, rotación, sesgo de elementos y
en combinación con las transiciones nos permite crear animaciones css modificando gradualmente sus propiedades.
De las transformaciones de CSS3 en 2D, las más usadas son:
Rotate: Rotate te permite rotar un elemento dándole un ángulo de giro en grados.
Scale: Scale te permite escalar un elemento, toma valores positivos y negativos y se le pueden poner decimales.
Translate: Translate nos permite trasladar un elemento a la vez en el eje de las X y de las Y, dándole las coordenadas
iniciales y finales.
Trasladar: Esta propiedad de CSS3 no hace propiamente una transición, sino que hace que un elemento pase de
estar en una posición a estar en otra. Con las transiciones y las animaciones de CSS3 vamos a poder darle un efecto
visual de movimiento.
Ejemplo:
transform: translate(10px, 20px);

Rotación: Se puede aplicar tanto a elemento inline como a elementos de bloque.

.ejemplo { transform: rotate (45deg); }

Los grados se marcan en positivo si el elemento se rota en el sentido de las agujas del reloj y en negativo si es al revés.
Por defecto, el punto de referencia que toma como eje para hacer la rotación es el centro, pero también se puede
especificar otro punto.
Escalar: Otro punto interesante va a ser escalar un elemento con CSS3.

Transformaciones

65

CSS

Si el valor es positivo, el elemento se hace más grande, y si es negativo se hace más pequeño.

Transformaciones

66

CSS

Animaciones
Animaciones

Animaciones

67

CSS

Animaciones
Una animación tiene lugar en el tiempo, con lo que vamos a tener que tomar diferentes puntos dentro de un fragmento de
tiempo para especificar que sucede en cada uno de ellos. Es lo que se llaman keyframes. Para los que ya han trabajado
en Flash u otros programas de animación ya conocen el concepto. En cada keyframe podemos introducir un cambio y la
suma de estos cambios es lo que va a dar lugar a la animación final.
Para indicar la duración de una animación utilizaremos la propiedad animation-duration .
La velocidad de la animación estará gestionado por la propiedad animation-timing-function .
También en las animaciones de CSS3 podemos especificar un tiempo de espera antes de iniciar la animación con la
propiedad animation-delay .
Con la propiedad animation-direction podremos indicarle que la propiedad se haga en sentido inverso al habitual, es
decir, que empiece por el final.
Para aprender más sobre esto, pueden ver http://daneden.github.io/animate.css/

Animaciones

68

CSS

Media queries
Media queries

Media queries

69

CSS

Media queries
Los media types permiten indicar una serie de estilos que se aplicarán según el tipo del medio, en algunas páginas, al ver
el código fuente, nos encontramos algo como lo siguiente en su head
Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de
expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las media queries dan
como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no.
Ejemplo:
@media (max-width: 600px) { }

Este sencillo ejemplo tiene una media query que significa lo siguiente:
Cuando el ancho de la pantalla tenga un ancho menor a 600px lees el código encerrado dentro de las llaves que abren y
cierran la media querie.
Ejemplo:
body { background: green; }

@media (max-width: 600px) { body { background: red; } }

Esto hará que el fondo de la web sea verde, pero cuando la pantalla sea menor a 600px el fondo será rojo.
Las posibilidades y combinaciones son muchas y su uso está generalizado. Bootstrap o Foundation son sólo dos ejemplos
de frameworks CSS que basan todo su funcionamiento en las media queries, lo que nos permite tener webs adaptables.
Al igual que hay varios media types, las media queries tienen varias expresiones a utilizar, las más interesantes para el
responsive design son:
orientation: permite tomar por valores landscape o portrait lo que significa que la orientación sea horizontal o vertical,
o sea, landscape si la ventana es más ancha que alta y portrait si es más alta que ancha.
resolution: Permite las variantes min-resolution y max-resolution . El valor que toma es la densidad de la pantalla en
valor de puntos por pulgada (dpi) o en puntos por pixel (dppx). Su uso principal es para cambiar los background de
imágenes según el dispositivo sea de alta resolución (como los retina display, iphone, …) o normal para que no se
carguen más datos de los necesarios.
width: El alto del dispositivo. Se permiten las variantes min-width y max-width . Es la principal expresión para el
responsive design.

Media queries

70

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close