BACKGROUND

Compatibilidad browsers
Podemos usar webkit-, -mz-, -oBackground
Sintaxis abreviada:
background: color image repeat origin clip

attachment position/size

Ej.
background: #00ff00 url("smiley.gif") no-repeat fixed center;
background: url(smiley.gif) 10px 20px/50px 50px;
// 10px y 20px el la posicin respecto al top y left , 50px es el ancho y alto (se separar por / barra)
Background-color
Background-image

Background-clip
Backgroundattachment

Color de fondo
url de uno o varios fondos
separados por comas
Si las imgenes se repetiran
Referencia desde donde se inicia a
pintar el fondo
Especifica el rea a pintar
Si el fondo se desplaza o queda
fijado al hacer scroll en la pgina

Backgroundposition

Posicin del fondo respecto a la

caja contenedora

Background-size

Tamao del fonso

Background-repeat
Background-origin

#00ff00
url(fondo.gif, fondo2.gif)
Repeat, repeat-x. repeat-y, no-repeat
border-box, padding-box, content-box
border-box, padding-box, content-box
+Scroll (se desplaza con el contenedor), +fixed
(fijada en el browser),
+local (se desplaza con todos los contenidos)
+usando top, left, right, center, bottom
p.ej. top left (eje x eje y)
+usando %: p.ej. 40% 30%
+ usando px: p.ej. 5px 10px
+auto (por defecto): dimensiones reales
+px : se especifica tamao (p.ej. 100px 49px)
+%: si se ajusta 100% 100% el fondo se ajusta a
la caja
+cover: escala la imagen para ocupar todo el
ancho, algunas partes no se vern.
+contain: escala la imagen en ancho y altura,
toda la imagen se ver pero puede quedar
distorsionada (es lo mismo que ajustar a 100%
100%)

