CSS Tutorial

CSS es un lenguaje que describe el estilo de un documento HTML.

CSS se describe cómo se deben mostrar los elementos HTML.

Este tutorial le enseñará CSS desde básico hasta avanzado.

CSS Indice
 CONCEPTO
 SINTAXIS Y SELECTORES
- Selector de elementos
- Selector por id
- Selector por clases
 COMENTARIOS CSS
 ENLACES DE HOJA DE ESTILOS CSS
- Hoja de estilo externa
- Hoja de estilo interna
- Hoja de estilo en línea
 COLORES CSS
- Por nombre
- Sistema hexadecimal
- Sistema RGB
- Sistema RGBA
- Sistema HSL
 BACKGROUND O FONDOS
- Colocar fondos unicolores
- Colocar imágenes de fondos, cuadrarlas y repetir o no repetir las mismas en el fondo.
 BORDE O BORDER
- Colocar el estilo del borde
- Establecer el ancho o grosor del borde
- Establecer el color del borde
- Configurar bordes individuales
 MARGIN O MARGENES
- Establecer el tamaño de los márgenes de un elemento con respecto a su padre.
 PADDING O RELLENO
 - Configurar los padding individuales
 WIDTH & HEIGHT O ALTO Y ANCHO
- Establecer el alto y el ancho de elementos.
- Establecer el alto y ancho minimo y máximo de un elemento.
 CALCULO DEL MODELO DE CAJA
 OUTLINE O BORDE DE AFUERA
- Establecer el estilo del borde de afuera.
- Establecer el color del borde de afuera.
- Establecer el ancho o el grosor del borde de afuera.
 TEXTO
- Establecer el color del texto.
- Establecer el tamaño del texto.
- Establecer la alineación del texto.
- Establecer la decoración del texto como subrayado o resaltado.
- Establecer si el texto debe estar en mayúscula o minúscula.
- Establecer la sangría del texto.
- Establecer el espaciado entre letras de un texto.
- Establecer la altura de cada línea en un texto.
- Establecer la dirección del texto.
- Establecer el espaciado entre palabras de un texto.
- Establecer la sombra de un texto.
 FUENTES O FONT
- Establecer la fuente de un texto
 ICONOS
- Colocar iconos awesome
- Colocar iconos de bootstrap
- Colocar iconos de google
 ENLACES O LINKS
- Establecer el color del texto de un enlace
- Personalizar los cuatro estados de un link
- Cambiar la decoración del texto de un enlace como subrayado o resaltado.
- Colocar un color de fondo de un enlace
- Creación de enlace como cajas
 LISTAS O LIST
- Establecer el estilo o marcador de una lista desordenada.
- Establecer una imagen como marcador de una lista.
- Establecer la posición de los elementos de una lista.
- Quitar el marcador y la configuración básica de una lista.
- Personalizar una lista.
 TABLAS O TABLES
- Configurar los bordes de una tabla.
 - Configurar el alto y el ancho de una tabla.
- Alineación horizontal y vertical del texto de una tabla.
- Relleno de una tabla.
- Hover de una tabla para tablas interactivas.
- Colores en las tablas.
- Tablas con overflow.
 DISPLAY O PRESENTACION DE ELEMENTOS
- Presentación bloque, línea y línea-bloque de un elemento.
- Ocultar la presentación de un elemento.
- Uso de visibility para ocultar elementos.
 ALTURA Y ANCHO MAXIMO Y MINIMO
 MAQUETACION Y POSICION DE UNA PAGINA WEB
- Uso de la posición static.
- Uso de la posición relative.
- Uso de la posición fixed.
- Uso de la posición absolute.
- Uso de la posición z de elementos.
- Uso de float para corrimiento de elementos.
- Colocar texto sobre una imagen.
 DESBORDAMIENTO O OVERFLOW
- Overflow horizontal y vertical visible, hidden, scroll, auto y especificado .
 FLOAT O FLOTADOR DE ELEMENTOS
- Uso de float y clear.
- Uso de clearfix para creación de maquetación web de pagina tipo 1.
 LAYOUT INLINE-BLOCK
 ENFOQUE DE CURSOR
- Cambiar el estilo del cursor sobre los elementos.
 ALINEACION VERTICAL Y HORIZONTAL DE CAJAS Y ELEMENTOS
- Alineación al centro de cajas y elementos.
- Alineación centrar de texto.
- Alineación de elementos y texto en izquierda y derecha.
- Alineación vertical de cajas, elementos y texto.
 COMBINADORES
- Uso de combinador de espacio, +, > y -.
 PSEUDO CLASES
- El uso de los estados de un link o enlace.
- Configurar un elemento cuando se pasa el mouse sobre el mismo mediante el hover.
- Uso del first-child.
- Uso del lang.
- Uso de focus para cambiar las características de los formularios al ingresar datos en
ellos.
 - Uso de last-child.
 PSEUDO ELEMENTOS
- Uso de first-line para cambiar el estilo de la primera línea de un texto.
- Uso de first-letter para cambiar el estilo de la primera letra de un elemento.
- Uso de before para colocar contenido antes de un elemento.
- Uso de after para colocar contenido despues de un elemento.
- Uso de content para colocar contenido antes o después de un elemento.
- Uso de selection.
 TRANSPARENCIA Y OPACIDAD
- Uso de opacity para establecer la opacidad o transparencia de un elemento.
- Cambiar la transparencia de un elemento mediante el hover.
- Uso de RGBA.
- Caja de texto trasparente dentro de un fondo o imagen.
 MENU O BARRA DE NAVEGACION
- Barra de navegación simple.
- Barra de navegación vertical, colocar el activo de la barra de navegación, colocar
bordes y personalizar la barra, colocar la barra pegajosa y fija en la pantalla, hover
sobre una barra.
- Barra de navegación horizontal, colocar el activo, colocar bordes y personalizar la
barra, colocar la barra fija o pegajosa y colocar hover a la barra de navegación.
- Uso de topnav adaptativa para paginas y teléfonos.
- Uso de sidenav adaptativa para web y teléfonos.
- Barra de navegación con menú desplegable.
 MENUS DESPLEGABLES
- Colocar textos con información o menú desplegables.
- Menú de navegación desplegable.
- Caja de imagen imagen desplegable.
- Menu de navegación desplegable y personalizado.
 TOOLTIP O INFORMACION DESPLEGABLE
- Uso de básico del tooltip.
- Posición de un tooltip sobre un elemento.
- Uso de flecha en el tooltip.
- Tooltip con efecto de transición cuando aparece.
 GALERIA DE IMÁGENES
- Como hacer una galería de imágenes para descargar y ver las imágenes adaptativa a
teléfono.
 SPRITES IMAGES O IMÁGENES SPRITES
 SELECTORES DE ATRIBUTOS
- Seleccionar un elemento o elementos y aplicar CSS por medio un atributo especifico.
- Seleccionar un elemento o elementos con un atributo y valor especifico y aplicar CSS.
 - Seleccionar un elemento o elementos con un atributo y valor especifico sin importar
si esta un espacio en el texto o el mismo esta compuesto de varias palabras y aplicar
CSS.
- Seleccionar un elemento o elementos con un nombre de clase un – texto y aplicar CSS.
- Seleccionar un elementos o elementos que comuencen con un nombre de clase
especifico y aplicar CSS.
- Seleccionar un elemento o elementos que terminen con un nombre de clase
específico y aplicar CSS.
- Seleccionar un elemento o elementos que contengan un palabra o texto específico sin
importar como en la clase y alicar CSS.
 FORM O FORMULARIOS
- Ajustar el ancho de entrada del campo del formulario.
- Ajustar el margen entre el formulario y ajustar el relleno de los mismos.
- Colocar borde a los formularios ajustar el ancho de los mismo, color, estilo y darle
redondeado a las esquinas.
- Colocar un color de fondo a las entradas y cambiar el color y la fuente de las letras.
- Configurar el enfoque de las entradas del formulario al darle click sobre las mismas.
- Configurar el color de fondo de las entradas de un formulario al darle click al mismo
para ingresar información.
- Colocar un icono antes de la entrada de un formulario y darle transición o retardo al
mismo.
- Reajustar los textareas para poder dar información larga de manera eficiente.
- Personalizar y editar los formularios de selección.
- Personalizar y editar los botones.
 CONTADORES
- Colocar contadores para agrupar secciones, capítulos o índices en una pagina web.

CSS3 Indice
 ESQUINAS REDONDEADAS
- Como colocar esquinas redondeadas a los bordes de los elementos.
- Como colocar esquinas elípticas en los bordes de los elementos.
 IMAGEN COMO BORDE
- Como colocar una imagen como borde de los elementos y editar el aspecto de las
mismas.
 FONDOS O BACKGROUND CSS3
- Agregar varias imágenes de fondo a los elementos.
- Ajustar el tamaño de la imagen o las imágenes de fondo en CSS3.
- Colocar una imagen de fondo de tamaño completo para toda una pagina web o una
sección de la misma.
 - Especificar el origen de la imagen de fondo en la pantalla con respecto al contenido,
relleno o caja completa.
- Especificar el origen de un color de fondo en la pantalla con respecto al contenido,
relleno o caja completa.
 COLORES CSS3
- Establecer colores por RGBA, HSL y HSLA.
- Establecer la opacidad o la transparencia de los elementos.
 GRADIENTES
- Establecer los distintos tipos de gradientes lineales.
- Establecer gradientes lineales diagonales.
- Establecer el angulo de los gradientes lineales.
- Establecer varios colores en un gradiente lineal y la proporción de los mismos.
- Establecer transparencia en los gradientes.
- Establecer los distintos tipos de gradientes radiales.
- Establecer la repetición en los gradientes lineales y radiales.
 SHADOW O SOMBRAS CSS3
- Aplicar sombras a un texto.
- Aplicar una sombra con color a un texto.
- Aplicar efecto de desenfoque a la sombra de un texto.
- Crear bordes dimples de color sobre un texto.
- Aplicar sombra a los elementos de una pagina web.
- Agregar un color a la sombra de los elementos.
- Aplicar efecto de desenfoque a la sombra de los elementos.
- Crear tarjetas o imágenes con efecto de sombra como si fueran papeles.
 TEXT O TEXTO EN CSS3
- Como indicar o señalar un texto desbordado.
- Como completar un texto incompleto al pasar el cursor por el mismo.
- Romper una palabra muy larga y que aparezca en la siguiente línea.
 FONT O FUENTES CSS3
- Agregar y emplear fuentes de texto externas.
 TRANSFORMACIONES 2D
- Método translate: permite cambiar de posicion un elemento.
- Método rótate: permite rotar un elemento una cierta cantidad de grados.
- Método scale: permite aumentar o decrementar el tamaño de un elemento.
- Método skewX: permite inclinar horizontalmente un elemento.
- Método skewY: permite inclinar verticalmente un elemento.
- Método skew: permite inclinar tanto verticalmente como horizontalmente un
elemento.
- Método matrix: permite aplicar todas las transformaciones 2D a un elemento.
 TRANSFORMACIONES 3D
- Método rotateX: permite rotar en el eje X un elemento.
 - Método rotateY: permite rotar en el eje Y un elemento.
- Método rotateZ: permite rotar en el eje Z un elemento.
 TRANSICIONES CSS3
- Cambiar el ancho o el alto de un elemento al posar el cursor sobre el mismo.
- Cambiar alguna de las propiedades de un elemento al posar el cursor sobre el mismo.
- Cambiar los efectos de la curva de transición.
- Agregar retardo a las transiciones.
- Agregar transformaciones a las transiciones.
 ANIMACIONES CSS3
- Realizar animaciones CSS3.
- Cambiar el color de los elementos mediante una animación.
- Fragmentar los cambios en una animación o realizar animaciones por partes.
- Cambiar la posicion de un elemento de manera animada.
- Ejecutar un retardo antes de comenzar una animación.
- Ejecutar una animación un número de veces.
- Ejecutar una animación de manera infinita.
- Ejecutar una animación en dirección inversa o alternada.
- Especificar la curva de velocidad de una animación.
- Cambiar cualquier atributo de un elemento mediante una animación.
 IMÁGENES CSS3
- Aplicar bordes redondeados a las imágenes.
- Aplicar bordes a las imágenes.
- Crear imágenes en miniatura.
- Crear imágenes sensibles o adaptables a los navegadores.
- Centrar una imagen.
- Ajustar la opacidad o transparencia de las imágenes.
- Colocar texto dentro de las imágenes.
- Aplicar filtros a las imágenes.
- Crear imágenes con hover de superposición.
- Crear imágenes sensibles con javascript.
 BOTONES CSS3
- Ajustar el color de los botones.
- Ajustar el tamaño de los botones.
- Bordes redondeados en los botones.
- Borde de colores en los botones.
- Botones hoverables.
- Sombra en los botones y creacion de efectos de sombra.
- Efecto de opacidad en los botones.
- Ancho de un botón.
- Como hacer un grupo de botones apilados de manera horizontal.
- Como hacer un grupo de botones apilados de manera vertical.
- Efectos en los botones.
 PAGINACION CSS3
- Como hacer una paginación simple.
- Como hacer una paginación activa y hoverable.
- Efectos de transición en la paginación.
- Agregar bordes a la paginación.
- Paginacion con espaciado entre los números.
- Cambiar el tamaño de la paginación.
- Centrar la paginación.
 MULTIPLES COLUMNAS CCS3
- Como hacer multiples o varias columnas de un mismo texto o contenido.
- Colocar espacio entre las columnas.
- Colocar barras divisoras entre las columnas.
- Hacer que un elemento abarque varias columnas.
- Especificar el ancho de las columnas.
 INTERFAZ DE USUARIO
- Redimensionar el ancho de un elemento o su tamaño horizontal en la pantalla.
- Redimesionar el alto de un elemento o su tamaño vertical en la pantalla.
- Redimensionar el ancho y el alto de un elemento en la pantalla.
- Agregar un espacio entre el outline o el contorno de un elemento y su borde.
 TAMAÑO DE CAJA CONTENEDORA EN CSS3
- Incluir el relleno y el borde dentro del alto y ancho de un elemento.
 FLEXBOX
- Crear un contenedor flexbox y sus elementos flexbox para emplear la disposición de
los elementos.
- Establecer la dirección de las flexbox.
- Justificar o alinear horizontalmente las flexbox dentro de un contenedor de flexbox.
- Justificar o alinear verticalmente las flexbox dentro de un contenedor de flexbox.
- Envolver o flotar de manera automática las flexbox.
- Justificar los envoltorios de las flexbox.
- Establecer el orden de las flexbox dentro de un contenedor.
- Colocar margin a las flexbox.
- Alinear verticalmente cada una de las flexbox individuales.
- Espeificar el ancho de las flexbox en un contenedor.
- Crear una pagina web empleando flexbox.
 CONSULTA DE MEDIOS Y WEB RESPONSIVE DEVICE
- Tipos de consulta de medio CSS3.
- Como hacer una consulta de medio y la tabla de interfaces.
- Como hacer un diseño responsive para computadora.
- Como hacer un diseño responsive para tabñet.
- Como hacer un diseño responsive para Smartphone.
 VIEWPORT
 - Como emplear el metadato viewport
 DISEÑO RESPONSIVE DE CUADRICULA
- Como emplear el método de diseño de cuadricula de 12 columnas.
- Hacer una pagina web responsive adaptable para distintos dispositivos.
- Hacer un diseño de web responsive para Smartphone y tablet con cambio de
orientación de pantalla.
 IMÁGENES RESPONSIVE CCS3
- Agregar imágenes en el diseño web responsive.
- Agregar imágenes de fondo en el diseño web responsive.
- Cambiar imagen de uso de acuerdo al dispositivo.
- Uso de la etiqueta <picture>
 VIDEOS RESPONSIVE CSS3
- Emplear un video responsive.

CSS Introducción

¿Qué es CSS?
 CSS significa C ascading S tyle S heets
 CSS describe cómo los elementos HTML se van a mostrar en la
pantalla, papel, o en otros medios
 CSS ahorra mucho trabajo . Se puede controlar el diseño de varias
páginas web a la vez
 Estilo externas se almacenan en archivos CSS

CSS Demo - Una página HTML - Múltiples

estilos!
Aquí vamos a mostrar una página HTML que se muestra con cuatro hojas
de estilo diferentes. Haga clic en la "hoja de estilo 1", "2 de estilo", "hoja
de estilo 3", "4" de hojas de estilo enlaces de abajo para ver los diferentes
estilos:
¿Por qué usar CSS?
CSS se utiliza para definir estilos para sus páginas web, incluyendo el
diseño, la disposición y las variaciones en la pantalla para diferentes
dispositivos y tamaños de pantalla.

CSS resuelto un problema grande

HTML fue nunca tuvo la intención de contener etiquetas para dar formato a
una página web!

HTML fue creado para describir el contenido de una página web, como:

<H1> Este es un encabezado </ h1>

<P> Esto es un párrafo. </ P>

Cuando se añaden etiquetas como <font> y los atributos de color a la

especificación HTML 3.2, que comenzó una pesadilla para los
desarrolladores web. Desarrollo de grandes sitios web, que se han añadido
fuentes y color de información para cada página, se convirtió en un proceso
largo y costoso.

Para resolver este problema, el World Wide Web Consortium (W3C) creado
CSS.

CSS elimina el estilo de formato de la página HTML!

CSS ahorra mucho trabajo!

Las definiciones de estilo normalmente se guardan en archivos .css
externos.

Con una hoja de estilos externa, puede cambiar el aspecto de un sitio web
completo cambiando un archivo!

CSS sintaxis y selectores

sintaxis CSS
Un conjunto de reglas CSS consta de un selector y un bloque de
declaración:

Los puntos selector para el elemento HTML que desea estilo.

El bloque de declaración contiene uno o más declaraciones separados por

punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor,
separados por dos puntos.

Una declaración CSS siempre termina con un punto y coma, y los bloques
de declaraciones están rodeados por llaves.

En el siguiente ejemplo todas <p> elementos serán-centro alineados, con

un color de texto de color rojo:

Ejemplo
p {
color: red;
text-align: center;
}

Los selectores CSS

selectores CSS se utilizan para "encontrar" (o seleccionar) elementos HTML
en función de su nombre del elemento, ID, clase, atributo, y mucho más.

El selector de elementos
El selector de elementos selecciona elementos basados en el nombre del
elemento.

Puede seleccionar todos los elementos <p> en una página como esta (en
este caso, todos los elementos <p> serán centro alineado, con un color
rojo texto):

p {
text-align: center;
color: red;
}
El selector de ID
El selector de ID utiliza el atributo id de un elemento HTML para seleccionar
un elemento específico.

La identificación de un elemento debe ser único dentro de una página, por

lo que el selector de ID se utiliza para seleccionar un elemento único!

Para seleccionar un elemento con un ID específico, escribe un carácter

almohadilla (#), seguido por el id del elemento.

La regla de estilo a continuación se aplica al elemento HTML con id =

"párrafo1":

#para1 {
text-align: center;
color: red;
}

Nota: Un nombre de ID no puede comenzar con un número!

El selector de clase
El selector de clase selecciona elementos con un atributo de clase
específica.

Para seleccionar elementos con una clase específica, escriba un punto (.)
Carácter, seguido del nombre de la clase.

En el siguiente ejemplo, todos los elementos HTML con class = "centro"

serán rojo y alineado al centro:

.center {
text-align: center;
color: red;
}

También puede especificar que los elementos HTML específicos solamente

deben verse afectadas por una clase.
En el siguiente ejemplo, solamente <p> elementos con class = "centro"
serán-centro alineado:

p.center {
text-align: center;
color: red;
}

elementos HTML también puede referirse a más de una clase.

En el ejemplo siguiente, el elemento <p> será labrado de acuerdo con class

= "centro" y a class = "grande":

<p class="center large">This paragraph refers to two classes.</p>

Nota: Un nombre de clase no puede comenzar con un número!

La agrupación de selectores
Si tiene elementos con las mismas definiciones de estilo, como este:

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

Será mejor para agrupar los selectores, para minimizar el código.

Para selectores de grupo, separar cada selector con una coma.

En el siguiente ejemplo hemos agrupado los selectores en el código
anterior:

h1, h2, p {
text-align: center;
color: red;
}

Comentarios CSS
Los comentarios se utilizan para explicar el código, y puede ayudar al editar
el código fuente en una fecha posterior.

Los comentarios son ignorados por los navegadores.

Un comentario comienza con CSS / * y termina con * /. Los comentarios

también pueden abarcar varias líneas:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

CSS : cómo ...

Cuando un navegador lee una hoja de estilo, se dará formato al

documento HTML de acuerdo con la información contenida en la hoja de
estilo.

Tres formas de insertar CSS

Hay tres maneras de insertar una hoja de estilo:

 hoja de estilos externa

 hoja de estilo interna
  estilo en línea

Hoja de estilos externa

Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web
completo cambiando un archivo!

Cada página debe incluir una referencia al archivo de hoja de estilos

externa dentro del elemento <link>. El elemento<link>vadentro de la
sección<head>:

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

Una hoja de estilo externa puede estar escrito en cualquier editor de

texto. El archivo no debe contener ninguna etiqueta HTML. El archivo de
hoja de estilo debe guardarse con la extensión .css.

Así es como el "miestilo.css" se ve:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Nota: No agregue un espacio entre el valor de la propiedad y la unidad

(como margin-left: 20 px;). La forma correcta es:margin-left: 20px;

Hoja de estilo interna

Una hoja de estilo interna puede ser usada si una sola página tiene un
estilo único.

estilos internos se definen dentro del elemento <style>, dentro de la

sección <head> de una página HTML:

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

estilos en línea
Un estilo en línea se puede utilizar para aplicar un estilo único para un solo
elemento.

Para utilizar los estilos en línea, añadir el atributo de estilo al elemento

relevante. El atributo de estilo puede contener cualquier propiedad CSS.

El siguiente ejemplo muestra cómo cambiar el color y el margen izquierdo

de un elemento <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Consejo: Un estilo en línea pierde muchas de las ventajas de una hoja de

estilo (mezclando el contenido con la presentación). Utilizar este método
con moderación.

Hojas de estilo en múltiples

Si algunas propiedades se han definido para el mismo selector (elemento)
en diferentes hojas de estilo, se utilizará el valor de la última hoja de
estilos de lectura.

Ejemplo
Supongamos que una hoja de estilo externa tiene la siguiente estilo para el
elemento <h1>:

h1 {
color: navy;
}
a continuación, se supone que una hoja de estilo interna también tiene la
siguiente estilo para el elemento <h1>:

h1 {
color: orange;
}

Si el estilo interno se define después de que el enlace a la hoja de estilo

externa, los <h1> elementos serán "naranja":

<head>6bch7koo
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Sin embargo, si el estilo interno se define antes de que el enlace a la hoja

de estilo externa, los <h1> elementos serán "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Solicitar en cascada
Qué estilo se utilizará cuando no se especifica más de un estilo de un
elemento HTML?

En términos generales se puede decir que todos los estilos voluntad "en
cascada" en una nueva hoja de estilos "virtual" por las siguientes reglas,
donde el número uno tiene la más alta prioridad:

1. estilo en línea (dentro de un elemento HTML)

2. hojas de estilo externos e internos (en la sección de la cabeza)
3. por defecto del navegador
Por lo tanto, un estilo en línea (dentro de un elemento HTML específico)
tiene la prioridad más alta, lo que significa que va a anular un estilo
definido dentro de la etiqueta <head>, o en una hoja de estilos externa, o
un valor por defecto del navegador.

CSS Colores
Los colores en CSS son más a menudo especificados por:

 un nombre de color válido - como "rojo"

 un valor RGB - como "rgb (255, 0, 0)"
 un valor HEX - como "# FF0000"

Los nombres de color

Colores establecidos mediante el uso de nombres de colores:

Nota: Los nombres de color no son mayúsculas y minúsculas: "Rojo" es el

mismo que el "rojo" o "RED".

HTML y CSS es compatible con 140 nombres de colores estándar .

RGB (rojo, verde, azul)
valores de color RGB se pueden especificar utilizando esta fórmula: RGB
(rojo, verde, azul).

Cada parámetro (rojo, verde, azul) define la intensidad del color entre 0 y
255.

Por ejemplo, rgb(255,0,0)se muestra como rojo, porque el rojo está

ajustado a su valor más alto (255) y los otros se ponen a 0. Experimento
mezclando los valores RGB a continuación:

Tonos de gris a menudo se definen mediante valores iguales para todas las
3 fuentes de luz:
Colores hexadecimales
Valores RGB también pueden ser especificados
usando hexadecimales valores de color en la forma: # RRGGBB , donde
RR (rojo), GG (verde) y BB (azul) son valores hexadecimales entre 00 y FF
(igual que decimal 0-255).

Por ejemplo, #FF0000se muestra como rojo, porque el rojo se establece en

su valor más alto (FF) y los otros se establece en el valor más bajo
(00). Nota: Los valores hexadecimales son sensibles a mayúsculas: "#
FF0000" es lo mismo que "FF0000".

Tonos de gris a menudo se definen mediante valores iguales para todas las
3 fuentes de luz:
Nombres de colores HTML
Los nombres de color compatibles con
todos los navegadores
Todos los navegadores modernos soportan los siguientes 140 nombres de
colores (haga clic en un nombre de color, o un valor hexadecimal, para ver
el color que el color de fondo, junto con diferentes colores del texto):

Color Name HEX Color Shades Mix

AliceBlue #F0F8FF Shades Mix

AntiqueWhite #FAEBD7 Shades Mix

Aqua #00FFFF Shades Mix

Aquamarine #7FFFD4 Shades Mix

Azure #F0FFFF Shades Mix

Beige #F5F5DC Shades Mix

Bisque #FFE4C4 Shades Mix

Black #000000 Shades Mix

BlanchedAlmond #FFEBCD Shades Mix

Blue #0000FF Shades Mix

BlueViolet #8A2BE2 Shades Mix

Brown #A52A2A Shades Mix

BurlyWood #DEB887 Shades Mix

CadetBlue #5F9EA0 Shades Mix

Chartreuse #7FFF00 Shades Mix

Chocolate #D2691E Shades Mix

Coral #FF7F50 Shades Mix

CornflowerBlue #6495ED Shades Mix

Cornsilk #FFF8DC Shades Mix

Crimson #DC143C Shades Mix

Cyan #00FFFF Shades Mix

DarkBlue #00008B Shades Mix

DarkCyan #008B8B Shades Mix

DarkGoldenRod #B8860B Shades Mix

DarkGray #A9A9A9 Shades Mix

DarkGrey #A9A9A9 Shades Mix

DarkGreen #006400 Shades Mix

DarkKhaki #BDB76B Shades Mix

DarkMagenta #8B008B Shades Mix

DarkOliveGreen #556B2F Shades Mix

DarkOrange #FF8C00 Shades Mix

DarkOrchid #9932CC Shades Mix

DarkRed #8B0000 Shades Mix

DarkSalmon #E9967A Shades Mix

DarkSeaGreen #8FBC8F Shades Mix

DarkSlateBlue #483D8B Shades Mix

DarkSlateGray #2F4F4F Shades Mix

DarkSlateGrey #2F4F4F Shades Mix

DarkTurquoise #00CED1 Shades Mix

DarkViolet #9400D3 Shades Mix

DeepPink #FF1493 Shades Mix

DeepSkyBlue #00BFFF Shades Mix

DimGray #696969 Shades Mix

DimGrey #696969 Shades Mix

DodgerBlue #1E90FF Shades Mix

FireBrick #B22222 Shades Mix

FloralWhite #FFFAF0 Shades Mix

ForestGreen #228B22 Shades Mix

Fuchsia #FF00FF Shades Mix

Gainsboro #DCDCDC Shades Mix

GhostWhite #F8F8FF Shades Mix

Gold #FFD700 Shades Mix

GoldenRod #DAA520 Shades Mix

Gray #808080 Shades Mix

Grey #808080 Shades Mix

Green #008000 Shades Mix

GreenYellow #ADFF2F Shades Mix

HoneyDew #F0FFF0 Shades Mix

HotPink #FF69B4 Shades Mix

IndianRed #CD5C5C Shades Mix

Indigo #4B0082 Shades Mix

Ivory #FFFFF0 Shades Mix

Khaki #F0E68C Shades Mix

Lavender #E6E6FA Shades Mix

LavenderBlush #FFF0F5 Shades Mix

LawnGreen #7CFC00 Shades Mix

LemonChiffon #FFFACD Shades Mix

LightBlue #ADD8E6 Shades Mix

LightCoral #F08080 Shades Mix

LightCyan #E0FFFF Shades Mix

LightGoldenRodYellow #FAFAD2 Shades Mix

LightGray #D3D3D3 Shades Mix

LightGrey #D3D3D3 Shades Mix

LightGreen #90EE90 Shades Mix

LightPink #FFB6C1 Shades Mix

LightSalmon #FFA07A Shades Mix

LightSeaGreen #20B2AA Shades Mix

LightSkyBlue #87CEFA Shades Mix

LightSlateGray #778899 Shades Mix

LightSlateGrey #778899 Shades Mix

LightSteelBlue #B0C4DE Shades Mix

LightYellow #FFFFE0 Shades Mix

Lime #00FF00 Shades Mix

LimeGreen #32CD32 Shades Mix

Linen #FAF0E6 Shades Mix

Magenta #FF00FF Shades Mix

Maroon #800000 Shades Mix

MediumAquaMarine #66CDAA Shades Mix

MediumBlue #0000CD Shades Mix

MediumOrchid #BA55D3 Shades Mix

MediumPurple #9370DB Shades Mix

MediumSeaGreen #3CB371 Shades Mix

MediumSlateBlue #7B68EE Shades Mix

MediumSpringGreen #00FA9A Shades Mix

MediumTurquoise #48D1CC Shades Mix

MediumVioletRed #C71585 Shades Mix

MidnightBlue #191970 Shades Mix

MintCream #F5FFFA Shades Mix

MistyRose #FFE4E1 Shades Mix

Moccasin #FFE4B5 Shades Mix

NavajoWhite #FFDEAD Shades Mix

Navy #000080 Shades Mix

OldLace #FDF5E6 Shades Mix

Olive #808000 Shades Mix

OliveDrab #6B8E23 Shades Mix

Orange #FFA500 Shades Mix

OrangeRed #FF4500 Shades Mix

Orchid #DA70D6 Shades Mix

PaleGoldenRod #EEE8AA Shades Mix

PaleGreen #98FB98 Shades Mix

PaleTurquoise #AFEEEE Shades Mix

PaleVioletRed #DB7093 Shades Mix

PapayaWhip #FFEFD5 Shades Mix

PeachPuff #FFDAB9 Shades Mix

Peru #CD853F Shades Mix

Pink #FFC0CB Shades Mix

Plum #DDA0DD Shades Mix

PowderBlue #B0E0E6 Shades Mix

Purple #800080 Shades Mix

RebeccaPurple #663399 Shades Mix

Red #FF0000 Shades Mix

RosyBrown #BC8F8F Shades Mix

RoyalBlue #4169E1 Shades Mix

SaddleBrown #8B4513 Shades Mix

Salmon #FA8072 Shades Mix

SandyBrown #F4A460 Shades Mix

SeaGreen #2E8B57 Shades Mix

SeaShell #FFF5EE Shades Mix

Sienna #A0522D Shades Mix

Silver #C0C0C0 Shades Mix

SkyBlue #87CEEB Shades Mix

SlateBlue #6A5ACD Shades Mix

SlateGray #708090 Shades Mix

SlateGrey #708090 Shades Mix

Snow #FFFAFA Shades Mix

SpringGreen #00FF7F Shades Mix

SteelBlue #4682B4 Shades Mix

Tan #D2B48C Shades Mix

Teal #008080 Shades Mix

Thistle #D8BFD8 Shades Mix

Tomato #FF6347 Shades Mix

Turquoise #40E0D0 Shades Mix

Violet #EE82EE Shades Mix

Wheat #F5DEB3 Shades Mix

White #FFFFFF Shades Mix

WhiteSmoke #F5F5F5 Shades Mix

Yellow #FFFF00 Shades Mix

YellowGreen #9ACD32 Shades Mix

Named Colors Sorted by HEX Value

Color Name HEX Color Shades Mix

Black #000000 Shades Mix

Navy #000080 Shades Mix

DarkBlue #00008B Shades Mix

MediumBlue #0000CD Shades Mix

Blue #0000FF Shades Mix

DarkGreen #006400 Shades Mix

Green #008000 Shades Mix

Teal #008080 Shades Mix

DarkCyan #008B8B Shades Mix

DeepSkyBlue #00BFFF Shades Mix

DarkTurquoise #00CED1 Shades Mix

MediumSpringGreen #00FA9A Shades Mix

Lime #00FF00 Shades Mix

SpringGreen #00FF7F Shades Mix

Aqua #00FFFF Shades Mix

Cyan #00FFFF Shades Mix

MidnightBlue #191970 Shades Mix

DodgerBlue #1E90FF Shades Mix

LightSeaGreen #20B2AA Shades Mix

ForestGreen #228B22 Shades Mix

SeaGreen #2E8B57 Shades Mix

DarkSlateGray #2F4F4F Shades Mix

DarkSlateGrey #2F4F4F Shades Mix

LimeGreen #32CD32 Shades Mix

MediumSeaGreen #3CB371 Shades Mix

Turquoise #40E0D0 Shades Mix

RoyalBlue #4169E1 Shades Mix

SteelBlue #4682B4 Shades Mix

DarkSlateBlue #483D8B Shades Mix

MediumTurquoise #48D1CC Shades Mix

Indigo #4B0082 Shades Mix

DarkOliveGreen #556B2F Shades Mix

CadetBlue #5F9EA0 Shades Mix

CornflowerBlue #6495ED Shades Mix

RebeccaPurple #663399 Shades Mix

MediumAquaMarine #66CDAA Shades Mix

DimGray #696969 Shades Mix

DimGrey #696969 Shades Mix

SlateBlue #6A5ACD Shades Mix

OliveDrab #6B8E23 Shades Mix

SlateGray #708090 Shades Mix

SlateGrey #708090 Shades Mix

LightSlateGray #778899 Shades Mix

LightSlateGrey #778899 Shades Mix

MediumSlateBlue #7B68EE Shades Mix

LawnGreen #7CFC00 Shades Mix

Chartreuse #7FFF00 Shades Mix

Aquamarine #7FFFD4 Shades Mix

Maroon #800000 Shades Mix

Purple #800080 Shades Mix

Olive #808000 Shades Mix

Gray #808080 Shades Mix

Grey #808080 Shades Mix

SkyBlue #87CEEB Shades Mix

LightSkyBlue #87CEFA Shades Mix

BlueViolet #8A2BE2 Shades Mix

DarkRed #8B0000 Shades Mix

DarkMagenta #8B008B Shades Mix

SaddleBrown #8B4513 Shades Mix

DarkSeaGreen #8FBC8F Shades Mix

LightGreen #90EE90 Shades Mix

MediumPurple #9370DB Shades Mix

DarkViolet #9400D3 Shades Mix

PaleGreen #98FB98 Shades Mix

DarkOrchid #9932CC Shades Mix

YellowGreen #9ACD32 Shades Mix

Sienna #A0522D Shades Mix

Brown #A52A2A Shades Mix

DarkGray #A9A9A9 Shades Mix

DarkGrey #A9A9A9 Shades Mix

LightBlue #ADD8E6 Shades Mix

GreenYellow #ADFF2F Shades Mix

PaleTurquoise #AFEEEE Shades Mix

LightSteelBlue #B0C4DE Shades Mix

PowderBlue #B0E0E6 Shades Mix

FireBrick #B22222 Shades Mix

DarkGoldenRod #B8860B Shades Mix

MediumOrchid #BA55D3 Shades Mix

RosyBrown #BC8F8F Shades Mix

DarkKhaki #BDB76B Shades Mix

Silver #C0C0C0 Shades Mix

MediumVioletRed #C71585 Shades Mix

IndianRed #CD5C5C Shades Mix

Peru #CD853F Shades Mix

Chocolate #D2691E Shades Mix

Tan #D2B48C Shades Mix

LightGray #D3D3D3 Shades Mix

LightGrey #D3D3D3 Shades Mix

Thistle #D8BFD8 Shades Mix

Orchid #DA70D6 Shades Mix

GoldenRod #DAA520 Shades Mix

PaleVioletRed #DB7093 Shades Mix

Crimson #DC143C Shades Mix

Gainsboro #DCDCDC Shades Mix

Plum #DDA0DD Shades Mix

BurlyWood #DEB887 Shades Mix

LightCyan #E0FFFF Shades Mix

Lavender #E6E6FA Shades Mix

DarkSalmon #E9967A Shades Mix

Violet #EE82EE Shades Mix

PaleGoldenRod #EEE8AA Shades Mix

LightCoral #F08080 Shades Mix

Khaki #F0E68C Shades Mix

AliceBlue #F0F8FF Shades Mix

HoneyDew #F0FFF0 Shades Mix

Azure #F0FFFF Shades Mix

SandyBrown #F4A460 Shades Mix

Wheat #F5DEB3 Shades Mix

Beige #F5F5DC Shades Mix

WhiteSmoke #F5F5F5 Shades Mix

MintCream #F5FFFA Shades Mix

GhostWhite #F8F8FF Shades Mix

Salmon #FA8072 Shades Mix

AntiqueWhite #FAEBD7 Shades Mix

Linen #FAF0E6 Shades Mix

LightGoldenRodYellow #FAFAD2 Shades Mix

OldLace #FDF5E6 Shades Mix

Red #FF0000 Shades Mix

Fuchsia #FF00FF Shades Mix

Magenta #FF00FF Shades Mix

DeepPink #FF1493 Shades Mix

OrangeRed #FF4500 Shades Mix

Tomato #FF6347 Shades Mix

HotPink #FF69B4 Shades Mix

Coral #FF7F50 Shades Mix

DarkOrange #FF8C00 Shades Mix

LightSalmon #FFA07A Shades Mix

Orange #FFA500 Shades Mix

LightPink #FFB6C1 Shades Mix

Pink #FFC0CB Shades Mix

Gold #FFD700 Shades Mix

PeachPuff #FFDAB9 Shades Mix

NavajoWhite #FFDEAD Shades Mix

Moccasin #FFE4B5 Shades Mix

Bisque #FFE4C4 Shades Mix

MistyRose #FFE4E1 Shades Mix

BlanchedAlmond #FFEBCD Shades Mix

PapayaWhip #FFEFD5 Shades Mix

LavenderBlush #FFF0F5 Shades Mix

SeaShell #FFF5EE Shades Mix

Cornsilk #FFF8DC Shades Mix