Algunos ejemplos
html {
background: url(../img/background.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}

//tambin p.ej. background-size: 100% 100%;

CAJAS: Propiedades bsicas

Dimensiones / Margen externo e interno
width, height
max-width, min-width
max-height, min-height
Margin
Margin-top, bottom, left,
right
Padding
Padding-top, bottom, left,
right

Altura y anchura
Mrgenes externos
Mrgenes internos

Borde de los lados

Etiqueta conjunta
Sintaxis
DOM
Etiquetas individuales
Propiedades
Ej

Border, border-bottom, border-top, border-left, border-right

Border: border-width, border-style, border-color
object.style.border="3px solid blue"
Border-bottom-width, border-bottom-style, border-bottom-color
As con top, left y right tambin
Border-width: ancho
Border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
Border-color: color
border: 5px solid red;

Borde con imgenes de los lados

Etiqueta
Sintaxis
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
Compatibilidad
Ej

Border-image
border-image: source slice width outset repeat;
url de la imagen
Parte interior: valor como px, % o fill
La anchura de la imagen
Cunto debe extenderse la imagen fuera del borde (valor nmero o px)
Repeticin de la imagen (Valores: stretch, repeat, round, space)
Con webkit- -o- -mozborder-image: url(border.png) 30 30 round;
border-image-outset: 15px;
background-repeat: repeat-y;

Borde de las esquinas

Etiqueta conjunta
Etiquetas individuales

Border-radius
Border-top-radius, border-bottom-left-radius, border-top-right-radius, etc

Valor
Ej.

Un nmero de 0-1 / % tanto por ciento / otros valores como em o px

border-radius: 2em;
border-top-radius: 25px;
border-top-left-radius: 75%;

Segundo borde
Etiquetas

Outline: creacin segundo borde con mismas propiedades que border

outline-offset: indica la separacin entre los 2 bordes.
border: 2px solid black;
//primer border
outline: 2px solid red;
// segundo border
outline-offset: 15px;
// distancia de separacin entre ellos

Ej.

Sombras
Etiqueta conjunta
Sintaxis
Propiedades
Compatibilidad
Mltiples sombras
Ej.

Box-shadow
box-shadow: h-shadow v-shadow blur spread color |inset
Sombra horizontal, vertical, desenfoque, extensin color
Inset: la sombra se proyectar hacia el interior
webkit- -o- -mozPosibilidad de indicar varias sombras separndolas por comas
box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888, 8px 8px 4px #fff, 5px 5px 3px #f00; ?

CAJAS: Otras propiedades

Display: comportamiento de las cajas
Etiqueta
Propiedades

Display
+ Inline: en linea (como span)
+ block: como bloque (como p)
+ inline-block: la caja se considera block y sus elementos como inline.
+ run-in: block o inline segn contexto
+ flex: caja flexible
+ inline-flex: caja flexible en linea
+ list-item: como <li>
+ inline-table, table, table-caption, table-column-group, table-header-group, table-footergroup, table-row-group, table-cell, table-column, table-row: como elementos de una tabla
+ none: la caja no se dibuja.

Display-flex: comportamiento flexible de las cajas

Etiqueta
Align-content

Display: flex;
Alineacin de los elementos verticalmente.
Cuando existen tantos elementos que se distribuyen en varias lineas.
Valores:

Align-items
Align-self
Justifycontent

Flex
(Flex-grow
Flex-shrink
Flex-basis)

Flex-flow
(Flexdirection
Flex-wrap)

Order

+ Stretch (default): los elementos se encojen para ajustarse a la caja.

+ center: alineacin central.
+ flex-start, flex-end: alineados al principio o final.
+ space-between: con espacios entre elementos pero no al principio y al final
+ space-around: espacios al principio, final y entre elementos.
Alineacin por defecto de los elementos en una caja
+ Valores: stretch, center, flex-start, flex-end, baseline.
Sobreescribe individualmente el comportamiento por defecto indicado con align-items
Valores: auto, stretch, center, flex-start, flex-end, baseline.
Alineacin de los elementos horizontalmente.
Valores:
+ center: alineacin central.
+ flex-start (por defecto), flex-end: alineados al principio o final.
+ space-between: con espacios entre elementos pero no al principio y al final
+ space-around: espacios al principio, final y entre elementos.
Especifica directamente las propiedades flex-grow, flex-shrink y flex-basis.
Sintaxis>> flex: flex-grow flex-shrink flex-basis|auto
Ej. Flex: 1; (todos los elementos sern igual de grandes a pesar de su contenido)
Flex: 1 0 auto; (esto es lo mismo que el anterior)
+ Flex-grow: agrandar un elemento respecto al resto. Valor: un nmero entero.
+ Flex-shrink: reducir un elemento.
+ Flex-basis: tamao inicial.
Establece directamente propiedades direction y wrap
Sintaxis>> flex-flow: flex-direction flex-wrap.
+ flex-direction:
Direccin de los elementos en linea o columna.
flex-direction: row|row-reverse|column|column-reverse
+flex-wrap:
Si los elementos pueden desbordarse en otras lineas.
flex-wrap: nowrap|wrap|wrap-reverse
Orden de los elementos
Valor: un nmero que especifica el orden.
Ej. order: 2;

Redimensionar por el usuario

Etiqueta
Propiedades

Resize (si un usuario puede redimensionar una caja)

Both, vertical, horizontal
div { resize: both;
overflow: auto; }

Contenido de la caja
Etiqueta
Propiedades

Box-sizing (indica qu debe contener la caja)

+ Content-box: el ancho y alto de las cajas contendrn slo el contenido, no el border,
padding o margin.
+ Border-box: el ancho y alto de la caja contendr el contenido, el borde y el padding, no
el margin.

Ej

div { -moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box;
width: 50%;
float: left; }

Desbordamiento de contenido
Etiquetas
Propiedades

Overflow, overflow-x, overflow-y

Visible: el contenido se ver, la caja se hace ms grande.
Hidden: el contenido no se ver, la caja permanece con su tamao.
Scroll: se aade un scroll al contenido, la caja permanece igual tamao.
Auto: en el caso de desbordamiento se aade scroll.

Recortar contenido con desbordamiento

Etiquetas
Sintaxis
Propiedades
Nota
Ej

Clip
clip: rect(alto px, derecha, abajo, izq)
Slo rect
La propiedad overflow debe estar ajustada a visible
img {
position: absolute;
clip: rect(0px,60px,200px,0px); }

Opacidad
Etiqueta
Valor
DOM
Compatibilid
ad
Ej

Opacity
Nmero
object.style.opacity= 0.5
document.getElementById("myDIV").style.opacity = "0.5";
Para IE8: filter:Alpha(opacity=50)
Opacity: 0.5;

Visibilidad
Etiqueta

Propiedades

Visibility : visibilidad de un elemento (se reserva el espacio del elemento aunque no se

vea)
Tambin podemos usar Display: none >> el elemento html no se ejecuta y por tanto no se
reserva espacio en la pantalla.
Visibility: visible, hidden

Posicionamiento elementos
Etiqueta
Propiedades

Colocar elementos
posicionados

Position
Static (default): los elementos fluyen segn su orden en el cdigo html
Relative: caja se posiciona respecto a su posicin normal (como static)
Absolute: respecto a su primera caja padre posicionada (diferente de static)
Fixed: respecto al navegador
Top, right, bottom, left
Ej. Div{ positon: absolute; left: 15px}

Flotar elementos
Etiqueta
Propiedades
Impedir flotar
Ordenar elementos
flotantes superpuestos

Float
Left, right, both
Clear propiedades (left, right, both)
z-index

Alineacin vertical
Etiqueta
Propiedades

Vertical-align
+Baseline (default): se alinea con la base del elemento padre
+length: valor positivo o negativo (px, %, em)
+sub, super: como si fuera un subscript, superscript ?
+top, middle, bottom: respecto al elemento padre.
+text-top, text-bottom: respecto a la fuente del elemento padre.

TEXTO
Recomendacin unidad en el tamao del texto
- W3C recomienda utilizar em porque permite el redimensionamiento adecuado en los navegadores.
- El tamao normal de los browser es 16px, por tanto para calcular em, em=pixels/16
- Para compatibilizar en browser antiguos se recomienda ajustar con CSS el body as:
body{ font-size: 100%;}

Texto en columnas (Multiple columns)

Columns
column-gap
column-rule
Column-fill
Columnspan

Especifica ancho y nmero de columnas

Ancho del espacio entre columnas
Estilo de la regla entre columnas (ancho, estilo
y color)
Cmo rellenar las columnas
Cuntas columnas se expande un elemento

Por separado: column-width, column-count

Por separado: column-rule-color, columnrule-style, column-rule-width
Auto: las columnas se rellenan
secuencialmente, pueden ser distintas.
Balance: se intenta equilibrar las columnas.
Valor: p.ej. 2 significa que se expande dos
columnas.
All: se expande por todas las columnas

Ej:
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 3px outset #ff00ff; /* Firefox */
column-rule: 3px outset #ff00ff;

Propiedades bsicas

Color

Letter-spacing
Word-spacing
Line-height
Text-align
Text-align-last
Text-justify
Text-indent
Text-transform

White-space

Word-wrap
Text-overflow

+ Color del texto.

+ Valor: Nombre_color, hexadecimal, rgb
+ Ej.
color: red;
color: #00ff00;
color: rgb(0,0,255);
Espacio entre caracteres
Espacio entre palabras
Espacio entre lineas de texto
+ Text-align: Alineacin horizontal de un texto.
Valores: left, right, center, justify.
+ Text-align-last: Alineacin ltima linea cuando text-align es justify.
+ Text-justify: Mtodo de justificacin (text-align: justify;)
Valores: auto, inter-word, inter-ideograph, inter-cluster, distribute, kashida, trim, none.
Indentacin de la primera linea de un texto
Control de maysculas
Valores:
+ none: se respetan las maysculas del texto html.
+ capitalize: mayscula la primera letra de cada palabra.
+ uppercase: todo a maysculas.
+ lowercase: todo a minsculas.
Como manejar los espacios en blanco y saltos de linea escritos en el texto html.
Segn la propiedad varios espacios en blanco se respetarn o se convertirn slo en un
nico espacio.
Los saltos de linea se harn automticamente cuando sea necesario y tambin se
pueden o no respetar los que se hayan indicado en el cdigo html.
Valores:
Varios espacios
Salto de linea
Normal Colapsan a uno
Automtico
Nowrap Colapsan a uno
Sin salto de linea.
Pre
Se respetan los del html
Sin salto de linea pero se respetan los del
html
Pre-line Colapsan a uno
Automtico y se respetan
PreSe respetan
Automtico y se respetan
wrap
Posibilidad de salto de linea en palabras largas que sobrepasen su caja.
Valores: Normal (sin salto) y break-word (con salto de linea)
Que ocurre si el texto no cabe en una caja
Valores:
+ clip (por defecto): se corta
+ ellipsis: se aaden 3 puntos () indicando que el texto segua.

Decoracin del texto (Text decoration)

text-decoration
text-decoration-line
text-decoration-

Atajo para indicar el color, line y style pero es incompatible en la mayora de

navegadores.
Tipo de subrayado.
Valores: None, underline, overline, line-through
Color del subrayado.

color
text-decoration-style Estilo del subrayado.
Valores: solid, double, dotted, dashed, wavy.
text-underlinePosicin del subrayado con underline
position
Valores: auto, under, left, right, under left, under right
Auto: normal, under: sin cortar el texto, left y right para textos en vertical.
Text-shadow
Texto con sombra

INTERFAZ DE USUARIO (Basic user Interface)

Cursor
+ Por defecto: auto (el que cree oportuno el navegador), default (cursor por defecto del navegador).
+ Ninguno: none (desaparece)
+ Personalizado: cursor: url1, url2 , por defecto;
Ej.
Div { cursor: url(smiley.gif), url(myBall.cur), auto; }
+ Automticos: all-scroll, cell, context-menu, col-resize, copy, crosshair, e-resize, ew-resize, grab, grabbing,
help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, not-allowed, pointer,
progress, row-resize, text, vertical-tex, s-resize, w-resize, wait, zoom-in, zoom-out

PSEUDO CLASSES
Sintaxis
selector:pseudo-class {
property:value;
}

Links
Etiquetas
Se aplica al elemento <a>
Deben ir en el orden de la
derecha.
Tipos:
Link: enlace sin visitar
Visited: enlace visitado
Hover: el cursor pasa por encima
Active: enlace seleccionado
(clic?)

a:link, a:visited, a:hover,

a:active
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}

Input
Etiquetas
Ej

Checked, disabled, enabled, focus, in-range, invalid, optional, out-of-range, read-only, read-write,
Required, valid
Input:checked

Target
Etiqueta
Fin
Ej

:target
Selecciona un elemento al que se ha ido a travs de un Anchor
#news:target{ cdigo }
Si el elemento id=news es activado desde un Anchor, le aplicamos un cdigo.

Seleccionar segn etiqueta

Selector

Example

Example description

:empty
:first-child
:first-of-type
:last-child
:last-of-type
:not(selector)
:nth-child(n)
:nth-last-child(n)

p:empty
p:first-child
p:first-of-type
p:last-child
p:last-of-type
:not(p)
p:nth-child(2)
p:nth-last-child(2)

:nth-last-oftype(n)
:nth-of-type(n)

p:nth-last-oftype(2)
p:nth-of-type(2)

:only-of-type
:only-child
:root

p:only-of-type
p:only-child
root

Selects every <p> element that has no children

Selects every <p> elements that is the first child of its parent
Selects every <p> element that is the first <p> element of its parent
Selects every <p> elements that is the last child of its parent
Selects every <p> element that is the last <p> element of its parent
Selects every element that is not a <p> element
Selects every <p> element that is the second child of its parent
Selects every <p> element that is the second child of its parent,
counting from the last child
Selects every <p> element that is the second <p> element of its
parent, counting from the last child
Selects every <p> element that is the second <p> element of its
parent
Selects every <p> element that is the only <p> element of its parent
Selects every <p> element that is the only child of its parent
Selects the document's root element

Ejemplos
+ Selecciona el primer <i> dentro de todos los <p>
p i:first-child {
color: blue;
}
+Selecciona todos los <i> dentro de todos los primeros elementos de <p>
p:first-child i {
color: blue;
}

PSEUDO ELEMENTS
Sintaxis
selector::pseudo-element {

property:value;
}

Tipos
Selector

Example

Example description

::after
::before
::firstletter
::first-line
::selection

p::after
p::before
p::firstletter
p::first-line
p::selection

Insert content after every <p> element

Insert content before every <p> element
Selects the first letter of every <p> element
Selects the first line of every <p> element
Selects the portion of an element that is selected by a
user

Ej
+ Seleccionar la primera linea de texto en todos los elementos <p>
y aplica el css indicado.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}

+ Selecciona la primera letra de la clase intro (class=intro) dentro de etiqueta <p>

p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
+ Inserta una imagen antes de cada etiqueta <h1>
h1::before {
content: url(smiley.gif);
}
+ Resalta el texto seleccionado
::selection {
color: red;
background: yellow;
}

Personalizar css segn medios (Media Queries)

-Uso: consulta del medio para adaptar las reglas CSS
-Medios reconocidos en CSS 2.1:
1.
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
2.
<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />
-3 medios en CSS 3.0:
1.Utilizar regla @import dentro del cdigo HTML:
@import url(style600min.css) screen and (min-width: 600px);
//Podemos utilizar los nexos AND y OR
2.Incluir consulta dentro del enlace a vnculo externo del cdigo HTML:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)"
href="style800.css" />
3.Incluir consulta dentro del cdigo CSS:
#nav{
float: right;
}
#nav ul{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait){
#nav li{
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px){
#nav{
width: 200px;
}
#nav li{
float: left;
margin: 0 0 0 .5em;
border: none;
}
}
Dado que el cdigo CSS se aplica en cascada, primero definimos los valores por defecto, y luego
aplicamos otras reglas segn consultemos la forma en que se visualiza la web.

-Listeners de Consultas de Medios

API proporcionada por Firefox y i.e. 10 para informar de los cambios de medios.
Ms informacin en la web IE test drive sobre media query listeners
-Viewport
Para saber la resolucin autntica del medio, ya que el navegador de los smartphone de forma
particular juegan con las resoluciones para mostrar de forma ptima las pginas web.
Para ello introducimos una etiqueta META que iguala la anchura con la anchura del medio.
<meta name="viewport" content="width=device-width">

Recomedacin en medidas de texto