LemonChiffon #FFFACD Shades Mix

FloralWhite #FFFAF0 Shades Mix

Snow #FFFAFA Shades Mix

Yellow #FFFF00 Shades Mix

LightYellow #FFFFE0 Shades Mix

Ivory #FFFFF0 Shades Mix

White #FFFFFF Shades Mix

Los nombres de color Clasificación por
Grupos de colores
Todos los navegadores modernos soportan los siguientes 140 nombres de
colores (haga clic en un nombre de color, o un valor hexadecimal, para ver
el color que el color de fondo, junto con diferentes colores del texto):

Pink Colors
Color Name HEX Color Shades Mix

Pink #FFC0CB Shades Mix

LightPink #FFB6C1 Shades Mix

HotPink #FF69B4 Shades Mix

DeepPink #FF1493 Shades Mix

PaleVioletRed #DB7093 Shades Mix

MediumVioletRed #C71585 Shades Mix

Purple Colors
Color Name HEX Color Shades Mix

Lavender #E6E6FA Shades Mix

Thistle #D8BFD8 Shades Mix

Plum #DDA0DD Shades Mix

Orchid #DA70D6 Shades Mix

Violet #EE82EE Shades Mix

Fuchsia #FF00FF Shades Mix

Magenta #FF00FF Shades Mix

MediumOrchid #BA55D3 Shades Mix

DarkOrchid #9932CC Shades Mix

DarkViolet #9400D3 Shades Mix

BlueViolet #8A2BE2 Shades Mix

DarkMagenta #8B008B Shades Mix

Purple #800080 Shades Mix

MediumPurple #9370DB Shades Mix

MediumSlateBlue #7B68EE Shades Mix

SlateBlue #6A5ACD Shades Mix

DarkSlateBlue #483D8B Shades Mix

RebeccaPurple #663399 Shades Mix

Indigo #4B0082 Shades Mix

Red Colors
Color Name HEX Color Shades Mix

LightSalmon #FFA07A Shades Mix

Salmon #FA8072 Shades Mix

DarkSalmon #E9967A Shades Mix

LightCoral #F08080 Shades Mix

IndianRed #CD5C5C Shades Mix

Crimson #DC143C Shades Mix

Red #FF0000 Shades Mix

FireBrick #B22222 Shades Mix

DarkRed #8B0000 Shades Mix

Orange Colors
Color Name HEX Color Shades Mix

Orange #FFA500 Shades Mix

DarkOrange #FF8C00 Shades Mix

Coral #FF7F50 Shades Mix

Tomato #FF6347 Shades Mix

OrangeRed #FF4500 Shades Mix

Yellow Colors
Color Name HEX Color Shades Mix

Gold #FFD700 Shades Mix

Yellow #FFFF00 Shades Mix

LightYellow #FFFFE0 Shades Mix

LemonChiffon #FFFACD Shades Mix

LightGoldenRodYellow #FAFAD2 Shades Mix

PapayaWhip #FFEFD5 Shades Mix

Moccasin #FFE4B5 Shades Mix

PeachPuff #FFDAB9 Shades Mix

PaleGoldenRod #EEE8AA Shades Mix

Khaki #F0E68C Shades Mix

DarkKhaki #BDB76B Shades Mix

Green Colors
Color Name HEX Color Shades Mix

GreenYellow #ADFF2F Shades Mix

Chartreuse #7FFF00 Shades Mix

LawnGreen #7CFC00 Shades Mix

Lime #00FF00 Shades Mix

LimeGreen #32CD32 Shades Mix

PaleGreen #98FB98 Shades Mix

LightGreen #90EE90 Shades Mix

MediumSpringGreen #00FA9A Shades Mix

SpringGreen #00FF7F Shades Mix

MediumSeaGreen #3CB371 Shades Mix

SeaGreen #2E8B57 Shades Mix

ForestGreen #228B22 Shades Mix

Green #008000 Shades Mix

DarkGreen #006400 Shades Mix

YellowGreen #9ACD32 Shades Mix

OliveDrab #6B8E23 Shades Mix

DarkOliveGreen #556B2F Shades Mix

MediumAquaMarine #66CDAA Shades Mix

DarkSeaGreen #8FBC8F Shades Mix

LightSeaGreen #20B2AA Shades Mix

DarkCyan #008B8B Shades Mix

Teal #008080 Shades Mix

Cyan Colors
Color Name HEX Color Shades Mix

Aqua #00FFFF Shades Mix

Cyan #00FFFF Shades Mix

LightCyan #E0FFFF Shades Mix

PaleTurquoise #AFEEEE Shades Mix

Aquamarine #7FFFD4 Shades Mix

Turquoise #40E0D0 Shades Mix

MediumTurquoise #48D1CC Shades Mix

DarkTurquoise #00CED1 Shades Mix

Blue Colors
Color Name HEX Color Shades Mix

CadetBlue #5F9EA0 Shades Mix

SteelBlue #4682B4 Shades Mix

LightSteelBlue #B0C4DE Shades Mix

LightBlue #ADD8E6 Shades Mix

PowderBlue #B0E0E6 Shades Mix

LightSkyBlue #87CEFA Shades Mix

SkyBlue #87CEEB Shades Mix

CornflowerBlue #6495ED Shades Mix

DeepSkyBlue #00BFFF Shades Mix

DodgerBlue #1E90FF Shades Mix

RoyalBlue #4169E1 Shades Mix

Blue #0000FF Shades Mix

MediumBlue #0000CD Shades Mix

DarkBlue #00008B Shades Mix

Navy #000080 Shades Mix

MidnightBlue #191970 Shades Mix

Brown Colors
Color Name HEX Color Shades Mix

Cornsilk #FFF8DC Shades Mix

BlanchedAlmond #FFEBCD Shades Mix

Bisque #FFE4C4 Shades Mix

NavajoWhite #FFDEAD Shades Mix

Wheat #F5DEB3 Shades Mix

BurlyWood #DEB887 Shades Mix

Tan #D2B48C Shades Mix

RosyBrown #BC8F8F Shades Mix

SandyBrown #F4A460 Shades Mix

GoldenRod #DAA520 Shades Mix

DarkGoldenRod #B8860B Shades Mix

Peru #CD853F Shades Mix

Chocolate #D2691E Shades Mix

Olive #808000 Shades Mix

SaddleBrown #8B4513 Shades Mix

Sienna #A0522D Shades Mix

Brown #A52A2A Shades Mix

Maroon #800000 Shades Mix

White Colors
Color Name HEX Color Shades Mix

White #FFFFFF Shades Mix

Snow #FFFAFA Shades Mix

HoneyDew #F0FFF0 Shades Mix

MintCream #F5FFFA Shades Mix

Azure #F0FFFF Shades Mix

AliceBlue #F0F8FF Shades Mix

GhostWhite #F8F8FF Shades Mix

WhiteSmoke #F5F5F5 Shades Mix

SeaShell #FFF5EE Shades Mix

Beige #F5F5DC Shades Mix

OldLace #FDF5E6 Shades Mix

FloralWhite #FFFAF0 Shades Mix

Ivory #FFFFF0 Shades Mix

AntiqueWhite #FAEBD7 Shades Mix

Linen #FAF0E6 Shades Mix

LavenderBlush #FFF0F5 Shades Mix

MistyRose #FFE4E1 Shades Mix

Grey Colors
Color Name HEX Color Shades Mix

Gainsboro #DCDCDC Shades Mix

LightGray #D3D3D3 Shades Mix

Silver #C0C0C0 Shades Mix

DarkGray #A9A9A9 Shades Mix

DimGray #696969 Shades Mix

Gray #808080 Shades Mix

LightSlateGray #778899 Shades Mix

SlateGray #708090 Shades Mix

DarkSlateGray #2F4F4F Shades Mix

Black #000000 Shades Mix

Grupos de colores HTML

HTML Tonalidades
Sombras de gris
Colores grises se muestran con la misma cantidad de energía para todas las
fuentes de luz.

Para hacer más fácil para usted para seleccionar un color gris hemos
compilado una tabla de tonos grises para usted:

Gray Shades HEX RGB

#000000 rgb(0,0,0)
#080808 rgb(8,8,8)

#101010 rgb(16,16,16)

#181818 rgb(24,24,24)

#202020 rgb(32,32,32)

#282828 rgb(40,40,40)

#303030 rgb(48,48,48)

#383838 rgb(56,56,56)

#404040 rgb(64,64,64)

#484848 rgb(72,72,72)

#505050 rgb(80,80,80)

#585858 rgb(88,88,88)
 #606060 rgb(96,96,96)

#686868 rgb(104,104,104)

#696969 rgb(105,105,105)

#707070 rgb(112,112,112)

#787878 rgb(120,120,120)

HTML Gray #808080 rgb(128,128,128)

#888888 rgb(136,136,136)

#909090 rgb(144,144,144)

#989898 rgb(152,152,152)

#A0A0A0 rgb(160,160,160)

#A8A8A8 rgb(168,168,168)
HTML DarkGray !!! #A9A9A9 rgb(169,169,169)

#B0B0B0 rgb(176,176,176)

#B8B8B8 rgb(184,184,184)

X11 Gray #BEBEBE rgb(190,190,190)

HTML Silver #C0C0C0 rgb(192,192,192)

#C8C8C8 rgb(200,200,200)

#D0D0D0 rgb(208,208,208)

HTML LightGray #D3D3D3 rgb(211,211,211)

#D8D8D8 rgb(216,216,216)

HTML Gainsboro #DCDCDC rgb(220,220,220)

#E0E0E0 rgb(224,224,224)
 #E8E8E8 rgb(232,232,232)

#F0F0F0 rgb(240,240,240)

HTML WhiteSmoke #F5F5F5 rgb(245,245,245)

#F8F8F8 rgb(248,248,248)

HTML White #FFFFFF rgb(255,255,255)

Una anomalía en la tabla anterior es que el HTML gris es más oscuro que el
gris oscuro.

Los nombres de los colores de HTML / CSS se heredan de la norma X11 .

HTML / CSS define gris en el punto medio de la escala de grises de 8 bits

(128,128,128).

X11 define gris a ser (190,190,190); que está más cerca a la plata HTML.

Tonos de rojo
Si nos fijamos en la tabla de colores a continuación, podrás ver el resultado
de la variación de la luz roja de 0 a 255, mientras se mantiene la luz verde
y azul en cero.

Haga clic en los valores hexadecimales, si se desea analizar el color en

nuestro selector de color.
Red Light HEX RGB

#000000 rgb(0,0,0)

#080000 rgb(8,0,0)

#100000 rgb(16,0,0)

#180000 rgb(24,0,0)

#200000 rgb(32,0,0)

#280000 rgb(40,0,0)

#300000 rgb(48,0,0)

#380000 rgb(56,0,0)

#400000 rgb(64,0,0)

#480000 rgb(72,0,0)
#500000 rgb(80,0,0)

#580000 rgb(88,0,0)

#600000 rgb(96,0,0)

#680000 rgb(104,0,0)

#700000 rgb(112,0,0)

#780000 rgb(120,0,0)

#800000 rgb(128,0,0)

#880000 rgb(136,0,0)

#900000 rgb(144,0,0)

#980000 rgb(152,0,0)

#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)

#B00000 rgb(176,0,0)

#B80000 rgb(184,0,0)

#C00000 rgb(192,0,0)

#C80000 rgb(200,0,0)

#D00000 rgb(208,0,0)

#D80000 rgb(216,0,0)

#E00000 rgb(224,0,0)

#E80000 rgb(232,0,0)

#F00000 rgb(240,0,0)

#F80000 rgb(248,0,0)
 #FF0000 rgb(255,0,0)

Colores Web seguro?

Hace muchos años, cuando los ordenadores compatibles máximo de 256
colores diferentes, una lista de 216 "Web seguro colores" fue sugerido
como un estándar Web (la reserva de 40 colores sistema fijo).

Esto no es importante ahora, ya que la mayoría de las computadoras

pueden mostrar millones de colores diferentes.

Esta paleta de colores multi-navegador 216 valores hex fue creado para
asegurar que todos los equipos se mostrará correctamente los colores
cuando se ejecuta una paleta de 256 colores:

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

 CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

colores HSL
HSL Colores
valores de color HSL son compatibles con IE9 +, Firefox, Chrome, Safari y
Opera en 10+.

HSL significa matiz, saturación y luminosidad.

Valores de color HSL se especifican

con: .hsl(hue, saturation, lightness)

Matiz
Hue es una medida de la rueda de color de 0 a 360. 0 es el rojo, el verde
es de 120, 240 es azul.

Saturación
La saturación es un valor de porcentaje; 0% significa un tono de gris y el
100% es el color.

Ligereza
La ligereza es también un porcentaje; 0% es negro, 100% es de color
blanco.

Valores de color HSL son compatibles con todos los navegadores.

Ejemplo
<style>

div {
background-color: hsl(180, 50%, 50%);
color: hsl(0, 0%, 100%);
}

</style>
colores HWB
HWB (Hue, blancura, negrura) es un estándar propuesto para CSS4.

Soporte HTML
HWB no es compatible con HTML (aún), pero se sugiere como un nuevo
estándar en CSS4.

A la espera de CSS4, puede incluir Biblioteca de colores W3Schools', y el

uso de HWB como un atributo HTML así:

Ejemplo
<div data-w3-color="hwb(60, 50%, 0)">

<p>London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="/lib/w3color.js"></script>

Colores CMYK
CMYK es un estándar sugerido para CSS4. Colores
CMYK
Colores CMYK es una combinación de cian, magenta, amarillo y NEGRO.

Las pantallas de ordenador muestran los colores utilizando valores de color

RGB. Impresoras menudo presenta colores usando los valores de color
CMYK.
Soporte HTML
CMYK no es compatible con HTML, pero se sugiere como un nuevo estándar
en CSS4.

A la espera de CSS4, puede incluir Biblioteca de colores W3Schools', y el

uso de CMYK como un atributo HTML así:

Ejemplo
<div data-w3-color="cmyk(100%, 0%, 0%, 0%)">

<p>London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="/lib/w3color.js"></script>

colores nCol
Colores Naturales (nCol)
Los colores naturales (nCol) es una iniciativa de W3Schools.

El sistema está diseñado para que sea más fácil para seleccionar colores
HTML.

NCol especifica colores usando una carta de color con un número para
especificar la distancia (en porcentaje) por el color.

R30 significa un 30% de distancia de rojo , moviéndose hacia

el amarillo . (En otras palabras: Red con 30% de amarillo)
Carta Color Las tonalidades

R Rojo R

R25

R50

R75

Y Amarillo Y

Y25

Y50

Y75

GRAMO Verde GRAMO

 G25

G50

G75

do Cian do

C25

C50

C75

segundo Azul segundo

B25

B50
 B75

METRO Magenta METRO

M25

M50

M75

GRA d segu MET

R Y
MO o ndo RO

El color y la distancia también se puede dar en las tonalidades (0-360):

R = 000 Y = 060 G = 120 C = 180 B = 240 M = 300

Soporte HTML
NCol no es compatible con HTML (aún), pero es muy cerca del nuevo
sistema de color HWB se sugiere en CSS4.

A la espera de CSS4, puede incluir Biblioteca de colores W3Schools', y

utilizar nCol como un atributo HTML así:
Ejemplo
<div data-w3-color="R50,50%,0">

<p>London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="/lib/w3color.js"></script>

Biblioteca de colores W3Schools

La biblioteca JavaScript utilizado en el ejemplo anterior se puede descargar
desde

https://www.w3schools.com/lib/w3color.js

¿Por nCol?
Tratando de explicar los colores RGB o utilizando la notación hexadecimal
es muy difícil.

Se puede saber qué color RGB (199,21,133) es?

RGB se basa en la forma de producir físicamente colores mediante la

mezcla de fuentes de luz.

NCol se basa en lo que los colores parecen al ojo humano.

Debido a esto, nCol hace que sea mucho más fácil para describir colores.

Los colores naturales fueron descritos por primera vez por Karl Ewald
Konstantin Hering (Alemania 1834-1918).

Gradiente de color
Código CSS:
div {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}

Color Brands
The hex values below are approximate values intended to simulate
branded colors.

HEX: #4285F4

HEX: #FBBC05

HEX: #34A853

HEX: #EA4335

Twitter
HEX: #55ACEE

HEX: #292F33

HEX: #66757F

HEX: #CCD6DD

HEX: #E1E8ED

HEX: #FFFFFF

HEX: #3B5998

HEX: #8B9DC3

HEX: #DFE3EE

HEX: #F7F7F7
HEX: #FFFFFF

HEX: #F65314

HEX: #7CBB00

HEX: #00A1F1

HEX: #FFBB00

Intel
HEX: #0F7DC2

Instagram
HEX: #3F729B

IBM
HEX: #006699

Yahoo!
HEX: #7B0099
Amazon
HEX: #FF9900

HEX: #146EB4

Netflix
HEX: #221F1F

HEX: #E50914

Coca-Cola
HEX: #ED1C16

Pepsi
HEX: #E32934

HEX: #004883

IKEA
HEX: #FFCC00

HEX: #003399
Android
HEX: #A4C639

Color Trends
Color of the Year 2017
Greenery
HEX: #92B558

Pantone 15-0343

The HEX values are non official approximate values intended to simulate
the colors in HTML.

The Hottest Fall Colors for 2017

Grenadine
HEX: #DC4C46

Pantone 17-1558

Tawny Port
HEX: #672E3B

Pantone 19-1725
Ballet Slipper
HEX: #F3D6E4

Pantone 13-2808

Butterum
HEX: #C48F65

Pantone 16-1341

Navy Peony
HEX: #223A5E

Pantone 19-4029

Neutral Gray
HEX: #898E8C

Pantone 17-4402

Shaded Spruce
HEX: #005960

Pantone 19-4524

Golden Lime
HEX: #9C9A40

Pantone 16-0543
Marina
HEX: #4F84C4

Pantone 17-4041

Autumn Maple
HEX: #D2691E

Pantone 17-1145

The 10 Hottest Spring Colors for 2016

The Pantone fashion color report for the Spring 2016 told us that we would
wear colors that suggests health, peace, and accessibility because they
make us feel comfortable.

The 2016 spring hues also reflect our access to modern art and a desire for
natural surroundings.

Rose Quartz
HEX: #F7CAC9

Designers 2016: TOSIA, Houghton, M.PATMOS, Charles Youssef

Goes with: Peach Echo, Serenity, Lilac Grey

Peach Echo
HEX: #F7786B

Designers 2016: Christan Siriano, Rebecca Minkhoff, Dennis Basso, Ella

Moss

Goes with: Rose Quartz, Serenity, Lilac Grey

Serenity
HEX: #91A8D0

Designers 2016: Emilio Sosa, Rachel Pally Harbison

Goes with: Buttercup, Snorkel Blue, Peach Echo

Snorkel Blue
HEX: #034F84

Designers 2016 Georgine, Tasashi Shoji, WHIT NY, Angelys Balek

Goes with: Buttercup, Iced Coffee, Peach Echo

Limpet Shell
HEX: #98DDDE

Designers 2016 Ground Zero, O'2nd, Kung Katherine

Goes with: Iced Coffee, Peach Echo, Rose Quartz

Lilac Grey
HEX: #9896A4

Designers 2016: KARIGRAM, Rebecca Vallance, Yoana Baraschi

Goes with: Fiesta, Green Flash, Iced Cofee

Iced Coffee
HEX: #B18F6A

Designers 2016: Noon by Noor, Daniel Silverstain

Goes with: Rose Quartz, Serenity, Lilac Grey

Fiesta
HEX: #DD4132

Designers 2016: Pamella Roland, Malone Souliers

Goes with: Snorkel Blue, Green Flash, Limpet Shell

Buttercup
HEX: #FAE03C

Designers 2016: Charles Á Ron,David Hart

Goes with: Snorkel Blue, Serenity, Lilac Grey

Green Flash
HEX: #79C753

Designers 2015 Angel Sanchez, Nicole Miller

Goes with: Snorkel Blue, Serenity, Limpet Shell

Colors of the Year 2000-2017

2017 Greenery
Hex #88B04B

RGB(136, 176, 75)

Pantone 15-0343

2016 Rose Quartz

Hex #F7CAC9

RGB(247, 202, 201)

Pantone 13-1520

2016 Serenity
Hex #92A8D1

RGB(146, 168, 209)

Pantone 15-3919

2015 Marsala
Hex #955251

RGB(149, 82, 81)

Pantone 18-1438

2014 Radiand Orchid

Hex #B565A7

RGB(181, 101, 167)

Pantone 18-3224

2013 Emerald
Hex #009B77

RGB(0, 155, 119)

Pantone 17-5641
2012 Tangerine Tango
Hex #DD4124

RGB(221, 65, 36)

Pantone 17-1463

2011 Honeysucle
Hex #D65076

RGB(214, 80, 118)

Pantone 18-2120

2010 Turquoise
Hex #45B8AC

RGB(68, 184, 172)

Pantone 15-5510

2009 Mimosa
Hex #EFC050

RGB(239, 192, 80)

Pantone 14-0848

2008 Blue Izis

Hex #5B5EA6

RGB(91, 94, 166)

Pantone 18-3943

2007 Chili Pepper

Hex #9B2335

RGB(155, 35, 53)

Pantone 19-1557

2006 Sand Dollar

Hex #DFCFBE

RGB(223, 207, 190)

Pantone 13-1106

2005 Blue Turquoise

Hex #55B4B0

RGB(85, 180, 176)

Pantone 15-5217

2004 Tigerlily
Hex #E15D44

RGB(225, 93, 68)

Pantone 17-1456

2003 Aqua Sky

Hex #7FCDCD
RGB(127, 205, 205)

Pantone 14-4811

2002 True Red

Hex #BC243C

RGB(188, 36, 60)

Pantone 19-1664

2001 Fuchsia Rose

Hex #C3447A

RGB(195, 68, 122)

Pantone 17-2031

2000 Cerulean Blue

Hex #98B4D4

RGB(152, 180, 212)

Pantone 15-4020

The Perception of Colors

Red
Red symbolize high energy and strength.

Red is associated with blood, danger, and fire.

Red is associated with full stop in traffic.

Red is associated with excitement and love.

Red draws attention.

Green is Harmony and Nature

Green is associated with growth and freshness.

Green is associated with safety and free passage in traffic.

Green has healing power. It is the most restful color for the human eye.

Blue is Sea and Sky

Blue is associated with depth and stability.

Blue is associated with intelligence and wisdom.

Blue is associated with high quality.

Blue is associated with truth and heaven.

Yellow is Light and Sunshine

Yellow is associated with energy and optimism.

Yellow is associated with joy and happiness.

Yellow is associated with competence.

Black is Power and Authority.

Black is associated with elegance and formality.

Black is associated with mystery and death.

Black is associated with fear and evil.

Grey is Conservative
Grey is associated with security and reliability.

Grey is associated with classic long-lasting knowledge.

Grey is associated with professional and dignified wisdom.

White is Purity and Cleanliness

White is associated with neutrality.

White is associated with goodness.

White is associated with innocence.

CSS Fondos

Color de fondo
La background-color propiedad especifica el color de fondo de un
elemento.

El color de fondo de una página se establece así:

body {
background-color: lightblue;
}

Con CSS, un color más a menudo se especifica mediante:

 un nombre de color válido - como "red"

 un valor HEX - como "# FF0000"
 un valor RGB - como "rgb (255,0,0)"

En el siguiente ejemplo, el <h1>, <p> y <div> elementos tienen diferentes

colores de fondo:

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

Imagen de fondo
La background-image propiedad especifica una imagen para usar como el
fondo de un elemento.

Por defecto, la imagen se repite de manera que cubra todo el elemento.

La imagen de fondo de una página se puede configurar de esta manera:

body {
background-image: url("paper.gif");
}

A continuación se muestra un ejemplo de una mala combinación de la

imagen de fondo y de texto. El texto no es legible:

body {
background-image: url("bgdesert.jpg");
}
Nota: Cuando se utiliza una imagen de fondo, utilice una imagen que no
perturbe el texto. La imagen debe estar en la carpeta del CSS.

Fondo de imagen - Repetir horizontal o

vertical
Por defecto, la background-image propiedad se repite una imagen, tanto
horizontal como verticalmente.

Algunas de las imágenes se deben repetir sólo en horizontal o en vertical, o

van a parecer extraño, como este:

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

Si la imagen anterior se repite sólo en horizontal ( background-repeat:

repeat-x;), el fondo se verá mejor:

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Consejo: Para repetir una imagen vertical, ajuste background-repeat:

repeat-y;

Fondo de imagen - Establecer la posición y

no-repeat
Mostrando la imagen de fondo una sola vez también se especifica por
la background-repeat propiedad:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
En el ejemplo anterior, la imagen de fondo se muestra en el mismo lugar
que el texto. Queremos cambiar la posición de la imagen, de manera que
no perturbe el texto demasiado.

La posición de la imagen se especifica por la background-position

propiedad:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

la posicion tambien se puede indicar de la siguiente manera:

background-position: x% x% x% x%; donde esto representa la posicion en

los cuatro lados de la pantalla. También se puede indicar en pixeles.

Fondo de imagen - Posición fija

Para especificar que la imagen de fondo debe ser fijo (no se desplazará con
el resto de la página ósea que al bajar en la pagina el fondo quede fijo y
solo se mueva el contenido de la misma), utilice la background-
attachment propiedad:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

A veces se emplea en vez de fixed scroll donde la imagen se mantiene fija

pero se mueve junto con el contenido.

Antecedentes - Abreviación de las

propiedades
Para acortar el código, también es posible especificar todas las propiedades
de fondo en una sola propiedad. Esto se llama una propiedad abreviada.

La propiedad abreviada para el fondo es background:

body {
background: #ffffffurl("img_tree.png") no-repeat right top;
}

Cuando se utiliza la propiedad rápida el orden de los valores de la

propiedad es:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

No importa si uno de los valores de la propiedad no se encuentra, siempre

y cuando los otros son en este orden.

CSS fronteras
Propiedades de borde CSS
Los CSS border propiedades le permiten especificar el estilo, el ancho y el
color del borde de un elemento.
Estilo de borde
La border-style propiedad especifica qué tipo de frontera que se vea.

Se permiten los siguientes valores:

 dotted - Define un borde de puntos

 dashed - Define un borde punteado
 solid - Define una frontera sólida
 double - Define un borde doble
 groove- Define un borde acanalado 3D. El efecto depende del valor
de border-color
 ridge- Define un borde estriado 3D. El efecto depende del valor de
border-color
 inset- Define una frontera inserción 3D. El efecto depende del valor
de border-color
 outset- Define una frontera principio 3D. El efecto depende del valor
de border-color
 none - Define ninguna frontera
 hidden - Define una frontera oculto

La border-style propiedad puede tener de uno a cuatro valores (por el

borde superior, borde derecho, borde inferior y el borde izquierdo).

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotteddashedsoliddouble;}

Resultado:

Nota: Ninguna de las otras propiedades de borde CSS se describen a

continuación tendrá ningún efecto a menos que la border-style propiedad
se establece!

Ancho del borde

La border-width propiedad especifica la anchura de los cuatro bordes.

La anchura se puede establecer como un tamaño específico (en px, pt, cm,
em, etc) o mediante el uso de uno de los tres valores predefinidos: fino,
medio o grueso.

La border-width propiedad puede tener de uno a cuatro valores (por el

borde superior, borde derecho, borde inferior y el borde izquierdo).
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

Color del borde

El border-color propiedad se usa para ajustar el color de los cuatro
bordes.

El color se puede ajustar por:

 Nombre - indique un nombre de color, como "rojo"

 Hex - especificar un valor hexadecimal, como "# FF0000"
 RGB - especificar un valor RGB, así como "rgb (255,0,0)"
 transparente

La border-color propiedad puede tener de uno a cuatro valores (por el

borde superior, borde derecho, borde inferior y el borde izquierdo).

Si border-color no se establece, se hereda el color del elemento.

Ejemplo
p.one {
border-style: solid;
border-color: red;
}

p.two {
 border-style: solid;
border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}

Border - Lados individuales

De los ejemplos anteriores se han visto que es posible especificar una
frontera diferente para cada lado.

En CSS, también hay propiedades para especificar cada uno de los bordes
(superior, derecho, inferior e izquierda):

Ejemplo
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

El ejemplo anterior muestra el mismo resultado que esto:

Ejemplo
p {
border-style: dottedsolid;
}

Así pues, aquí es cómo funciona:

Si la border-style propiedad tiene cuatro valores:

 -Estilo de borde: punteada doble sólida discontinua;

o el borde superior está salpicado
 o borde derecho es sólida
o borde inferior es el doble
o borde izquierdo es discontinua

Si la border-style propiedad tiene tres valores:

 frontera de estilo: punteada doble sólido;

o el borde superior está salpicado
o fronteras derecha e izquierda son sólidos
o borde inferior es el doble

Si la border-style propiedad tiene dos valores:

 frontera de estilo: punteado sólido;

o bordes superior e inferior son de puntos
o fronteras derecha e izquierda son sólidos

Si la border-style propiedad tiene un valor:

 frontera de estilo: de puntos;

o los cuatro bordes son de puntos

La border-style propiedad se utiliza en el ejemplo anterior. Sin embargo,

también trabaja con border-width y border-color.

Border - Abreviación de las propiedades

Como se puede ver en los ejemplos anteriores, hay muchas propiedades a
tener en cuenta cuando se trata de fronteras.

Para acortar el código, también es posible especificar todas las propiedades

de borde individuales en una sola propiedad.

La border propiedad es una propiedad abreviada para las siguientes

propiedades de borde individuales:

 border-width
 border-style (necesario)
 border-color
Ejemplo
p {
border: 5px solid red;
}

Resultado:

También puede especificar todas las propiedades de borde individuales para

un solo lado:

Borde izquierdo
p {
border-left: 6px solid red;
background-color: lightgrey;
}

Borde inferior
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

Resultado:

redondeada Fronteras
La border-radius propiedad se utiliza para añadir bordes redondeados a
un elemento:
Ejemplo
p {
border: 2px solid red;
border-radius: 5px;
}

Nota: La border-radius propiedad no es compatible con Internet Explorer

8 y versiones anteriores.

Existen mas especificaciones y reglas CSS de borde en CSS3.

Todas las propiedades de borde CSS

Property Description

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius Sets all the four border-*-radius properties for rounded corners

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

CSS márgenes

márgenes CSS
Los CSS margin propiedades se utilizan para generar el espacio alrededor
de los elementos.

Las margin propiedades establecen el tamaño del espacio blanco fuera de

la frontera.
Con CSS, usted tiene el control total sobre los márgenes. Hay propiedades
CSS para establecer el margen de cada lado de un elemento (arriba,
derecha, abajo, e izquierda).

Margen - Lados individuales

CSS tiene propiedades para especificar el margen para cada lado de un
elemento:

 margin-top
 margin-right
 margin-bottom
 margin-left

Todas las propiedades de margen pueden tener los siguientes valores:

 Auto - el navegador calcula el margen

 longitud - especifica un margen en px, pt, cm, etc.
 % - especifica un margen en% de la anchura del elemento que
contiene
 heredarán - especifica que el margen debe ser heredada de elemento
padre

Consejo: Los valores negativos son permitidos.

El ejemplo siguiente define diferentes márgenes de los cuatro lados de un

elemento <p>:

Ejemplo
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margen - Abreviación de las propiedades

Para acortar el código, es posible especificar todas las propiedades de los
márgenes en una propiedad.
La margin propiedad es una propiedad abreviada para las siguientes
propiedades de los márgenes individuales:

 margin-top
 margin-right
 margin-bottom
 margin-left

Ejemplo
p {
margin: 100px 150px 100px 80px;
}

Así pues, aquí es cómo funciona:

Si la margin propiedad tiene cuatro valores:

 margen: 25px 50px 75px 100px;

o margen superior es 25px
o margen derecho es 50px
o margen inferior es 75px
o margen izquierdo es de 100px

Si la margin propiedad tiene tres valores:

 margen: 25px 50px 75px;

o margen superior es 25px
o márgenes derecho e izquierdo son 50px
o margen inferior es 75px

Si la margin propiedad tiene dos valores:

 margen: 25px 50px;

o márgenes superior e inferior son 25px
o márgenes derecho e izquierdo son 50px

Si la margin propiedad tiene un valor:

 margen: 25px;
o los cuatro márgenes son 25px
El valor auto
Puede establecer la propiedad de margen para auto centrar
horizontalmente el elemento en su contenedor.

El elemento tomará entonces hasta la anchura especificada, y el espacio

restante se dividirá por igual entre los márgenes izquierdo y derecho:

Ejemplo
div {
width: 300px;
margin: auto;
border: 1px solid red;
}

El valor hereda
En este ejemplo se deja el margen izquierdo se hereda del elemento padre:

Ejemplo
div.container {
border: 1px solid red;
margin-left: 100px;
}

p.one {
margin-left: inherit;
}

Reducir el margen
Márgenes superior e inferior de los elementos a veces se derrumbó en un
solo margen que es igual a la mayor de las dos márgenes.

Esto no sucede en los márgenes izquierdo y derecho! Sólo márgenes

superior e inferior!

Mira el siguiente ejemplo:

Ejemplo
h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50

píxeles. El elemento <h2> tiene un margen superior se establece en 20
píxeles.

El sentido común parece indicar que el margen vertical entre el <h1> y

<h2> sería un total de 70 píxeles (50 px + 20 píxeles). Sin embargo,
debido al colapso de margen, el margen real termina siendo 50px.

Todas las propiedades de los márgenes CSS

Property Description

margin A shorthand property for setting the margin properties in one declarati

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

CSS Relleno

Relleno CSS
Los CSS padding propiedades se utilizan para generar el espacio alrededor
del contenido.

El acolchado despeja un área alrededor del contenido (en el interior de la

frontera) de un elemento.

Con CSS, usted tiene el control total sobre el relleno. Hay propiedades CSS
para establecer el relleno para cada lado de un elemento (arriba, derecha,
abajo, e izquierda).

Relleno - Lados individuales

CSS tiene propiedades para especificar el relleno para cada lado de un
elemento:

 padding-top
 padding-right
 padding-bottom
 padding-left

Todas las propiedades del relleno pueden tener los siguientes valores:

 longitud - especifica un relleno en px, pt, cm, etc.

  % - especifica un relleno en% de la anchura del elemento que
contiene
 heredarán - especifica que el relleno debe ser heredada de elemento
padre

El ejemplo siguiente establece diferente relleno para los cuatro lados de un

elemento <p>:

Ejemplo
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Relleno - Abreviación de las propiedades

Para acortar el código, es posible especificar todas las propiedades de
relleno en una propiedad.

La padding propiedad es una propiedad abreviada para las siguientes

propiedades de relleno individuales:

 padding-top
 padding-right
 padding-bottom
 padding-left

Ejemplo
p {
padding: 50px 30px 50px 80px;
}

Así pues, aquí es cómo funciona:

Si la padding propiedad tiene cuatro valores:

 padding: 25px 50px 75px 100px;

o top relleno es 25px
o relleno derecho es 50px
 o acolchado inferior es 75px
o relleno a la izquierda es 100px

Si la padding propiedad tiene tres valores:

 padding: 25px 50px 75px;

o top relleno es 25px
o Juntas derecha e izquierda son 50px
o acolchado inferior es 75px

Si la padding propiedad tiene dos valores:

 padding: 25px 50px;

o acolchados superior e inferior son 25px
o Juntas derecha e izquierda son 50px

Si la padding propiedad tiene un valor:

 padding: 25px;
o los cuatro rellenos son 25px

Ejemplo
div.ex1 {
padding: 25px 50px 75px 100px;
}

div.ex2 {
padding: 25px 50px 75px;
}

div.ex3 {
padding: 25px 50px;
}

div.ex4 {
padding: 25px;
}
Todas las propiedades CSS de relleno

Property Description

padding A shorthand property for setting all the padding properties in one decla

padding-bottom Sets the bottom padding of an element

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element

CSS Altura y Ancho

Configuración de la altura y el ancho

El height y width propiedades se utilizan para ajustar la altura y la
anchura de un elemento.
El height y width se puede configurar para auto (esto es predeterminada.
Significa que el navegador calcula la altura y anchura), o especificar
en valores de longitud , como px, cm, etc., o en porcentaje (%) del bloque
de contención.

Ejemplo
div {
height: 200px;
width: 50%;
background-color: powderblue;
}

Ejemplo
div {
height: 100px;
width: 500px;
background-color: powderblue;
}

Nota: El heighty width propiedades no incluyen el relleno, bordes o

márgenes; que establecen la altura / anchura de la zona interior del
relleno, borde y margen del elemento!
Configuración max-ancho
La max-width propiedad se utiliza para establecer el ancho máximo de un
elemento.

El max-width se puede especificar en valores de longitud, como px, cm,

etc., o en porcentaje (%) del bloque que contiene, o en Ninguno (este es
por defecto. Los medios que no hay anchura máxima).

El problema con el <div> anterior se produce cuando la ventana del

navegador es menor que la anchura del elemento (500 píxeles). El
navegador entonces agrega una barra de desplazamiento horizontal a la
página.

Utilizando max-width en su lugar, en esta situación, mejorará el manejo

del navegador de pequeñas ventanas.

Consejo: Arrastre la ventana del navegador para menor que 500 píxeles
de ancho, para ver la diferencia entre los dos divs!

Nota: El valor de las max-width modificaciones de propiedades width.

El siguiente ejemplo muestra un <div> elemento con una altura de 100

píxeles y una max-anchura de 500 píxeles:

Ejemplo
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Todas las propiedades CSS de dimensiones

Property Description

height Sets the height of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

CSS Box Modelo

El modelo de caja CSS
Todos los elementos HTML pueden ser considerados como cajas. En CSS, el
término "modelo de caja" se usa cuando se habla de diseño y el diseño.

El modelo de caja CSS es esencialmente una caja que envuelve cada

elemento HTML. Se compone de: márgenes, bordes, el relleno y el
contenido real. La imagen de abajo ilustra el modelo de caja:

Explicación de las diferentes partes:

 Contenido - El contenido de la caja, donde aparecen textos e

imágenes
 Relleno - Borra un área alrededor del contenido. El relleno es
transparente
 Frontera - Un borde que va alrededor del relleno y contenido
 Margen - Borra un área fuera de la frontera. El margen es
transparente

El modelo de caja nos permite añadir un borde alrededor de los elementos,

y para definir el espacio entre los elementos.
Ejemplo
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

La anchura y la altura de un elemento

Con el fin de establecer la anchura y altura de un elemento correctamente
en todos los navegadores, lo que necesita saber cómo funciona el modelo
de caja.

Importante: Al configurar las propiedades de anchura y altura de un

elemento con CSS, que acaba de establecer el ancho y la altura del área
de contenido. Para calcular el tamaño de un elemento, también debe
agregar relleno, bordes y márgenes.

Suponemos que queremos con el estilo de un elemento <div> para tener

una anchura total de 350 píxeles:

Ejemplo
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Esta es la matemática:

320px (anchura)
+ 20 píxeles (izquierda + derecha relleno)
+ 10px (izquierda + derecha frontera)
+ 0px (margen izquierdo + derecho)
= 350 píxeles
La anchura total de un elemento debe calcularse así:

Ancho total elemento = ancho + acolchado izquierda + relleno derecho +

borde izquierdo + borde derecho + margen izquierdo + margen derecho

La altura total de un elemento debe calcularse así:

Altura total elemento = altura + top acolchado + acolchado inferior +

borde superior + borde inferior + margen superior + margen inferior

Nota para el viejo IE: Internet Explorer 8 y versiones anteriores, incluir el

relleno y el borde de la propiedad de ancho. Para solucionar este problema,
agregue un <! DOCTYPE html> a la página HTML.

CSS Esquema
Esquema CSS
Los CSS outline propiedades especifican el estilo, color y ancho de un
esquema.

Un esquema es una línea que se dibuja alrededor de los elementos (fuera

de las fronteras) para hacer que el elemento "destaque".

Sin embargo, la propiedad de esquema es diferente de la propiedad border

- El esquema no es una parte de las dimensiones de un elemento; total de
anchura y la altura del elemento no se ve afectada por el ancho del
contorno.
estilo de esquema
La outline-style propiedad especifica el estilo del contorno.

La outline-style propiedad puede tener uno de los siguientes valores:

 dotted - Define un contorno de puntos

 dashed - Define una línea discontinua
 solid - Define una línea de trazo continuo
 double - Define un esquema doble
 groove- Define un contorno acanalado 3D. El efecto depende del
valor contorno color
 ridge- Define un contorno acanalado 3D. El efecto depende del valor
contorno color
 inset- Define un esquema de inserción 3D. El efecto depende del
valor contorno color
 outset- Define un esquema de principio 3D. El efecto depende del
valor contorno color
  none - Define sin contorno
 hidden - Define un esquema oculto

El ejemplo siguiente establece primero un borde negro fino alrededor de

cada elemento <p>, a continuación, muestra los diferentes outline-style
valores:

Ejemplo
p {
border: 1px solid black;
outline-color: red;
}

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Nota: Ninguna de las otras propiedades del contorno CSS se describen a

continuación tendrá ningún efecto a menos que la outline-style
propiedad se establece!

contorno color
La outline-color propiedad se utiliza para establecer el color del
contorno.

El color se puede ajustar por:

 Nombre - indique un nombre de color, como "rojo"

 RGB - especificar un valor RGB, así como "rgb (255,0,0)"
 Hex - especificar un valor hexadecimal, como "# FF0000"
 Invertir - realiza una inversión de color (lo que asegura que el
contorno es visible, independientemente del color de fondo)
Ejemplo
p {
border: 1px solid black;
outline-style: double;
outline-color: red;
}

Esquema Ancho
La outline-width propiedad especifica el ancho del contorno.

La anchura se puede establecer como un tamaño específico (en px, pt, cm,
em, etc) o mediante el uso de uno de los tres valores predefinidos: fino,
medio o grueso.

Ejemplo
p {border: 1px solid black;}

p.one {
outline-style: double;
outline-color: red;
outline-width: thick;
}

p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}

Esquema - Abreviación de las propiedades

Para acortar el código, también es posible especificar todas las propiedades
del contorno individuales en una sola propiedad.

La outline propiedad es una propiedad abreviada para las siguientes

propiedades del contorno individuales:
  outline-width
 outline-style (necesario)
 outline-color

p {
border: 1px solid black;
outline: 5px dotted red;
}

Todas las propiedades del contorno CSS

Property Description

outline Sets all the outline properties in one declaration

outline-color Sets the color of an outline

outline-offset Specifies the space between an outline and the edge or

border of an element

outline-style Sets the style of an outline

outline-width Sets the width of an outline

CSS texto

Color de texto
La color propiedad se utiliza para establecer el color del texto.

Con CSS, un color más a menudo se especifica mediante:

 un nombre de color - como "rojo"

 un valor HEX - como "# FF0000"
 un valor RGB - como "rgb (255,0,0)"

El color de texto predeterminado para una página se define en el selector

cuerpo.

Ejemplo
body {
color: blue;
}

h1 {
color: green;
}

Nota: Para CSS compatibles con el W3C: Si se define la color propiedad,

también debe definir el background-color.
Tamaño del texto
La font-size propiedad se utiliza para establecer el tamaño del texto.

Ejemplo
p {
font-size: 30px;
}

Alineación del texto

La text-align propiedad se utiliza para establecer la alineación horizontal
de un texto.

Un texto puede ser alineado a la izquierda o la derecha, centrado o

justificado.

El siguiente ejemplo muestra centro alineado, y a la izquierda y texto

alineado a la derecha (alineación izquierda es por defecto si la dirección del
texto es de izquierda a derecha, y la alineación correcta es por defecto si la
dirección del texto es de derecha a izquierda):

Ejemplo
h1 {
text-align: center;
}

h2 {
text-align: left;
}
h3 {
text-align: right;
}

Cuando la text-align propiedad se establece en "justificar", cada línea se

estira de manera que cada línea tiene la misma anchura, y los márgenes
izquierdo y derecho son rectas (como en revistas y periódicos):

Ejemplo
div {
text-align: justify;
}

Decoración de texto
La text-decoration propiedad se utiliza para establecer o eliminar
decoraciones de texto.

El valor text-decoration: none; se utiliza a menudo para eliminar los

subrayados de enlaces:

Ejemplo
a {
text-decoration: none;
}

Los otros text-decoration valores se utilizan para decorar el texto:

Ejemplo
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
 text-decoration: underline;
}

Nota: No se recomienda para subrayar el texto que no es un enlace, ya

que a menudo confunde al lector.

Transformación de texto
La text-transform propiedad se utiliza para especificar letras mayúsculas
y minúsculas en un texto.

Se puede utilizar para convertir todo en letras mayúsculas o minúsculas o

en mayúsculas la primera letra de cada palabra:

Ejemplo
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

La sangría de texto
La text-indent propiedad se utiliza para especificar la sangría de la
primera línea de un texto:

Ejemplo
p {
text-indent: 50px;
}
Espaciado de letras
La letter-spacing propiedad se utiliza para especificar el espacio entre
los caracteres de un texto.

El siguiente ejemplo muestra cómo aumentar o disminuir el espacio entre

caracteres:

Ejemplo
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

Altura de la línea
La line-height propiedad se utiliza para especificar el espacio entre
líneas:

Ejemplo
p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

Dirección del texto

La direction propiedad se utiliza para cambiar la dirección del texto de un
elemento:
Ejemplo
div {
direction: rtl;
}

Espacio entre palabras

La word-spacing propiedad se utiliza para especificar el espacio entre las
palabras de un texto.

El siguiente ejemplo muestra cómo aumentar o disminuir el espacio entre

las palabras:

Ejemplo
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}

Sombra de texto
El text-shadow establecimiento tiene sombra al texto.

El ejemplo siguiente especifica la posición de la sombra horizontal (3px), la

posición de la sombra vertical (2px) y el color de la sombra (rojo):

Ejemplo
h1 {
text-shadow: 3px 2px red;
}
Todas las propiedades CSS de texto

Property Description

color Sets the color of text

direction Specifies the text direction/writing direction

letter-spacing Increases or decreases the space between characters in a

text

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

text-transform Controls the capitalization of text

text-overflow Specifies how overflowed content that is not displayed
should be signaled to the user

unicode-bidi Used together with the direction property to set or return

whether the text should be overridden to support multiple
languages in the same document

vertical-align Sets the vertical alignment of an element

white-space Specifies how white-space inside an element is handled

word-spacing Increases or decreases the space between words in a text

CSS Fuentes

Las propiedades de la fuente CSS definen la familia de fuentes, la

audacia, el tamaño y el estilo de un texto.
Las familias de fuentes CSS
En CSS, hay dos tipos de nombres de familias de fuentes:

 genérica de la familia - un grupo de familias de fuentes con un

aspecto similar (como "Serif" o "Fuente de ancho fijo")
 la fuente de la familia - una familia de fuentes específicas (como
"Times New Roman" o "Arial")

 Generic Font family Description

family

Serif Times New Roman Serif fonts have small lines at

Georgia the ends on some characters

Sans-serif Arial "Sans" means without - these

Verdana fonts do not have the lines at
the ends of characters

Monospace Courier New All monospace characters have

Lucida Console the same width

Nota: En las pantallas de ordenador, fuentes sansserif que se consideran

más fácil de leer que las fuentes serif.

Familia tipográfica
La familia de fuentes de un texto se establece con la font-family
propiedad.
La font-family propiedad debe contener varios nombres de fuentes como
un sistema de "retroceso". Si el navegador no es compatible con la primera
fuente, se intenta con el siguiente tipo de letra, y así sucesivamente.

Comenzar con la fuente que desea, y terminar con una familia genérica,
para permitir que el navegador recoger una fuente similar en la familia
genérica, si no hay otras fuentes están disponibles.

Nota: Si el nombre de una familia de fuentes es más de una palabra, debe

ser entre comillas, como: "Times New Roman".

Más de una familia de fuentes se especifica en una lista separada por

comas:

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

CSS Web de seguridad de fuente

Combinaciones

Las combinaciones de fuente usado

La propiedad font-family debe contener varios nombres de fuentes como un
sistema de "retroceso", para garantizar la máxima compatibilidad entre
navegadores / sistemas operativos. Si el navegador no es compatible con la
primera fuente, se trata la próxima fuente.

Comenzar con la fuente que desea, y terminar con una familia genérica,
para permitir que el navegador recoger una fuente similar en la familia
genérica, si no hay otras fuentes están disponibles:
Ejemplo
p {
font-family: "Times New Roman", Times, serif;
}

A continuación se presentan algunas combinaciones de fuentes de uso

común, organizadas por la familia genérica.

serif Fuentes

font-family Exampletext

Georgia, serif This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading
This is a paragraph

"Times New Roman", Times, serif

This is a heading
This is a paragraph

Sans-serif Fuentes

font-family Exampletext

Arial, Helvetica, sans-serif This is a heading

This is a paragraph
 This is a
"Arial Black", Gadget, sans-serif

heading
This is a paragraph

This is a heading
"Comic Sans MS", cursive, sans-serif

This is a paragraph

This is a heading
Impact, Charcoal, sans-serif

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading
This is a paragraph

This is a heading
Tahoma, Geneva, sans-serif

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading
This is a paragraph

This is a heading
Verdana, Geneva, sans-serif

This is a paragraph
Fuentes de espacio sencillo

font-family Exampletext

"Courier New", Courier, monospace

This is a
heading
This is a paragraph

"Lucida Console", Monaco, monospace

This is a
heading
This is a paragraph

Consejo: También puedes ver todos los disponibles Fuentes de Google y

cómo utilizarlos.

La propiedad Font-weight: establece el espaciado o la forma en la

que se vera la fuente: alguno de sus valores son normal o bold.

CSS iconos
Cómo agregar iconos
La forma más sencilla de añadir un icono a su página HTML, es con una
biblioteca de iconos, tales como la fuente impresionante.

Añadir el nombre de la clase icono especificado a cualquier elemento HTML

en línea (como <i> o <span>).

Todos los iconos en las librerías de iconos abajo, son vectores escalables
que pueden ser personalizados con CSS (tamaño, color, sombra, etc.)

Los iconos impresionantes fuente

Para utilizar los iconos impresionantes fuente, añadir la siguiente línea
dentro de la <head> sección de su página HTML:

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">

Nota: No se requiere ninguna descarga o instalación!

Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fafa-cloud"></i>
<i class="fafa-heart"></i>
<i class="fafa-car"></i>
<i class="fafa-file"></i>
<i class="fafa-bars"></i>
</body>
</html>

Iconos de arranque
Para utilizar las glyphicons archivos de inicio, añada la siguiente línea
dentro de la <head> sección de su página HTML:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootst
rap.min.css">

Nota: No se requiere ninguna descarga o instalación!

Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3
.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphiconglyphicon-cloud"></i>
<i class="glyphiconglyphicon-remove"></i>
<i class="glyphiconglyphicon-user"></i>
<i class="glyphiconglyphicon-envelope"></i>
<i class="glyphiconglyphicon-thumbs-up"></i>

</body>
</html>

Iconos de Google
Para utilizar los iconos de Google, añada la siguiente línea dentro de la
<head> sección de su página HTML:
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">

Nota: No se requiere ninguna descarga o instalación!

Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://fonts.googleapis.com/icon?family=Mate
rial+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

CSS Enlaces
Con CSS, enlaces pueden ser de estilo de diferentes maneras.
Enlaces de estilo
Los enlaces pueden ser de estilo con cualquier propiedad CSS (por
ejemplo color, font-family, background, etc.).

Ejemplo
a {
color: hotpink;
}

Además, los enlaces pueden ser de estilo diferente dependiendo de

qué estado se encuentran.

Los cuatro estados son enlaces:

 a:link - un enlace no visitado normales

 a:visited - un enlace que el usuario ha visitado
 a:hover - un enlace cuando los usuario se desplaza sobre ella
 a:active - un enlace se hace clic en el momento

Ejemplo
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

Al configurar el estilo de varios estados de enlace, hay algunas reglas de

orden:

 a: hover debe venir después a: link y: visited

 a: active debe venir después de un: hover

Decoración de texto
La text-decoration propiedad se ha utilizado para eliminar los
subrayados de enlaces:

Ejemplo
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
Color de fondo
La background-color propiedad se puede utilizar para especificar un color
de fondo para los enlaces:

Ejemplo
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

Avanzadas - Botones de Enlace

Este ejemplo demuestra un ejemplo más avanzado, donde se combinan
varias propiedades CSS para mostrar enlaces como cajas / botones:

Ejemplo
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

CSS Listas

Las listas HTML y CSS Propiedades de la

lista
En HTML, hay dos tipos principales de listas:

 listas no ordenadas (<ul>) - los elementos de la lista están marcados

con balas
 listas ordenadas (<ol>) - los elementos de la lista están marcados
con números o letras

Las propiedades de la lista de CSS le permiten:

 Establecer diferentes marcadores de elementos de lista para las listas

ordenadas
  Establecer diferentes marcadores de elementos de lista para listas
desordenadas
 Configurar una imagen como el marcador de la lista de elementos
 Añadir colores de fondo para las listas y los elementos de la lista

Diferentes marcadores elemento de lista

La list-style-type propiedad especifica el tipo de marcador lista de
elementos.

El ejemplo siguiente muestra algunos de los marcadores de la lista de

elementos disponibles:

Ejemplo
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ul.c {
list-style-type: none;
}

ol.c {
list-style-type: upper-roman;
}

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

Nota: Algunos de los valores son para listas desordenadas, y algunas de las
listas ordenadas. Otros de los valores para las lista desordenadas son:
lower-roman, upper-alpha, upper-greek, lower-greek, lower-latin, upper-
latin.

Una Imagen como el marcador de la lista de

elementos
La list-style-image propiedad especifica una imagen como el marcador
de la lista de elementos:

Ejemplo
ul {
list-style-image: url('sqpurple.gif');
}

Coloque los marcadores elemento de lista

La list-style-position propiedad especifica si los marcadores de lista de
artículos deben aparecer dentro o fuera del flujo de contenido:

Ejemplo
ul {
list-style-position: inside;
}

Retire la configuración predeterminada

La list-style-type:none propiedad también puede ser utilizado para
eliminar los marcadores / balas. Tenga en cuenta que la lista también tiene
margen predeterminado y el relleno. Para eliminar esto, añadir margin:0
y padding:0 a <ul> o <ol>:
Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Lista - Abreviación de las propiedades

La list-style propiedad es una propiedad abreviada. Se utiliza para
configurar todas las propiedades de la lista en una declaración:

Ejemplo
ul {
list-style: square inside url("sqpurple.gif");
}

Cuando se utiliza la propiedad rápida, el orden de los valores de la

propiedad son:

 list-style-type (Si no se especifica un estilo de imagen de la lista,

el valor de esta propiedad se mostrará si la imagen por alguna razón
no se puede visualizar)
 list-style-position (Especifica si los marcadores de lista de
artículos deben aparecer dentro o fuera del flujo de contenido)
 list-style-image (Especifica una imagen como el marcador de la
lista de elementos)

Si uno de los valores de las propiedades anteriormente faltan, se inserta el

valor predeterminado de la propiedad que faltan, si los hubiere.

Lista Styling Con Colores

Podemos también listas de estilo con colores, para que se vean un poco
más interesante.
Cualquier cosa añadida a la etiqueta <ol> o <ul>, afecta a toda la lista,
mientras que las propiedades añaden a la etiqueta <li> afectará a los
elementos de lista individuales:

Ejemplo
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}

CSS Tablas
El aspecto de una tabla HTML se puede mejorar en gran medida con CSS:
Los bordes de tabla
Para especificar bordes de la tabla en CSS, utilice la border propiedad.

El ejemplo siguiente especifica un borde negro para <table>, <th>, y <td>

elementos:

Ejemplo
table, th, td {
border: 1px solid black;
}

Observe que la tabla en el ejemplo anterior tiene bordes dobles. Esto es

debido a que tanto la mesa y el <th> y <td> elementos tienen fronteras
separadas.
Contraer Bordes de tabla
La border-collapse propiedad establece si los bordes de la tabla deben
ser colapsados en un borde sencillo:

Ejemplo
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

Si sólo desea un borde alrededor de la mesa, sólo se especifique la border

propiedad de <table>:

Ejemplo
table {
border: 1px solid black;
}

Tabla Ancho y Altura

Anchura y altura de una mesa se definen por la width y height
propiedades.
El ejemplo siguiente establece el ancho de la tabla a 100%, y la altura de la
<th> elementos para 50px:

Ejemplo
table {
width: 100%;
}

th {
height: 50px;
}

Alineación horizontal
La text-align propiedad establece la alineación horizontal (como
izquierda, derecha o centro) parte del contenido de <th> o <td>.

Por defecto, el contenido de <th> elementos son-centro alineado y el

contenido de elementos <td> están alineado a la izquierda.

El siguiente ejemplo de izquierda alinea el texto en <th> elementos:

Ejemplo
th {
text-align: left;
}

Alineamiento vertical
La vertical-align propiedad establece la alineación vertical (como
superior, inferior, o media) del contenido en <th> o <td>.

Por defecto, la alineación vertical del contenido de una tabla es medio (por
tanto <th> y <td> elementos).

El ejemplo siguiente define la alineación de texto vertical a abajo para <td>

elementos:

Ejemplo
td {
height: 50px;
vertical-align: bottom;
}

Relleno de mesa
Para controlar el espacio entre el borde y el contenido de una tabla, utilice
la padding propiedad en <td> y <th> elementos:
Ejemplo
th, td {
padding: 15px;
text-align: left;
}

Los divisores horizontales

Añadir la border-bottom propiedad a <th> y <td> para divisores

horizontales:

Ejemplo
th, td {
border-bottom: 1px solid #ddd;
}
Tabla Hoverable
Utilice el :hover selector de <tr> para resaltar filas de la tabla en el
mouse:

Ejemplo
tr:hover {background-color: #f5f5f5}

Tablas rayas

Para las tablas de rayas de cebra, utilice el nth-child() selector y añadir

una background-color a todos los pares (o impares) filas de la tabla:

Ejemplo
tr:nth-child(even) {background-color: #f2f2f2}

Tabla de colores
El ejemplo siguiente se especifica el color de fondo y el color del texto de
los elementos <th>:
Ejemplo
th {
background-color: #4CAF50;
color: white;
}

Tabla de respuesta
Una tabla de respuesta se mostrará una barra de desplazamiento horizontal
si la pantalla es demasiado pequeña para mostrar el contenido completo:

Añadir un elemento contenedor (como <div>) con overflow-x:auto

alrededor del elemento <table> para hacer que responda:

Ejemplo
<div style="overflow-x: auto;">

<table>
... table content ...
</table>

</div>

CSS Layout - La pantalla de

Propiedad
La display propiedad es la propiedad CSS más importante para el
control de la disposición.

La propiedad de presentación
La display propiedad especifica si / cómo se muestra un elemento.

Cada elemento HTML tiene un valor de visualización por defecto

dependiendo de qué tipo de elemento es. El valor de visualización por
defecto para la mayoría de los elementos es block o inline.
Elementos de bloque de nivel
Un elemento en bloque siempre empieza en una nueva línea y ocupa todo
el ancho disponible (se extiende hacia la izquierda y la derecha tanto como
sea posible).

El elemento <div> es un elemento en bloque.

Ejemplos de elementos a nivel de bloque:

 <Div>
 <H1> - <h6>
 <P>
 <Form>
 <Header>
 <Pie de página>
 <Sección>

Elementos en línea
Un elemento en línea no se inicia en una nueva línea y sólo ocupa el mismo
ancho que sea necesario.

Esta es un elemento en línea <span> elemento dentro de un párrafo.

Ejemplos de elementos en línea:

 <Span>
 <a>
 <Img>

Display: none;
display: none; se utiliza comúnmente con JavaScript para ocultar y
mostrar elementos sin borrar y volver a crearlos. Echar un vistazo a
nuestro último ejemplo de esta página si quieres saber cómo esto se puede
lograr.
El <script> elemento utiliza display: none; por defecto.

Sustituir el valor predeterminado Valor de

presentación
Como se ha mencionado, cada elemento tiene un valor de visualización por
defecto. Sin embargo, puede anular este.

Cambio de un elemento en línea a un elemento de bloque, o viceversa,

puede ser útil para hacer la página se vea de una manera específica, y
todavía siguen los estándares web.

Un ejemplo común es hacer en línea <li> elementos para menús

horizontales:

Ejemplo
li {
display: inline;
}

Nota: Al establecer la propiedad de un elemento de visualización sólo

cambia cómo se muestra el elemento, NO qué tipo de elemento que
es. Por lo tanto, un elemento en línea con display: block; no se le
permite tener otros elementos de bloque en su interior.

El ejemplo siguiente muestra <span> elementos como elementos de

bloque:

Ejemplo
span {
display: block;
}

El ejemplo siguiente muestra <a> elementos como elementos de bloque:

Ejemplo
a {
display: block;
}

Ocultar un elemento - display: none o

visibility: hidden?

Ocultación de un elemento se puede hacer mediante el establecimiento de

la display propiedad a none. El elemento se oculta, y la página se
mostrará como si el elemento no está allí:

Ejemplo
h1.hidden {
display: none;
}

visibility: hidden; también se esconde un elemento.

Sin embargo, el elemento aún llevará hasta el mismo espacio que antes. El
elemento se oculta, pero aún afecta a la disposición:
Ejemplo
h1.hidden {
visibility: hidden;
}

Más ejemplos
Las diferencias entre display: none; y la visibilidad: oculto;
Este ejemplo demuestra display: none; frente a la visibilidad: oculto;

El uso de CSS, junto con JavaScript para mostrar el contenido de

este ejemplo se muestra cómo utilizar CSS y JavaScript para mostrar un
elemento de clic.

Ejemplo 1

<!DOCTYPE html>

<html>

<head>

<style>

.imgbox {

float: left;

text-align: center;

width: 120px;

border: 1px solid gray;

margin: 4px;

padding: 6px;

button {

width: 100%;
}

</style>

</head>

<body>

<h3>Difference between display:none and visiblity: hidden</h3>

<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the

layout.</p>

<p><strong>display:none</strong> removes the element from the document. It does not take up
any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>

<img src="img_fjords.jpg" alt="Fjords" style="width:100%">

<button onclick="removeElement()">Remove</button>

</div>

<div class="imgbox" id="imgbox2">Box 2<br>

<img src="img_lights.jpg" alt="Lights" style="width:100%">

<button onclick="changeVisibility()">Hide</button>

</div>

<div class="imgbox">Box 3<br>

<img src="img_forest.jpg" alt="Forest" style="width:100%">

<button onclick="resetElement()">Reset All</button>

</div>

<script>

function removeElement() {
document.getElementById("imgbox1").style.display = "none";

function changeVisibility() {

document.getElementById("imgbox2").style.visibility = "hidden";

function resetElement() {

document.getElementById("imgbox1").style.display = "block";

document.getElementById("imgbox2").style.visibility = "visible";

</script>

</body>

</html>

Ejemplo 2

<!DOCTYPE html>

<html>
<head>

<style>

#panel, .flip {

font-size: 16px;

padding: 10px;

text-align: center;

background-color: #4CAF50;

color: white;

border: solid 1px #a6d8a8;

margin: auto;

#panel {

display: none;

</style>

</head>

<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">

<p>This panel contains a div element, which is hidden by default (display: none).</p>

<p>It is styled with CSS and we use JavaScript to show it (display: block).</p>

<p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to
it. When the user clicks on the p element, a function called myFunction() is executed, which
changes the style of the div with id="panel" from display:none (hidden) to display:block
(visible).</p>

<p>You will learn more about JavaScript in our JavaScript Tutorial.</p>

</div>

<script>

function myFunction() {

document.getElementById("panel").style.display = "block";

</script>

</body>

</html>
CSS visualización / propiedades de
visibilidad

Property Description

display Specifies how an element should be displayed

visibility Specifies whether or not an element should be visible

<!DOCTYPE html>

<html>

<head>

<style>

#panel, .flip {

font-size: 16px;

padding: 10px;

text-align: center;

background-color: #4CAF50;

color: white;

border: solid 1px #a6d8a8;

margin: auto;

#panel {
display: none;

</style>

</head>

<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">

<p>This panel contains a div element, which is hidden by default (display: none).</p>

<p>It is styled with CSS and we use JavaScript to show it (display: block).</p>

<p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to
it. When the user clicks on the p element, a function called myFunction() is executed, which
changes the style of the div with id="panel" from display:none (hidden) to display:block
(visible).</p>

<p>You will learn more about JavaScript in our JavaScript Tutorial.</p>

</div>

<script>

function myFunction() {

document.getElementById("panel").style.display = "block";

</script>

</body>

</html>
CSS Layout - anchura y ancho
máximo
Uso de anchura, max-anchura y el margen:
auto;
Como se mencionó en el capítulo anterior; un elemento en bloque siempre
ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha
tanto como sea posible).

Ajuste de la width de un elemento en bloque evitará que se extiende hacia

los bordes de su contenedor. A continuación, puede establecer los
márgenes de automóviles, para centrar horizontalmente el elemento en su
contenedor. El elemento se ocupará de la anchura especificada, y el espacio
restante se dividirá por igual entre los dos márgenes:

Nota: El problema con el <div> anterior se produce cuando la ventana del

navegador es más pequeña que el ancho del elemento. El navegador
entonces agrega una barra de desplazamiento horizontal a la página.

Utilizando max-width en su lugar, en esta situación, mejorará el manejo

del navegador de pequeñas ventanas. Esto es importante al hacer un sitio
utilizable en dispositivos pequeños:

Consejo: Cambiar el tamaño de la ventana del navegador a menos de 500

píxeles de ancho, para ver la diferencia entre los dos divs!

Este es un ejemplo de los dos divs anteriores:

Ejemplo
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

CSS Layout - La posición de la

Propiedad
La position propiedad especifica el tipo de método de posicionamiento
utilizado para un elemento (estático, relativa, fijo o absoluta).

La posición de la Propiedad
La position propiedad especifica el tipo de método de posicionamiento
utilizado para un elemento.

Hay cuatro diferentes valores de posición:

 static
 relative
 fixed
 absolute

Los elementos se colocan entonces utilizando la parte superior, inferior,

izquierda y propiedades adecuadas. Sin embargo, estas propiedades no
funcionará a menos que la position propiedad se establece en primer
lugar. También funcionan de forma diferente en función del valor de
posición.
Posición: estática;
Elementos HTML se colocan estática por defecto.

Elementos posicionados estáticas no se ven afectados por la parte superior,

inferior, izquierda, y propiedades adecuadas.

Un elemento con position: static; no está posicionado de ninguna

manera especial; siempre se posiciona de acuerdo con el flujo normal de la
página:

Aquí está el CSS que se utiliza:

Ejemplo
div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;
Un elemento con position: relative; se coloca en relación a su posición
normal.

Configuración de la parte superior, derecho, inferior, y las propiedades

izquierda de un elemento posicionado relativamente-hará que se puede
ajustar fuera de su posición normal. Otro contenido no se puede ajustar
para adaptarse a cualquier hueco dejado por el elemento.

Aquí está el CSS que se utiliza:

Ejemplo
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

posición: fijo;
Un elemento que se position: fixed; está posicionado en relación con el
área de visualización, lo que significa que siempre permanece en el mismo
lugar, incluso si la página se desplaza. La parte superior, derecho, inferior,
y las propiedades de izquierda se utilizan para posicionar el elemento.

Un elemento fijo no deja una brecha en la página donde normalmente

habría sido localizado.

Note el elemento fijo en la esquina inferior derecha de la página. Aquí está

el CSS que se utiliza:

Ejemplo
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

position: absolute;
Un elemento con position: absolute; está posicionado con relación al
antepasado posicionado más cercano (en lugar de en relación posicionada
para la ventana gráfica, como fija).
Sin embargo; si un elemento posicionado absoluto no tiene antepasados
posicionado, que utiliza el cuerpo del documento, y se mueve junto con la
página de desplazamiento.

Nota: Un "posicionado" elemento es uno cuya posición es nada,

excepto static.

Aquí está un ejemplo sencillo:

Aquí está el CSS que se utiliza:

Ejemplo
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
La superposición de elementos
Cuando se colocan los elementos, que se pueden superponer otros
elementos.

La z-index propiedad especifica el orden de apilamiento de un elemento

(qué elemento debe ser colocado en frente de o detrás de los otros).

Un elemento puede tener un orden de apilamiento positivo o negativo:

Ejemplo
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Un elemento con mayor orden de apilamiento está siempre en frente de un

elemento con un orden de apilamiento inferior.

Nota: Si dos elementos posicionados superponen sin z-index especificado,

el elemento posicionado pasado en el código HTML se mostrará en la parte
superior.
Posicionamiento de texto de una imagen
Cómo colocar texto sobre una imagen:

Más ejemplos
Todas las propiedades CSS de
posicionamiento

Property Description

bottom Sets the bottom margin edge for a positioned box

clip Clips an absolutely positioned element

left Sets the left margin edge for a positioned box

position Specifies the type of positioning for an element

right Sets the right margin edge for a positioned box

top Sets the top margin edge for a positioned box

z-index Sets the stack order of an element

CSS Layout - Desbordamiento

desbordamiento de CSS
El CSS overflow propiedad especifica si se recorta el contenido o añadir
barras de desplazamiento cuando el contenido de un elemento es
demasiado grande para caber en un área especificada.

La overflow propiedad tiene los siguientes valores:

  visibles - por defecto. El desbordamiento no se recorta. Se hace fuera
de la caja del elemento
 oculto - El desbordamiento se recorta, y el resto del contenido será
invisible
 desplazarse - El desbordamiento se recorta, pero se agrega una
barra de desplazamiento para ver el resto del contenido
 Auto - Si se recorta desbordamiento, una barra de desplazamiento,
debe añadirse a ver el resto del contenido

Nota: La overflow propiedad sólo funciona para elementos de bloque con

una altura especificada.

Nota: En OS X Lion (en Mac), barras de desplazamiento están ocultas por

defecto y sólo aparecen cuando se está utilizando (a pesar de que
"desbordamiento: Scroll" está ajustado).

overflow: visible
Por defecto, el desbordamiento es visible, lo que significa que no se
recorta y se hace fuera de la caja del elemento:

Puede utilizar la propiedad de desbordamiento cuando se desea tener un

mejor control de la disposición. La propiedad de desbordamiento especifica
qué ocurre si el contenido desborda la caja de un elemento.

Ejemplo
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
Con el hidden valor, el desbordamiento se recorta, y el resto del contenido
es oculto:

Puede utilizar la propiedad de desbordamiento cuando se desea tener un

mejor control de la disposición. La propiedad de desbordamiento especifica
qué ocurre si el contenido desborda la caja de un elemento.

Ejemplo
div {
overflow: hidden;
}

overflow: scroll
Al establecer el valor scroll, el desbordamiento se recorta y se agrega una
barra de desplazamiento para desplazarse dentro de la caja. Tenga en
cuenta que esto añadirá una barra de desplazamiento horizontal y vertical
(incluso si usted no lo necesita):

Puede utilizar la propiedad de desbordamiento cuando se desea tener un

mejor control de la disposición. La propiedad de desbordamiento especifica
qué ocurre si el contenido desborda la caja de un elemento.

Ejemplo
div {
overflow: scroll;
}

overflow: auto
El auto valor es similar a scroll, sólo que añadir barras de
desplazamiento cuando sea necesario:
Puede utilizar la propiedad de desbordamiento cuando se desea tener un
mejor control de la disposición. La propiedad de desbordamiento especifica
qué ocurre si el contenido desborda la caja de un elemento.

Ejemplo
div {
overflow: auto;
}

overflow-x y el desbordamiento-y
El overflow-x y overflow-y propiedades especifica si se debe cambiar el
desbordamiento del contenido simplemente horizontal o verticalmente (o
ambos):

overflow-x especifica qué hacer con los bordes izquierdo / derecho del
contenido.
overflow-y especifica qué hacer con los bordes superior / inferior del
contenido.

Puede utilizar la propiedad de desbordamiento cuando se desea tener un

mejor control de la disposición. La propiedad de desbordamiento especifica
qué ocurre si el contenido desborda la caja de un elemento.

Ejemplo
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

Todas las propiedades CSS desbordamiento

Property Description
overflow Specifies what happens if content overflows an element's box

overflow-x Specifies what to do with the left/right edges of the content if

it overflows the element's content area

overflow-y Specifies what to do with the top/bottom edges of the content

if it overflows the element's content area

CSS Layout - flotador y clara

La float propiedad especifica si un elemento debe flotar.

La clear propiedad se utiliza para controlar el comportamiento de los

elementos flotantes.

La propiedad float
En su uso más sencillo, la float propiedad se puede utilizar para ajustar el
texto alrededor de las imágenes.

El siguiente ejemplo especifica que una imagen debe flotar a la derecha en

un texto:

Ejemplo
img {
float: right;
 margin: 0 0 10px 10px;
}

La clara Propiedad
La clear propiedad se utiliza para controlar el comportamiento de los
elementos flotantes.

Elementos después de un elemento flotante fluirán a su alrededor. Para

evitar esto, utilice la clear propiedad.

La clear propiedad se especifica en la cual los lados de un elemento de los

elementos flotantes no se les permite flotar:

Ejemplo
div {
clear: left;
}

Tambien se puede emplear both para indicar que no se permite flotar ni a

la derecha ni a la izquierda.

El clearfix Hack
Si un elemento es más alto que el elemento que lo contiene, y que se flota,
se desborde fuera de su contenedor.

Entonces podemos añadir overflow: auto; al elemento que contiene para

solucionar este problema:

Ejemplo
.clearfix {
overflow: auto;
}

El overflow: auto clearfix funciona bien, siempre y cuando usted es capaz

de mantener el control de sus márgenes y el relleno (otra cosa que pueda
ver las barras de desplazamiento). El nuevo y moderno corte clearfix sin
embargo, es más seguro de usar, y el siguiente código se utiliza para la
mayoría de las páginas web:

Ejemplo
.clearfix::after {
content: "";
clear: both;
display: table;
}

Usted aprenderá más sobre el ::after pseudo-elemento en un capítulo

posterior.

Diseño Web Ejemplo

Es común hacer diseños web enteras usando la float propiedad:
Ejemplo
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}

.column {
float: left;
padding: 15px;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

.menu {
width: 25%;
}

.content {
width: 75%;
}

Más ejemplos
Una imagen con la frontera y márgenes que flota hacia la derecha en un
párrafo
Deje un flotador de imagen a la derecha en un párrafo. Añadir a la frontera
y los márgenes de la imagen.

Una imagen con una leyenda que flota hacia la derecha

Deje una imagen con un flotador título a la derecha.
Deje que la primera letra de un flotador párrafo a la izquierda
dejó que la primera letra de un flotador párrafo a la izquierda y el estilo de
la letra.

Creación de un menú horizontal

Uso flotador con una lista de hipervínculos para crear un menú horizontal.

La creación de una página web sin tablas

Utilice flotador para crear una página de inicio con una barra de
navegación, encabezado, pie de página, el contenido de la izquierda y la
página principal.

EJEMPLO 1

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: right;

border: 1px dotted black;

margin: 0px 0px 15px 20px;

</style>

</head>

<body>

<p>In the paragraph below, the image will float to the right. A dotted black border is added to the
image.

We have also added margins to the image to push the text away from the image:

0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left
side of the image.
</p>

<p><img src="w3css.gif" width="100" height="140">

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

</body>

</html>

EJEMPLO 2

<!DOCTYPE html>

<html>

<head>

<style>

div {
float: right;

width: 120px;

margin: 0 0 15px 20px;

padding: 15px;

border: 1px solid black;

text-align: center;

</style>

</head>

<body>

<div>

<img src="w3css.gif" width="100" height="140"><br>CSS is fun!

</div>

<p>

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

<p>

In the paragraph above, the div element is 120 pixels wide and it contains the image.

The div element will float to the right. Margins are added to the div to push the text away from the
div.

Borders and padding are added to the div to frame in the picture and the caption.

</p>

</body>

</html>

EJEMPLO 3

<!DOCTYPE html>

<html>

<head>

<style>

span {

float: left;

width: 0.7em;

font-size: 400%;

font-family: algerian, courier;

line-height: 80%;

}
</style>

</head>

<body>

<p>

<span>T</span>his is some text.

This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

<p>

In the paragraph above, the first letter of the text is embedded in a span element.

The span element has a width that is 0.7 times the size of the current font.

The font-size of the span element is 400% (quite large) and the line-height is 80%.

The font of the letter in the span will be in "Algerian".

</p>

</body>

</html>

EJEMPLO 4

<!DOCTYPE html>
<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

li {

float: left;

li a {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover {

background-color: #111;

}
</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

EJEMPLO 6

<!DOCTYPE html>

<html>

<head>

<style>

*{

box-sizing: border-box;

body {

margin: 0;

.header {

background-color: #2196F3;
color: white;

text-align: center;

padding: 15px;

.footer {

background-color: #444;

color: white;

padding: 15px;

.topmenu {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #777;

.topmenu li {

float: left;

.topmenu li a {

display: inline-block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

}
.topmenu li a:hover {

background-color: #222;

.topmenu li a.active {

color: white;

background-color: #4CAF50;

.column {

float: left;

padding: 15px;

.clearfix::after {

content: "";

clear: both;

display: table;

.sidemenu {

width: 25%;

.content {

width: 75%;

.sidemenu ul {

list-style-type: none;

margin: 0;

padding: 0;
}

.sidemenu li a {

margin-bottom: 4px;

display: block;

padding: 8px;

background-color: #eee;

text-decoration: none;

color: #666;

.sidemenu li a:hover {

background-color: #555;

color: white;

.sidemenu li a.active {

background-color: #008CBA;

color: white;

</style>

</head>

<body>

<ul class="topmenu">

<li><a href="#home" class="active">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>
</ul>

<div class="clearfix">

<div class="column sidemenu">

<ul>

<li><a href="#flight">The Flight</a></li>

<li><a href="#city" class="active">The City</a></li>

<li><a href="#island">The Island</a></li>

<li><a href="#food">The Food</a></li>

<li><a href="#people">The People</a></li>

<li><a href="#history">The History</a></li>

<li><a href="#oceans">The Oceans</a></li>

</ul>

</div>

<div class="column content">

<div class="header">

<h1>The City</h1>

</div>

<h1>Chania</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<p>You will learn more about responsive web pages in a later chapter.</p>

</div>

</div>
<div class="footer">

<p>Footer Text</p>

</div>

</body>

</html>

Todas las propiedades CSS Float

Property Description

clear Specifies on which sides of an element where floating

elements are not allowed to float

float Specifies whether or not an element should float

overflow Specifies what happens if content overflows an element's box

overflow-x Specifies what to do with the left/right edges of the content if

it overflows the element's content area

overflow-y Specifies what to do with the top/bottom edges of the content

if it overflows the element's content area
CSS Layout - inline-block
El valor inline-block
Ha sido posible durante un largo tiempo para crear una cuadrícula de cajas
que llena el ancho del navegador y envuelve bien (cuando se cambia el
tamaño del navegador), mediante el uso de la float propiedad.

Sin embargo, el inline-block valor de la display propiedad hace que

este sea aún más fácil.

Elementos inline-bloques son como elementos en línea, pero que pueden

tener una anchura y una altura.

Ejemplos

La vieja manera - con ayuda de float (nótese que también tenemos que
especificar una clear propiedad para el elemento después de que las cajas
flotantes):

Ejemplo
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}

.after-box {
clear: left;
}

El mismo efecto se puede lograr mediante el uso del inline-block valor

de la display propiedad (observe que no clear se necesita la propiedad):
Ejemplo
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}

CSS Cursor de enfoque

Ejemplo

<!DOCTYPE html>

<html>

<body>

<p>Mouse over the words to change the cursor.</p>

<span style="cursor:auto">auto</span><br>

<span style="cursor:crosshair">crosshair</span><br>

<span style="cursor:default">default</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:help">help</span><br>

<span style="cursor:move">move</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:text">text</span><br>

<span style="cursor:w-resize">w-resize</span><br>

<span style="cursor:wait">wait</span><br>

</body>

</html>

CSS Layout - horizontal y vertical

Alinear

Elementos centro Alinear

Para centrar horizontalmente un elemento de bloque (como <div>), el uso
margin: auto;
Ajuste de la anchura del elemento evitará que se extienda hacia los bordes
de su contenedor.

El elemento tomará entonces hasta la anchura especificada, y el espacio

restante se dividirá por igual entre los dos márgenes:

Ejemplo
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

Nota: alineación Centro no tiene efecto si la width propiedad no está

establecida (o en el 100%).

Centrar texto
Para simplemente centrar el texto dentro de un elemento, el uso text-
align: center;

Ejemplo
.center {
text-align: center;
 border: 3px solid green;
}

Centrar una imagen

Para centrar una imagen, el uso margin: auto; y convertirlo en
un bloque de elemento:

Ejemplo
img {
display: block;
margin: auto;
width: 40%;
}

Izquierda y Derecha Alinear - Uso de

posición
Un método para elementos de alineación es utilizar position: absolute;
:
Ejemplo
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Nota: los elementos posicionados absolutos se eliminan del flujo normal, y

se pueden solapar elementos.

Consejo: Al alinear los elementos con position, defina siempre margin y

padding para el <body> elemento. Esto es para evitar diferencias visuales
en diferentes navegadores.

También hay un problema con Internet Explorer 8 y versiones anteriores,

cuando se utiliza position. Si un elemento contenedor (en nuestro caso
<div class = "contenedor">) tiene una anchura especificada, y la
declaración DOCTYPE! No está presente, IE8 y versiones anteriores se
sumará un margen de 17px en el lado derecho. Este parece ser el espacio
reservado para una barra de desplazamiento. Por lo tanto, siempre fije la
declaración DOCTYPE al usar! position:

Ejemplo
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}

.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

Izquierda y Derecha Alinear - Uso de

flotación
Otro método para la alineación de los elementos es el uso de la float
propiedad:

Ejemplo
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Consejo: Al alinear los elementos con float, defina siempre margin y

padding para el <body> elemento. Esto es para evitar diferencias visuales
en diferentes navegadores.

También hay un problema con Internet Explorer 8 y versiones anteriores,

cuando se utiliza float. Si la declaración DOCTYPE! No está presente, IE8 y
versiones anteriores se sumará un margen de 17px en el lado
derecho. Este parece ser el espacio reservado para una barra de
desplazamiento. Por lo tanto, siempre fije la declaración DOCTYPE al
usar! float:

Ejemplo
body {
margin: 0;
padding: 0;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}

Centrar verticalmente - El uso de acolchado

Hay muchas maneras para centrar un elemento vertical en CSS. Una
solución simple es utilizar la parte superior e inferior padding:

Ejemplo
.center {
padding: 70px 0;
border: 3px solid green;
}
Para centrar tanto vertical como horizontalmente, utilizar padding y text-
align: center:

Ejemplo
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

Centrar verticalmente - Uso line-height

Otro truco es usar la line-height propiedad con un valor que es igual a la
height propiedad.
Ejemplo
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}

/* If the text has multiple lines, add the following: */

.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

Centrar verticalmente - El uso de la posición

y transformar
Si padding y line-height no es una opción, una tercera solución es
utilizar el posicionamiento y la transform propiedad:

Ejemplo
.center {
height: 200px;
position: relative;
 border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

CSS combinadores
CSS combinadores
Un combinador es algo que explica la relación entre los selectores.

Un selector CSS puede contener más de un selector simple. Entre los

selectores simples, podemos incluir un combinador.

Hay cuatro combinadores diferentes en CSS3:

 selector de descendiente (espacio)

 selector de hijo (>)
 selector de hermanos adyacentes (+)
 interruptor general de hermanos (~)

Selector descendiente
El selector descendiente coincide con todos los elementos que son
descendientes de un elemento especificado.

El ejemplo siguiente selecciona todos los elementos <p> Dentro de

elementos <div>:
Ejemplo
div p {
background-color: yellow;
}

Selector de niño
El selector niño selecciona todos los elementos que son los hijos inmediatos
de un elemento especificado.

El siguiente ejemplo selecciona todos los <p> elementos que son hijos
inmediatos de un elemento <div>:

Ejemplo
div> p {
background-color: yellow;
}

Selector de hermanos adyacentes

El selector de hermanos adyacentes selecciona todos los elementos que son
los hermanos adyacentes de un elemento especificado.

elementos de hermanos deben tener el mismo elemento padre, y

"adyacente" significa "inmediatamente después".

El ejemplo siguiente selecciona todos <p> elementos que se colocan

inmediatamente después de <div> elementos:

Ejemplo
div + p {
background-color: yellow;
}
Selector general entre hermanos
El interruptor general de hermanos selecciona todos los elementos que son
hermanos de un elemento especificado.

El ejemplo siguiente selecciona todos <p> elementos que son los hermanos
de los elementos <div>:

Ejemplo
div ~ p {
background-color: yellow;
}

CSS pseudo-clases
¿Cuáles son pseudo-clases?
Un pseudo-clase se utiliza para definir un estado especial de un elemento.

Por ejemplo, se puede utilizar para:

 Estilo un elemento cuando se coloca el ratón sobre ella

 Estilo visitados y no visitados enlaces diferente
 Estilo un elemento cuando se pone el foco

Sintaxis
La sintaxis de pseudo-clases:

selector:pseudo-class {
property:value;
}
Ancla pseudo-clases
Enlaces se pueden mostrar de distintas maneras:

Ejemplo
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */

a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

Nota: a:hover debe venir después a:link y a:visited en la definición de

CSS con el fin de ser eficaz! a:active Debe venir después a:hover en la
definición CSS con el fin de ser eficaz! Nombres de pseudo-clases no son
mayúsculas y minúsculas.

Las pseudo-clases y clases CSS

Las pseudo-clases se pueden combinar con clases CSS:

Al pasar sobre el enlace en el ejemplo, que va a cambiar de color:

Ejemplo
a.highlight:hover {
color: #ff0000;
}

Pasa el cursor sobre el <div>

Un ejemplo del uso de la :hover pseudo-clase en un elemento <div>:

Ejemplo
div:hover {
background-color: blue;
}

Información sobre la herramienta sencilla

Hover
Pase el ratón sobre un elemento <div> para mostrar un elemento <p>
(como un texto de ayuda):

Pase el ratón sobre mí para mostrar el elemento <p>.

Ejemplo
p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}
CSS - El: first-child pseudo-clase
El :first-child pseudo-clase coincide con un elemento especificado que
es el primer hijo de otro elemento.

Coincidir con el primer elemento <p>

En el siguiente ejemplo, el selector equivale a cualquier elemento <p> que
es el primer hijo de cualquier elemento:

Ejemplo
p:first-child {
color: blue;
}

Coinciden con los primeros <i> en todos los

elementos <P>
En el siguiente ejemplo, el selector coincide con la primera <i> elemento
en todas <p> elementos:

Ejemplo
p i:first-child {
color: blue;
}

Coincidir con todos los <i> en todo primer

hijo elementos <P>
En el siguiente ejemplo, el selector de todos los partidos de <i> elementos
en <p> elementos que son el primer hijo de otro elemento:
Ejemplo
p:first-child i {
color: blue;
}

CSS - El: lang Pseudo-clase

La :lang pseudo-clase le permite definir reglas especiales para diferentes
idiomas.

En el siguiente ejemplo, :lang define las comillas para <q> elementos con
lang = "no":

Ejemplo
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

CSS - El:focus
La :focus pseudo-clase le permite definir reglas especiales para diferentes
ingreso de dato en formularios, de manera que al ingresar el dato en los
mismo se permita cambiar el color de la casilla.
Más ejemplos
Añadir diferentes estilos de hipervínculos
Este ejemplo muestra cómo agregar otros estilos de hipervínculos.

El uso de: centrarse

Este ejemplo muestra cómo utilizar el: centrarse pseudo-clase.

Ejemplo 1

<!DOCTYPE html>

<html>

<head>

<style>

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}

</style>

</head>

<body>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>

<p><b><a class="two" href="default.asp" target="_blank">This link changes font-

size</a></b></p>

<p><b><a class="three" href="default.asp" target="_blank">This link changes background-

color</a></b></p>

<p><b><a class="four" href="default.asp" target="_blank">This link changes font-

family</a></b></p>

<p><b><a class="five" href="default.asp" target="_blank">This link changes text-

decoration</a></b></p>

</body>

</html>

Ejemplo 2

<!DOCTYPE html>

<html>

<head>

<style>
input:focus {

background-color: yellow;

</style>

</head>

<body>

<form action="/action_page.php" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" value="Submit">

</form>

<p><b>Note:</b> IE8 supports the :focus pseudo-class only if a !DOCTYPE is specified.</p>

</body>

</html>

CSS pseudo-elemento
¿Cuáles son los pseudo-elementos?
Un pseudo-elemento CSS se utiliza para estilo especificado partes de un
elemento.

Por ejemplo, se puede utilizar para:

 Estilo de la primera letra, o línea, de un elemento

 Insertar contenido antes, o después, el contenido de un elemento
Sintaxis
La sintaxis de pseudo-elementos:

selector::pseudo-element {
property:value;
}

Note la notación dos puntos dobles - ::first-line frente :first-line

El doble de colon sustituye la notación de una sola de colon para pseudo-

elementos en CSS3. Este fue un intento de W3C para distinguir
entre pseudo-clases y pseudo-elementos.

La sintaxis de una sola de colon se utilizó tanto para pseudo-clases y

pseudo-elementos en CSS2 y CSS1.

Para compatibilidad con versiones anteriores, la sintaxis de un solo colon es

aceptable para CSS2 y CSS1 pseudo-elementos.

La primera línea :: pseudo-elemento

El ::first-line pseudo-elemento se utiliza para añadir un estilo especial
a la primera línea de un texto.

El siguiente ejemplo da formato a la primera línea del texto en todas <p>

elementos:

Ejemplo
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Nota: El ::first-line pseudo-elemento sólo se puede aplicar a los
elementos a nivel de bloque.

Las siguientes propiedades se aplican a la ::first-line pseudo-elemento:

 propiedades de la fuente
 propiedades de color
 propiedades de fondo
 word-spacing
 espaciado de letras
 text-decoration
 vertical-align
 text-transform
 altura de la línea
 claro

La :: pseudo-elemento first-letter
El ::first-letter pseudo-elemento se utiliza para añadir un estilo
especial a la primera letra de un texto.

El siguiente ejemplo se da formato a la primera letra del texto en todos los

elementos <P>:

Ejemplo
p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Nota: El ::first-letter pseudo-elemento sólo se puede aplicar a los

elementos a nivel de bloque.

Las siguientes propiedades se aplican al elemento de pseudo-primer-carta

:::

 propiedades de la fuente
 propiedades de color
  propiedades de fondo
 propiedades de los márgenes
 propiedades de relleno
 propiedades de borde
 text-decoration
 vertical-align (sólo si "flotar" es "ninguna")
 text-transform
 altura de la línea
 flotador
 claro

Los pseudo-elementos y clases CSS

Pseudo-elementos se pueden combinar con clases CSS:

Ejemplo
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}

El ejemplo anterior se mostrará la primera letra de los párrafos con class =

"intro", en rojo y en un tamaño más grande.

Múltiples pseudo-elementos
Varios pseudo-elementos también se pueden combinar.

En el siguiente ejemplo, la primera letra de un párrafo será de color rojo,

en un tamaño de letra XX-Large. El resto de la primera línea será azul, y en
pequeñas-caps. El resto del párrafo será el tamaño de fuente
predeterminado y color:

Ejemplo
p::first-letter {
color: #ff0000;
 font-size: xx-large;
}

p::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS - La :: antes de pseudo-elemento

El ::before pseudo-elemento se puede utilizar para insertar un cierto
contenido antes de que el contenido de un elemento.

El ejemplo siguiente inserta una imagen antes de que el contenido de cada

elemento <h1>:

Ejemplo
h1::before {
content: url(smiley.gif);
}

CSS - La :: después de pseudo-elemento

El ::after pseudo-elemento se puede utilizar para insertar algún
contenido después de que el contenido de un elemento.

El ejemplo siguiente inserta una imagen después de que el contenido de

cada elemento <h1>:

Ejemplo
h1::after {
content: url(smiley.gif);
}
CSS - La selección :: pseudo-elemento
El ::selection pseudo-elemento coincide con la porción de un elemento
que es seleccionado por un usuario.

Las siguientes propiedades CSS se pueden aplicar a ::selection: color,

background, cursor, y outline.

El siguiente ejemplo hace que el texto seleccionado rojo sobre un fondo

amarillo:

Ejemplo
::selection {
color: red;
background: yellow;
}

Ponte a prueba con los ejercicios!

Todos los pseudo elementos CSS

Selector Example Example description

::after p::after Insert something after the content of each

<p> element

::before p::before Insert something before the content of each

<p> element
::first-letter p::first-letter Selects the first letter of each <p> element

::first-line p::first-line Selects the first line of each <p> element

::selection p::selection Selects the portion of an element that is

selected by a user

Todas las clases CSS Pseudo

Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input>

element

:disabled input:disabled Selects every disabled <input>

element

:empty p:empty Selects every <p> element that

has no children

:enabled input:enabled Selects every enabled

 <input>element

:first-child p:first-child Selects every <p> elements that

is the first child of its parent

:first-of-type p:first-of-type Selects every <p> element that

is the first <p> element of its
parent

:focus input:focus Selects the <input> element

that has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a

value within a specified range

:invalid input:invalid Selects all <input> elements

with an invalid value

:lang(language) p:lang(it) Selects every <p> element with

a lang attribute value starting
with "it"
:last-child p:last-child Selects every <p> elements that
is the last child of its parent

:last-of-type p:last-of-type Selects every <p> element that

is the last <p> element of its
parent

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not

a <p> element

:nth-child(n) p:nth-child(2) Selects every <p> element that

is the second child of its parent

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that

is the second child of its parent,
counting from the last child

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that

is the second <p> element of its
parent, counting from the last
child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that

is the second <p> element of its
 parent

:only-of-type p:only-of-type Selects every <p> element that

is the only <p> element of its
parent

:only-child p:only-child Selects every <p> element that

is the only child of its parent

:optional input:optional Selects <input> elements with

no "required" attribute

:out-of-range input:out-of-range Selects <input> elements with a

value outside a specified range

:read-only input:read-only Selects <input> elements with a

"readonly" attribute specified

:read-write input:read-write Selects <input> elements with

no "readonly" attribute

:required input:required Selects <input> elements with a

"required" attribute specified
:root root Selects the document's root
element

:target #news:target Selects the current active #news

element (clicked on a URL
containing that anchor name)

:valid input:valid Selects all <input> elements

with a valid value

:visited a:visited Selects all visited links

CSS Opacidad / Transparencia

La opacity propiedad especifica la opacidad / transparencia de un
elemento.

imagen transparente
La opacity propiedad puede tener valor comprendido entre 0,0 - 1,0. El
valor más bajo, el más transparente:
Nota: IE8 y uso anterior filter:alpha(opacity=x). La x puede tomar un
valor de 0 - 100. Un valor más bajo hace que el elemento más
transparente.

Ejemplo
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Efecto transparente Hover

La opacity propiedad se utiliza a menudo junto con el :hover selector
para cambiar la opacidad en el ratón sobre:

Ejemplo
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

Ejemplo explicó

El primer bloque de CSS es similar al código en el Ejemplo 1. Además,

hemos añadido lo que debe suceder cuando un usuario se desplaza sobre
una de las imágenes. En este caso queremos que la imagen no sea
transparente cuando el usuario se desplaza sobre él. El CSS para esto
es opacity:1;.

Cuando el puntero del ratón se aleja de la imagen, la imagen será

transparente de nuevo.

Un ejemplo de efecto libración invertido:

Ejemplo
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Caja transparente
Cuando se utiliza la opacity propiedad para añadir transparencia al fondo
de un elemento, todos sus elementos hijos heredan la misma
transparencia. Esto puede hacer que el texto dentro de un elemento
totalmente transparente difícil de leer:
Ejemplo
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}

Transparencia utilizando RGBA

Si no desea aplicar la opacidad de elementos secundarios, como en nuestro
ejemplo anterior, utilice RGBA valores de color. El ejemplo siguiente
establece la opacidad del color de fondo y no el texto:

Que ha aprendido de nuestra CSS Colores capítulo , que se puede utilizar

como un valor RGB del color. Además de RGB, CSS3 introdujo un valor de
color RGB con un canal alfa (RGBA) - que especifica la opacidad de un
color.
Un valor de color RGBA se especifica con: RGBA (rojo, verde,
azul, alfa ). La alfaparámetro es un número entre 0,0 (completamente
transparente) y 1.0 (totalmente opaco).

Consejo: Usted aprenderá más acerca de los colores RGBA en

nuestra CSS3 Colores capítulo .

Ejemplo
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}

Texto en caja transparente

Ejemplo
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
 filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

En primer lugar, creamos un elemento <div> (class = "fondo") una imagen

de fondo, y una frontera. Entonces se crea otra <div> (class =
"TRANSBOX") dentro de la primera <div>. La <div class = "TRANSBOX">
tiene un color de fondo, y una frontera - el div es transparente. Dentro de
la transparencia <div>, añadimos un poco de texto dentro de un elemento
<p>.

CSS barra de navegación

Demostración: Barras de navegación
Barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web.

Con CSS se puede transformar menús HTML aburridas en barras de buen

aspecto de navegación.

Barra de navegación = Lista de Enlaces

Una barra de navegación necesita HTML estándar como base.

En nuestros ejemplos vamos a construir la barra de navegación de una lista

HTML estándar.

Una barra de navegación es básicamente una lista de enlaces, por lo que el

uso de la etiqueta <ul> y <li> elementos hace perfecto sentido:

Ejemplo
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Ahora vamos a quitar las balas y los márgenes y el relleno de la lista:

Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Ejemplo explicó:
  list-style-type: none;- Elimina las balas. Una barra de
navegación no necesita marcadores de lista
 Establecer margin: 0;y padding: 0; quitar la configuración por
defecto del navegador

El código en el ejemplo anterior es el código estándar que se utiliza en

ambas barras de navegación verticales y horizontales.

Vertical barra de navegación

Para construir una barra de navegación vertical, puede estilo de los
elementos <a> dentro de la lista, además del código anterior:

Ejemplo
li a {
display: block;
width: 60px;
}

Ejemplo explicó:

 display: block; - Visualización de los enlaces como elementos de

bloque hace que toda la zona se puede hacer clic enlace (no sólo el
texto), y que nos permite especificar el ancho (y el relleno, margen,
altura, etc. si quieres)
 width: 60px;- Los elementos de bloque ocupan todo el ancho
disponible de forma predeterminada. Queremos especificar un ancho
de 60 píxeles

También puede establecer la anchura <ul> y retire el ancho de Ra, ya que

se ocupará de todo el ancho disponible cuando se muestran como
elementos de bloque. Esto producirá el mismo resultado que el ejemplo
anterior:

Ejemplo
ul {
list-style-type: none;
 margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}

Ejemplos vertical, la barra de navegación

Crear una barra de navegación vertical básico con un color de fondo gris y
cambiar el color de fondo de los enlaces cuando el usuario mueve el ratón
sobre ellos:

Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}

Activo / actual Enlace de Navegación

Añadir una clase de "activo" para el enlace actual para que el usuario sepa
qué página que él / ella está en:

Ejemplo
.active {
background-color: #4CAF50;
color: white;
}

Centro de Enlaces y Agregar bordes

Añadir text-align:center a <li> O a para centrar los enlaces.

Añadir la border propiedad a <ul> añadir un borde alrededor de la barra

de navegación. Si usted también quiere fronteras dentro de la barra de
navegación, añadir una border-bottom a todos los <li> elementos, a
excepción de la última:
Ejemplo
ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

Llena de altura fija barra de navegación vertical

Crear una altura completa, "pegajosa" de navegación de la:

Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much
content */
}

Nota: Este ejemplo podría no funcionar correctamente en dispositivos

móviles.

Barra de navegación horizontal

Hay dos maneras de crear una barra de navegación horizontal. El uso en
línea o flotante elementos de la lista.
Elementos de lista en línea

Una forma de construir una barra de navegación horizontal es especificar

los <li> elementos como en línea, además del código de "estándar" de
arriba:

Ejemplo
li {
display: inline;
}

Ejemplo explicó:

 display: inline;- Por defecto, <li> elementos son elementos de

bloque. A continuación, se elimina los saltos de línea antes y después
de cada elemento de la lista, para mostrarlos en una sola línea

Flotante elementos de lista

Otra forma de crear una barra de navegación horizontal es flotar los <li>
elementos, y especificar un diseño para el menú de navegación:

Ejemplo
li {
float: left;
}

a {
display: block;
padding: 8px;
background-color: #dddddd;
}

Ejemplo explicó:

 float: left; - utilización de flotación para obtener elementos de

bloque para deslizar uno junto al otro
  display: block; - Visualización de los enlaces como elementos de
bloque hace que toda la zona se puede hacer clic enlace (no sólo el
texto), y que nos permite especificar el relleno (y la altura, ancho,
márgenes, etc. si quieres)
 padding: 8px;- Dado que los elementos de bloque ocupan todo el
ancho disponible, no pueden flotar junto a la otra. Por lo tanto,
especifique algo de relleno para que se vean bien
 background-color: #dddddd; - Añadir un fondo gris-color a cada
elemento

Consejo: Añada el color de fondo a <ul> en lugar de cada elemento <a>

si quieres un color de fondo de ancho completo:

Ejemplo
ul {
background-color: #dddddd;
}

Ejemplos horizontal barra de navegación

Crear una barra de navegación horizontal básico con un color de fondo
oscuro y cambiar el color de fondo de los enlaces cuando el usuario mueve
el ratón sobre ellos:

Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

li a:hover {
background-color: #111;
}

Activo / actual Enlace de Navegación

Añadir una clase de "activo" para el enlace actual para que el usuario sepa
qué página que él / ella está en:

Ejemplo
.active {
background-color: #4CAF50;
}

Enlaces de alineación derecha

Derecho a alinear enlaces por flotación de los elementos de la lista a la

derecha (float:right;):
Ejemplo
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active"href="#about">About</a></li>
</ul>

Los divisores de frontera

Añadir la border-right propiedad a <li> para crear separadores de
enlace:

Ejemplo
/* Add a gray right border to all list items, except the last item (last-
child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

Fijo barra de navegación

Hacer la estancia barra de navegación en la parte superior o inferior de la
página, incluso cuando el usuario se desplaza por la página:
Top fijo
ul {
position: fixed;
top: 0;
width: 100%;
}

fondo fijo
ul {
position: fixed;
bottom: 0;
width: 100%;
}

Nota: Estos ejemplos podrían no funcionar correctamente en dispositivos

móviles.

Gris horizontal barra de navegación

Un ejemplo de una barra de navegación horizontal gris con un borde gris

delgada:
Ejemplo
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li a {
color: #666;
}

Más ejemplos
topnav sensible
Cómo utilizar CSS3 preguntas de los medios para crear una barra de
navegación superior sensible.

Ejemplo 1

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {margin: 0;}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

ul.topnav li {float: left;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){

ul.topnav li.right,

ul.topnav li {float: none;}

</style>

</head>

<body>

<ul class="topnav">

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li class="right"><a href="#about">About</a></li>

</ul>

<div style="padding:0 16px;">

<h2>Responsive Topnav Example</h2>

<p>This example use media queries to stack the topnav vertically when the screen size is 600px or
less.</p>

<p>You will learn more about media queries and responsive web design later in our CSS
Tutorial.</p>

<h4>Resize the browser window to see the effect.</h4>

</div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {margin: 0;}

ul.sidenav {

list-style-type: none;

margin: 0;

padding: 0;
width: 25%;

background-color: #f1f1f1;

position: fixed;

height: 100%;

overflow: auto;

ul.sidenav li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

ul.sidenav li a.active {

background-color: #4CAF50;

color: white;

ul.sidenav li a:hover:not(.active) {

background-color: #555;

color: white;

div.content {

margin-left: 25%;
padding: 1px 16px;

height: 1000px;

@media screen and (max-width: 900px) {

ul.sidenav {

width: 100%;

height: auto;

position: relative;

ul.sidenav li a {

float: left;

padding: 15px;

div.content {margin-left: 0;}

@media screen and (max-width: 400px) {

ul.sidenav li a {

text-align: center;

float: none;

</style>

</head>

<body>
<ul class="sidenav">

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<div class="content">

<h2>Responsive Sidenav Example</h2>

<p>This example use media queries to transform the sidenav to a top navigation bar when the
screen size is 900px or less.</p>

<p>We have also added a media query for screens that are 400px or less, which will vertically
stack and center the navigation links.</p>

<p>You will learn more about media queries and responsive web design later in our CSS
Tutorial.</p>

<h3>Resize the browser window to see the effect.</h3>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

li {

float: left;

li a, .dropbtn {
display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

li.dropdown {

display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: black;
padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li class="dropdown">

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>

</html>

CSS Menús desplegablesSiguiente ❯

Crear una lista desplegable hoverable con CSS.

Demostración: Ejemplos desplegables

Mueva el ratón sobre los ejemplos a continuación:
desplegable básico de texto
Crear un cuadro desplegable que aparece cuando el usuario mueve el ratón
sobre un elemento.

Ejemplo
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>

<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>

<!DOCTYPE html>

<html>

<head>

<style>

.dropdown {

position: relative;

display: inline-block;

.dropdown-content {

display: none;
 position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;

.dropdown:hover .dropdown-content {

display: block;

</style>

</head>

<body>

<h2>Hoverable Dropdown</h2>

<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">

<span>Mouse over me</span>

<div class="dropdown-content">

<p>Hello World!</p>

</div>

</div>

</body>
</html>

ejemplo Explicación
HTML) Usar cualquier elemento para abrir el contenido desplegable, por
ejemplo, un <span> o un <button> elemento.

Use un elemento de contenedor (como <div>) para crear el contenido

desplegable y añadir lo que quieras dentro de ella.

Envolver un elemento <div> alrededor de los elementos para posicionar el

contenido correctamente desplegable con CSS.

CSS) El .dropdown uso de clase position:relative, que es necesaria

cuando queremos el contenido desplegable para ser colocado justo debajo
del botón desplegable (usando position:absolute).

La .dropdown-content clase contiene el contenido real desplegable. Se

oculta por defecto, y se mostrará en vuelo estacionario (véase más
adelante). Tenga en cuenta el min-width se establece en 160px. Siéntase
libre de cambiar esta situación. Consejo: Si desea que el ancho del
contenido desplegable para ser tan amplio como el botón desplegable,
establecer el width 100% (y overflow:auto para permitir desplazamiento
en pantallas pequeñas).

En lugar de utilizar una frontera, se ha utilizado el CSS3 box-shadow

propiedad para hacer el menú desplegable se parece a una "tarjeta".

El :hover selector se utiliza para mostrar el menú desplegable cuando el

usuario mueve el ratón sobre el botón desplegable.

Menú desplegable
Crear un menú desplegable que permite al usuario elegir una opción de una
lista:

Este ejemplo es similar al anterior, excepto que se añade enlaces dentro de

la caja desplegable y estilo de ellos para adaptarse a un botón desplegable
de estilo:
Ejemplo
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

.dropdown {

position: relative;
 display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

.dropdown:hover .dropbtn {
 background-color: #3e8e41;

</style>

</head>

<body>

<h2>Dropdown Menu</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">

<button class="dropbtn">Dropdown</button>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be
URLs.</p>

</body>

</html>
Alineado a la derecha-contenido
desplegable

Si desea que el menú desplegable para ir de derecha a izquierda, en lugar

de izquierda a derecha, añadir right: 0;

Ejemplo
.dropdown-content {
right: 0;
}

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

.dropdown {
 position: relative;

display: inline-block;

.dropdown-content {

display: none;

position: absolute;

right: 0;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

}
.dropdown:hover .dropbtn {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Aligned Dropdown Content</h2>

<p>Determine whether the dropdown content should go from left to right or right to left with the
left and right properties.</p>

<div class="dropdown" style="float:left;">

<button class="dropbtn">Left</button>

<div class="dropdown-content" style="left:0;">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</div>

<div class="dropdown" style="float:right;">

<button class="dropbtn">Right</button>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

 <a href="#">Link 3</a>

</div>

</div>

</body>

</html>

Más ejemplos

<!DOCTYPE html>

<html>

<head>

<style>

.dropdown {

position: relative;

display: inline-block;

.dropdown-content {
 display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown:hover .dropdown-content {

display: block;

.desc {

padding: 15px;

text-align: center;

</style>

</head>

<body>

<h2>Dropdown Image</h2>

<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">

<img src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50">

<div class="dropdown-content">
 <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">

<div class="desc">Beautiful Trolltunga, Norway</div>

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;
 overflow: hidden;

background-color: #333;

li {

float: left;

li a, .dropbtn {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

li.dropdown {

display: inline-block;

.dropdown-content {

display: none;
 position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>

<li class="dropdown">

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

<div class="dropdown-content">

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</li>

</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>

</html>

CSS TooltipSiguiente ❯
Crear información sobre herramientas con CSS.

Ejemplos Tooltip: Demo

Una información sobre herramientas a menudo se utiliza para especificar
información adicional acerca de algo cuando el usuario mueve el puntero
del ratón sobre un elemento:
Información sobre la herramienta básica
Crear un texto de ayuda que aparece cuando el usuario mueve el ratón
sobre un elemento:

Ejemplo
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the
hoverable text */
}

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

/* Position the tooltip text - see examples below! */

position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

}
.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue
reading on how to position the tooltip in an desirable way.</p>

</body>

</html>

ejemplo Explicación
HTML) Use un elemento de contenedor (como <div>) y añadir la
"tooltip" clase a la misma. Cuando el puntero del ratón sobre este
usuario <div>, se mostrará el texto de sugerencia.

El texto de sugerencia se coloca dentro de un elemento en línea (como

<span>) con class="tooltiptext".

CSS) El tooltip uso de clase position:relative, que es necesaria para

colocar el texto de sugerencia ( position:absolute). Nota: Véanse los
ejemplos a continuación sobre cómo posicionar el texto de ayuda.

La tooltiptext clase contiene el texto de sugerencia real. Se oculta por

defecto, y será visible en vuelo estacionario (véase más adelante). También
hemos añadido algunos estilos básicos a que: ancho de 120 píxeles, color
de fondo negro, color de texto blanco, texto centrado, y la parte superior
de 5px y relleno inferior.

El CSS3 border-radius propiedad se utiliza para agregar esquinas

redondeadas para el texto de sugerencia.

El :hover selector se utiliza para mostrar el texto sobre herramientas

cuando el usuario mueve el ratón sobre el <div> con class="tooltip".

La información sobre herramientas de

posicionamiento
En este ejemplo, la información de herramienta se coloca a la derecha
( left:105%) del texto "hoverable" (<div>). También tenga en cuenta
que top:-5px se utiliza para colocarlo en el medio de su elemento
contenedor. Utilizamos el número 5 porque el texto de sugerencia tiene un
relleno superior e inferior de 5px. Si aumenta su relleno, también
aumentará el valor de la top propiedad para asegurarse de que permanece
en el medio (si esto es algo que desea). Lo mismo se aplica si desea que la
información de herramientas situada a la izquierda.

derecha Tooltip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

izquierda Tooltip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Si desea que aparezca la información sobre herramientas en la parte
superior o en la parte inferior, ver ejemplos a continuación. En cuenta que
utilizamos la margin-left propiedad con un valor de menos de 60
píxeles. Esta es centrar la descripción encima / debajo del texto
hoverable. Se establece en la media del ancho de la información de
herramienta (120/2 = 60).

Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center
the tooltip */
}

Información sobre la herramienta inferior

.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center
the tooltip */
}

Las flechas tooltip

Para crear una flecha que debe aparecer desde un lado específico de la
información sobre herramientas, agregar contenido "vacío" después de
información de herramienta, con la clase pseudo-elemento ::after junto
con la content propiedad. La flecha en sí se ha creado usando
fronteras. Esto hará que la mirada sobre herramientas como un bocadillo.

Este ejemplo muestra cómo agregar una flecha en la parte inferior de la

descripción:

Flecha abajo
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
 top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

ejemplo Explicación
Coloque la flecha dentro de la descripción: top: 100% se coloque la flecha
en la parte inferior de la descripción. left: 50% se centrará en la flecha.

Nota: La border-width propiedad especifica el tamaño de la flecha. Si

cambia esto, también cambiar el margin-left valor a la misma. Esto
mantendrá la flecha centrada.

El border-color se utiliza para transformar el contenido en una

flecha. Hemos establecido el borde superior de negro, y el resto a
transparente. Si todos los lados eran de color negro, que terminaría con
una caja cuadrada negro.

Este ejemplo muestra cómo agregar una flecha en la parte superior de la

descripción. Nótese que establecemos el color del borde inferior de este
tiempo:

Top flecha
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

Este ejemplo muestra cómo agregar una flecha a la izquierda de la

descripción:
Flecha izquierda
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

Resultado:

Este ejemplo muestra cómo agregar una flecha a la derecha de la

descripción:

Flecha correcta
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

Fundir Tooltips (Animación)

Si desea hacer desaparecer en el texto de sugerencia cuando se está a
punto de ser visible, se puede utilizar el CSS3 transition propiedad junto
con la opacity propiedad, y pasar de ser completamente invisible para el
100% visible, en un número de segundos especificado (1 segundo en
nuestra ejemplo):
Ejemplo
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;
 bottom: 100%;

left: 50%;

margin-left: -60px;

/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */

opacity: 0;

transition: opacity 1s;

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

</style>

<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>

<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second
to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>
CSS Galería de imágenes
CSS se puede utilizar para crear una galería de imágenes.

Galería de imágenes
La siguiente galería de imágenes se crea con CSS:

Ejemplo
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="lights.jpg">
<img src="lights.jpg" alt="Northern Lights" width="300"height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="mountains.jpg">
<img src="mountains.jpg" alt="Mountains" width="300"height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Ejemplo

<!DOCTYPE html>
<html>

<head>

<style>

div.gallery {

border: 1px solid #ccc;

div.gallery:hover {

border: 1px solid #777;

div.gallery img {

width: 100%;

height: auto;

div.desc {

padding: 15px;

text-align: center;

*{

box-sizing: border-box;

.responsive {
 padding: 0 6px;

float: left;

width: 24.99999%;

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

.clearfix:after {

content: "";

display: table;

clear: both;

</style>

</head>

<body>
<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_fjords.jpg">

<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_forest.jpg">

<img src="img_forest.jpg" alt="Forest" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_lights.jpg">

 <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_mountains.jpg">

<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="clearfix"></div>

<div style="padding:6px;">

<p>This example use media queries to re-arrange the images on different screen sizes: for
screens larger than 700px wide, it will show four images side by side, for screens smaller than
700px, it will show two images side by side. For screens smaller than 500px, the images will stack
vertically (100%).</p>

<p>You will learn more about media queries and responsive web design later in our CSS
Tutorial.</p>

</div>

</body>
</html>

CSS Sprites imagenSiguiente ❯

Sprites imagen
Una imagen de sprite es una colección de imágenes puestas en una sola
imagen.

Una página web con muchas imágenes puede tardar mucho tiempo en
cargar y genera múltiples peticiones al servidor.

El uso de sprites imagen se reducirá el número de solicitudes de servidor y

ahorrar ancho de banda.

Sprites imagen - Ejemplo simple

En lugar de utilizar tres imágenes separadas, utilizamos esta imagen única
( "img_navsprites.gif"):

Con CSS, podemos mostrar sólo la parte de la imagen que necesitamos.

En el siguiente ejemplo, el CSS especifica qué parte de la imagen

"img_navsprites.gif" para mostrar:

Ejemplo
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

<!DOCTYPE html>

<html>
<head>

<style>

#home {

width: 46px;

height: 44px;

background: url(img_navsprites.gif) 0 0;

#next {

width: 43px;

height: 44px;

background: url(img_navsprites.gif) -91px 0;

</style>

</head>

<body>

<img id="home" src="img_trans.gif"><br><br>

<img id="next" src="img_trans.gif">

</body>

</html>

Ejemplo explicó:

 <img id="home" src="img_trans.gif">- define Sólo una pequeña

imagen transparente porque el atributo src no puede estar vacío. La
imagen que se muestra será la imagen de fondo se especifica en CSS
  width: 46px; height: 44px; - Define la parte de la imagen que
queremos usar
 background: url(img_navsprites.gif) 0 0; - Define la imagen de
fondo y su posición (a la izquierda 0px, superior 0px)

Esta es la forma más fácil de usar sprites de imagen, ahora queremos

expandirlo con enlaces y se ciernen efectos.

Sprites imagen - Crear una lista de

navegación
Queremos utilizar la imagen de sprite ( "img_navsprites.gif") para crear
una lista de navegación.

Vamos a utilizar una lista HTML, ya que puede ser un enlace y también es
compatible con una imagen de fondo:

Ejemplo
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {

height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}

<!DOCTYPE html>

<html>

<head>

<style>

#navlist {

position: relative;

#navlist li {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

top: 0;

#navlist li, #navlist a {

height: 44px;
 display: block;

#home {

left: 0px;

width: 46px;

background: url('img_navsprites.gif') 0 0;

#prev {

left: 63px;

width: 43px;

background: url('img_navsprites.gif') -47px 0;

#next {

left: 129px;

width: 43px;

background: url('img_navsprites.gif') -91px 0;

</style>

</head>

<body>

<ul id="navlist">

<li id="home"><a href="default.asp"></a></li>

 <li id="prev"><a href="css_intro.asp"></a></li>

<li id="next"><a href="css_syntax.asp"></a></li>

</ul>

</body>

</html>

Ejemplo explicó:

 #navlist {position: relative;} - posición se establece en relación a

permitir el posicionamiento absoluto dentro de él
 li #navlist {margin: 0; padding: 0; list-style: none; position:
absolute; top: 0;} - margen y el relleno se establece en 0, se elimina
lista de estilo, y todos los elementos de la lista son absolutos
posicionado
 #navlist li, un #navlist {height: 44px; display: block;} - la altura de
todas las imágenes son 44px

Ahora empieza a la posición y el estilo para cada parte específica:

 #home {left: 0px; Ancho: 46px;} - Posicionado todo el camino a la

izquierda, y la anchura de la imagen es de 46 píxeles
 #home {background: url (img_navsprites.gif) 0 0;} - Define la
imagen de fondo y su posición (a la izquierda 0px, superior 0px)
 #prev {left: 63px; Ancho: 43px;} - 63px a la derecha (#home 46px
ancho + algo más de espacio entre los elementos) Posicionado, y el
ancho es de 43px.
 #prev {background: url ( 'img_navsprites.gif') -47px 0;} - Define el
47px imagen de fondo a la derecha (#home anchura de 46 píxeles +
1px línea de división)
 #next {left: 129px; Ancho: 43px;} - Posicionado 129px a la derecha
(inicio de #prev es 63px 43px + ancho + #prev espacio adicional), y
el ancho es de 43px.
 #next {background: url ( 'img_navsprites.gif') -91px 0;} - Define el
91px imagen de fondo a la derecha (#home anchura de 46 píxeles +
1px línea divisoria + ancho + #prev 43px 1px línea de división)
Sprites imagen - Efecto de la libración
Ahora queremos añadir un efecto de vuelo estacionario a nuestra lista de
navegación.

Consejo: El :hover selector se puede utilizar en todos los elementos, no

sólo en los enlaces.

Nuestra nueva imagen ( "img_navsprites_hover.gif") contiene tres

imágenes de navegación y tres imágenes a utilizar para efectos de
activación:

Debido a que este es uno no seis archivos separados sola imagen, y, no

habrá ningún retardo en la carga cuando un usuario se desplaza sobre la
imagen.

Solo agregamos tres líneas de código para añadir el efecto emergente:

Ejemplo
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}

<!DOCTYPE html>

<html>

<head>
<style>

#navlist {

position: relative;

#navlist li {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

top: 0;

#navlist li, #navlist a {

height: 44px;

display: block;

#home {

left: 0px;

width: 46px;

background: url('img_navsprites_hover.gif') 0 0;

#prev {

left: 63px;
 width: 43px;

background: url('img_navsprites_hover.gif') -47px 0;

#next {

left: 129px;

width: 43px;

background: url('img_navsprites_hover.gif') -91px 0;

#home a:hover {

background: url('img_navsprites_hover.gif') 0 -45px;

#prev a:hover {

background: url('img_navsprites_hover.gif') -47px -45px;

#next a:hover {

background: url('img_navsprites_hover.gif') -91px -45px;

</style>

</head>

<body>

<ul id="navlist">
 <li id="home"><a href="default.asp"></a></li>

<li id="prev"><a href="css_intro.asp"></a></li>

<li id="next"><a href="css_syntax.asp"></a></li>

</ul>

</body>

</html>

Ejemplo explicó:

 #home a: hover {background: url transparente (

'img_navsprites_hover.gif') 0 -45px;} - Para las tres imágenes de la
libración especificamos la misma posición de fondo, sólo el 45 píxeles
más abajo

CSS atributo selectores

Elementos de estilo HTML con atributos
específicos
Es posible que el estilo de los elementos HTML que tienen atributos
específicos o valores de atributos.

CSS [atributo] Selector

El [attribute] selector se utiliza para seleccionar los elementos con un
atributo especificado.

El ejemplo siguiente selecciona todos los elementos <a> con un atributo de

destino:
Ejemplo
a[target] {
background-color: yellow;
}

<!DOCTYPE html>

<html>

<head>

<style>

a[target] {

background-color: yellow;

</style>

</head>

<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>

<a href="http://www.disney.com" target="_blank">disney.com</a>

<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be

declared.</p>

</body>

</html>
CSS [atributo = "valor"] Selector
El [attribute="value"] selector se utiliza para seleccionar elementos con
un atributo y valor especificado.

El ejemplo siguiente selecciona todos los elementos <a> con a = "_ blank"
atributo de destino:

Ejemplo
a[target="_blank"] {
background-color: yellow;
}

<!DOCTYPE html>

<html>

<head>

<style>

a[target=_blank] {

background-color: yellow;

</style>

</head>

<body>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>

<a href="http://www.disney.com" target="_blank">disney.com</a>

<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be
declared.</p>

</body>

</html>

CSS [atributo ~ = "valor"] Selector

El [attribute~="value"] selector se utiliza para seleccionar elementos
con un valor de atributo que contiene una palabra especificada.

El ejemplo siguiente selecciona todos los elementos con un atributo título

que contiene una lista separada por espacios de palabras, uno de los cuales
es "flor":

Ejemplo
[title~="flower"] {
border: 5px solid yellow;
}

<!DOCTYPE html>

<html>

<head>

<style>

[title~=flower] {

border: 5px solid yellow;

</style>

</head>

<body>

<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">

<img src="img_flwr.gif" title="flower" width="224" height="162">

<img src="img_tree.gif" title="tree" width="200" height="358">

<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must

be declared.</p>

</body>

</html>

El ejemplo anterior coincidirá con elementos title = "flor", title = "flor de

verano", y el título = "flor nueva", pero no title = "mi-flor" o title = "flores".

CSS [atributo | = "valor"] Selector

El [attribute|="value"] selector se utiliza para seleccionar elementos
con el atributo especificado empezando con el valor especificado.

El ejemplo siguiente selecciona todos los elementos con un valor de

atributo de clase que comienza con "top":

Nota: El valor tiene que ser una palabra completa, ya sea solo, como class
= "top", o seguido por un guión (-), como class = "top-texto"!

Ejemplo
[class|="top"] {
background: yellow;
}

<!DOCTYPE html>

<html>

<head>

<style>
[class|=top] {

background: yellow;

</style>

</head>

<body>

<h1 class="top-header">Welcome</h1>

<p class="top-text">Hello world!</p>

<p class="topcontent">Are you learning CSS?</p>

<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must

be declared.</p>

</body>

</html>

CSS [^ atributo = "valor"] Selector

El [attribute^="value"] selector se utiliza para seleccionar elementos
cuyo valor de atributo comienza con un valor especificado.

El ejemplo siguiente selecciona todos los elementos con un valor de

atributo de clase que comienza con "top":

Nota: El valor no tiene por qué ser una palabra completa!

Ejemplo
[class^="top"] {
background: yellow;
}
<!DOCTYPE html>

<html>

<head>

<style>

[class^="top"] {

background: yellow;

</style>

</head>

<body>

<h1 class="top-header">Welcome</h1>

<p class="top-text">Hello world!</p>

<p class="topcontent">Are you learning CSS?</p>

<p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must

be declared.</p>

</body>

</html>

CSS [atributo $ = "valor"] Selector

El [attribute$="value"] selector se utiliza para seleccionar elementos
cuyo valor de atributo termina con un valor especificado.

El ejemplo siguiente selecciona todos los elementos con un valor de

atributo de clase que termina con "test":

Nota: El valor no tiene por qué ser una palabra completa!

Ejemplo
[class$="test"] {
background: yellow;
}

<!DOCTYPE html>

<html>

<head>

<style>

[class$="test"] {

background: yellow;

</style>

</head>

<body>

<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>

<div class="my-test">The third div element.</div>

<p class="mytest">This is some text in a paragraph.</p>

</body>

</html>

CSS [* atributo = "valor"] Selector

El [attribute*="value"] selector se utiliza para seleccionar elementos
cuyo valor de atributo contiene un valor especificado.
El ejemplo siguiente selecciona todos los elementos con un valor de
atributo de clase que contiene "te":

Nota: El valor no tiene por qué ser una palabra completa!

Ejemplo
[class*="te"] {
background: yellow;
}

<!DOCTYPE html>

<html>

<head>

<style>

[class*="te"] {

background: yellow;

</style>

</head>

<body>

<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>

<div class="my-test">The third div element.</div>

<p class="mytest">This is some text in a paragraph.</p>

</body>

</html>
Formas de estilo
Los selectores de atributos pueden ser útiles para las formas de peinado sin
clase o ID:

Ejemplo
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 150px;

display: block;

margin-bottom: 10px;

background-color: yellow;

input[type=button] {

width: 120px;
 margin-left: 35px;

display: block;

</style>

</head>

<body>

<form name="input" action="" method="get">

Firstname:<input type="text" name="Name" value="Peter" size="20">

Lastname:<input type="text" name="Name" value="Griffin" size="20">

<input type="button" value="Example Button">

</form>

</body>

</html>

CSS Formas
El aspecto de un formulario HTML se puede mejorar en gran medida con
CSS:
El estilo de los campos de entrada
Usar la width propiedad para determinar la anchura del campo de entrada:

Ejemplo
input {
width: 100%;
}

<!DOCTYPE html>

<html>

<head>

<style>

input {
 width: 100%;

</style>

</head>

<body>

<p>A full-width input field:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname">

</form>

</body>

</html>

El ejemplo anterior se aplica a todos <input> elementos. Si sólo desea el

estilo de un tipo específico de entrada, puede utilizar selectores de
atributos:

 input[type=text] - sólo seleccionará los campos de texto

 input[type=password] - sólo seleccionará los campos de contraseña
 input[type=number] - sólo seleccionará los campos de números
 etc ..

Entradas acolchados
Usar la padding propiedad de añadir espacio dentro del campo de texto.

Consejo: Cuando se tienen muchas entradas después de la otra, es posible

que también desee añadir un poco margin, para añadir más espacio fuera
de ellos:
Ejemplo
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

</style>

</head>

<body>
<p>Padded text fields:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname">

</form>

</body>

</html>

Tenga en cuenta que hemos establecido la box-sizing propiedad a

border-box. Esto asegura que los bordes de relleno y, finalmente, se
incluyen en el ancho total y la altura de los elementos.
Más información sobre la box-sizing propiedad en nuestra CSS3 caja de
medición capítulo.

Entradas confinadas
Utilice la border propiedad para cambiar el tamaño y color del borde, y el
uso de la border-radius propiedad para añadir esquinas redondeadas:

Ejemplo
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

<!DOCTYPE html>
<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

border: 2px solid red;

border-radius: 4px;

</style>

</head>

<body>

<p>Text fields with borders:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname">

</form>

</body>

</html>
Si sólo desea un borde inferior, utilice la border-bottom propiedad:

Ejemplo
input[type=text] {
border: none;
border-bottom: 2px solid red;
}

<!DOCTYPE html>

<html>

<head>

<style>

input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

border: none;

border-bottom: 2px solid red;

</style>

</head>

<body>
<p>Text fields with only a bottom border:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname">

</form>

</body>

</html>

Entradas de colores
Utilice la background-color propiedad para añadir un color de fondo a la
entrada, y la color propiedad para cambiar el color del texto:

Ejemplo
input[type=text] {
background-color: #3CBC8D;
color: white;
}

<!DOCTYPE html>

<html>

<head>

<style>
input[type=text] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

border: none;

background-color: #3CBC8D;

color: white;

</style>

</head>

<body>

<p>Colored text fields:</p>

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="fname" value="John">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lname" value="Doe">

</form>

</body>

</html>

Entradas enfocadas
Por defecto, algunos navegadores añaden un borde azul alrededor de la
entrada cuando obtiene foco (clic en). Puede eliminar este comportamiento
mediante la adición outline: none; a la entrada.

Utilice el :focus selector para hacer algo con el campo de entrada cuando
se pone centrarse:

Ejemplo
input[type=text]:focus {
background-color:lightblue;
}

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}

input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a background color to the text field when it
gets focused (clicked on):</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>

Ejemplo
input[type=text]:focus {
border: 3px solid #555;
}

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a black border color to the text field when it
gets focused (clicked on):</p>
<p>Note that we have added the CSS3 transition property to animate the border color (takes 0.5
seconds to change the color on focus).</p>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>
Entrada icono / imagen con
Si quieres un icono dentro de la entrada, utilice la background-image
propiedad y posicionarlo con la background-position propiedad. También
notamos que añadimos un gran relleno a la izquierda para reservar el
espacio del icono:

Ejemplo
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Búsqueda de entrada de animación

En este ejemplo se utiliza el CSS3 transition propiedad para animar la
anchura de la entrada de búsqueda cuando se pone el foco. Usted
aprenderá más sobre la transition propiedad más tarde, en
nuestra CSS3 transiciones capítulo.

Ejemplo
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
 background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>

<p>Animated search input:</p>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Styling Textareas
Consejo: Utilice la resize propiedad para evitar áreas de texto sea
reducida (desactivar el "capturador" en la esquina inferior derecha):

Ejemplo
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
 border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}

<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable
the "grabber" in the bottom right corner):</p>

<form>
<textarea>Some text...</textarea>
</form>

</body>
</html>

Seleccione el estilo Menús

Ejemplo
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>A styled select menu.</p>

<form>
<select id="country" name="country">
<option value="au">Australia</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>

</body>
</html>

El estilo de entrada Botones

Ejemplo
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>

<p>Styled input buttons.</p>

<input type="button" value="Button">

<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

CSS Contadores

Contadores de CSS son "variables" que mantiene CSS cuyos valores

pueden ser incrementado por las reglas CSS (para rastrear el número de
veces que se utilizan). Contadores permiten ajustar la apariencia de
contenido en función de su ubicación en el documento.

Numeración automática con contadores

Contadores de CSS son como "variables". Los valores de las variables se
pueden incrementar mediante reglas CSS (que hará un seguimiento de la
cantidad de veces que se utilizan).

Para trabajar con contadores de CSS usaremos las siguientes propiedades:

 counter-reset - Crea o restablece un contador

 counter-increment - Incrementa un valor de contador
 content - Inserta contenido generado
 counter() o counters() función - Añade el valor de un contador a
un elemento

Para utilizar un contador de CSS, primero se debe crear con counter-

reset.

El ejemplo siguiente crea un contador para la página (en el selector de

cuerpo), entonces incrementa el valor del contador para cada elemento
<h2> y añade "Sección < valor del contador >:" al principio de cada
elemento <h2>:

Ejemplo
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters:</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Contadores de anidación
El ejemplo siguiente crea un contador para la página (sección) y un
contador para cada <h1> elemento (subsección). La "sección" contador se
cuenta para cada elemento <h1> con "Sección < valor de la sección de
contador >.", Y el contador "subsección" se contará para cada uno <h2>
elemento con "< valor de la sección de contador >. < valor del contador de
la subsección > ":

Ejemplo
body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Un contador también puede ser útil para hacer listas descritas porque una
nueva instancia de un contador se crea automáticamente en elementos
secundarios. Aquí se utiliza la counters() función para insertar una
cadena entre los diferentes niveles de contadores anidados:

Ejemplo
ol {
counter-reset: section;
list-style-type: none;
}

li::before {
counter-increment: section;
content: counters(section,".") " ";
}

<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}

li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>

<ol>
<li>item</li>
<li>item</li>
</ol>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Propiedades CSS del contador

Property Description
content Used with the ::before and ::after pseudo-elements, to
insert generated content

counter-increment Increments one or more counter values

counter-reset Creates or resets one or more counters

CSS3 IntroducciónSiguiente ❯

CSS3 es el estándar más reciente para CSS.

CSS3 es completamente compatible con versiones anteriores de CSS.

Esta sección te enseña sobre las nuevas funciones de CSS3.

Módulos CSS3
CSS3 se ha dividido en "módulos". Contiene la "antigua especificación CSS"
(que se ha dividido en piezas más pequeñas). Además, se agregan nuevos
módulos.

Algunos de los módulos CSS3 más importantes son:

 Selectores
 Modelo de caja
 Fondos y fronteras
 Valores de imagen y contenido reemplazado
 Efectos de texto
 Transformaciones 2D / 3D
 Animaciones
 Múltiples Columnas
 Interfaz de usuario

La mayoría de las nuevas propiedades CSS3 se implementan en los

navegadores modernos.

CSS3 Esquinas redondeadas

Propiedad CSS3 border-radius
Con CSS3, puede dar cualquier elemento "esquinas redondeadas",
mediante el uso de la border-radius propiedad.

Aquí hay tres ejemplos:

1. Esquinas redondeadas para un elemento con un color de fondo

especificado:
Aquí está el código:

Ejemplo
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
 width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners1 {

border-radius: 25px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

#rcorners2 {

border-radius: 25px;

border: 2px solid #73AD21;

padding: 20px;

width: 200px;

height: 150px;
}

#rcorners3 {

border-radius: 25px;

background: url(paper.gif);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

</style>

</head>

<body>

<p>The border-radius property allows you to add rounded corners to elements.</p>

<p>Rounded corners for an element with a specified background color:</p>

<p id="rcorners1">Rounded corners!</p>

<p>Rounded corners for an element with a border:</p>

<p id="rcorners2">Rounded corners!</p>

<p>Rounded corners for an element with a background image:</p>

<p id="rcorners3">Rounded corners!</p>

</body>

</html>
Consejo: La border-radius propiedad es en realidad una propiedad
resumida de los border-top-left-radius, border-top-right-
radius, border-bottom-right-radius y border-bottom-left-radius
propiedades.

CSS3 border-radius - Especifique cada

esquina
Si especifica sólo un valor para la border-radiuspropiedad, este radio se
aplicará a las 4 esquinas.

Sin embargo, puede especificar cada esquina por separado si lo desea. Aquí
están las reglas:

 Cuatro valores: el primer valor se aplica a la parte superior

izquierda, el segundo se aplica a la parte superior derecha, el tercer
valor se aplica a la parte inferior derecha y el cuarto se aplica a la
esquina inferior izquierda
 Tres valores: el primer valor se aplica a la parte superior izquierda,
el segundo se aplica a la parte superior derecha e inferior izquierda y
el tercer valor se aplica a la parte inferior derecha
 Dos valores: el primer valor se aplica a la esquina superior
izquierda ya la esquina inferior derecha, y el segundo se aplica a la
esquina superior derecha ya la esquina inferior izquierda
 Un valor: las cuatro esquinas están redondeadas igualmente

Aquí hay tres ejemplos:

1. Cuatro valores - radio de borde: 15px 50px 30px 5px:

Aquí está el código:

Ejemplo
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners4 {

border-radius: 15px 50px 30px 5px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

#rcorners5 {

border-radius: 15px 50px 30px;

background: #73AD21;

padding: 20px;
width: 200px;

height: 150px;

#rcorners6 {

border-radius: 15px 50px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

</style>

</head>

<body>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>

<p id="rcorners4"></p>

<p>Three values - border-radius: 15px 50px 30px:</p>

<p id="rcorners5"></p>

<p>Two values - border-radius: 15px 50px:</p>

<p id="rcorners6"></p>

</body>

</html>
También podría crear esquinas elípticas:

Ejemplo
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners7 {

border-radius: 50px/15px;

background: #73AD21;

padding: 20px;
width: 200px;

height: 150px;

#rcorners8 {

border-radius: 15px/50px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

#rcorners9 {

border-radius: 50%;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

</style>

</head>

<body>

<p>Elliptical border - border-radius: 50px/15px:</p>

<p id="rcorners7"></p>
<p>Elliptical border - border-radius: 15px/50px:</p>

<p id="rcorners8"></p>

<p>Ellipse border - border-radius: 50%:</p>

<p id="rcorners9"></p>

</body>

</html>

CSS3 Rounded Corners Propiedades

Property Description

border-radius A shorthand property for setting all the four

border-*-*-radius properties

border-top-left-radius Defines the shape of the border of the top-left

corner

border-top-right-radius Defines the shape of the border of the top-right

corner

border-bottom-right-radius Defines the shape of the border of the bottom-

right corner

border-bottom-left-radius Defines the shape of the border of the bottom-

left corner
CSS3 Border Imágenes

CSS3 border-image Propiedad

La border-image propiedad CSS3 le permite especificar una imagen que se
usará en lugar del borde normal alrededor de un elemento.

La propiedad tiene tres partes:

1. La imagen a utilizar como borde

2. Donde cortar la imagen
3. Defina si las secciones intermedias deben repetirse o estirarse

Usaremos la siguiente imagen (llamada "border.png"):

La border-image propiedad toma la imagen y la corta en nueve secciones,

como una tabla tic-tac-toe. A continuación, coloca las esquinas en las
esquinas, y las secciones del medio se repiten o se estira como se
especifica.

Nota: Para border-image que funcione, el elemento también necesita el

border conjunto de propiedades!
Aquí, las secciones centrales de la imagen se repiten para crear el borde:

Aquí está el código:

Ejemplo
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */

border-image: url(border.png) 30 round;

</style>

</head>

<body>
<p>The border-image property specifies an image to be used as the border around an
element:</p>

<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>

<p>Here is the original image:</p><img src="border.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-
image property.</p>

</body>

</html>

Aquí, las secciones intermedias de la imagen se estiran para crear el borde:

Aquí está el código:

Ejemplo
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg {
border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */

border-image: url(border.png) 30 stretch;

</style>

</head>

<body>

<p>The border-image property specifies an image to be used as the border around an

element:</p>

<p id="borderimg">Here, the middle sections of the image are stretched to create the border.</p>

<p>Here is the original image:</p><img src="border.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-
image property.</p>

</body>

</html>

Consejo: La border-image propiedad es en realidad una propiedad

resumida de los border-image-source, border-image-slice, border-
image-width, border-image-outset y border-image-repeat propiedades.

CSS3 border-image - Diferentes Valores de

Slice
Diferentes valores de corte cambian completamente el aspecto del borde:
Ejemplo
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
border-image: url(border.png) 30% round;
}
<!DOCTYPE html>

<html>

<head>

<style>

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */

border-image: url(border.png) 50 round;

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */

border-image: url(border.png) 20% round;

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */

border-image: url(border.png) 30% round;

</style>

</head>

<body>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p id="borderimg2">border-image: url(border.png) 20% round;</p>

<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-
image property.</p>

</body>

</html>

Propiedades de borde CSS3

Property Description

border-image A shorthand property for setting all the border-image-

* properties

border-image-source Specifies the path to the image to be used as a

border
border-image-slice Specifies how to slice the border image

border-image-width Specifies the widths of the border image

border-image-outset Specifies the amount by which the border image area

extends beyond the border box

border-image-repeat Specifies whether the border image should be

repeated, rounded or stretched

Fondos de CSS3
CSS3 fondos múltiples
CSS3 le permite agregar varias imágenes de fondo para un elemento, a
través de la background-image propiedad.

Las diferentes imágenes de fondo están separadas por comas, y las

imágenes se apilan una encima de la otra, donde la primera imagen está
más cerca del visor.

El siguiente ejemplo tiene dos imágenes de fondo, la primera imagen es

una flor (alineada a la parte inferior y derecha) y la segunda imagen es un
fondo de papel (alineado a la esquina superior izquierda):

Ejemplo
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

padding: 15px;

</style>

</head>
<body>

<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

Se pueden especificar varias imágenes de fondo utilizando las propiedades

individuales de fondo (como anteriormente) o la background propiedad
abreviada.

El ejemplo siguiente utiliza la background propiedad abreviada (el mismo

resultado que el ejemplo anterior):

Ejemplo
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif)
left top repeat;
}

<!DOCTYPE html>

<html>

<head>

<style>
#example1 {

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

padding: 15px;

</style>

</head>

<body>

<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

CSS3 Tamaño de fondo

La background-size propiedad CSS3 le permite especificar el tamaño de
las imágenes de fondo.

Antes de CSS3, el tamaño de una imagen de fondo era el tamaño real de la

imagen. CSS3 nos permite reutilizar imágenes de fondo en diferentes
contextos.

El tamaño se puede especificar en longitudes, porcentajes o utilizando una

de las dos palabras clave: contener o cubrir.
El ejemplo siguiente cambia el tamaño de una imagen de fondo a mucho
más pequeña que la imagen original (utilizando píxeles):

Imagen de fondo original:

Aquí está el código:

Ejemplo
#div1 {
background: url(img_flower.jpg);
 background-size: 100px 80px;
background-repeat: no-repeat;
}

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

border: 1px solid black;

background:url(img_flwr.gif);

background-repeat: no-repeat;

padding:15px;

#example2 {

border: 1px solid black;

background:url(img_flwr.gif);

background-size: 100px 80px;

background-repeat: no-repeat;

padding:15px;

</style>

</head>

<body>

<p>Original background-image:</p>
<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

<p>Resized background-image:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

Los otros dos posibles valores de background-size son contain y cover.

La contain palabra clave escala la imagen de fondo para que sea lo más
grande posible (pero tanto su ancho como su altura deben ajustarse dentro
del área de contenido). Como tal, dependiendo de las proporciones de la
imagen de fondo y del área de posicionamiento de fondo, pueden existir
algunas áreas del fondo que no están cubiertas por la imagen de fondo.

La cover palabra clave escalona la imagen de fondo para que el área de

contenido esté completamente cubierta por la imagen de fondo (tanto su
ancho como su altura son iguales o superan el área de contenido). Como
tal, algunas partes de la imagen de fondo pueden no ser visibles en el área
de posicionamiento de fondo.

El siguiente ejemplo ilustra el uso de contain y cover:

Ejemplo
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

border: 1px solid black;

height:150px;

width:180px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

.div2 {

border: 1px solid black;

height:150px;

width:180px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

background-size: contain;

.div3 {

border: 1px solid black;

height:150px;

width:180px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

background-size: cover;

</style>

</head>

<body>

<p>Original image:</p>

<div class="div1">

<p>Lorem ipsum dolor sit amet.</p>

</div>

<p>Using the "contain" keyword:</p>

<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>

</div>

<p>Using the "cover" keyword:</p>

<div class="div3">

<p>Lorem ipsum dolor sit amet.</p>

</div>

</body>

</html>

Definir tamaños de múltiples imágenes de

fondo
La background-size propiedad también acepta varios valores para el
tamaño de fondo (utilizando una lista separada por comas), al trabajar con
varios fondos.

El siguiente ejemplo tiene tres imágenes de fondo especificadas, con

diferentes valores de tamaño de fondo para cada imagen:

Ejemplo
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif)
right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}

<!DOCTYPE html>

<html>

<head>
<style>

#example1 {

background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat,

url(paper.gif) left top repeat;

padding: 15px;

background-size: 50px, 130px, auto;

</style>

</head>

<body>

<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

Imagen de fondo de tamaño completo

Ahora queremos tener una imagen de fondo en un sitio web que cubre toda
la ventana del navegador en todo momento.

Los requisitos son los siguientes:

 Llena toda la página con la imagen (sin espacio en blanco)

  Escala la imagen según sea necesario
 Centrar la imagen en la página
 No provocar barras de desplazamiento

El siguiente ejemplo muestra cómo hacerlo; Utilice el elemento html (el

elemento html siempre tiene al menos la altura de la ventana del
navegador). A continuación, establecer un fondo fijo y centrado en él. A
continuación, ajuste su tamaño con la propiedad background-size:

Ejemplo
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}

<!DOCTYPE html>

<html>

<head>

<style>

html {

background: url(img_flower.jpg) no-repeat center fixed;

background-size: cover;

body {

color: white;

</style>

</head>

<body>
<h1>Full Page Background Image</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>

Propiedad de fondo de origen CSS3

La background-origin propiedad CSS3 especifica dónde se coloca la
imagen de fondo.

La propiedad toma tres valores diferentes:

 Border-box - la imagen de fondo comienza desde la esquina superior

izquierda del borde
 Padding-box - (predeterminado) la imagen de fondo comienza desde
la esquina superior izquierda del borde de relleno
 Content-box: la imagen de fondo empieza en la esquina superior
izquierda del contenido

El siguiente ejemplo ilustra la background-origin propiedad:

Ejemplo
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}

<!DOCTYPE html>
<html>

<head>

<style>

#example1 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

#example2 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: border-box;

#example3 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: content-box;

</style>
</head>

<body>

<p>No background-origin (padding-box is default):</p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

<p>background-origin: border-box:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</div>

<p>background-origin: content-box:</p>

<div id="example3">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>

</body>

</html>ç

CSS3 background-clip Propiedad

La background-clip propiedad CSS3 especifica el área de pintura del
fondo.

La propiedad toma tres valores diferentes:

 Border-box - (predeterminado) el fondo se pinta al borde exterior del

borde
 Padding-box - el fondo se pinta al borde exterior del relleno
 Content-box - el fondo se pinta dentro del cuadro de contenido

El siguiente ejemplo ilustra la background-clip propiedad:

Ejemplo
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

border: 10px dotted black;

padding:35px;

background: yellow;

#example2 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: padding-box;

#example3 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: content-box;

</style>

</head>

<body>

<p>No background-clip (border-box is default):</p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<p>background-clip: content-box:</p>

<div id="example3">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

</body>

</html>

Propiedades del fondo de CSS3

Property Description

background A shorthand property for setting all the background

properties in one declaration
background-clip Specifies the painting area of the background

background-image Specifies one or more background images for an

element

background-origin Specifies where the background image(s) is/are

positioned

background-size Specifies the size of the background image(s)

CSS3 Colores
CSS3 Colores
CSS admite nombres de color, hexadecimal y colores RGB.

Además, CSS3 también introduce:

 Colores RGBA
 Colores HSL
 Colores HSLA
 opacidad

Colores RGBA
Los valores de color RGBA son una extensión de valores de color RGB con
un canal alfa, que especifica la opacidad de un color.
Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa). El
parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0
(completamente opaco).

El siguiente ejemplo define diferentes colores RGBA:

Ejemplo
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:rgba(255,0,0,0.3);}

#p2 {background-color:rgba(0,255,0,0.3);}

#p3 {background-color:rgba(0,0,255,0.3);}

#p4 {background-color:rgba(192,192,192,0.3);}

#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}

</style>

</head>

<body>

<p>RGBA colors:</p>

<p id="p1">Red</p>

<p id="p2">Green</p>

<p id="p3">Blue</p>

<p id="p4">Grey</p>

<p id="p5">Yellow</p>

<p id="p6">Cerise</p>

</body>

</html>

Colores HSL
HSL significa tono, saturación y ligereza.

Un valor de color HSL se especifica con: hsl (matiz, saturación, ligereza).

1. Hue es un grado en la rueda de color (de 0 a 360):

o 0 (o 360) es rojo
o 120 es verde
o 240 es azul
2. La saturación es un valor porcentual: 100% es el color completo.
3. La ligereza es también un porcentaje; 0% es oscuro (negro) y 100%
es blanco.
Ejemplo
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:hsl(120,100%,50%);}

#p2 {background-color:hsl(120,100%,75%);}

#p3 {background-color:hsl(120,100%,25%);}

#p4 {background-color:hsl(120,60%,70%);}

#p5 {background-color:hsl(290,100%,50%);}

#p6 {background-color:hsl(290,60%,70%);}

</style>

</head>

<body>
<p>HSL colors:</p>

<p id="p1">Green</p>

<p id="p2">Light green</p>

<p id="p3">Dark green</p>

<p id="p4">Pastel green</p>

<p id="p5">Violet</p>

<p id="p6">Pastel violet</p>

</body>

</html>

Colores HSLA
Los valores de color HSLA son una extensión de los valores de color HSL
con un canal alfa - que especifica la opacidad de un color.

Un valor de color HSLA se especifica con: hsla (tonalidad, saturación,

luminosidad, alfa), donde el parámetro alfa define la opacidad. El
parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0
(completamente opaco).
Ejemplo
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity
*/
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with
opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with
opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with
opacity */

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:hsla(120,100%,50%,0.3);}

#p2 {background-color:hsla(120,100%,75%,0.3);}

#p3 {background-color:hsla(120,100%,25%,0.3);}

#p4 {background-color:hsla(120,60%,70%,0.3);}

#p5 {background-color:hsla(290,100%,50%,0.3);}

#p6 {background-color:hsla(290,60%,70%,0.3);}

</style>

</head>

<body>

<p>HSLA colors:</p>

<p id="p1">Green</p>

<p id="p2">Light green</p>

<p id="p3">Dark green</p>

<p id="p4">Pastel green</p>

<p id="p5">Violet</p>

<p id="p6">Pastel violet</p>

</body>

</html>

Opacidad
La opacity propiedad CSS3 establece la opacidad de todo el elemento
(tanto el color de fondo como el texto serán opacos / transparentes).

El opacity valor de la propiedad debe ser un número entre 0.0

(totalmente transparente) y 1.0 (completamente opaco).

Observe que el texto de arriba también será transparente / opaco!

El siguiente ejemplo muestra diferentes elementos con opacidad:

Ejemplo
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity
*/
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */
<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:rgb(255,0,0);opacity:0.6;}

#p2 {background-color:rgb(0,255,0);opacity:0.6;}

#p3 {background-color:rgb(0,0,255);opacity:0.6;}

#p4 {background-color:rgb(192,192,192);opacity:0.6;}

#p5 {background-color:rgb(255,255,0);opacity:0.6;}

#p6 {background-color:rgb(255,0,255);opacity:0.6;}

</style>

</head>

<body>

<p>Elements with opacity:</p>

<p id="p1">Red</p>

<p id="p2">Green</p>

<p id="p3">Blue</p>

<p id="p4">Grey</p>

<p id="p5">Yellow</p>

<p id="p6">Cerise</p>

</body>

</html>
CSS3 Gradientes

Los gradientes CSS3 permiten mostrar transiciones suaves entre dos o más
colores especificados.

Anteriormente, había que usar imágenes para estos efectos. Sin embargo,
mediante el uso de gradientes CSS3 puede reducir el tiempo de descarga y
el uso de ancho de banda. Además, los elementos con degradados se ven
mejor cuando se amplían, ya que el degradado es generado por el
navegador.

CSS3 define dos tipos de gradientes:

 Gradientes lineales (baja / arriba / izquierda / derecha /

diagonal)
 Gradientes radiales (definidos por su centro)

Gradientes lineales CSS3

Para crear un gradiente lineal debe definir al menos dos paradas de
color. Paradas de color son los colores que desea hacer transiciones suaves
entre. También puede establecer un punto de inicio y una dirección (o un
ángulo) junto con el efecto de degradado.
Sintaxis
background: linear-gradient(direction, color-stop1, color-stop2, ...);

Gradiente lineal: de arriba a abajo (esto es predeterminado)

El ejemplo siguiente muestra un gradiente lineal que comienza en la parte

superior. Comienza en rojo, pasando a amarillo:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1
to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to
12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to
15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, yellow); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Linear Gradient - Top to Bottom</h3>

<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Gradiente lineal - De izquierda a derecha

El siguiente ejemplo muestra un gradiente lineal que comienza desde la

izquierda.Comienza en rojo, pasando a amarillo:
Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , yellow); /* For Safari
5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1
to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox
3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax
*/
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */

</style>

</head>

<body>
<h3>Linear Gradient - Left to Right</h3>

<p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Gradiente lineal - Diagonal

Puede realizar un gradiente diagonalmente especificando las posiciones de

inicio tanto horizontal como vertical.

El siguiente ejemplo muestra un gradiente lineal que comienza en la parte

superior izquierda (y va a la parte inferior derecha). Comienza en rojo,
pasando a amarillo:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, yellow);/* For
Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow);/* For Opera
11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, yellow);/* For
Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, yellow);/* Standard
syntax */
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Linear Gradient - Diagonal</h3>

<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Uso de ángulos
Si desea más control sobre la dirección del gradiente, puede definir un
ángulo, en lugar de las direcciones predefinidas (abajo, arriba, derecha,
izquierda, abajo a la derecha, etc.).

Sintaxis
background: linear-gradient(angle, color-stop1, color-stop2);

El ángulo se especifica como un ángulo entre una línea horizontal y la línea

de gradiente.

El siguiente ejemplo muestra cómo usar ángulos en gradientes lineales:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari
5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1
to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox
3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}

<!DOCTYPE html>
<html>

<head>

<style>

#grad1 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */

#grad2 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(90deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */

#grad3 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(180deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(180deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(180deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(180deg, red, yellow); /* Standard syntax (must be last) */

#grad4 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Linear Gradients - Using Different Angles</h3>

<div id="grad1" style="color:white;text-align:center;">0deg</div><br>

<div id="grad2" style="color:white;text-align:center;">90deg</div><br>

<div id="grad3" style="color:white;text-align:center;">180deg</div><br>

<div id="grad4" style="color:white;text-align:center;">-90deg</div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>
Uso de múltiples paradas de color
El siguiente ejemplo muestra un gradiente lineal (de arriba a abajo) con
múltiples paradas de color:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari
5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1
to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox
3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */

#grad2 {

height: 200px;

background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari
5.1 to 6.0 */

background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1
to 12.0 */

background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox
3.6 to 15 */

background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax
(must be last) */

#grad3 {

height: 200px;

background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */

background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>3 Color Stops (evenly spaced)</h3>

<div id="grad1"></div>

<h3>7 Color Stops (evenly spaced)</h3>

<div id="grad2"></div>

<h3>3 Color Stops (not evenly spaced)</h3>

<div id="grad3"></div>

<p><strong>Note:</strong> Color stops are automatically spaced evenly when no percents are
specified.</p>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

El siguiente ejemplo muestra cómo crear un gradiente lineal (de izquierda a

derecha) con el color del arco iris y algún texto:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
 background: -o-linear-
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 55px;

background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For
Safari 5.1 to 6.0 */

background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera
11.1 to 12.0 */

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx
3.6 to 15 */

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard
syntax (must be last) */

</style>

</head>

<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-

weight:bold">

Gradient Background
</div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Uso de la transparencia
Los gradientes CSS3 también admiten la transparencia, que puede
utilizarse para crear efectos de atenuación.

Para añadir transparencia, utilizamos la función rgba () para definir las

paradas de color. El último parámetro de la función rgba () puede ser un
valor de 0 a 1, y define la transparencia del color: 0 indica transparencia
total, 1 indica color (sin transparencia).

El siguiente ejemplo muestra un gradiente lineal que comienza desde la

izquierda. Se inicia totalmente transparente, la transición a todo color rojo:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-
gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-
gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-
gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to

6.0 */

background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0

*/

background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to

15 */

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must

be last) */

</style>

</head>

<body>

<h3>Linear Gradient - Transparency</h3>

<p>To add transparency, we use the rgba() function to define the color stops. The last parameter
in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0
indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Repitiendo un gradiente lineal

La función repeating-linear-gradient () se utiliza para repetir gradientes
lineales:

Ejemplo

Un gradiente lineal de repetición:

#grad {
background: red; /* For browsers that do not support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green
20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

<!DOCTYPE html>
<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari 5.1 to

6.0 */

background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0
*/

background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15

*/

background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be

last) */

#grad2 {

height: 200px;

background: -webkit-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* For Safari 5.1

to 6.0 */

background: -o-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* For Opera 11.1 to

12.0 */

background: -moz-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* For Firefox 3.6 to

15 */

background: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* Standard syntax (must

be last) */

#grad3 {

height: 200px;
background: -webkit-repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* For Safari 5.1
to 6.0 */

background: -o-repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* For Opera 11.1 to

12.0 */

background: -moz-repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* For Firefox 3.6

to 15 */

background: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Standard syntax

(must be last) */

#grad4 {

height: 200px;

background: -webkit-repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* For Safari 5.1

to 6.0 */

background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* For Firefox 3.6 to

15 */

background: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* Standard syntax (must

be last) */

</style>

</head>

<body>

<h3>Repeating Linear Gradient</h3>

<div id="grad1"></div>
<p>A repeating gradient on 45deg axe starting red and finishing green:</p>

<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>

<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>

<div id="grad4"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Gradientes radiales CSS3

Un gradiente radial se define por su centro.

Para crear un gradiente radial también debe definir al menos dos paradas
de color.

Sintaxis
background: radial-gradient(shape size at position, start-color, ...,
last-color);

De forma predeterminada, la forma es elipse, el tamaño es la esquina más

lejana y la posición es el centro.

Gradiente Radial - Paradas de color uniformemente espaciadas

(esto es predeterminado)
El siguiente ejemplo muestra un gradiente radial con paradas de color
uniformemente espaciadas:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1
to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6
to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox
3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */

background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Radial Gradient - Evenly Spaced Color Stops</h3>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Gradiente Radial - Paradas de Color con Espacios Diferenciados

El siguiente ejemplo muestra un gradiente radial con paradas de color

separadas de forma diferente:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For
Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For
Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow 15%, green 60%);/* Standard
syntax */
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */

background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6 to 15 */

background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax (must be last) */

</style>

</head>

<body>

<h3>Radial Gradient - Differently Spaced Color Stops</h3>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Establecer la forma
El parámetro de forma define la forma. Puede tomar el valor círculo o
elipse. El valor predeterminado es elipse.

El siguiente ejemplo muestra un gradiente radial con la forma de un

círculo:

Ejemplo
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green);/* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /*
Firefox 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard
syntax */
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */

background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */

background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */

#grad2 {

height: 150px;

width: 200px;

background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */

background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */

background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */

background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */

</style>

</head>

<body>
<h3>Radial Gradient - Shapes</h3>

<p><strong>Ellipse (this is default):</strong></p>

<div id="grad1"></div>

<p><strong>Circle:</strong></p>

<div id="grad2"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Uso de diferentes tamaños de palabras

clave
El parámetro size define el tamaño del degradado. Puede tomar cuatro
valores:

 Lado más cercano

 El lado más lejano
 Esquina más cercana
 Esquina más alejada

Ejemplo
Un gradiente radial con diferentes palabras clave de tamaño:

#grad1 {
background: red; /* For browsers that do not support gradients */
 /* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow,
black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow,
black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side, red, yellow,
black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}

#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side, red,
yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow,
black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow,
black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60% 55%, red, yellow,
black);
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 150px;
background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black); /* Safari 5.1 to 6.0
*/

background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black); /* For Opera 11.6 to
12.0 */

background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black); /* For Firefox 3.6 to
15 */

background: radial-gradient(closest-side at 60% 55%, red, yellow, black); /* Standard syntax (must
be last) */

#grad2 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1 to 6.0
*/

background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* For Opera 11.6 to
12.0 */

background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* For Firefox 3.6 to
15 */

background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Standard syntax

(must be last) */

#grad3 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, closest-corner, red, yellow, black); /* Safari 5.1 to

6.0 */
background: -o-radial-gradient(60% 55%, closest-corner, red, yellow, black); /* For Opera 11.6 to
12.0 */

background: -moz-radial-gradient(60% 55%, closest-corner, red, yellow, black); /* For Firefox 3.6
to 15 */

background: radial-gradient(closest-corner at 60% 55%, red, yellow, black); /* Standard syntax

(must be last) */

#grad4 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, farthest-corner, red, yellow, black); /* Safari 5.1 to

6.0 */

background: -o-radial-gradient(60% 55%, farthest-corner, red, yellow, black); /* For Opera 11.6 to
12.0 */

background: -moz-radial-gradient(60% 55%, farthest-corner, red, yellow, black); /* For Firefox 3.6
to 15 */

background: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); /* Standard syntax

(must be last) */

</style>

</head>

<body>

<h3>Radial Gradients - Use of different size keywords</h3>

<p><strong>closest-side:</strong></p>

<div id="grad1"></div>
<p><strong>farthest-side:</strong></p>

<div id="grad2"></div>

<p><strong>closest-corner:</strong></p>

<div id="grad3"></div>

<p><strong>farthest-corner (this is default):</strong></p>

<div id="grad4"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Repitiendo un gradiente radial

La función repeating-radial gradient () se utiliza para repetir gradientes
radiales:

Ejemplo

Un gradiente radial repetitivo:

#grad {
background: red; /* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green
15%);
/* For Opera 11.6 to 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox 3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to

6.0 */

background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0
*/

background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15

*/

background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be

last) */

</style>

</head>

<body>
<h3>Repeating Radial Gradient</h3>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Efectos de sombra CSS3

Efectos de sombra CSS3

Con CSS3 puede agregar sombra al texto ya los elementos.

En este capítulo aprenderá sobre las siguientes propiedades:

 text-shadow
 box-shadow
Sombra de texto CSS3
La text-shadow propiedad CSS3 aplica sombra al texto.

En su uso más simple, sólo se especifica la sombra horizontal (2px) y la

sombra vertical (2px):

Ejemplo
h1 {
text-shadow: 2px 2px;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>
</body>

</html>

A continuación, agregue un color a la sombra:

Ejemplo
h1 {
text-shadow: 2px 2px red;
}

A continuación, agregue un efecto de desenfoque a la sombra:

Ejemplo
h1 {
text-shadow: 2px 2px 5px red;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px 5px red;

</style>

</head>

<body>
<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>

</body>

</html>

El siguiente ejemplo muestra un texto en blanco con sombra negra:

Ejemplo
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: white;

text-shadow: 2px 2px 4px #000000;

</style>

</head>

<body>
<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>

</body>

</html>

El siguiente ejemplo muestra una sombra de neón roja:

Ejemplo
h1 {
text-shadow: 0 0 3px #FF0000;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 0 0 3px #FF0000;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>

</body>

</html>

Sombras múltiples
Para agregar más de una sombra al texto, puede agregar una lista de
sombras separada por comas.

El siguiente ejemplo muestra una sombra de neón rojo y azul:

Ejemplo
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

</style>

</head>

<body>
<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>

</body>

</html>

El siguiente ejemplo muestra un texto en blanco con negro, azul y sombra

azul oscuro:

Ejemplo
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

</style>

</head>

<body>
<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow
property.</p>

</body>

</html>

También puede utilizar la propiedad text-shadow para crear un borde

simple alrededor de un texto (sin sombras):

Ejemplo
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

CSS3 box-shadow Propiedad

La box-shadow propiedad CSS3 aplica sombra a los elementos.

En su uso más simple, sólo se especifica la sombra horizontal y la sombra

vertical:
Ejemplo
div {
box-shadow: 10px 10px;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px;

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>

</html>

A continuación, agregue un color a la sombra:

Ejemplo
div {
box-shadow: 10px 10px grey;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px grey;

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

A continuación, agregue un efecto de desenfoque a la sombra:

Ejemplo
div {
box-shadow: 10px 10px 5px grey;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px 5px grey;

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div>

</body>

</html>

También puede agregar sombras a los pseudo-elementos :: before y ::

after, para crear un efecto interesante:

Ejemplo
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}

#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}

#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}

<!DOCTYPE html>

<html>

<head>

<style>
#boxshadow {

position: relative;

-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);

-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

padding: 10px;

background: white;

/* Make the image fit the box */

#boxshadow img {

width: 100%;

border: 1px solid #8a4419;

border-style: inset;

#boxshadow::after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

width: 70%;

left: 15%; /* one half of the remaining 30% */

height: 100px;
bottom: 0;

</style>

</head>

<body>

<div id="boxshadow">

<img src="rock600x400.jpg" alt="Norway" width="600" height="400">

</div>

</body>

</html>

Divertido Tarjetas
Un ejemplo de uso de la box-shadow propiedad para crear tarjetas
similares a papel:
Ejemplo
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,
0, 0.19);
text-align: center;
}

<!DOCTYPE html>

<html>

<head>

<style>

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

div.header {

background-color: #4CAF50;

color: white;

padding: 10px;

font-size: 40px;

div.container {

padding: 10px;

}
</style>

</head>

<body>

<h2>Cards</h2>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="card">

<div class="header">

<h1>1</h1>

</div>

<div class="container">

<p>January 1, 2016</p>

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.polaroid {

width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

div.container {

padding: 10px;

</style>

</head>

<body>

<h2>Polaroid Images / Cards</h2>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="polaroid">

<img src="rock600x400.jpg" alt="Norway" style="width:100%">

<div class="container">

<p>Hardanger, Norway</p>

</div>

</div>

</body>

</html>
Propiedades de sombra de CSS3
En la tabla siguiente se enumeran las propiedades de sombra de CSS3:

Property Description

box-shadow Adds one or more shadows to an element

text-shadow Adds one or more shadows to a text

Texto CSS3
CSS3 contiene varias nuevas características de texto.

En este capítulo aprenderá sobre las siguientes propiedades de texto:

 text-overflow
 word-wrap
 word-break

Desbordamiento de texto CSS3

La text-overflow propiedad CSS3 especifica cómo el contenido
desbordado que no se muestra debe ser señalado al usuario.

Se puede recortar:
Ejemplo
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

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

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;
text-overflow: clip;

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

</style>

</head>

<body>

<p>The following two paragraphs contains a long text that will not fit in the box.</p>

<p>text-overflow: clip:</p>

<p class="test1">This is some long text that will not fit in the box</p>

<p>text-overflow: ellipsis:</p>

<p class="test2">This is some long text that will not fit in the box</p>

</body>

</html>

El ejemplo siguiente muestra cómo puede mostrar el contenido desbordado

al pasar el cursor sobre el elemento:
Ejemplo
div.test:hover {
text-overflow: inherit;
overflow: visible;
}

<html>

<head>

<style>

div.test {

white-space: nowrap;

width: 200px;

overflow: hidden;

border: 1px solid #000000;

div.test:hover {

text-overflow: inherit;

overflow: visible;

</style>

</head>

<body>

<p>Hover over the two divs below, to see the entire text.</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the
box</div>

<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>

</html>

CSS3 Word Wrapping

La word-wrap propiedad CSS3 permite que las palabras largas puedan
romperse y envolverse en la siguiente línea.

Si una palabra es demasiado larga para encajar dentro de un área, se

expande fuera:

Este párrafo contiene una palabra muy larga:

thisisaveryveryveryveryveryveryverylongword.La palabra larga se rompe y
se envuelve en la siguiente línea.

La propiedad de ajuste de palabra le permite forzar el texto a envolver,

incluso si significa dividirlo en medio de una palabra:

Este párrafo contiene una palabra muy larga:

thisisaveryveryveryveryveryveryverylongword. La palabra larga se rompe y
se envuelve en la siguiente línea.

El código CSS es el siguiente:

Ejemplo
Permita que las palabras largas puedan romperse y encajar en la siguiente
línea:

p {
word-wrap: break-word;
}

<!DOCTYPE html>

<html>
<head>

<style>

p.test {

width: 11em;

border: 1px solid #000000;

word-wrap: break-word;

</style>

</head>

<body>

<p class="test">This paragraph contains a very long word:

thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>

</html>

Rompimiento de palabras CSS3

La word-break propiedad CSS3 especifica reglas de interrupción de línea.

Este párrafo contiene algún texto. Esta línea será-romper-en-guiones.

Este párrafo contiene algún texto. Las líneas se romperán en cualquier

carácter.

El código CSS es el siguiente:

Ejemplo
p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

width: 140px;

border: 1px solid #000000;

word-break: keep-all;

p.test2 {

width: 140px;

border: 1px solid #000000;

word-break: break-all;

</style>

</head>

<body>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

<p><b>Note:</b> The word-break property is not supported in Opera 12 and earlier versions.</p>

</body>

</html>

Propiedades de texto CSS3

La siguiente tabla muestra las nuevas propiedades de texto CSS3:

Property Description

text-align-last Specifies how to align the last line of a text

text-justify Specifies how justified text should be aligned and

spaced

text-overflow Specifies how overflowed content that is not displayed

should be signaled to the user

word-break Specifies line breaking rules for non-CJK scripts

word-wrap Allows long words to be able to be broken and wrap
onto the next line

CSS3 Fuentes Web

CSS3 Web Fonts - La regla @ font-face

Las fuentes Web permiten a los diseñadores web utilizar fuentes que no
están instaladas en el equipo del usuario.

Cuando haya encontrado / comprado la fuente que desea utilizar, sólo

incluya el archivo de fuente en su servidor web, y se descargará
automáticamente al usuario cuando sea necesario.

Las fuentes "propias" se definen dentro de la @font-face regla CSS3.

Diferentes formatos de fuente

Fuentes TrueType (TTF)

TrueType es un estándar de fuente desarrollado a finales de los 80, por

Apple y Microsoft. TrueType es el formato de fuente más común para los
sistemas operativos Mac OS y Microsoft Windows.

Fuentes OpenType (OTF)

OpenType es un formato para fuentes de computadora escalables. Fue

construido en TrueType, y es una marca registrada de Microsoft. Las
fuentes OpenType se utilizan comúnmente hoy en las plataformas
principales de la computadora.
El formato de fuente abierta Web (WOFF)

WOFF es un formato de fuente para su uso en páginas web. Fue

desarrollado en 2009, y ahora es una Recomendación del W3C. WOFF es
esencialmente OpenType o TrueType con compresión y metadatos
adicionales. El objetivo es apoyar la distribución de fuentes desde un
servidor a un cliente a través de una red con restricciones de ancho de
banda.

El formato de fuente abierta Web (WOFF 2.0)

Fuente TrueType / OpenType que proporciona mejor compresión que WOFF

1.0.

Fuentes / formas SVG

Las fuentes SVG permiten que SVG se utilice como glifos al mostrar
texto. La especificación SVG 1.1 define un módulo de fuente que permite la
creación de fuentes dentro de un documento SVG. También puede aplicar
CSS a documentos SVG y la regla @ font-face puede aplicarse al texto en
documentos SVG.

Fuentes OpenType incrustadas (EOT)

Las fuentes EOT son una forma compacta de fuentes OpenType diseñadas
por Microsoft para su uso como fuentes incrustadas en páginas web.

Uso de la fuente que desea

En la @font-face regla CSS3 primero debe definir un nombre para la
fuente (por ejemplo, myFirstFont) y, a continuación, apunte al archivo de
fuente.

Sugerencia: Siempre use letras minúsculas para la URL de la fuente. Las

letras mayúsculas pueden dar resultados inesperados en IE.

Para utilizar la fuente de un elemento HTML, consulte el nombre de la

fuente (myFirstFont) a través de la font-family propiedad:
Ejemplo
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
font-family: myFirstFont;
}

<!DOCTYPE html>

<html>

<head>

<style>

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

div {

font-family: myFirstFont;

</style>

</head>

<body>

<div>

With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.

</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>

</html>

Uso de texto en negrita

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

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

<!DOCTYPE html>

<html>

<head>

<style>

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

@font-face {

font-family: myFirstFont;
src: url(sansation_bold.woff);

font-weight: bold;

div {

font-family: myFirstFont;

</style>

</head>

<body>

<div>

With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.

</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>

</html>

El archivo "sansation_bold.woff" es otro archivo de fuentes que contiene los

caracteres en negrita para la fuente Sansation.

Los navegadores utilizarán esto siempre que una parte de texto con la
familia de fuentes "myFirstFont" deba mostrarse en negrita.

De esta manera puede tener muchas @font-facereglas para la misma

fuente.
CSS3 Descriptor de fuente
En la tabla siguiente se enumeran todos los descriptores de fuente que se
pueden definir dentro de la @font-faceregla:

Descriptor Values Description

font-family name Required. Defines a name for the font

src URL Required. Defines the URL of the font file

font-stretch normal Optional. Defines how the font should be

condensed stretched. Default is "normal"
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

font-style normal Optional. Defines how the font should be

italic styled. Default is "normal"
oblique

font-weight normal Optional. Defines the boldness of the font.

bold Default is "normal"
100
 200
300
400
500
600
700
800
900

unicode-range unicode-range Optional. Defines the range of UNICODE

characters the font supports. Default is
"U+0-10FFFF"

CSS3 Transformaciones 2D
CSS3 transforma
Las transformaciones CSS3 le permiten traducir, rotar, escalar e inclinar
elementos.

Una transformación es un efecto que permite que un elemento cambie de

forma, tamaño y posición.

CSS3 soporta las transformaciones 2D y 3D.

Pase el mouse sobre los elementos de abajo para ver la diferencia entre
una transformación 2D y 3D:
CSS3 Transformaciones 2D
En este capítulo aprenderá sobre los siguientes métodos de transformación
2D:

 translate()
 rotate()
 scale()
 skewX()
 skewY()
 matrix()

Consejo: Aprenderá acerca de las transformaciones en 3D en el próximo

capítulo.

El método translate ()

El translate() método mueve un elemento desde su posición actual (de

acuerdo con los parámetros dados para el eje X y el eje Y).

El ejemplo siguiente mueve el elemento <div> 50 píxeles a la derecha y

100 píxeles desde su posición actual:

Ejemplo
div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari */

transform: translate(50px,100px); /* Standard syntax */

</style>

</head>

<body>

<div>

The translate() method moves an element from its current position. This div element is moved 50
pixels to the right, and 100 pixels down from its current position.

</div>

</body>

</html>
El método rotate ()

El rotate() método hace girar un elemento en sentido horario o

antihorario según un grado dado.

El ejemplo siguiente gira el elemento <div> en el sentido de las agujas del

reloj con 20 grados:

Ejemplo
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}
div#myDiv {

-ms-transform: rotate(20deg); /* IE 9 */

-webkit-transform: rotate(20deg); /* Safari */

transform: rotate(20deg); /* Standard syntax */

</style>

</head>

<body>

<div>

This a normal div element.

</div>

<div id="myDiv">

The rotate() method rotates an element clockwise or counter-clockwise. This div element is
rotated clockwise 20 degrees.

</div>

</body>

</html>

El uso de valores negativos girará el elemento en el sentido contrario a las

agujas del reloj.

El ejemplo siguiente gira el elemento <div> en el sentido contrario a las

agujas del reloj con 20 grados:

Ejemplo
div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-ms-transform: rotate(-20deg); /* IE 9 */

-webkit-transform: rotate(-20deg); /* Safari */

transform: rotate(-20deg); /* Standard syntax */

</style>

</head>

<body>

<div>

This a normal div element.

</div>

<div id="myDiv">

The rotate() method rotates an element clockwise or counter-clockwise. This div element is
rotated counter-clockwise with 20 degrees.

</div>

</body>

</html>

El método scale ()

El scale() método aumenta o disminuye el tamaño de un elemento

(según los parámetros dados para el ancho y la altura).

El ejemplo siguiente aumenta el elemento <div> para ser dos veces de su

anchura original y tres veces de su altura original:

Ejemplo
div {
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}
<!DOCTYPE html>
<html>

<head>

<style>

div {

margin: 150px;

width: 200px;

height: 100px;

background-color: yellow;

border: 1px solid black;

border: 1px solid black;

-ms-transform: scale(2,3); /* IE 9 */

-webkit-transform: scale(2,3); /* Safari */

transform: scale(2,3); /* Standard syntax */

</style>

</head>

<body>

<p>The scale() method increases or decreases the size of an element.</p>

<div>

This div element is two times of its original width, and three times of its original height.

</div>

</body>

</html>
El ejemplo siguiente reduce el elemento <div> a la mitad de su anchura y
altura originales:

Ejemplo
div {
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);
}
<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 150px;

width: 200px;

height: 100px;

background-color: yellow;

border: 1px solid black;

border: 1px solid black;

-ms-transform: scale(0.5,0.5); /* IE 9 */

-webkit-transform: scale(0.5,0.5); /* Safari */

transform: scale(0.5,0.5); /* Standard syntax */

</style>

</head>

<body>
<p>The scale() method increases or decreases the size of an element.</p>

<div>

This div element is decreased to be half of its original width and height.

</div>

</body>

</html>

El método skewX ()
El skewX() método inclina un elemento a lo largo del eje X por el ángulo
dado.

El siguiente ejemplo inclina el elemento <div> 20 grados a lo largo del eje

X:

Ejemplo
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;
background-color: yellow;

border: 1px solid black;

div#myDiv {

-ms-transform: skewX(20deg); /* IE 9 */

-webkit-transform: skewX(20deg); /* Safari */

transform: skewX(20deg); /* Standard syntax */

</style>

</head>

<body>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>

This a normal div element.

</div>

<div id="myDiv">

This div element is skewed 20 degrees along the X-axis.

</div>

</body>

</html>
El método skewY ()
El skewY() método inclina un elemento a lo largo del eje Y por el ángulo
dado.

El siguiente ejemplo inclina el elemento <div> 20 grados a lo largo del eje

Y:

Ejemplo
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-ms-transform: skewY(20deg); /* IE 9 */

-webkit-transform: skewY(20deg); /* Safari */

transform: skewY(20deg); /* Standard syntax */

}

</style>

</head>

<body>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>

This a normal div element.

</div>

<div id="myDiv">

This div element is skewed 20 degrees along the Y-axis.

</div>

</body>

</html>

El método sesgado ()
El skew() método inclina un elemento a lo largo del eje X y Y por los
ángulos dados.

El siguiente ejemplo distorsiona el elemento <div> 20 grados a lo largo del

eje X y 10 grados a lo largo del eje Y:

Ejemplo
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
 -webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-ms-transform: skew(20deg,10deg); /* IE 9 */

-webkit-transform: skew(20deg,10deg); /* Safari */

transform: skew(20deg,10deg); /* Standard syntax */

</style>

</head>

<body>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.

</div>

<div id="myDiv">

This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.

</div>

</body>

</html>

Si no se especifica el segundo parámetro, tiene un valor cero. Por lo tanto,

el siguiente ejemplo distorsiona el elemento <div> 20 grados a lo largo del
eje X:

Ejemplo
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-ms-transform: skew(20deg); /* IE 9 */

-webkit-transform: skew(20deg); /* Safari */

transform: skew(20deg); /* Standard syntax */

</style>

</head>

<body>

<p>The skew() method skews an element into a given angle.</p>

<div>

This a normal div element.

</div>

<div id="myDiv">

This div element is skewed 20 degrees along the X-axis.

</div>

</body>

</html>
El matrix() método combina todos los métodos de transformación 2D en
uno.

El método matrix () toma seis parámetros, que contienen funciones

matemáticas, lo que le permite girar, escalar, mover (traducir) y sesgar
elementos.

Los parámetros son los siguientes: matrix (scaleX (), skewY (), skewX (),
scaleY (), translateX (), translateY ())

Ejemplo
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;
border: 1px solid black;

div#myDiv1 {

-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */

-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */

transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */

div#myDiv2 {

-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */

-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */

transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */

</style>

</head>

<body>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>

This a normal div element.

</div>

<div id="myDiv1">

Using the matrix() method.

</div>

<div id="myDiv2">

Another use of the matrix() method.

</div>

</body>

</html>

Propiedades de transformación CSS3

La siguiente tabla muestra todas las propiedades de transformación 2D:

Property Description

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed

elements

Métodos de transformación 2D

Function Description

matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six

 values

translate(x,y) Defines a 2D translation, moving the element along

the X- and the Y-axis

translateX(n) Defines a 2D translation, moving the element along

the X-axis

translateY(n) Defines a 2D translation, moving the element along

the Y-axis

scale(x,y) Defines a 2D scale transformation, changing the

elements width and height

scaleX(n) Defines a 2D scale transformation, changing the

element's width

scaleY(n) Defines a 2D scale transformation, changing the

element's height

rotate(angle) Defines a 2D rotation, the angle is specified in the

parameter

skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and

 the Y-axis

skewX(angle) Defines a 2D skew transformation along the X-axis

skewY(angle) Defines a 2D skew transformation along the Y-axis

CSS3 Transformaciones 3D
CSS3 Transformaciones 3D
CSS3 le permite dar formato a sus elementos mediante transformaciones
en 3D.

Pase el mouse sobre los elementos de abajo para ver la diferencia entre
una transformación 2D y 3D:

CSS3 Transformaciones 3D
En este capítulo aprenderá sobre los siguientes métodos de transformación
3D:

 rotateX()
 rotateY()
 rotateZ()
El método rotateX ()

El rotateX() método rota un elemento alrededor de su eje X en un grado

dado:

Ejemplo
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-webkit-transform: rotateX(150deg); /* Safari */

transform: rotateX(150deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

This a normal div element.

</div>

<div id="myDiv">

The rotateX() method rotates an element around its X-axis at a given degree. This div element is
rotated 150 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX()
method.</p>

</body>

</html>

El método rotateY ()

El rotateY() método hace girar un elemento alrededor de su eje Y en un

grado dado:
Ejemplo
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-webkit-transform: rotateY(150deg); /* Safari */

transform: rotateY(150deg); /* Standard syntax */

</style>

</head>

<body>

<div>

This a normal div element.

</div>

<div id="myDiv">

The rotateY() method rotates an element around its Y-axis at a given degree. This div element is
rotated 150 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY()
method.</p>

</body>

</html>

El método rotateZ ()
El rotateZ() método hace girar un elemento alrededor de su eje Z en un
grado dado:

Ejemplo
div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;
height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-webkit-transform: rotateZ(90deg); /* Safari */

transform: rotateZ(90deg); /* Standard syntax */

</style>

</head>

<body>

<div>

This a normal div element.

</div>

<div id="myDiv">

The rotateZ() method rotates an element around its Z-axis at a given degree. This div element is
rotated 90 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ()
method.</p>

</body>
</html>

Propiedades de transformación CSS3

La siguiente tabla muestra todas las propiedades de transformación 3D:

Property Description

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed

elements

transform-style Specifies how nested elements are rendered in 3D space

perspective Specifies the perspective on how 3D elements are

viewed

perspective-origin Specifies the bottom position of 3D elements

backface-visibility Defines whether or not an element should be visible

when not facing the screen
Métodos de transformación 3D

Function

matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate3d(x,y,z)

translateX(x)

translateY(y)

translateZ(z)
scale3d(x,y,z)

scaleX(x)

scaleY(y)

scaleZ(z)

rotate3d(x,y,z,angle)

rotateX(angle)

rotateY(angle)
rotateZ(angle)

perspective(n

Transiciones CSS3
Transiciones CSS3
Las transiciones CSS3 le permiten cambiar los valores de propiedad sin
problemas (de un valor a otro), durante una duración determinada.

Ejemplo: Pase el mouse sobre el elemento de abajo para ver un efecto de

transición CSS3:

Cómo utilizar las transiciones CSS3?

Para crear un efecto de transición, debe especificar dos cosas:

 La propiedad CSS a la que desea agregar un efecto

 La duración del efecto
Nota: Si no se especifica la parte de duración, la transición no tendrá
ningún efecto, ya que el valor predeterminado es 0.

El siguiente ejemplo muestra un elemento 100px * 100px rojo <div>. El

elemento <div> también ha especificado un efecto de transición para la
propiedad width, con una duración de 2 segundos:

Ejemplo
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}

El efecto de transición se iniciará cuando la propiedad CSS especificada

(ancho) cambie el valor.

Ahora, vamos a especificar un nuevo valor para la propiedad width cuando

un usuario mouses sobre el elemento <div>:

Ejemplo
div:hover {
width: 300px;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;
height: 100px;

background: red;

-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s;

div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

Observe que cuando el cursor se mueve fuera del elemento, cambiará

gradualmente a su estilo original.
Cambiar varios valores de propiedad
El ejemplo siguiente agrega un efecto de transición para la propiedad width
y height, con una duración de 2 segundos para el ancho y 4 segundos para
la altura:

Ejemplo
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 4s;

div:hover {

width: 300px;

height: 300px;

}
</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

Especifique la curva de velocidad de la

transición
La transition-timing-function propiedad especifica la curva de
velocidad del efecto de transición.

La propiedad de la función de sincronización de transición puede tener los

siguientes valores:

 ease - especifica un efecto de transición con un arranque lento, luego

rápido, luego finaliza lentamente (esto es predeterminado)
 linear - especifica un efecto de transición con la misma velocidad de
principio a fin
 ease-in - especifica un efecto de transición con un inicio lento
 ease-out - especifica un efecto de transición con un final lento
 ease-in-out - especifica un efecto de transición con un inicio y fin
lentos
  cubic-bezier(n,n,n,n) - le permite definir sus propios valores en
una función cúbico-bezier

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad

que se pueden usar:

Ejemplo
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

<!DOCTYPEhtml>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

/* For Safari 3.1 to 6.0 */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div><br>

<div id="div2">ease</div><br>

<div id="div3">ease-in</div><br>

<div id="div4">ease-out</div><br>

<div id="div5">ease-in-out</div><br>

<p>Hover over the div elements above, to see the different speed curves.</p>
</body>

</html>

Retrasar el efecto de transición

La transition-delay propiedad especifica un retardo (en segundos) para
el efecto de transición.

El siguiente ejemplo tiene un retraso de 1 segundo antes de iniciar:

Ejemplo
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 3s; /* Safari */

-webkit-transition-delay: 1s; /* Safari */

transition: width 3s;

transition-delay: 1s;

}
div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>

</html>

Transición + Transformación
El ejemplo siguiente también añade una transformación al efecto de
transición:

Ejemplo
div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*
Safari */
transition: width 2s, height 2s, transform 2s;
}

<!DOCTYPE html>
<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */

transition: width 2s, height 2s, transform 2s;

div:hover {

width: 300px;

height: 300px;

-webkit-transform: rotate(180deg); /* Safari */

transform: rotate(180deg);

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>
</body>

</html>

Más Ejemplos de Transición

Las propiedades de transición CSS3 se pueden especificar una por una,
como esto:

Ejemplo
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

/* For Safari 3.1 to 6.0 */

-webkit-transition-property: width;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: linear;

-webkit-transition-delay: 1s;
 /* Standard syntax */

transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1s;

div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effects.</p>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>

</html>

O utilizando la propiedad abreviada transition:

Ejemplo
div {
transition: width 2s linear 1s;
}

!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */

transition: width 2s linear 1s;

div:hover {

width: 300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>
<p>Hover over the div element above, to see the transition effect.</p>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>

</html>

Propiedades de Transición CSS3

En la tabla siguiente se enumeran todas las propiedades de transición:

Property Description

transition A shorthand property for setting the four transition

properties into a single property

transition-delay Specifies a delay (in seconds) for the transition effect

transition-duration Specifies how many seconds or milliseconds a

transition effect takes to complete

transition-property Specifies the name of the CSS property the transition

effect is for

transition-timing- Specifies the speed curve of the transition effect

function

Animaciones CSS3
Animaciones CSS3
CSS3 animaciones permite la animación de la mayoría de los elementos
HTML sin usar JavaScript o Flash!

¿Qué son las animaciones CSS3?

Una animación permite que un elemento cambie gradualmente de un estilo
a otro.

Puede cambiar la cantidad de propiedades CSS que desee, tantas veces

como desee.

Para utilizar la animación CSS3, primero debe especificar algunos

fotogramas clave para la animación.

Los fotogramas clave mantienen los estilos que el elemento tendrá en

determinados momentos.

La regla @keyframes
Cuando especifique estilos CSS dentro de la @keyframes regla, la animación
cambiará gradualmente del estilo actual al nuevo estilo en determinados
momentos.

Para que una animación funcione, debe vincular la animación a un

elemento.
El siguiente ejemplo vincula la animación "ejemplo" al elemento <div>. La
animación durará 4 segundos y cambiará gradualmente el color de fondo
del elemento <div> de "rojo" a "amarillo":

Ejemplo
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

from {background-color: red;}

to {background-color: yellow;}

/* Standard syntax */

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>

</html>
Nota: Si la animation-duration propiedad no está especificada, la
animación no tendrá ningún efecto, ya que el valor predeterminado es 0.

En el ejemplo anterior hemos especificado cuando el estilo cambiará

usando las palabras clave "de" y "a" (que representa 0% (inicio) y 100%
(completa)).

También es posible utilizar el porcentaje. Mediante el uso de porcentaje,

puede agregar tantos cambios de estilo como desee.

El siguiente ejemplo cambiará el color de fondo del elemento <div> cuando

la animación esté completada al 25%, al 50%, y de nuevo cuando la
animación esté completa al 100%:

Ejemplo
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

<!DOCTYPE html>

<html>

<head>
<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

/* Standard syntax */

@keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

}
</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

El siguiente ejemplo cambiará el color de fondo y la posición del elemento

<div> cuando la animación esté completada al 25%, al 50%, y de nuevo
cuando la animación esté completa al 100%:

Ejemplo
/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
 animation-duration: 4s;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}
/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

Retrasar una animación

La animation-delay propiedad especifica un retraso para el inicio de una
animación.

El ejemplo siguiente tiene un retardo de 2 segundos antes de iniciar la

animación:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

<!DOCTYPEhtml>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-delay: 2s;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>
Establecer cuántas veces debe ejecutarse
una animación
La animation-iteration-count propiedad especifica el número de veces
que debe ejecutarse una animación.

El siguiente ejemplo ejecutará la animación 3 veces antes de que se

detenga:

Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

 -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

El ejemplo siguiente utiliza el valor "infinito" para hacer que la animación

continúe para siempre:

Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: infinite;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>
</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

Ejecutar animación en sentido inverso o

ciclos alternativos
La animation-direction propiedad se utiliza para permitir que una
animación se ejecute en dirección inversa o ciclos alternos.

El siguiente ejemplo ejecutará la animación en dirección inversa:

Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}

<!DOCTYPE html>

<html>
<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */

-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: reverse;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}
/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

El ejemplo siguiente utiliza el valor "alternativo" para hacer que la

animación se ejecute primero hacia adelante, luego hacia atrás y luego
hacia delante:

Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
 animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Safari 4.0 - 8.0 */

-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */

-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: alternate;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

 25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>
Especificar la curva de velocidad de la
animación
La animation-timing-function propiedad especifica la curva de velocidad
de la animación.

La propiedad animation-timing-function puede tener los siguientes valores:

 ease - especifica una animación con un arranque lento, luego rápido,

luego finaliza lentamente (esto es por defecto)
 linear - especifica una animación con la misma velocidad de
principio a fin
 ease-in - especifica una animación con un inicio lento
 ease-out - especifica una animación con un final lento
 ease-in-out - especifica una animación con un inicio y fin lentos
 cubic-bezier(n,n,n,n) - le permite definir sus propios valores en
una función cúbico-bezier

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad

que se pueden usar:

Ejemplo
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;
height: 50px;

background-color: red;

font-weight: bold;

position: relative;

-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */

animation: mymove 5s infinite;

/* Safari 4.0 - 8.0 */

#div1 {-webkit-animation-timing-function: linear;}

#div2 {-webkit-animation-timing-function: ease;}

#div3 {-webkit-animation-timing-function: ease-in;}

#div4 {-webkit-animation-timing-function: ease-out;}

#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}

#div3 {animation-timing-function: ease-in;}

#div4 {animation-timing-function: ease-out;}

#div5 {animation-timing-function: ease-in-out;}

/* Safari 4.0 - 8.0 */

@-webkit-keyframesmymove {

from {left: 0px;}

to {left: 300px;}
}

/* Standard syntax */

@keyframes mymove {

from {left: 0px;}

to {left: 300px;}

</style>

</head>

<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet

Explorer 9 and earlier versions.</p>

<div id="div1">linear</div>

<div id="div2">ease</div>

<div id="div3">ease-in</div>

<div id="div4">ease-out</div>

<div id="div5">ease-in-out</div>

</body>

</html>

Mantener el ultimo estado una animación

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<p>Let the div element retain the style values from the last keyframe when the
animation ends:</p>
<div></div>

<p><strong>Note:</strong> The animation-fill-mode property is not supported in

Internet Explorer 9
and earlier versions.</p>
</body>
</html>

Propiedad de abreviatura de animación

El siguiente ejemplo utiliza seis de las propiedades de animación:

Ejemplo
div {
animation-name: example;
 animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

/* Safari 4.0 - 8.0 */

-webkit-animation-name: example;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

/* Standard syntax */

animation-name: example;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;
animation-iteration-count: infinite;

animation-direction: alternate;

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>

</body>

</html>

El mismo efecto de animación que el anterior se puede lograr utilizando la

animation propiedad abreviada :

Ejemplo
div {
animation: example 5s linear 2s infinite alternate;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */

animation: myfirst 5s linear 2s infinite alternate;

/* Safari 4.0 - 8.0 */

@-webkit-keyframesmyfirst {
 0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

/* Standard syntax */

@keyframesmyfirst {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>
Propiedades de Animación CSS3
La siguiente tabla muestra la regla @keyframes y todas las propiedades de
la animación:

Property Description

@keyframes Specifiestheanimationcode

animation A shorthand property for setting all the

animation properties

animation-delay Specifies a delay for the start of an animation

animation-direction Specifies whether an animation should play in

reverse direction or alternate cycles

animation-duration Specifies how many seconds or milliseconds an

animation takes to complete one cycle

animation-fill-mode Specifies a style for the element when the

animation is not playing (when it is finished, or
when it has a delay)
animation-iteration-count Specifies the number of times an animation
should be played

animation-name Specifies the name of the @keyframes animation

animation-play-state Specifies whether the animation is running or

paused

animation-timing-function Specifies the speed curve of the animation

CSS Imágenes
Aprenda cómo diseñar imágenes utilizando CSS.

Imágenes redondeadas
Utilice la border-radius propiedad para crear imágenes redondeadas:
<!DOCTYPE html>

<html>

<head>

<style>

img {

border-radius: 8px;

</style>

</head>

<body>

<h2>Rounded Images</h2>

<p>Use the border-radius property to create rounded images:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>

</html>

Imágenes en miniatura
Utilice la border propiedad para crear imágenes en miniatura.

Ejemplo
img {
border: 1px solid #ddd;
border-radius: 4px;
padding:5px;
width:150px;
}

<img src="paris.jpg"alt="Paris">

<!DOCTYPE html>

<html>

<head>

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

</style>

</head>

<body>

<h2>Thumbnail Images</h2>

<p>Use the border property to create thumbnail images:</p>

<img src="paris.jpg" alt="Paris" style="width:150px">

</body>

</html>

Ejemplo
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
<img src="paris.jpg"alt="Paris">
</a>

<!DOCTYPE html>
<html>

<head>

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

img:hover {

box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

</style>

</head>

<body>

<h2>Thumbnail Image as Link</h2>

<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use
it as a link.</p>

<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="paris.jpg">

<img src="paris.jpg" alt="Paris" style="width:150px">

</a>
</body>

</html>

Imágenes sensibles
Las imágenes sensibles se ajustarán automáticamente para adaptarse al
tamaño de la pantalla.

Cambie el tamaño de la ventana del navegador para ver el efecto:

Si desea que una imagen se reduzca si tiene que hacerlo, pero nunca
escala hasta ser mayor que su tamaño original, agregue lo siguiente:

Ejemplo
img {
max-width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>

<head>

<style>

img {

max-width: 100%;
height: auto;

</style>

</head>

<body>

<h2>Responsive Images</h2>

<p>Responsive images will automatically adjust to fit the size of the screen.</p>

<p>Resize the browser window to see the effect:</p>

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

</body>

</html>

Centrar una imagen

Para centrar una imagen dentro de la página, utilícela margin: auto; y
convertirla en un elemento de bloque:
Ejemplo
img {
display: block;
margin: auto;
width: 50%;
}

<!DOCTYPE html>

<html>

<head>

<style>

img {

display: block;

margin: auto;

</style>

</head>

<body>

<img src="paris.jpg" alt="Paris" style="width:50%">

</body>

</html>
Ejemplo
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,
0, 0.19);
}

img {width: 100%}

div.container {
text-align: center;
padding: 10px 20px;
}

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:25px;}
div.polaroid {

width: 80%;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

margin-bottom: 25px;

div.container {

text-align: center;

padding: 10px 20px;

</style>

</head>

<body>

<h2>Responsive Polaroid Images / Cards</h2>

<div class="polaroid">

<img src="rock600x400.jpg" alt="Norway" style="width:100%">

<div class="container">

<p>The Troll's tongue in Hardanger, Norway</p>

</div>

</div>

<div class="polaroid">
<img src="lights600x400.jpg" alt="Norway" style="width:100%">

<div class="container">

<p>Northern Lights in Norway</p>

</div>

</div>

</body>

</html>

Imagen transparente
La opacity propiedad puede tomar un valor de 0.0 - 1.0. El valor más
bajo, más transparente:

Nota: IE8 y uso anterior filter:alpha(opacity=x). La x puede tomar un

valor de 0 a 100. Un valor inferior hace que el elemento sea más
transparente.

Ejemplo
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

<!DOCTYPE html>
<html>

<head>

<style>

img {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property specifies the transparency of an element. The lower the value, the more
transparent:</p>

<p>Image with 50% opacity:</p>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>

</html>

Texto de la imagen
Cómo colocar el texto en una imagen:
<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;

}
img {

width: 100%;

height: auto;

opacity: 0.3;

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top left corner:</p>

<div class="container">

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

<div class="topleft">Top Left</div>

</div>

</body>

</html>

Filtros de imagen
La filter propiedad CSS añade efectos visuales (como desenfoque y saturación) a un
elemento.

Nota: La propiedad de filtro no es compatible con Internet Explorer, Edge 12 o Safari 5.1 y
versiones anteriores.
Ejemplo

Cambiar el color de todas las imágenes a blanco y negro (100% gris):

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

<!DOCTYPE html>

<html>

<head>

<style>

img {
width: 33%;

height: auto;

float: left;

max-width: 235px;

.blur {-webkit-filter: blur(4px);filter: blur(4px);}

.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}

.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

.invert {-webkit-filter: invert(100%);filter: invert(100%);}

.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

.saturate {-webkit-filter: saturate(7); filter: saturate(7);}

.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px

green);}

</style>

</head>

<body>

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or
Safari 5.1 and earlier.</p>

<imgsrc="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

</body>

</html>

Superposición de Hover de imágenes

Creación de un efecto de superposición en hover:
Ejemplo 1

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;

.image {

display: block;

width: 100%;

height: auto;

}
.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 100%;

width: 100%;

opacity: 0;

transition: .5s ease;

background-color: #008CBA;

.container:hover .overlay {

opacity: 1;

.text {

color: white;

font-size: 20px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

}

</style>

</head>

<body>

<h2>Fade in Overlay</h2>

<div class="container">

<imgsrc="img_avatar.png" alt="Avatar" class="image">

<div class="overlay">

<div class="text">Hello World</div>

</div>

</div>

</body>

</html>

Ejemplo 2

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;

}
.image {

opacity: 1;

display: block;

width: 100%;

height: auto;

transition: .5s ease;

backface-visibility: hidden;

.middle {

transition: .5s ease;

opacity: 0;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%)

.container:hover .image {

opacity: 0.3;

.container:hover .middle {

opacity: 1;

}
.text {

background-color: #4CAF50;

color: white;

font-size: 16px;

padding: 16px 32px;

</style>

</head>

<body>

<h2>Fade in a Box</h2>

<div class="container">

<imgsrc="img_avatar.png" alt="Avatar" class="image" style="width:100%">

<div class="middle">

<div class="text">John Doe</div>

</div>

</div>

</body>

</html>

Ejemplo 3

<!DOCTYPE html>

<html>

<head>
<style>

.container {

position: relative;

width: 50%;

.image {

display: block;

width: 100%;

height: auto;

.overlay {

position: absolute;

bottom: 100%;

left: 0;

right: 0;

background-color: #008CBA;

overflow: hidden;

width: 100%;

height:0;

transition: .5s ease;

.container:hover .overlay {

bottom: 0;
height: 100%;

.text {

white-space: nowrap;

color: white;

font-size: 20px;

position: absolute;

overflow: hidden;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

</style>

</head>

<body>

<h2>Slide in Overlay from the Top</h2>

<div class="container">

<imgsrc="img_avatar.png" alt="Avatar" class="image">

<div class="overlay">

<div class="text">Hello World</div>

</div>

</div>
</body>

</html>

Ejemplo 4

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;

.image {

display: block;

width: 100%;

height: auto;

.overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background-color: #008CBA;

overflow: hidden;
width: 100%;

height: 0;

transition: .5s ease;

.container:hover .overlay {

height: 100%;

.text {

white-space: nowrap;

color: white;

font-size: 20px;

position: absolute;

overflow: hidden;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

</style>

</head>

<body>

<h2>Slide in Overlay from the Bottom</h2>

<div class="container">

<imgsrc="img_avatar.png" alt="Avatar" class="image">

<div class="overlay">

<div class="text">Hello World</div>

</div>

</div>

</body>

</html>

Ejemlplo 5

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;

.image {

display: block;

width: 100%;

height: auto;

.overlay {
position: absolute;

bottom: 0;

left: 0;

right: 0;

background-color: #008CBA;

overflow: hidden;

width: 0;

height: 100%;

transition: .5s ease;

.container:hover .overlay {

width: 100%;

.text {

white-space: nowrap;

color: white;

font-size: 20px;

position: absolute;

overflow: hidden;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

}
</style>

</head>

<body>

<h2>Slide in Overlay from the Left</h2>

<div class="container">

<imgsrc="img_avatar.png" alt="Avatar" class="image">

<div class="overlay">

<div class="text">Hello World</div>

</div>

</div>

</body>

</html>

Ejemplo 6

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

width: 50%;

.image {
display: block;

width: 100%;

height: auto;

.overlay {

position: absolute;

bottom: 0;

left: 100%;

right: 0;

background-color: #008CBA;

overflow: hidden;

width: 0;

height: 100%;

transition: .5s ease;

.container:hover .overlay {

width: 100%;

left: 0;

.text {

white-space: nowrap;

color: white;

font-size: 20px;
position: absolute;

overflow: hidden;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

</style>

</head>

<body>

<h2>Slide in Overlay from the Right</h2>

<div class="container">

<imgsrc="img_avatar.png" alt="Avatar" class="image">

<div class="overlay">

<div class="text">Hello World</div>

</div>

</div>

</body>

</html>

Galería de imágenes
CSS se puede utilizar para crear galerías de imágenes. Este ejemplo utiliza
consultas de medios para volver a organizar las imágenes en diferentes
tamaños de pantalla. Cambie el tamaño de la ventana del navegador para
ver el efecto:

Ejemplo
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px){

.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px){

.responsive {
width: 100%;
}
}

<!DOCTYPE html>

<html>

<head>

<style>
div.gallery {

border: 1px solid #ccc;

div.gallery:hover {

border: 1px solid #777;

div.galleryimg {

width: 100%;

height: auto;

div.desc {

padding: 15px;

text-align: center;

*{

box-sizing: border-box;

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;
}

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

.clearfix:after {

content: "";

display: table;

clear: both;

</style>

</head>

<body>

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_fjords.jpg">

<imgsrc="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_forest.jpg">

<imgsrc="img_forest.jpg" alt="Forest" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_lights.jpg">

<imgsrc="img_lights.jpg" alt="Northern Lights" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="responsive">

<div class="gallery">

<a target="_blank" href="img_mountains.jpg">

<imgsrc="img_mountains.jpg" alt="Mountains" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

<div class="clearfix"></div>

<div style="padding:6px;">

<p>This example use media queries to re-arrange the images on different screen sizes: for screens
larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will
show two images side by side. For screens smaller than 500px, the images will stack vertically
(100%).</p>

<p>You will learn more about media queries and responsive web design later in our CSS
Tutorial.</p>

</div>

</body>

</html>
Imagen Modal (Avanzada)
Este es un ejemplo para demostrar cómo CSS y JavaScript pueden trabajar
juntos.

En primer lugar, use CSS para crear una ventana modal (cuadro de
diálogo) y ocultarla de forma predeterminada.

A continuación, utilice un JavaScript para mostrar la ventana modal y para

mostrar la imagen dentro del modal, cuando un usuario haga clic en la
imagen:

Ejemplo
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a
caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {
 modal.style.display = "none";
}

<!DOCTYPE html>

<html>

<head>

<style>

#myImg {

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 100px; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

/* Modal Content (image) */

.modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

/* Caption of Modal Image */

#caption {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

text-align: center;

color: #ccc;

padding: 10px 0;

height: 150px;

/* Add Animation */

.modal-content, #caption {

-webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6s;

animation-name: zoom;

animation-duration: 0.6s;

@-webkit-keyframes zoom {

from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

@keyframes zoom {

from {transform: scale(0.1)}

to {transform: scale(1)}

/* The Close Button */

.close {

position: absolute;

top: 15px;

right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

}
.close:hover,

.close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

.modal-content {

width: 100%;

</style>

</head>

<body>

<h2>Image Modal</h2>

<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>

<p>We use JavaScript to trigger the modal and to display the current image inside the modal when
it is clicked on. Also note that we use the value from the image's "alt" attribute as an image
caption text inside the modal.</p>

<p>Don't worry if you do not understand the code right away. When you are done with CSS, go to
our JavaScript Tutorial to learn more.</p>

<img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->

<div id="myModal" class="modal">

<span class="close">×</span>

<img class="modal-content" id="img01">

<div id="caption"></div>

</div>

<script>

// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption

varimg = document.getElementById('myImg');

varmodalImg = document.getElementById("img01");

varcaptionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

captionText.innerHTML = this.alt;

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {
modal.style.display = "none";

</script>

</body>

</html>

CSS Botones
Aprenda cómo diseñar los botones utilizando CSS.

Estilo básico del botón

Ejemplo
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

<!DOCTYPE html>

<html>

<head>

<style>

.button {
background-color: #4CAF50;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

</style>

</head>

<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>

<a href="#" class="button">Link Button</a>

<button class="button">Button</button>

<input type="button" class="button" value="Input Button">

</body>

</html>
Ejemplo
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}
.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

</style>

</head>

<body>

<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

Tamaños del botón

Utilice la font-size propiedad para cambiar el tamaño de fuente de un
botón:

Ejemplo
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

margin: 4px 2px;

cursor: pointer;

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

</style>

</head>

<body>

<h2>Button Sizes</h2>

<p>Change the font size of a button with the font-size property:</p>

<button class="button button1">10px</button>

<button class="button button2">12px</button>

<button class="button button3">16px</button>

<button class="button button4">20px</button>

<button class="button button5">24px</button>

</body>

</html>

Utilice la padding propiedad para cambiar el relleno de un botón:

Ejemplo
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {padding: 10px 24px;}

.button2 {padding: 12px 28px;}

.button3 {padding: 14px 40px;}

.button4 {padding: 32px 16px;}

.button5 {padding: 16px;}

</style>
</head>

<body>

<h2>Button Sizes</h2>

<p>Change the padding of a button with the padding property:</p>

<button class="button button1">10px 24px</button>

<button class="button button2">12px 28px</button>

<button class="button button3">14px 40px</button>

<button class="button button4">32px 16px</button>

<button class="button button5">16px</button>

</body>

</html>

Botones redondeados

Utilice la border-radius propiedad para añadir esquinas redondeadas a

un botón:

Ejemplo
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

</style>

</head>

<body>
<h2>Rounded Buttons</h2>

<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button1">2px</button>

<button class="button button2">4px</button>

<button class="button button3">8px</button>

<button class="button button4">12px</button>

<button class="button button5">50%</button>

</body>

</html>

Borders botón de color

Utilice la border propiedad para agregar un borde de color a un botón:

Ejemplo
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}

<!DOCTYPE html>
<html>

<head>
<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}
.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

</style>

</head>

<body>

<h2>Colored Button Borders</h2>

<p>Use the border property to add a border to the button:</p>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

Botones Hoverable

Utilice el :hover selector para cambiar el estilo de un botón cuando se

pasa el ratón sobre él.

Consejo: Utilice la transition-duration propiedad para determinar la

velocidad del efecto de "flotar":

Ejemplo
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor: pointer;

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

.button1:hover {
background-color: #4CAF50;

color: white;

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

.button2:hover {

background-color: #008CBA;

color: white;

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

.button3:hover {

background-color: #f44336;

color: white;

}
.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

.button4:hover {background-color: #e7e7e7;}

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

.button5:hover {

background-color: #555555;

color: white;

</style>

</head>

<body>

<h2>Hoverable Buttons</h2>

<p>Use the :hover selector to change the style of the button when you move the mouse over
it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the
"hover" effect:</p>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

Shadow Botones

Utilice la box-shadow propiedad para añadir sombras a un botón:

Ejemplo
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0
rgba(0,0,0,0.19);
}
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

.button1 {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

.button2:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}
</style>

</head>

<body>

<h2>Shadow Buttons</h2>

<p>Use the box-shadow property to add shadows to the button:</p>

<button class="button button1">Shadow Button</button>

<button class="button button2">Shadow on Hover</button>

</body>

</html>

Botones de movilidad

Utilice la opacity propiedad a una mayor transparencia a un botón (crea

un vistazo "desactivado").

Consejo: También puede añadir la cursor propiedad con un valor de "no

permitido", el cual mostrará una "muestra del estacionamiento" al pasar el
ratón sobre el botón:

Ejemplo
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.disabled {

opacity: 0.6;

cursor: not-allowed;

</style>

</head>

<body>

<h2>Disabled Buttons</h2>
<p>Use the opacity property to add some transparency to the button (make it look disabled):</p>

<button class="button">Normal Button</button>

<button class="button disabled">Disabled Button</button>

</body>

</html>

Ancho botón

Por defecto, el tamaño del botón está determinado por su contenido de

texto (tan ancha como su contenido). Utilice la width propiedad para
cambiar el ancho de un botón:

Ejemplo
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

<!DOCTYPE html>

<html>
<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

</style>

</head>

<body>

<h2>Button Width</h2>

<p>Use the width property to change the width of the button:</p>

<p><strong>Tip:</strong> Use pixels if you want to set a fixed width and use percent for
responsive buttons (e.g. 50% of its parent element). Resize the browser window to see the
effect.</p>

<button class="button button1">250px</button><br>

<button class="button button2">50%</button><br>

<button class="button button3">100%</button>

</body>

</html>

Grupos de botones

Retire los márgenes y añadir float:left a cada botón para crear un

grupo de botones:

Ejemplo
.button {
float: left;
}

<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Button Groups</h2>

<p>Remove margins and float the buttons to create a button group:</p>

<div class="btn-group">

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>
</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float
next to the buttons.</p>

</body>

</html>

Bordeadas grupos de botones

Utilice la border propiedad para crear un grupo de botones con borde:

Ejemplo
.button {
float: left;
border: 1px solid green;
}

<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

.btn-group .button:not(:last-child) {

border-right: none; /* Prevent double borders */

.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Bordered Button Group</h2>

<p>Add borders to create a bordered button group:</p>

<div class="btn-group">

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>
<button class="button">Button</button>

</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float
next to the buttons.</p>

</body>

</html>

Verticales grupos de botones

Utilizar display:block en lugar de float:left agrupar los botones

debajo de otra, en vez de lado a lado:

Ejemplo
.button {
display: block;
}

<!DOCTYPE html>

<html>
<head>

<style>

.btn-group .button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

width: 150px;

display: block;

.btn-group .button:not(:last-child) {

border-bottom: none; /* Prevent double borders */

.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>
<h2>Vertical Button Group</h2>

<div class="btn-group">

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

</div>

</body>

</html>
Botones animados

Ejemplo 1

<!DOCTYPE html>

<html>
<head>

<style>

.button {

display: inline-block;

border-radius: 4px;

background-color: #f4511e;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 200px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

.button span:after {

content: '\00bb';
position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

.button:hover span {

padding-right: 25px;

.button:hover span:after {

opacity: 1;

right: 0;

</style>

</head>

<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>

</html>
Ejemplo 2

<!DOCTYPE html>

<html>

<head>

<style>

.button {

display: inline-block;

padding: 15px 25px;

font-size: 24px;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #fff;

background-color: #4CAF50;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

.button:hover {background-color: #3e8e41}

.button:active {

background-color: #3e8e41;

box-shadow: 0 5px #666;

transform: translateY(4px);
}

</style>

</head>

<body>

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button">Click Me</button>

</body>

</html>

Ejemplo 3

<html>

<head>

<style>

.button {

position: relative;

background-color: #4CAF50;

border: none;

font-size: 28px;

color: #FFFFFF;

padding: 20px;

width: 200px;

text-align: center;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

text-decoration: none;

overflow: hidden;

cursor: pointer;

.button:after {

content: "";

background: #f1f1f1;

display: block;

position: absolute;

padding-top: 300%;

padding-left: 350%;

margin-left: -20px !important;

margin-top: -120%;

opacity: 0;

transition: all 0.8s

.button:active:after {

padding: 0;

margin: 0;

opacity: 1;

transition: 0s

</style>
</head>

<body>

<h2>Animated Button - Ripple Effect</h2>

<button class="button">Click Me</button>

</body>

</html>

Paginacion de CSS3
Ejemplos de paginación CSS
Aprenda a crear una paginación de respuesta utilizando CSS.

Paginación simple
Si tiene un sitio web con muchas páginas, puede agregar algún tipo de
paginación a cada página:

Ejemplo
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

</style>

</head>

<body>

<h2>Simple Pagination</h2>

<div class="pagination">
<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>

</html>

Paginación Activa y Hoverable

Resalte la página actual con una .active clase y utilice el :hover selector
para cambiar el color de cada enlace de página cuando mueva el mouse
sobre ellos:

Ejemplo
.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

.pagination a.active {

background-color: #4CAF50;

color: white;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a class="active" href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>

</html>

Botones redondeados activos y encifrables

Agregue la border-radius propiedad si desea un botón "activo" y "girar"

redondeado:

Ejemplo
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

.pagination a.active {

background-color: #4CAF50;

color: white;

border-radius: 5px;

.pagination a:hover:not(.active) {
background-color: #ddd;

border-radius: 5px;

</style>

</head>

<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#" class="active">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>

</html>

Efecto de Transición Hoverable

Añada la transition propiedad a los vínculos de página para crear un
efecto de transición en hover:

Ejemplo
.pagination a {
transition: background-color .3s;
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

.pagination a.active {

background-color: #4CAF50;

color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Transition Effect on Hover</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#" class="active">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>

</html>
Paginación limitada

Utilice la border propiedad para agregar bordes a la paginación:

Ejemplo
.pagination a {
border: 1px solid #ddd; /* Gray */
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

}
.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination with Borders</h2>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#" class="active">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>
</html>

Fronteras redondeadas

Sugerencia: agregue bordes redondeados a su primer y último enlace en

la paginación:

Ejemplo
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;
padding: 8px 16px;

text-decoration: none;

border: 1px solid #ddd;

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

.pagination a:last-child {

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

</style>

</head>

<body>
<h2>Pagination with Rounded Borders</h2>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a class="active" href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>

</html>

Espacio entre los enlaces

Sugerencia: Agregue la margin propiedad si no desea agrupar los enlaces

de la página:

Ejemplo
.pagination a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change
it */
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

margin: 0 4px;

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

}
.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination with Margins</h2>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#" class="active">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</body>

</html>
Tamaño de paginación

Cambie el tamaño de la paginación con la font-size propiedad:

Ejemplo
.pagination a {
font-size: 22px;
}

<!DOCTYPE html>

<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

font-size: 22px;

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination Size</h2>

<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">

<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#" class="active">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>
<a href="#">&raquo;</a>

</div>

</body>

</html>

Paginación Centrada

Para centrar la paginación, envuelva un elemento contenedor (como

<div>) a su alrededor con text-align: center

Ejemplo
.center {
text-align: center;
}

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

.pagination {

display: inline-block;

}
.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

margin: 0 4px;

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Centered Pagination</h2>

<div class="center">

<div class="pagination">
<a href="#">&laquo;</a>

<a href="#">1</a>

<a href="#" class="active">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">&raquo;</a>

</div>

</div>

</body>

</html>

<!DOCTYPE html>
<html>

<head>

<style>

.pagination {

display: inline-block;

.pagination a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

.pagination a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>
<p>Next/Previous buttons:</p>

<div class="pagination">

<a href="#">❮</a>

<a href="#">❮</a>

</div>

<p>Navigation pagination:</p>

<div class="pagination">

<a href="#" class="active">Home</a>

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

</div>

</body>

</html>

Ejemplo
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
 background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

<!DOCTYPE html>

<html>

<head>

<style>

ul.breadcrumb {

padding: 8px 16px;

list-style: none;

background-color: #eee;

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {

padding: 8px;

color: black;

content: "/\00a0";

ul.breadcrumb li a {color: green;}

</style>

</head>

<body>
<h2>Breadcrumb Pagination</h2>

<ul class="breadcrumb">

<li><a href="#">Home</a></li>

<li><a href="#">Pictures</a></li>

<li><a href="#">Summer 15</a></li>

<li>Italy</li>

</ul>

</body>

</html>

CSS3 varias columnas

Diseño de columnas múltiples CSS3
El diseño de varias columnas CSS3 permite una fácil definición de múltiples
columnas de texto, al igual que en los periódicos:
Propiedades de varias columnas CSS3
En este capítulo aprenderá sobre las siguientes propiedades de varias
columnas:

 column-count
 column-gap
 column-rule-style
 column-rule-width
 column-rule-color
 column-rule
 column-span
 column-width
CSS3 Crear varias columnas
La column-count propiedad especifica el número de columnas en las que debe
dividirse un elemento.

El ejemplo siguiente dividirá el texto en el elemento <div> en 3 columnas:

Ejemplo
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not

support the column-count property.</p>
<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum.

</div>

</body>

</html>

CSS3 Especificar la brecha entre columnas

La column-gap propiedad especifica el espacio entre las columnas.

El siguiente ejemplo especifica un espacio de 40 píxeles entre las

columnas:

Ejemplo
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}

<!DOCTYPE html>

<html>

<head>
<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap
property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>
Reglas de la columna CSS3
La column-rule-style propiedad especifica el estilo de la regla entre
columnas:

Ejemplo
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

</style>
</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style
property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

La column-rule-width propiedad especifica el ancho de la regla entre

columnas:

Ejemplo
div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}

<!DOCTYPE html>

<html>
<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-
width property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

La column-rule-color propiedad especifica el color de la regla entre

columnas:

Ejemplo
div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;

-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */

-moz-column-rule-color: lightblue; /* Firefox */

column-rule-color: lightblue;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-color
property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>
</html>

La column-rule propiedad es una propiedad abreviada para establecer todas

las propiedades column-rule- * arriba.

El ejemplo siguiente establece el ancho, el estilo y el color de la regla entre

columnas:

Ejemplo
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */

-moz-column-rule: 1px solid lightblue; /* Firefox */

column-rule: 1px solid lightblue;

}
</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule
property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

Especifique cuántas columnas debe tener un

elemento
La column-span propiedad especifica cuántas columnas un elemento debe
abarcar.

El ejemplo siguiente especifica que el elemento <h2> debe abarcar todas

las columnas:
Ejemplo
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */

-moz-column-rule: 1px solid lightblue; /* Firefox */

column-rule: 1px solid lightblue;

h2 {

-webkit-column-span: all; /* Chrome, Safari, Opera */

column-span: all;

}
</style>

</head>

<body>

<p><b>Note:</b> Firefox and Internet Explorer 9 (and earlier versions) do not support the column-
span property.</p>

<div class="newspaper">

<h2>Lorem Ipsum Dolor Sit Amet</h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

Especifique el ancho de la columna

La column-width propiedad especifica un ancho sugerido y óptimo para las
columnas.

El siguiente ejemplo especifica que el ancho óptimo sugerido para las

columnas debe ser 100px:

Ejemplo
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
 -moz-column-width: 100px; /* Firefox */
column-width: 100px;
}

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-width: 100px; /* Chrome, Safari, Opera */

-moz-column-width: 100px; /* Firefox */

column-width: 100px;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-width
property.</p>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

Propiedades de varias columnas CSS3

La siguiente tabla muestra todas las propiedades de varias columnas:

Property Description

column-count Specifies the number of columns an element should be

divided into

column-fill Specifies how to fill columns

column-gap Specifies the gap between the columns

column-rule A shorthand property for setting all the column-rule-*

properties

column-rule-color Specifies the color of the rule between columns

column-rule-style Specifies the style of the rule between columns

column-rule-width Specifies the width of the rule between columns

column-span Specifies how many columns an element should span

across

column-width Specifies a suggested, optimal width for the columns

columns A shorthand property for setting column-width and

column-count

Interfaz de usuario CSS3

Interfaz de usuario CSS3
CSS3 tiene nuevas características de interfaz de usuario, como elementos
de redimensionamiento, contornos y tamaño de caja.

En este capítulo aprenderá sobre las siguientes propiedades de la interfaz

de usuario:

 resize
 outline-offset
Redimensionamiento CSS3
La resize propiedad especifica si el usuario debe o no redimensionar un
elemento.

El siguiente ejemplo permite al usuario redimensionar sólo el ancho de un

elemento <div>:

Ejemplo
div {
resize: horizontal;
overflow: auto;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 2px solid;

padding: 20px;

width: 300px;

resize: horizontal;

overflow: auto;
}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

<div>Let the user resize the width of this div element.</div>

</body>

</html>

El siguiente ejemplo permite al usuario cambiar el tamaño sólo la altura de

un elemento <div>:

Ejemplo
div {
resize: vertical;
overflow: auto;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 2px solid;

padding: 20px;
width: 300px;

resize: vertical;

overflow: auto;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

<div>Let the user resize the height of this div element.</div>

</body>

</html>

El siguiente ejemplo permite al usuario cambiar el tamaño de la altura y el

ancho de un elemento <div>:

Ejemplo
div {
resize: both;
overflow: auto;
}

<!DOCTYPE html>

<html>

<head>

<style>
div {

border: 2px solid;

padding: 20px;

width: 300px;

resize: both;

overflow: auto;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

<div>Let the user resize both the height and the width of this div element.</div>

</body>

</html>

Offset de esquema CSS3

La outline-offset propiedad añade espacio entre un contorno y el borde o
borde de un elemento.

Los contornos difieren de las fronteras de tres maneras:

 Un contorno es una línea dibujada alrededor de elementos, fuera del

borde de borde
 Un esquema no ocupa espacio
  Un contorno puede ser no rectangular

El ejemplo siguiente utiliza la propiedad outline-offset para agregar un

espacio de 15 px entre el borde y el contorno:

Ejemplo
div {
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 20px;

padding: 10px;

width: 300px;

height: 100px;

border: 1px solid black;

outline: 1px solid red;

 /* Move the outline 15px away from the border */

outline-offset: 15px;

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>

<div>This div has an outline 15px outside the border edge.</div>

</body>

</html>

Propiedades de la interfaz de usuario CSS3

En la tabla siguiente se enumeran todas las propiedades de la interfaz de
usuario:

Property Description

box-sizing Allows you to include the padding and border in an

element's total width and height

nav-down Specifies where to navigate when using the arrow-

 down navigation key

nav-index Specifies the tabbing order for an element

nav-left Specifies where to navigate when using the arrow-left

navigation key

nav-right Specifies where to navigate when using the arrow-right

navigation key

nav-up Specifies where to navigate when using the arrow-up

navigation key

outline-offset Adds space between an outline and the edge or border

of an element

resize Specifies whether or not an element is resizable by the

user

Tamaño de caja CSS3

Tamaño de caja CSS3
La box-sizing propiedad CSS3 nos permite incluir el relleno y el borde en el
ancho y la altura totales de un elemento.
Sin la propiedad de tamaño de caja CSS3
De forma predeterminada, el ancho y la altura de un elemento se calculan
de la siguiente manera:

Anchura + relleno + borde = ancho real de un elemento

altura + relleno + borde = altura real de un elemento

Esto significa: Cuando se fija el ancho / alto de un elemento, el elemento a

menudo aparece más grande que el que se ha establecido (ya que el borde
y el relleno del elemento se añaden al ancho / altura especificados del
elemento).

La siguiente ilustración muestra dos elementos <div> con la misma

anchura y altura especificadas:

Los dos elementos <div> arriba terminan con diferentes tamaños en el

resultado (porque div2 tiene un relleno especificado):
Ejemplo
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

}

</style>

</head>

<body>

<div class="div1">This div is smaller (width is 300px and height is 100px).</div>

<br>

<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

</body>

</html>

Por lo tanto, durante mucho tiempo los desarrolladores web han

especificado un valor de ancho menor de lo que querían, porque tenían que
restar el relleno y los bordes.

Con CSS3, la box-sizing propiedad resuelve este problema.

Con la propiedad de tamaño de caja CSS3

La box-sizing propiedad CSS3 nos permite incluir el relleno y el borde en el
ancho y la altura totales de un elemento.

Si se establece box-sizing: border-box; en un elemento de relleno y el borde

se incluyen en el ancho y la altura:
Aquí está el mismo ejemplo que el anterior, con box-sizing: border-box;
añadido a los dos elementos <div>:

Ejemplo
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

Dado que el resultado de usar el box-sizing: border-box; es mucho mejor,

muchos desarrolladores quieren que todos los elementos de sus páginas
funcionen de esta manera.

<!DOCTYPE html>

<html>
<head>

<style>

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

box-sizing: border-box;

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

box-sizing: border-box;

</style>

</head>

<body>

<div class="div1">Both divs are the same size now!</div>

<br>

<div class="div2">Hooray!</div>

</body>

</html>
Dado que el resultado de usar el box-sizing: border-box; es mucho mejor,
muchos desarrolladores quieren que todos los elementos de sus páginas
funcionen de esta manera.

El código siguiente garantiza que todos los elementos se clasifican de esta

manera más intuitiva. Muchos navegadores ya utilizan box-sizing: border-
box; para muchos elementos de formulario (pero no todos, por lo que las
entradas y las áreas de texto se ven diferentes en el ancho: 100%;).

Aplicar esto a todos los elementos es seguro y sabio:

Ejemplo
* {
box-sizing: border-box;
}

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

*{

box-sizing: border-box;

input, textarea {

width: 100%;
}

</style>

</head>

<body>

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey"><br>

Last name:<br>

<input type="text" name="lastname" value="Mouse"><br>

Comments:<br>

<textarea name="message" rows="5" cols="30">

</textarea>

<br><br>

<input type="submit" value="Submit">

</form>

<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look
what happens.

Notice that the width of input, textarea, and submit button will go outside of the screen.</p>

</body>

</html>

CSS3 Caja Flexible

CSS3 Flexbox
Las cajas flexibles, o flexbox, es un nuevo modo de disposición en CSS3.

El uso de flexbox asegura que los elementos se comporten de manera

predecible cuando el diseño de la página debe acomodar diferentes
tamaños de pantalla y diferentes dispositivos de visualización.

Para muchas aplicaciones, el modelo de caja flexible proporciona una

mejora sobre el modelo de bloque en el sentido de que no utiliza flotadores,
ni tampoco los márgenes del contenedor flexible se colapsan con los
márgenes de su contenido.

CSS3 Conceptos de Flexbox

Flexbox se compone de contenedores flexibles y artículos flexibles.

Un contenedor flex se declara estableciendo la display propiedad de un

elemento en flex (renderizado como un bloque) o inline-flex
(traducido como en línea).

Dentro de un contenedor flexible hay uno o más artículos flexibles.

Nota: todo lo que está fuera de un contenedor flexible y dentro de un

elemento flexible se procesa como de costumbre. Flexbox define cómo se
colocan los elementos flexibles dentro de un contenedor flexible.

Los artículos flexibles se colocan dentro de un contenedor flexible a lo largo

de una línea flexible. Por defecto, sólo hay una línea flexible por contenedor
flexible.

El siguiente ejemplo muestra tres elementos flexibles. Están posicionados

de forma predeterminada: a lo largo de la línea horizontal de flexión, de
izquierda a derecha:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
 display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;
}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

También es posible cambiar la dirección de la línea de flexión.

Si ajustamos la direction propiedad a rtl (de derecha a izquierda), el

texto se dibuja de derecha a izquierda, y también la línea de flex cambia de
dirección, lo que cambiará el diseño de página:

Ejemplo
body {
direction: rtl;
}

.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

<!DOCTYPE html>

<html>

<head>

<style>

body {

direction: rtl;

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;
}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

Dirección Flex
La flex-direction propiedad especifica la dirección de los elementos
flexibles dentro del contenedor flexible. El valor predeterminado de flex-
direction es row (de izquierda a derecha, de arriba a abajo).

Los otros valores son los siguientes:

  row-reverse - Si el modo de escritura (dirección) se deja a la
derecha, los elementos flexibles se tendrán de derecha a izquierda
 column - Si el sistema de escritura es horizontal, los elementos de
flexión estarán dispuestos verticalmente
 column-reverse - Igual que la columna, pero invertida

El siguiente ejemplo muestra el resultado de usar el row-reverse valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row-reverse;

flex-direction: row-reverse;

width: 400px;

height: 250px;

background-color: lightgrey;

}
.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el column valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 400px;
height: 250px;
 background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>
<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el column-reverse

valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;
 -webkit-flex-direction: column-reverse;

flex-direction: column-reverse;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>
La propiedad justify-content
La justify-content propiedad alinea horizontalmente los elementos del
contenedor flexible cuando los elementos no utilizan todo el espacio
disponible en el eje principal.

Los valores posibles son los siguientes:

 flex-start- Valor por defecto. Los artículos se colocan al principio

del contenedor
 flex-end - Los artículos se colocan en el extremo del contenedor
 center - Los artículos se colocan en el centro del contenedor
 space-between - Los artículos se colocan con espacio entre las líneas
 space-around - Los artículos se colocan con espacio antes, entre y
después de las líneas

El siguiente ejemplo muestra el resultado de usar el flex-end valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;
 -webkit-justify-content: flex-end;

justify-content: flex-end;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>
El siguiente ejemplo muestra el resultado de usar el center valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-justify-content: center;

justify-content: center;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;
 height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el space-between valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>
<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-justify-content: space-between;

justify-content: space-between;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el space-around valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-justify-content: space-around;

justify-content: space-around;

width: 400px;

height: 250px;

background-color: lightgrey;

}
.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

La propiedad align-items
La align-items propiedad alinea verticalmente los elementos del
contenedor flexible cuando los elementos no utilizan todo el espacio
disponible en el eje transversal.

Los valores posibles son los siguientes:

 stretch- Valor por defecto. Los artículos se estiran para ajustar el

contenedor
  flex-start - Los artículos se colocan en la parte superior del
contenedor
 flex-end - Los artículos se colocan en la parte inferior del
contenedor
 center - Los artículos se colocan en el centro del contenedor
(verticalmente)
 baseline - Los artículos se colocan en la línea de base del
contenedor

El siguiente ejemplo muestra el resultado de usar el stretch valor (este es

el valor predeterminado):

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-align-items: stretch;

align-items: stretch;

width: 400px;

height: 250px;
 background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el flex-start valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
 width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-align-items: flex-start;

align-items: flex-start;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

margin: 10px;

</style>

</head>

<body>
<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el flex-end valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-align-items: flex-end;
 align-items: flex-end;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el center valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

margin: 10px;
}

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

iguiente ejemplo muestra el resultado de usar el baseline valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>
.flex-container {

display: -webkit-flex;

display: flex;

-webkit-align-items: baseline;

align-items: baseline;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>
</html>

La propiedad flex-wrap
La flex-wrap propiedad especifica si los elementos flexibles deben
envolverse o no, si no hay suficiente espacio para ellos en una línea flex.

Los valores posibles son los siguientes:

 nowrap- Valor por defecto. Los artículos flexibles no se envolverán

 wrap - Los artículos flexibles se envolverán si es necesario
 wrap-reverse - Los artículos flexibles se envolverán, si es necesario,
en orden inverso

El siguiente ejemplo muestra el resultado de usar el nowrap valor (este es

el valor predeterminado):

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;
 -webkit-flex-wrap: nowrap;

flex-wrap: nowrap;

width: 300px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>
El siguiente ejemplo muestra el resultado de usar el wrap valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

width: 300px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;
 height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

El siguiente ejemplo muestra el resultado de usar el wrap-reverse valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
width: 300px;
height: 250px;
background-color: lightgrey;
}

<!DOCTYPE html>

<html>
<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap-reverse;

flex-wrap: wrap-reverse;

width: 300px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

La propiedad align-content
La align-content propiedad modifica el comportamiento de la flex-wrap
propiedad. Es similar a align-items, pero en lugar de alinear elementos
flexibles, alinea las líneas flexibles.

Los valores posibles son los siguientes:

 stretch- Valor por defecto. Las líneas se extienden para ocupar el

espacio restante
 flex-start - Las líneas están empacadas hacia el comienzo del
contenedor flexible
 flex-end - Las líneas están empaquetadas hacia el extremo del
contenedor flexible
 center - Las líneas están empaquetadas hacia el centro del
contenedor flexible
 space-between - Las líneas están distribuidas uniformemente en el
contenedor flexible
 space-around - Las líneas están uniformemente distribuidas en el
contenedor flexible, con espacios de tamaño medio en cada extremo

El siguiente ejemplo muestra el resultado de usar el center valor:

Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 300px;
background-color: lightgrey;
}
<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-align-content: center;

align-content: center;

width: 300px;

height: 300px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

</style>

</head>

<body>
<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

Propiedades del elemento Flex

Pedido
La order propiedad especifica el orden de un elemento flexible en relación
con el resto de elementos flexibles dentro del mismo contenedor:

Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

.first {
-webkit-order: -1;
order: -1;
}

<!DOCTYPE html>

<html>

<head>
<style>

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

.first {

-webkit-order: -1;

order: -1;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

 <div class="flex-item first">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>

</body>

</html>

Margen
El ajuste margin: auto; absorberá el espacio adicional. Se puede utilizar
para empujar elementos flexibles en diferentes posiciones.

En el ejemplo siguiente, establecemos margin-right: auto; el primer

elemento flex. Esto hará que todo el espacio extra sea absorbido a la
derecha de ese elemento:

Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}

.flex-item:first-child {
margin-right: auto;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {
 display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 75px;

height: 75px;

margin: 10px;

.flex-item:first-child {

margin-right: auto;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">flex item 1</div>

<div class="flex-item">flex item 2</div>

<div class="flex-item">flex item 3</div>

</div>
</body>

</html>

Centrado perfecto
En el siguiente ejemplo resolveremos un problema casi diario: centrado
perfecto.

Es muy fácil con flexbox. El ajuste margin: auto; hará que el elemento
esté perfectamente centrado en ambos ejes:

Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

}
.flex-item {

background-color: cornflowerblue;

width: 75px;

height: 75px;

margin: auto;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item">Perfect centering!</div>

</div>

</body>

</html>

Alinearse
La align-self propiedad de los elementos flexibles anula la propiedad
align-items del contenedor flex para ese elemento. Tiene los mismos
valores posibles que la align-items propiedad.

El siguiente ejemplo establece diferentes valores de alineación-self para

cada elemento flexible:

Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 60px;
 min-height: 100px;
margin: 10px;
}

.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}

.item3 {
-webkit-align-self: center;
align-self: center;
}

.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}

.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;
 background-color: lightgrey;

.flex-item {

background-color: cornflowerblue;

width: 60px;

min-height: 100px;

margin: 10px;

.item1 {

-webkit-align-self: flex-start;

align-self: flex-start;

.item2 {

-webkit-align-self: flex-end;

align-self: flex-end;

.item3 {

-webkit-align-self: center;

align-self: center;

.item4 {

-webkit-align-self: baseline;
 align-self: baseline;

.item5 {

-webkit-align-self: stretch;

align-self: stretch;

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item item1">flex-start</div>

<div class="flex-item item2">flex-end</div>

<div class="flex-item item3">center</div>

<div class="flex-item item4">baseline</div>

<div class="flex-item item5">stretch</div>

</div>

</body>

</html>

flexionar
La flex propiedad especifica la longitud del elemento flexible, en relación
con el resto de los elementos flexibles dentro del mismo contenedor.
En el siguiente ejemplo, el primer elemento flexible consumirá 2/4 del
espacio libre y los otros dos elementos flexibles consumirán 1/4 del espacio
libre cada uno:

Ejemplo
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}

.item1 {
-webkit-flex: 2;
flex: 2;
}

.item2 {
-webkit-flex: 1;
flex: 1;
}

.item3 {
-webkit-flex: 1;
flex: 1;
}

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;
}

.flex-item {

background-color: cornflowerblue;

margin: 10px;

.item1 {

-webkit-flex: 2;

flex: 2;

.item2 {

-webkit-flex: 1;

flex: 1;

.item3 {

-webkit-flex: 1;

flex: 1;

</style>

</head>

<body>

<div class="flex-container">
 <div class="flex-item item1">flex item 1</div>

<div class="flex-item item2">flex item 2</div>

<div class="flex-item item3">flex item 3</div>

</div>

</body>

</html>

EJEMPLOS

Ejemplo 1

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

font-weight: bold;

text-align: center;

.flex-container > * {

padding: 10px;

flex: 1 100%;

}
.main {

text-align: left;

background: cornflowerblue;

.header {background: coral;}

.footer {background: lightgreen;}

.aside1 {background: moccasin;}

.aside2 {background: violet;}

@media all and (min-width: 600px) {

.aside { flex: 1 auto; }

@media all and (min-width: 800px) {

.main { flex: 3 0px; }

.aside1 { order: 1; }

.main { order: 2; }

.aside2 { order: 3; }

.footer { order: 4; }

</style>

</head>

<body>
<div class="flex-container">

<header class="header">Header</header>

<article class="main">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus
nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci
massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec
tincidunt.</p>

</article>

<aside class="aside aside1">Aside 1</aside>

<aside class="aside aside2">Aside 2</aside>

<footer class="footer">Footer</footer>

</div>

</body>

</html>

Propiedades de CSS3 Flexbox

En la tabla siguiente se enumeran las propiedades de CSS que se utilizan
con flexbox:

Property Description

display Specifies the type of box used for an HTML element

flex-direction Specifies the direction of the flexible items inside a flex

container
justify-content Horizontally aligns the flex items when the items do not
use all available space on the main-axis

align-items Vertically aligns the flex items when the items do not use
all available space on the cross-axis

flex-wrap Specifies whether the flex items should wrap or not, if

there is not enough room for them on one flex line

align-content Modifies the behavior of the flex-wrap property. It is

similar to align-items, but instead of aligning flex items, it
aligns flex lines

flex-flow A shorthand property for flex-direction and flex-wrap

order Specifies the order of a flexible item relative to the rest of

the flex items inside the same container

align-self Used on flex items. Overrides the container's align-items

property

flex Specifies the length of a flex item, relative to the rest of

the flex items inside the same container
Consultas de medios CSS3
Tipos de medios introducidos CSS2
La @media regla, introducida en CSS2, permitió definir diferentes reglas de
estilo para diferentes tipos de medios.

Ejemplos: Puede tener un conjunto de reglas de estilo para pantallas de

computadora, una para impresoras, una para dispositivos portátiles, otra
para dispositivos de tipo televisión, etc.

Desafortunadamente estos tipos de medios nunca recibieron mucha

compatibilidad con dispositivos, aparte del tipo de medios de impresión.

CSS3 presenta consultas de medios

Las consultas de medios en CSS3 amplían la idea de los tipos de medios
CSS2: En lugar de buscar un tipo de dispositivo, buscan la capacidad del
dispositivo.

Las consultas de medios se pueden utilizar para comprobar muchas cosas,

tales como:

 Anchura y altura de la ventana de visualización

 Anchura y altura del dispositivo
 Orientación (es la tableta / teléfono en modo horizontal o vertical?)
 resolución

El uso de consultas de medios es una técnica popular para entregar una

hoja de estilo adaptada a tabletas, iPhone y Androids.

Sintaxis de la consulta de medios

Una consulta multimedia consta de un tipo de medio y puede contener una
o más expresiones, que se resuelven a true o false.

@media not|only mediatype and (expressions) {

CSS-Code;
}
El resultado de la consulta es true si el tipo de medio especificado coincide
con el tipo de dispositivo en el que se muestra el documento y todas las
expresiones en la consulta de medios son verdaderas. Cuando una consulta
de medios es verdadera, se aplican las reglas de estilo o de hoja de estilo
correspondientes, siguiendo las reglas de conexión en cascada normales.

A menos que utilice los operadores no o sólo, el tipo de medio es opcional y

el all tipo estará implícito.

También puede tener diferentes hojas de estilo para diferentes soportes:

<link rel="stylesheet" media="mediatype and|not|only

(expressions)"href="print.css">

Tipos de medios CSS3

Value Description

All Used for all media type devices

Print Used for printers

Screen Used for computer screens, tablets, smart-phones etc.

Speech Used for screenreaders that "reads" the page out loud

Consultas de medios Ejemplos sencillos

Una forma de utilizar consultas de medios es tener una sección CSS
alternativa dentro de su hoja de estilo.
El siguiente ejemplo cambia el color de fondo a lightgreen si la ventana es
de 480 píxeles de ancho o más ancho (si la vista es menor de 480 píxeles,
el color de fondo será de color rosa):

Ejemplo
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: pink;

@media screen and (min-width: 480px) {

body {

background-color: lightgreen;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<p>The media query will only apply if the media type is screen and the viewport is 480px wide or
wider.</p>

</body>

</html>

El siguiente ejemplo muestra un menú que flotará a la izquierda de la

página si la vista es de 480 píxeles de ancho o más ancho (si la vista es
inferior a 480 píxeles, el menú estará encima del contenido):

Ejemplo
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {

float: none;

width: auto;

}
#menulist {

margin: 0;

padding: 0;

.menuitem {

background: #CDF0F6;

border: 1px solid #d4d4d4;

border-radius: 4px;

list-style-type: none;

margin: 4px;

padding: 2px;

@media screen and (min-width: 480px) {

#leftsidebar {width: 200px; float: left;}

#main {margin-left: 216px;}

</style>

</head>

<body>

<div class="wrapper">

<div id="leftsidebar">

<ul id="menulist">

<li class="menuitem">Menu-item 1</li>

<li class="menuitem">Menu-item 2</li>

<li class="menuitem">Menu-item 3</li>

<li class="menuitem">Menu-item 4</li>

<li class="menuitem">Menu-item 5</li>

</ul>

</div>

<div id="main">

<h1>Resize the browser window to see the effect!</h1>

<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels
wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>

</div>

</div>

</body>

</html>

CSS3 @media Hacer referencia a este ítem

Para una descripción completa de todos los tipos de medios y
características / expresiones, por favor, mire la regla @media en nuestra
referencia CSS.

CSS3 Media Queries - Ejemplos

CSS3 Media Queries - Más ejemplos
Veamos algunos ejemplos más de usar consultas de medios.

Comenzaremos con una lista de nombres que funcionan como enlaces de

correo electrónico. El HTML es:
Ejemplo 1
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
}

ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
</style>
</head>
<body>

<ul>
<li><a data-
email="[email protected]"href="mailto:[email protected]">John
Doe</a></li>
<li><a data-
email="[email protected]"href="mailto:[email protected]">Mary
Moe</a></li>
<li><a data-
email="[email protected]"href="mailto:[email protected]">Aman
da Panda</a></li>
</ul>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>
ul {

list-style-type: none;

ul li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

</style>

</head>

<body>

<ul>

<li><a data-email="[email protected]" href="mailto:[email protected]">John

Doe</a></li>

<li><a data-email="[email protected]" href="mailto:[email protected]">Mary

Moe</a></li>

<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>

</ul>

</body>

</html>
Observe la data-email atributo. En HTML5, podemos usar los atributos
prefijados con data-para almacenar información. Usaremos el data-
atributo más adelante.

Ancho de 520 a 699px - Aplique un icono

de correo electrónico a cada enlace
Cuando el ancho del navegador es entre 520 y 699px, se aplicará un icono
de correo electrónico a cada enlace de correo electrónico:

Ejemplo 2
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

ul li a {

color: green;

text-decoration: none;

padding: 3px;
 display: block;

@media screen and (max-width: 699px) and (min-width: 520px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<ul>

<li><a data-email="[email protected]" href="mailto:[email protected]">John

Doe</a></li>

<li><a data-email="[email protected]" href="mailto:[email protected]">Mary

Moe</a></li>

<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>

</ul>

</body>

</html>
Ancho de 700 a 1000px - Prefacio los
enlaces con un texto
Cuando el ancho del navegador está entre 700 y 1000px, prefamaremos
cada enlace de correo electrónico con el texto "Email:":

Ejemplo 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

ul li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

}
@media screen and (max-width: 699px) and (min-width: 520px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

@media screen and (max-width: 1000px) and (min-width: 700px) {

ul li a:before {

content: "Email: ";

font-style: italic;

color: #666666;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<ul>

<li><a data-email="[email protected]" href="mailto:[email protected]">John

Doe</a></li>

<li><a data-email="[email protected]" href="mailto:[email protected]">Mary

Moe</a></li>
<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>

</ul>

</body>

</html>

Ancho por encima de 1001px - Aplicar

dirección de correo electrónico a los enlaces
Cuando el ancho del navegador es superior a 1001px, agregamos la
dirección de correo electrónico a los enlaces.

Usaremos el valor del data-atributo para agregar la dirección de correo

electrónico después del nombre de la persona:

Ejemplo 4
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}

<!DOCTYPE html>

<html>

<head>

<style>

ul {
 list-style-type: none;

ul li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

@media screen and (max-width: 699px) and (min-width: 520px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

@media screen and (max-width: 1000px) and (min-width: 700px) {

ul li a:before {

content: "Email: ";

font-style: italic;

color: #666666;

@media screen and (min-width: 1001px) {

 ul li a:after {

content: " (" attr(data-email) ")";

font-size: 12px;

font-style: italic;

color: #666666;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<ul>

<li><a data-email="[email protected]" href="mailto:[email protected]">John

Doe</a></li>

<li><a data-email="[email protected]" href="mailto:[email protected]">Mary

Moe</a></li>

<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>

</ul>

</body>

</html>
Widthabove 1151px - Agregar icono como
lo usamos antes
Para anchos de navegador por encima de 1151px, volveremos a agregar el
icono como lo usamos antes.

Aquí, no tenemos que escribir un bloque adicional de consulta de medios,

solo podemos agregar una consulta de medios adicional a nuestra ya
existente mediante una coma (esto se comportará como un operador OR):

Ejemplo 5
@media screen and (max-width: 699px) and (min-width: 520px), (min-width:
1151px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

ul li a {

color: green;

text-decoration: none;

padding: 3px;
 display: block;

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

@media screen and (max-width: 1000px) and (min-width: 700px) {

ul li a:before {

content: "Email: ";

font-style: italic;

color: #666666;

@media screen and (min-width: 1001px) {

ul li a:after {

content: " (" attr(data-email) ")";

font-size: 12px;

font-style: italic;

color: #666666;

}
</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<ul>

<li><a data-email="[email protected]" href="mailto:[email protected]">John

Doe</a></li>

<li><a data-email="[email protected]" href="mailto:[email protected]">Mary

Moe</a></li>

<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>

</ul>

</body>

</html>

Más ejemplos
Utilice la lista de enlaces de correo electrónico en una barra lateral en una
página web

Este ejemplo pone la lista de enlaces de correo electrónico en la barra

lateral izquierda de una página web.

<!DOCTYPE html>

<html>
<head>

<style>

#nav {

list-style-type: none;

#nav li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

#nav {

width: 35%;

float:left;

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

#nav li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

@media screen and (max-width: 1000px) and (min-width: 700px) {

 #nav li a:before {

content: "Email: ";

font-style: italic;

color: #666666;

@media screen and (min-width: 1001px) {

#nav li a:after {

content: " (" attr(data-email) ")";

font-size: 12px;

font-style: italic;

color: #666666;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<ul id="nav">

<li><a data-email="[email protected]" href="mailto:[email protected]">John

Doe</a></li>

<li><a data-email="[email protected]" href="mailto:[email protected]">Mary

Moe</a></li>
<li><a data-email="[email protected]"
href="mailto:[email protected]">Amanda Panda</a></li>

</ul>

<div id="main">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.

Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex

eacommodoconsequat.

Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.

Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>

</div>

</body>

</html>

Diseño Web Responsivo -

Introducción
¿Qué es el diseño web responsivo?
El diseño web responsable hace que su página web se vea bien en todos los
dispositivos.

El diseño web responsable utiliza sólo HTML y CSS.

Responsive web design no es un programa o un JavaScript.

Diseño para la mejor experiencia para todos
los usuarios
Las páginas web se pueden ver utilizando muchos dispositivos diferentes:
escritorios, tabletas y teléfonos. Su página web debe verse bien, y ser fácil
de usar, independientemente del dispositivo.

Las páginas web no deben omitir la información para adaptarse a

dispositivos más pequeños, sino adaptar su contenido a cualquier
dispositivo:
Se llama diseño web responsivo cuando se utiliza CSS y HTML para cambiar
el tamaño, ocultar, reducir, ampliar o mover el contenido para que se vea
bien en cualquier pantalla.

Diseño Web Responsivo - El

Viewport
¿Qué es The Viewport?
El visor es el área visible del usuario de una página web.

La ventana varía con el dispositivo y será menor en un teléfono móvil que

en una pantalla de computadora.

Antes de las tabletas y teléfonos móviles, las páginas web estaban

diseñadas sólo para pantallas de ordenador y era común que las páginas
web tuvieran un diseño estático y un tamaño fijo.

Entonces, cuando empezamos a navegar por Internet usando tabletas y

teléfonos móviles, las páginas web de tamaño fijo eran demasiado grandes
para caber en la ventana de visualización. Para solucionar esto, los
navegadores de esos dispositivos redujeron la página web en su totalidad
para ajustarse a la pantalla.

Esto no fue perfecto! Pero una solución rápida.

Configuración de la ventana de visualización
HTML5 introdujo un método para permitir que los diseñadores de páginas
web tomen el control sobre la ventana gráfica, a través de la <meta>
etiqueta.

Debe incluir el siguiente <meta> elemento de ventana de visualización en

todas las páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Un <meta> elemento de vista le da al navegador instrucciones sobre cómo

controlar las dimensiones y la escala de la página.

La width=device-width parte establece el ancho de la página para seguir

el ancho de pantalla del dispositivo (que variará dependiendo del
dispositivo).

La initial-scale=1.0 pieza establece el nivel de zoom inicial cuando la

página es cargada por primera vez por el navegador.

Aquí hay un ejemplo de una página web sin la metaetiqueta viewport y la

misma página web con la metaetiqueta viewport:

Sugerencia: Si está navegando por esta página con un teléfono o una

tableta, puede hacer clic en los dos enlaces siguientes para ver la
diferencia.
Contenido del tamaño al puerto de
visualización
Los usuarios se utilizan para desplazar los sitios web verticalmente tanto en
dispositivos de escritorio como en dispositivos móviles, ¡pero no
horizontalmente!

Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente, o

reducir, para ver toda la página web resulta en una mala experiencia de
usuario.

Algunas reglas adicionales a seguir:

1. NO utilice grandes elementos de anchura fija. Por ejemplo, si una

imagen se muestra con un ancho más ancho que la ventana de
visualización, puede hacer que la ventana de visualización se desplace
horizontalmente. Recuerde ajustar este contenido para ajustarse al ancho
de la ventana de visualización.
2. NO deje que el contenido dependa de un ancho de ventana de
visualización particular para renderizar bien . Dado que las
dimensiones y el ancho de la pantalla en los píxeles CSS varían
ampliamente entre dispositivos, el contenido no debe basarse en un ancho
de ventana de visualización particular para renderizar bien.

3. Utilice las consultas de medios CSS para aplicar un estilo

diferente a pantallas pequeñas y grandes . Establecer anchuras CSS
absolutas grandes para los elementos de página, hará que el elemento sea
demasiado amplio para la vista en un dispositivo más pequeño. En su lugar,
considere el uso de valores de ancho relativo, como width: 100%. También,
tenga cuidado de usar grandes valores de posicionamiento absoluto. Puede
provocar que el elemento se caiga fuera de la ventana gráfica en
dispositivos pequeños.

Diseño Web Responsivo - Grid-View

¿Qué es una vista de cuadrícula?
Muchas páginas web se basan en una vista de cuadrícula, lo que significa
que la página se divide en columnas:

El uso de una vista de cuadrícula es muy útil al diseñar páginas web. Hace
que sea más fácil colocar elementos en la página.
Una vista de cuadrícula sensible a menudo tiene 12 columnas y tiene un
ancho total del 100%, y se reducirá y se expandirá a medida que cambia el
tamaño de la ventana del navegador.

Creación de una vista de cuadrícula

responsable
Comencemos a crear una vista de cuadrícula sensible.

Asegúrese primero de que todos los elementos HTML tengan la box-sizing

propiedad establecida en border-box. Esto asegura que el acolchado y el
borde estén incluidos en la anchura total y la altura de los elementos.

Agregue el siguiente código en su CSS:

* {
box-sizing: border-box;
}

El siguiente ejemplo muestra una página web de respuesta sencilla, con

dos columnas:
Ejemplo
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{

box-sizing: border-box;

.header {

border: 1px solid red;

padding: 15px;

.menu {

width: 25%;

float: left;

padding: 15px;
 border: 1px solid red;

.main {

width: 75%;

float: left;

padding: 15px;

border: 1px solid red;

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="main">
<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

El ejemplo anterior está bien si la página web contiene sólo dos columnas.

Sin embargo, queremos utilizar una vista de cuadrícula sensible con 12

columnas, para tener más control sobre la página web.

Primero debemos calcular el porcentaje para una columna: 100% / 12

columnas = 8.33%.

Entonces hacemos una clase para cada una de las 12

columnas, class="col-"y un número que define cuántas columnas debe
abarcar la sección:

CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{

box-sizing: border-box;

.header {

border: 1px solid red;

padding: 15px;

.row::after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

border: 1px solid red;

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-9">
<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</div>

</body>

</html>

Todas estas columnas deben estar flotando a la izquierda, y tienen un

relleno de 15px:

CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}

Cada fila debe ser envuelto en un archivo <div>. El número de columnas

dentro de una fila siempre debe sumar hasta 12:

HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>

Las columnas dentro de una fila están todas flotando a la izquierda y, por lo
tanto, se sacan del flujo de la página, y otros elementos se colocarán como
si las columnas no existieran. Para evitar esto, agregaremos un estilo que
borre el flujo:

CSS:
.row::after {
content: "";
clear: both;
display: table;
}

También queremos añadir algunos estilos y colores para que se vean

mejor:

Ejemplo
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px
rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{

box-sizing: border-box;

.row::after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

html {

font-family: "Lucida Sans", sans-serif;

}

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

</style>

</head>

<body>

<div class="header">
<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-9">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</div>

</body>

</html>
Observe que la página web del ejemplo no se ve bien cuando cambia el
tamaño de la ventana del navegador a un ancho muy pequeño. En el
siguiente capítulo aprenderá a solucionarlo.

Diseño Web Responsivo - Consultas

de Medios
¿Qué es una consulta de medios?
La consulta de medios es una técnica CSS introducida en CSS3.

Utiliza la @media regla para incluir un bloque de propiedades CSS sólo si

una determinada condición es verdadera.

Ejemplo
Si la ventana del navegador es inferior a 500px, el color de fondo cambiará
a lightblue:

@media only screen and (max-width: 500px) {

body {
background-color: lightblue;
}
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

background-color: lightgreen;
}

@media only screen and (max-width: 500px) {

body {

background-color: lightblue;

</style>

</head>

<body>

<p>Resize the browser window. When the width of this document is less than 500 pixels, the
background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>

</html>

Añadir un punto de interrupción

Anteriormente en este tutorial hicimos una página web con filas y
columnas, y fue sensible, pero no se veía bien en una pequeña pantalla.

Las consultas de medios pueden ayudar con eso. Podemos agregar un

punto de interrupción donde ciertas partes del diseño se comportarán de
manera diferente en cada lado del punto de interrupción.
Utilice una consulta de medios para agregar un punto de interrupción en
768px:

Ejemplo
Cuando la pantalla (ventana del navegador) es menor que 768px, cada
columna debe tener un ancho de 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {

/* For mobile phones: */
 [class*="col-"] {
width: 100%;
}
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{

box-sizing: border-box;

.row::after {

content: "";

clear: both;

display: block;

[class*="col-"] {

float: left;

padding: 15px;

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;
 color: #ffffff;

padding: 15px;

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}
.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}
}

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-6">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

</div>
<div class="col-3 right">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

</div>

</div>

<div class="footer">

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

Diseñe siempre para móviles primero

Mobile First significa diseñar para móviles antes de diseñar para escritorio o
cualquier otro dispositivo (Esto hará que la página se muestre más rápido
en dispositivos más pequeños).

Esto significa que debemos realizar algunos cambios en nuestro CSS.

En lugar de cambiar estilos cuando el ancho se vuelve más pequeño que
768px, deberíamos cambiar el diseño cuando el ancho sea mayor que
768px. Esto hará que nuestro diseño Mobile First:

Ejemplo
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{

box-sizing: border-box;

.row::after {
 content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;
 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

/* For mobile phones: */

[class*="col-"] {

width: 100%;

@media only screen and (min-width: 768px) {

/* For desktop: */
 .col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 menu">

<ul>

<li>The Flight</li>
<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-6">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

</div>

<div class="col-3 right">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

Otro punto de interrupción

Puede agregar tantos puntos de interrupción como desee.

También insertaremos un punto de interrupción entre tabletas y teléfonos

móviles.
Hacemos esto agregando una consulta más de medios (en 600px), y un
sistema de nuevas clases para los dispositivos más grandes que 600px
(pero más pequeño que 768px):

Ejemplo
Tenga en cuenta que los dos conjuntos de clases son casi idénticos, la única
diferencia es el nombre (col- y col-m-):

/* For mobile phones: */

[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{

box-sizing: border-box;

.row::after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

.menu ul {
 list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;
 font-size: 12px;

padding: 15px;

/* For mobile phones: */

[class*="col-"] {

width: 100%;

@media only screen and (min-width: 600px) {

/* For tablets: */

.col-m-1 {width: 8.33%;}

.col-m-2 {width: 16.66%;}

.col-m-3 {width: 25%;}

.col-m-4 {width: 33.33%;}

.col-m-5 {width: 41.66%;}

.col-m-6 {width: 50%;}

.col-m-7 {width: 58.33%;}

.col-m-8 {width: 66.66%;}

.col-m-9 {width: 75%;}

.col-m-10 {width: 83.33%;}

.col-m-11 {width: 91.66%;}

.col-m-12 {width: 100%;}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

 .col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 col-m-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>
<li>The Food</li>

</ul>

</div>

<div class="col-6 col-m-9">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

</div>

<div class="col-3 col-m-12">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

</div>

</div>

<div class="footer">

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>
</body>

</html>

Puede parecer extraño que tengamos dos conjuntos de clases idénticas,

pero nos da la oportunidad en HTML , para decidir qué sucederá con las
columnas en cada punto de interrupción:

Ejemplo HTML
Para escritorio:

La primera y la tercera sección abarcarán tres columnas cada una. La

sección central abarcará 6 columnas.

Para tabletas:

La primera sección abarcará 3 columnas, la segunda cubrirá 9 y la tercera

sección se mostrará debajo de las dos primeras secciones y abarcará 12
columnas:

<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>

Orientación: Retrato / Paisaje

Las consultas de medios también se pueden utilizar para cambiar el diseño
de una página en función de la orientación del navegador.

Puede tener un conjunto de propiedades CSS que sólo se aplicarán cuando

la ventana del navegador sea más ancha que su altura, la orientación
llamada "Paisaje":

Ejemplo
La página web tendrá un fondo azul claro si la orientación está en modo
horizontal:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

background-color: lightgreen;

@media only screen and (orientation: landscape) {

body {

background-color: lightblue;

</style>

</head>

<body>

<p>Resize the browser window. When the width of this document is larger than the height, the
background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

Responsive Web Design - Imágenes

Uso de la propiedad width
Si la width propiedad está configurada en 100%, la imagen responderá y
aumentará la escala:

Ejemplo
img {
width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

img {

width: 100%;

height: auto;

</style>

</head>

<body>
<img src="img_chania.jpg" width="460" height="345">

<p>Resize the browser window to see how the image will scale.</p>

</body>

</html>

Observe que al aumentar el tamaño de la ventana del navegador la imagen

se va haciendo mas pequeña y se va ajustando hacia el centro, mientras
que al disminuir el tamaño de la pantalla la imagen se va haciendo mas
grande y abarca mas espacio.

Observe que en el ejemplo anterior, la imagen puede ampliarse para que

sea mayor que su tamaño original. Una solución mejor, en muchos casos,
será utilizar la max-width propiedad en su lugar.

Uso de la propiedad de ancho máximo

Si la max-width propiedad está establecida en 100%, la imagen se reducirá
si tiene que hacerlo, pero nunca escala hasta que sea mayor que su
tamaño original:

Ejemplo
img {
max-width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

img {
 max-width: 100%;

height: auto;

</style>

</head>

<body>

<img src="img_chania.jpg" width="460" height="345">

<p>Resize the browser window to see how the image wil scale when the width is less than
460px.</p>

</body>

</html>

Agregar una imagen a la página de ejemplo

Ejemplo
img {
width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{
 box-sizing: border-box;

img {

width: 100%;

height: auto;

.row:after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

width: 100%;

@media only screen and (min-width: 600px) {

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

 .col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

html {

font-family: "Lucida Sans", sans-serif;

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

}
.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color :#33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.footer {

background-color: #0099cc;

color: #ffffff;
 text-align: center;

font-size: 12px;

padding: 15px;

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 col-s-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-6 col-s-9">

<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<img src="img_chania.jpg" width="460" height="345">

</div>

<div class="col-3 col-s-12">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

</div>

</div>

<div class="footer">

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>
Imágenes de fondo
Las imágenes de fondo también pueden responder al cambio de tamaño y
escalado.

Aquí vamos a mostrar tres métodos diferentes:

1. Si la background-sizepropiedad está configurada para "contener", la

imagen de fondo se escalará y tratará de ajustarse al área de
contenido. Sin embargo, la imagen mantendrá su relación de aspecto (la
relación proporcional entre el ancho y la altura de la imagen):

Aquí está el código CSS:

Ejemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
 border: 1px solid red;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

div {

width: 100%;

height: 400px;

background-image: url('img_flowers.jpg');

background-repeat: no-repeat;

background-size: contain;

border: 1px solid red;

</style>

</head>

<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>

</html>
2. Si la background-sizepropiedad está configurada como "100% 100%",
la imagen de fondo se extenderá para cubrir todo el área de contenido:

Aquí está el código CSS:

Ejemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

div {

width: 100%;

height: 400px;

background-image: url('img_flowers.jpg');

background-size: 100% 100%;

border: 1px solid red;

</style>

</head>

<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>

</html>

3. Si la background-sizepropiedad está configurada como "cubierta", la

imagen de fondo se escalará para cubrir todo el área de contenido. Observe
que el valor de "tapa" mantiene la relación de aspecto, y parte de la
imagen de fondo puede ser recortada:
Aquí está el código CSS:

Ejemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}

Diferentes imágenes para diferentes

dispositivos
Una imagen grande puede ser perfecta en una gran pantalla de
computadora, pero inútil en un pequeño dispositivo. ¿Por qué cargar una
imagen grande cuando se tiene que escalar de todos modos? Para reducir
la carga, o por cualquier otro motivo, puede utilizar consultas de medios
para mostrar diferentes imágenes en diferentes dispositivos.
Aquí hay una imagen grande y una imagen más pequeña que se mostrará
en diferentes dispositivos:

Ejemplo
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

/* For width smaller than 400px: */

body {

background-repeat: no-repeat;

background-image: url('img_smallflower.jpg');

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {

body {

background-image: url('img_flowers.jpg');

</style>

</head>

<body>

<p style="margin-top:360px;">Resize the browser width and the background image will change at
400px.</p>

</body>

</html>
Puede utilizar la consulta de medios min-device-width, en lugar de min-
width, que comprueba el ancho del dispositivo, en lugar del ancho del
navegador. A continuación, la imagen no cambiará cuando cambie el
tamaño de la ventana del navegador:

Ejemplo
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */

@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

/* For device width smaller than 400px: */

body {

background-repeat: no-repeat;

background-image: url('img_smallflower.jpg');

/* For device width 400px and larger: */

@media only screen and (min-device-width: 400px) {

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

</style>

</head>

<body>

</body>

</html>

Elemento HTML5 <picture>

HTML5 introdujo el <picture>elemento, que le permite definir más de una
imagen.

El <picture>elemento funciona de forma similar a

los elementos <video>y<audio>. Se configuran diferentes fuentes, y la
primera fuente que se ajusta a las preferencias es la que se utiliza:

Ejemplo
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<picture>

<source srcset="img_smallflower.jpg" media="(max-width: 400px)">

<source srcset="img_flowers.jpg">

<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>

<p>Resize the browser width and the background image will change at 400px.</p>

</body>

</html>

El srcsetatributo es necesario y define el origen de la imagen.

El media atributo es opcional y acepta las consultas de medios que

encuentre en la regla CSS @media .

También debe definir un <img> elemento para los navegadores que no

admiten el <picture> elemento.

Responsive Web Design - Videos

Uso de la propiedad width
Si la width propiedad está establecida en el 100%, el reproductor de vídeo
responderá y escalará hacia arriba y hacia abajo:
Ejemplo
video {
width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

width: 100%;

height: auto;

</style>

</head>

<body>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

<p>Resize the browser window to see how the size of the video player will scale.</p>
</body>

</html>

Observe que en el ejemplo anterior, el reproductor de video puede

ampliarse para que sea mayor que su tamaño original. Una solución mejor,
en muchos casos, será utilizar la max-width propiedad en su lugar.

Uso de la propiedad de ancho máximo

Si la max-width propiedad está establecida en 100%, el reproductor de
vídeo se reducirá si tiene que hacerlo, pero nunca escala hasta ser mayor
que su tamaño original:

Ejemplo
video {
max-width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

max-width: 100%;

height: auto;

</style>

</head>
<body>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

<p>Resize the browser window to see how the size of the video player will scale when the width is
less than 400px.</p>

</body>

</html>

Agregar un video a la página web de

ejemplo
Queremos añadir un video en nuestra página web de ejemplo. El video se
redimensionará para ocupar siempre todo el espacio disponible:

Ejemplo
video {
width: 100%;
height: auto;
}

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

*{

box-sizing: border-box;

video {

width: 100%;

height: auto;

.row:after {

content: "";

clear: both;

display: table;

[class*="col-"] {

float: left;

padding: 15px;

width: 100%;

@media only screen and (min-width: 600px) {

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

 .col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

html {

font-family: "Lucida Sans", sans-serif;

.header {
 background-color: #9933cc;

color: #ffffff;

padding: 15px;

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

.menu li:hover {

background-color: #0099cc;

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 col-s-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>
<div class="col-6 col-s-9">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

</div>

<div class="col-3 col-s-12">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

Diseño Web Responsivo - Marcos

Existen muchos frameworks CSS existentes que ofrecen diseño
responsivo.

Son gratuitos y fáciles de usar.

Uso de W3.CSS
Una gran manera de crear un diseño de respuesta, es utilizar una hoja de
estilo de respuesta, como W3.CSS

W3.CSS facilita el desarrollo de sitios que se ven bien en cualquier

tamaño; Escritorio, computadora portátil, tablet o teléfono:
Ejemplo
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"href="https://www.w3schools.com/w3css/4/w3.c
ss">
<body>

<div class="w3-container w3-green">

<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
 <h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in
Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

<div class="w3-container w3-green">

<h1>W3Schools Demo</h1>

<p>Resize this responsive page!</p>

</div>

<div class="w3-row-padding">

<div class="w3-third">

<h2>London</h2>
<p>London is the capital city of England.</p>

<p>It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

</div>

<div class="w3-third">

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

<p>The Paris area is one of the largest population centers in Europe,

with more than 12 million inhabitants.</p>

</div>

<div class="w3-third">

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

<p>It is the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.</p>

</div>

</div>

</body>

</html>

Bootstrap
Otro framework muy popular es Bootstrap, esteusa HTML, CSS
yjQueryparahacerpaginas web responsive.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3
.7/css/bootstrap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min
.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.
min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>
<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<div class="jumbotron">

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<div class="row">

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<div class="col-sm-4">

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>
<div class="col-sm-4">

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

</div>

</div>

</body>

</html>