-Deberamos usar medidas en % o medidas en em (basada en el punto de la fuente y el
contexto), en vez de en pixeles
-Frmula para calcular el em : target / contexto = resultado en em
-Para medidas en % igual con escala de 0 a 100, lo podemos calcular con una sencilla regla de 3
-Ejemplo:
Tenemos ajustada el <body> a 16 px, y queremos ajustar un <h1> dentro de l a 24px y dentro
de este <h1> tenemos un enlace <a> que queremos que tenga 12px.
Para pasar el <h1> a em sera: 24 / 16 = 1.5em y la <a> sera 12 / 24 = 0.5em
Y en %: para <h1> 16x100/24 = 150% y <a> 12x100/24 = 50%
Quedara entonces:
body{
font-size: 16px;
}
h1{
font-size: 1.5em; // tambin font-size: 150%; Es decir 16x100/24=150
}
h1 a{
font-size: 0.5em; // tambin font-size: 50%; Es decir 12x100/24
}

3. Grid Layout (Cuadrcula flexible)

-Estructura HTML ser una cabecera y 3 bloques de texto:
<div id="mygrid">
<header id="myheader">
<h1>Hello world</h1>
</header>
<div id="block1">
<h2>Lorem Ipsum section 1</h2>
<p>
Phasellus venenatis sem vel velit tincidunt tincidunt.
Curabitur gravida, ante sit amet [... ...]

</p>
</div>
<div id="block2">
<h2>Lorem Ipsum section 2</h2>
<p>
Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
Suspendisse [... ...].
</p>
</div>
<div id="block3">
<h2>Lorem Ipsum section 3</h2>
<ul>
<li>Curabitur ultrices tristique purus, sed pellentesque
magna scelerisque ut.</li>
<li>[... ...] </li>
</ul>
</div>
</div>
-Cdigo CSS (para visualizar en un smartphone)
Nota: ponemos ms- porque por ahora slo est implementado en el explorador ie 10.0 fecha?
@media only screen and (max-width : 480px) {
#mygrid {
display: -ms-grid;
margin: 3px;
-ms-grid-columns: 100%; /*one column taking full width */
-ms-grid-rows: 70px auto auto auto; /*4 rows */
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#block1 {
-ms-grid-row: 2; /*place into row 2 / column 1*/
-ms-grid-column: 1;
}
#block2 {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
#block3 {
-ms-grid-row: 4;
-ms-grid-column: 1;
}

-Cdigo CSS (para visualizar en medios con ancho de pantalla superior a 481px)
481px lo tomamos como el ancho normal del smartphone.
Creamos 2 columnas y ampliamos el header
@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 -- just because we can*/
#mygrid {
display: -ms-grid;
-ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
-ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction of available
space*/
margin: 5px;
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
background-color: #EEB215;
}
#block1 {
-ms-grid-row: 2;
-ms-grid-column: 2;
background-color: #B2B0B0;
}
#block2 {
-ms-grid-row: 3;
-ms-grid-column: 2;
background-color: #726E6E;
}
#block3 {

-ms-grid-row: 2; /*block 3 can go into row 2*/

-ms-grid-column: 4;
background-color: #515050;
}
}

-Cdigo CSS para pantallas de ancho superior a 1220 px

Definimos una cabecera ancha con 3 columnas y entre ellas una columna de 10px
@media only screen and (min-width: 1220px) {
#mygrid {
display: -ms-grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
-ms-grid-rows: 100px 1fr;
margin: 5px;
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
background-color: #EEB215;
}
#block1 {
-ms-grid-row: 2;
-ms-grid-column: 1;
background-color: #B2B0B0;
}
#block2 {
-ms-grid-row: 2;
-ms-grid-column: 3;
background-color: #726E6E;
}

#block3 {
-ms-grid-row: 2;
-ms-grid-column: 5;
background-color: #515050;
}
}

4. Flexbox (caja flexible)

-Caract.:
+Objetivo: compatibilidad de los modelos de cajas o contenedores en los distintos
dispositivos actuales (mviles, monitores)
+Pensado para componentes de una web, no su totalidad (aqu diseamos con Grid
Layout)
-Antigo modelo de cajas en CSS 2.1: era display con block, inline, table o position.
-Etiqueta actual:
display:flex
-Etiqueta con compatibilidad en exploradores:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex

-inline-flex: se comportar igual que display: inline , si no se pone esta opcin se comportar
como block
display: inline-flex;
display: -webkit-inline-flex;
-flex-flow: indica como se alinearn los elementos dentro del contenedor
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
(row significa que se alinearn en fila)
Tambin podramos haberlo hecho en dos pasos con flex-direction y flex-wrap
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
flex-wrap: wrap;

-webkit-flex-wrap: wrap;
-Opciones flex-direction (indica si el flujo ser horizontal o vertical)
row: se alinea en filas (es decir horizontalmente)
row-reverse: en filas con orden inverso
column: en columnas (Verticalmente, p.ej. para mviles)
column-reverse: en columnas con orden inverso.
Personalizar flex-direction segn el ancho del navegador:
@media all and (max-width: 500px) {
#viajes {
flex-direction: column;
-webkit-flex-direction: column; }
}
(logramos que cuando baje de 500px el flujo se convierte en columna, es decir vertical)
-Opciones flex-wrap (indica si el contenedor tendr una sola lnea o multiples)
Nowrap: una sola lnea
Wrap: mltiples lineas
Wrap-reverse: mltiples lneas en orden inverso.
-Propiedad order (orden de los elementos)
Por defecto todos son order: 0
Si pusieramos a alguno -1, se ira el primero de todos.
Ej. para ajustar el orden en dos cajas identificadas por su etiqueta class:
.uno {
order: 1;
-webkit-order: 3;
}
.dos{ a ste por ejemplo le ponemos otro orden
Otro ej. (la imagen contenida en la etiqueta img dentro del elemento se colocar al principio de
todo)
.viajes-item > img {
order: -1;
-webkit-order: -1;
}
-Propiedad flex (indica como crece o decrece un elemento flexible respecto a los otros)
Si todos tienen valor 1, sern iguales, si uno tiene valor 2, este elemento ser el doble de ancho
que el resto.
Ej.
.uno {
flex: 1;
-webkit-flex: 1;
}
-Justify-content (indicamos la alineacin del eje horizontal)

flex-start: se distribuyen todos pegados al inicio.

flex-end: se distribuyen todos pegados al final.

center: se distribuyen todos alineados al centro.

space-between: se distribuyen ocupando todo el espacio disponible, con

separaciones iguales entre ellos, pero sin dejar espacio al inicio y al final.


space-around: se distribuyen ocupando todo el espacio disponible, con separaciones
iguales entre ellos, dejando espacio al inicio y al final.
Align-items y Align-self (indicamos alineacin eje vertical)
Align-items: establece el valor por defecto para todos.
Align-self: sobre-escribe el valor por defecto en elementos individuales.
Valores: auto (slo para align-self), flex-start, flex-end, center, baseline, stretch
Centrar una caja Flexible

.vertical-centered-text {
-ms-display: flex;
display: flex;
align-items: center;
justify-content: center;
}

/* alineacion vertical */
/* alineacion horizontal */

NOTAS:
Elementos que no funcionarn dentro de un contenedor flexible: float, clear, column-align,
vertical-align.
Firefox 28 no soporta flex-wrap
En IE 8 y 9 no funciona.
Programa Autoprefixer compatibiliza el cdigo css a muchos navegadores.
Ej.
a{
display:
display:
display:
display:
display:

-webkit-box;
-webkit-flex;
-moz-box;
-ms-flexbox;
flex

5. Multi-column Layout Module

(sin estudiar)

6. Imgenes y contenido multimedia flexible

a.Propiedad max-width:100%
Conseguimos que el navegador comprima o expanda la imagen segn tamao del
contenedor.
Cdigo:
img, object {
max-width: 100%;
}
b.Propiedad overflow:hidden
Conseguimos que la imagen no se desborde cuando se cambia el tamao del contenedor,
es decir, que no se salga de su contenedor.

Con hidden en vez de salirse la imagen se recorta.

@FONT-FACE (Insertar fuente)

@font-face {
font-family: "mifuente";
src: url(../misfuentes/archivofont.ttf) format("truetype");
/*para fuentes otf como sigue*/
src: url(path/fuente.otf) format(opentype);
}
#divEjemplo {
color: #000;
font-family: "mifuente";
font-size:13px;
}
@font-face {
font-family: 'Akronim';
src: url('fonts/Akronim-Regular.eot'); /* Para Internet Explorer */
src: local('Akronim'), /* Para el resto de navegadores */
url('fonts/Akronim-Regular.ttf') format('truetype'),
url('fonts/Akronim-Regular.woff') format('woff'),
url('fonts/Akronim-Regular.svg') format('svg') }
Google font directory
<LINK rel=stylesheet type=text/css href="http://fonts.googleapis.com/css?family=Akronim">
font-family: 'Akronim', cursive;

GRADIENTS
1. LINEAR GRADIENT
-Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
-Direction:
+Dando la direccin: to bottom, to top, to right, to left, to bottom right, etc.
+Dando un ngulo: 150deg
-top>bottom
#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, blue); /* Standard syntax */
}
-left > right
#grad {
background:
background:
background:
background:
}

-webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */

-o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
-moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
linear-gradient(to right, red , blue); /* Standard syntax */

-top left > bottom right

#grad {
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
-Using angle (especificamos un ngulo concreto)
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
-Multiple colors
#grad {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}
-Ejemplo background con el arcoiris
#grad {
/* 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);
}

-Transparency:
usamos funcin rgba(R,G,B,transparencia) donde transparencia va del 0 al 1
#grad {
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*/
}
-Especificar la cantidad de color:
#grad {
/* 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%);
}

2. RADIAL GRADIENTS
-Syntax:
background: radial-gradient(shape size at position, start-color, ..., last-color);
-Normal radial gradient
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
-Especificando cantidad color (si no se especifica cantidad coge el espacio sobrante)
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}
-Con formas (2 opciones circle o ellipse)
#grad {
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 */

}
-Especificando tamao (4 valores: closest-side, farthest-side, closest-corner, farthest-corner)
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}

TEXT-SHADOW (Sombreado de textos)

-Sintaxis:
text-shadow: desplazamientoX desplazamientoY radio-de-desenfoque color;
-Sombra simple
text-shadow: 3px 3px 5px #f00;
-3D
Se va creando un escalado de capas de mayor pixeles y cambiando el color
text-shadow: 3px 3px 5px #f00,
6px 6px 5px #0f0,
9px 9px 5px #00f;

BOX-SHADOW (Sombreado de cajas)

-Sintaxis:
text-shadow: desplazamientoX desplazamientoY radio-de-desenfoque color;
-Sombra simple:
box-shadow: 10px 5px 5px #888888;
-Compatibilidad:
anteponiendo -moz, -ms, -o. -webkit

MENU SENCILLO
menu.html
+++++++

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Men</title>
<link rel="stylesheet" href="menu-estilo.css" type="text/css" />
</head>
<body>
<header id="botonera">
<nav id="botonera-2">
<menu>Home</menu>
<menu>Noticias</menu>
<menu>Facebook</menu>
<menu>Twitter</menu>
<input placeholder="Buscar... " type="search" name="buscar" id="buscar"/>
<input type="submit" value="Buscar" id="submit" />
</nav>
</header>
</body>
</html>
men-estilo.css
+++++++++++
body{
background:#666;
}
#botonera{
width:98%;
margin:10px auto;
height:60px;
background:none;
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
border: 10px solid rgba(255,255,255,0.3);
//borde transparente
}
#botonera-2{
border-radius:3px;
width:100%;
height:60px;
margin:0px;
background:linear-gradient(#CCC 0%, #333 100%);
//relleno gradiente
background:-moz-linear-gradient(#CCC 0%, #333 100%);
background:-ms-linear-gradient(#CCC 0%, #333 100%);
background:-o-linear-gradient(#CCC 0%, #333 100%);
background:-webkit-linear-gradient(#CCC 0%, #333 100%);

}
menu{
display:inline-block;
width:100px;
text-align:center;
margin:10px auto;
background:none;
color:#fff;
font:bold;
padding:10px;
}
menu:hover{
background:-moz-linear-gradient(#FFF 0%, #C4C4C4 100%);
background:linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-ms-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-o-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-webkit-linear-gradient(#FFF 0%, #DEDEDE 100%);
opacity:0.6;
-moz-opacity:0.6;
//vuelve semitransparente
-o-opacity:0.6;
-webkit-opacity:0.6;
-ms-opacity:0.6;
border-radius:5px;
//redondea
color:red;
//cambia letra a rojo
box-shadow:0 0 10px #FFf;
//sombrea
-moz-box-shadow:0 0 10px #FFf;
-ms-box-shadow:0 0 10px #FFf;
-o-box-shadow:0 0 10px #FFf;
-webkit-box-shadow:0 0 10px #FFf;
}
#buscar{
background:#fff;
border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-right:0px;
border:solid 0px #DEDEDE;
color:#999;
padding:6px;
width:150px;
position:relative;
display:inline-block;
margin-left:50px;
margin-top:15px;
vertical-align:top;
}
#buscar:focus{
box-shadow:0 0 15px #09F;
-moz-box-shadow:0 0 15px #09F;
-ms-box-shadow:0 0 15px #09F;
-o-box-shadow:0 0 15px #09F;
-webkit-box-shadow:0 0 15px #09F;
}
#submit{
padding:5px;
width:70px;
margin-top:15px;
border-bottom-right-radius:10px;
border-top-right-radius:10px;

display:inline-block;
position:absolute;
border:0px;
background:url(buscar.png);
vertical-align:top;
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

TRANSPARENCIAS
1- CSS3 y la etiqueta background-color: propiedad Opacity o RGBA:
background-color: rgb(0,0,255); opacity: 0.5;
background-color: rgba(0,0,255,0.5);
2- CSS3 y una imagen de fondo:
+Mtodo ms compatible con navegadores, versiones
+Realizamos una imagen de 1px x 1px (de este tamao p.ej.)
de un nico color y con una capa con poca opacidad y guardamos como PNG (para conservar opacidad)
+En CSS la llamamos con background-image:imagen.png y sta se repetir hasta llenar el fondo Div.
+++++++++++++++++++++++++++++++++++

LIGHTBOX Y GALERIA DE IMGENES

Index.htlm
+++++++
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Galera</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header class="header">
<hgroup>
<h1>Mi galeria</h1>
<h2>Galeria hecha con CSS3 y HTML5</h2>
</hgroup>
</header>
<section class="section">
<article class="article">

<figure>
<a href="#img1" title=""><img src="images/montaas verdes.jpg" alt=""></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
labore et dolore magna aliqua.</figcaption>
</figure>
</article>
<article class="article">
<figure>
<a href="#img2" title=""><img src="images/paisaje1.jpeg" alt=""></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
labore et dolore magna aliqua.</figcaption>
</figure>
</article>
<article class="article">
<figure>
<a href="#img3" title=""><img src="images/paisaje2.jpg" alt=""></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
labore et dolore magna aliqua.</figcaption>
</figure>
</article>
<article class="article">
<figure>
<a href="#img4" title=""><img src="images/paisajes del mundo.jpg" alt=""></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
labore et dolore magna aliqua.</figcaption>
</figure>
</article>
<article class="article">
<figure>
<a href="#img5" title=""><img src="images/Paisajes-naturales.jpg" alt=""></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
labore et dolore magna aliqua.</figcaption>
</figure>
</article>
<article class="article">
<figure>
<a href="#img6" title=""><img src="images/playa.jpg" alt=""></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
labore et dolore magna aliqua.</figcaption>
</figure>
</article>
</section>
<footer class="footer">
<h5>&copy; Kevin Sorto </h5>
</footer>
</body>
</html>
base.css
++++++
body{
background: #415363;
}
a{
text-decoration: none;
}

tempor incididunt ut

tempor incididunt ut

tempor incididunt ut

tempor incididunt ut

tempor incididunt ut

tempor incididunt ut

.header,
.footer{
width: 700px;
margin: 0 auto;
padding: 15px 30px;
}
.header hgroup h1{
margin: 0;
padding: 5px 0;
color: rgb(220,220,220);
text-shadow: 0 0 2px rgb(0,0,0);
font-size: 40px;
border-bottom: double 1px rgb(220,220,220) ;
}
.header hgroup h2{
margin:5px 0;
color: rgb(220,220,220);
text-shadow: 0 0 2px rgb(0,0,0);
font-size: 22px;
}
.footer{
text-align: center;
}
.footer h5{
margin:5px 0;
color: rgb(220,220,220);
text-shadow: 0 0 2px rgb(0,0,0);
font-size: 15px;
}
.section{
width: 700px;
margin: 0 auto;
padding: 15px 30px;
border-radius: 4px;
border: solid 1px rgba(250,250,250,0.8);
box-shadow: 0 0 15px rgba(15,15,15,0.5);
background: rgb(50,50,50);
}
.article{
display: inline-block;
width: 210px;
position: relative;
vertical-align: top;
padding: 0.5em;
}
.article figure{
width: 99%;
}
.article figure{padding: 0; margin: 0;}
.article figure img{
width: 100%;

height: 180px;
border: solid 5px rgba(250,250,250,0.8);
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.article figure figcaption{
padding: 5px;
color: rgba(200,200,200,1);
font-weight: bold;
}
Con respecto al cdigo css anterior no hay mucho que explicar ya que son propiedades con las que
estamos acostumbrados a trabajar siempre. Lo que haremos a continuacin es agregar las divs donde
cargaremos las imgenes simulando un efecto lightbox:
Nota: Este cdigo lo podemos insertar directamente despus del tag footer de nuestra pagina.
<div id="img1" class="background">
<a href="#img2"><img src="images/montaas verdes.jpg" alt=""></a>
<a class="close" href="#top">Close</a>
</div>
<div id="img2" class="background">
<a href="#img3"><img src="images/paisaje1.jpeg" alt=""></a>
<a class="close" href="#top">Close</a>
</div>
<div id="img3" class="background">
<a href="#img4"><img src="images/paisaje2.jpg" alt=""></a>
<a class="close" href="#top">Close</a>
</div>
<div id="img4" class="background">
<a href="#img5"><img src="images/paisajes del mundo.jpg" alt=""></a>
<a class="close" href="#top">Close</a>
</div>
<div id="img5" class="background">
<a href="#img6"><img src="images/Paisajes-naturales.jpg" alt=""></a>
<a class="close" href="#top">Close</a>
</div>
<div id="img6" class="background">
<a href="#img1"><img src="images/playa.jpg" alt=""></a>
<a class="close" href="#top">Close</a>
</div>
Algo que hay que explicar del cdigo anterior es cada una de las clases de las divs, por qu nombrarlas
img1, img2img6; cada clase hace referencia a la div donde se cargara cada imagen, ahora dentro de la
div encontramos un <a href="> cada uno tiene como enlace #img1, #img2#img6; esto es para que
cuando hagamos click en cada imagen nos muestre la imagen siguiente en la galera, as como hace
Facebook cuando das click a una imagen te muestra la siguiente y as sucesivamente; ademas tenemos
otro tag <a class=close href=#top> que como enlace tiene #top esto nos sirve para salir del lightbox
hacia la pgina principal. Ahora solo resta darle estilo a los tags para simular el efecto lightbox:
</pre>
div.background img {
margin: 10% auto 0 ;
border: solid 5px #FFF ;
width: 500px;
height: 350px;
}
div.background {
display: none;

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba(0,0,0,0.8);
}
div.background:target {
display: block;
}
/** IE no soporta :target, as que usaremos expresiones CSS **/
div.background {
display: expression((document.location.toString().split('#').slice(1) == this.
id)?'block':'none');
}
div.background .close{
display: block;
width: 500px;
height: 0px;
padding:0 10px 0 0;
text-align: right;
position: relative;
color: #000;
font-size: 18px;
text-shadow: 0 0 4px #FFF;
margin: -30px auto 0;
}
div.background .close:hover{
font-size: 19px;
}
Ahora aqu es donde se encuentra lo interesante; en el elemento div.background le damos una posicin
absoluta de un ancho y alto del 100% de la pantalla del navegador esto es para crear un fondo oscuro
semitransparente sobre los dems elementos de la pagina web, ademas podemos ver que tenemos un
pseudo elemento o pseudo clase :target ; con el selector :target se puede aadir un estilo concreto al
elemento de destino, de modo que se destaque. Pero eso no es todo; tambin se puede ocultar o mostrar
elementos segn sean o no el elemento de destino. Pero hay que aclarar algo en IE no soporta la pseudo
clase :target asi que utilizaremos expresiones css.
Las expresiones css son una poderosa (y peligrosa) manera de establecer propiedades css dinmicamente.
Estn soportadas por Internet Explorer, desde la versin 5.
display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none');
En esta expresin le estamos diciendo al navegador que si la locacin o la url que nosotros enviamos
contiene al principio un # y slice nos devuelve un valor tipo string en este caso el id o enlace que contiene
el div contenedor y lo evala si es igual al div q seleccionamos al hacer click en el enlace si resulta
verdadero aplica un display: block; caso contrario aplica un display:none;
Por ltimo a todos los dems elementos les damos una posicin relativa sobre la div que los contiene para
que estos se muestren visibles; el diseo que nosotros queramos darle queda a nuestra disposicin.
Puedes ver el ejemplo funcionando aqu :

EJEMPLOS CON TRANSFORM-TRANSLATE-@KEYFRAME

Aadir siempre compatibilidad -webkit moz o -ms
EJEMPLO 1: Surgimiento de capas ocultas
(Con Transition)
HTML
<div class="box">
<a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
<div class="hidden">Esto es la caja escondida</div>
</div>
CSS
Mtodo1
La caja surge desde transparencia
.box{
position: relative;
overflow: hidden;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: 0;
width: 500px;
opacity: 0;
transition: all 1s ease;
}
.box:hover .hidden{
opacity: 1;
}

Mtodo2
La caja surge deslizndose desde la
izquierda
.box{
position: relative;
overflow: hidden;
}
.box .hidden {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
transition: all 0.7s ease-out;
}
.box:hover .hidden{
left: 0px;
}

EJEMPLO 2: MOVIMIENTO DE CAPA DE IDA Y VUELTA

(Combinando Transition y Transform)
<style type="text/css">
.showbox {
float: left;
margin: 4em 1em;
width: 100px;
height: 60px;
border: 2px solid green;
background-color: #fff;

line-height: 60px;
text-align: center;
transition: 1s ease-in-out;
}
.showbox:hover {
transform: translate(3em,0);
}
</style>
<div class="showbox ">box 1</div>
EJEMPLO 3: Transformaciones de varias propiedades
(Con Transform)
Se separan con espacios.
#submenu:hover {
background-color: #fc3;
transform: rotate(360deg) scale(2);
}
EJEMPLO 4: Transformaciones y transiciones de varias propiedades
(Transform y Transition)
#block {
...
left: 0;
top: 0;
...
background: blue;
...
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
...
}
#stage:hover #block {
left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
...
}
EJEMPLO5: HOVER SOBRE UNA CAJA1 AFECTA A OTRA CAJA2 (O A LAS DOS AL MISMO
TIEMPO)
Utilizamos el operador + en la declaracin.
Antes las cajas iban unas dentro de otras.
Los operadores ms utilizados para relacionar etiquetas son:
>(child)
+(hermano adyacente)

~(hermano general)
#box2 {
position: absolute;
left: 120px;
...
background: blue;
...
transition: 1s ease-in-out;
}
#box1:hover + #box2 {
transform: rotate(360deg);
left: calc(100% - 102px);
background: yellow;
}
Nota: ver el uso para obtener la propiedad left: calc(100%-100px)

TRANSITION
+ Fin:
Efecta una transicin cuando cambia una propiedad de un elemento.
El efecto slo acta cuando cambia la propiedad, p.ej. con el evento hover
Ej.: al mover el ratn sobre la caja su ancho cambia con una transicin de 2 seg.
div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
+ Propiedades:
-transition-property: none|all|property|initial|inherit;
propiedad que va a afectar,
all para que afecte a todas o podemos indicar el nombre de la propiedad o nombres separados por comas.
-transition-duration:
duracin del efecto, segundos o milisegundos.
-transition-timing-function: curva de aceleracin (p.ej. linear)
Aceleracin inicial
Media
Final
Ease
Lenta
Rpida
Lenta
Linear
Misma aceleracin
Ease-in
lenta
--Ease-out
--Lenta
Ease-in-out
Lenta
-lenta
CubicDefinimos nuestros propios valores en numeros de 0 a 1.
bezier(n,n,n,n)

-transition-delay:
retraso al iniciarse de nuevo el efecto en seg. o milseg.
+ Estructura de Transition con anotacin corta:
transition: property duration timing-function delay ;
Ej.
div {
-webkit-transition: width 1s linear 2s;
transition: width 1s linear 2s;
}
+ Estructua anotacin extendida:
div {
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
+ Mltiples cambios al mismo tiempo
-Con anotacin corta:
div {
-webkit-transition: width 2s, height 2s,-webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
-Con anotacin extendida:
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;

TRANSFORM
-Propiedades:
matrix(n,n,n,n,n,n)
matrix3d(n, ., n)

Defines a 2D transformation, using a matrix of six values

Defines a 3D transformation, using a 4x4 matrix of 16 values

translate(x,y)
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)

Defines a 2D translation
Defines a 3D translation
Defines a translation, using only the value for the X-axis
Defines a translation, using only the value for the Y-axis
Defines a 3D translation, using only the value for the Z-axis

scale(x,y)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)

Defines a 2D scale transformation

Defines a 3D scale transformation
Defines a scale transformation by giving a value for the X-axis
Defines a scale transformation by giving a value for the Y-axis
Defines a 3D scale transformation by giving a value for the Z-axis

rotate(angle)
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

Defines a 2D rotation, the angle is specified in the parameter

Defines a 3D rotation
Defines a 3D rotation along the X-axis
Defines a 3D rotation along the Y-axis
Defines a 3D rotation along the Z-axis

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
perspective(n)

Defines a perspective view for a 3D transformed element

initial
inherit
none

Sets this property to its default value. Read about initial

Inherits this property from its parent element. Read about inherit
Defines that there should be no transformation

-Propiedad relacionada transform-style

Preserva la forma 3d o la aplana segn valores preserve-3d o flat
Ej. transform-style: preserve-3d;
-Propiedad relacionada transform-origin
Indica el punto de origen de la transformacin que no tiene por qu coincidir necesariamente con la caja.
P. ej. cuando ampliamos una foto con scale y el aumento lo situamos en el centro de la pantalla.
Ej. transform-origin: 20% 40%;
Sintaxis: transform-origin: x-axis y-axis z-axis|initial|inherit;
Valores:
x-asis: left, center, right, length, %
y-axis: top, center, bottom, length, %
z-axis: length (en caso de 3D)

@KEYFRAME
-Fin:
Inicializa una animacin asignndole un nombre y creando una linea porcentual de la accin.
Despus con ANIMATION se implementan las acciones en la misma etiqueta a animar.
-Sintaxis:

@keyframes animationname {keyframes-selector {css-styles;}}

-Propiedades:
animationname
keyframes-selector
Legal values

Nombre de la animacin
Porcentaje de la animacin (de 0%-100% from-to)
Propiedades CSS

-Ejemplos:
/* WebKit and Opera browsers */
@-webkit-keyframes spinner {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
/* all other browsers */
@keyframes spinner {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
-Ejemplo usando %
<style type="text/css">
@-webkit-keyframes spinner5 {
from,15% { -webkit-transform: rotateY(0deg); }
20%,35% { -webkit-transform: rotateY(-72deg); }
40%,55% { -webkit-transform: rotateY(-144deg); }
60%,75% { -webkit-transform: rotateY(-216deg); }
80%,95% { -webkit-transform: rotateY(-288deg); }
to
{ -webkit-transform: rotateY(-360deg); }
}
@keyframes spinner5 {
from,15% {
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}

20%,35% {
-moz-transform: rotateY(-72deg);
-ms-transform: rotateY(-72deg);
transform: rotateY(-72deg);
}
40%,55% {
-moz-transform: rotateY(-144deg);
-ms-transform: rotateY(-144deg);
transform: rotateY(-144deg);
}
60%,75% {
-moz-transform: rotateY(-216deg);
-ms-transform: rotateY(-216deg);
transform: rotateY(-216deg);
}
80%,95% {
-moz-transform: rotateY(-288deg);
-ms-transform: rotateY(-288deg);
transform: rotateY(-288deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
Tambin as:
@-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16%
{ -webkit-transform: rotateY(-90deg);
}
33%
{ -webkit-transform: rotateY(-90deg) rotateZ(90deg);
}
50%
{ -webkit-transform: rotateY(-180deg) rotateZ(90deg);
}
66%
{ -webkit-transform: rotateY(90deg) rotateX(90deg);
}
83%
{ -webkit-transform: rotateX(90deg);
}
}

ANIMATION
-Fin: implementa una animacin inicializada con @Keyframe en la misma etiqueta a animar.
-Sintaxis: animation: name duration timing-function delay iteration-count direction fill-mode playstate;
-Caract. De las propiedades:
animation-name
Refiere el nombre inicializado en el @keyframe
animation-duration
Duracin de la animacin
animation-timingAceleracin
function
animation-delay
Retraso antes de empezar la animacin
animation-iteration-count Repeticin de la animacin
animation-direction
Especifica si la animacin vuelve a su situacin original
animation-fill-mode
Ajusta estilos al elemento animado cuando la animacin no est en
ejecucin, ha terminado o existe un retraso por falta de recursos.
animation-play-state
Especifica si la animacin comienza o queda pausada
-Valores de las propiedades
animation-name
Nombre de la animacin @keyframe
animation-duration
Segundos o milisegundos
animation-timingLinear, ease, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n)
function
animation-delay
Segundos o miliseg.
animation-iteration-count Un nmero (n de veces a repetir) o infinite
animation-direction
Normal:
la animacin se comienza de principio al final.
Reverse:
comienza desde el final al principio.
Alternate: cuando existen repeticiones de la animacin sta comienza
normal los
ciclos impares y al revs los pares
Alternate-reverse: comienza normal los pares y al revs los impares.
animation-fill-mode
None: no se aplicar ningn estilo (por defecto).
Forwards: se aplican los estilos que haya al terminar la animacin.
Backwards: se aplican los estilos que se tena al iniciar la animacin.
Both: se aplican los 2 estilos anteriores.
animation-play-state
Paused: la animacin se pausa.
Running: la animacin se activa (por defecto)
Para alternar debemos utilizar JavaScript, la referencia DOM es
animationPlayState
-Ejemplos:
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 6s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#spinner:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}