Propiedad transform: función scale

Esta función tiene dos parámetros, el valor x para la escala horizontal y el valor y para la escala vertical. Si se declara solo un valor será aplicado a los dos parámetros.

Se pueden declarar números enteros y decimales para la escala, la cual es calculada usando una matriz. Valores entre 0 y 1 reducirán el elemento, el valor 1 mantiene las mismas proporciones y valores mayores de 1 incrementa las dimensiones del elemento de forma líneal.

Se consigue un efecto interesante usando valores negativos, si declaramos al menos uno de los valores negativos el elemento se invierte, produciendo un efecto espejo.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

}

#titulo{

font: bold 36px verdana, sans-serif;

}

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

transform:scale(1.5)

}

#titulo{

font: bold 36px verdana, sans-serif;

}

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

transform:scale(1.5, -1.5)

}

#titulo{

font: bold 36px verdana, sans-serif;

}

Se declaran dos funciones similares a scale() pero restringidas a la dimensión horizontal o vertical: scalex(), scaley(), esta función solo requieren un valor.

Propiedad Transformaciones

Una vez creados, los elementos en HTML, son como bloques sólidos imposible de mover. Hasta el momento podían ser desplazados con códgio Javascript, o utilizando librerías jQuery, pero no existía un procedimiento estándar, CCS3 presentó las propiedades transform y transition. Desde ahora no tenemos que pensar cómo lograr ese efecto, conociendo unos parámetros nuestro sitio web será tan dinámico como imaginamos.

La propiedad transform puede realizar cuatro tranformaciones básicas: escalar, rotar, mover, inclinar.

En mi próxima entrada veremos como trabaja cada una de ellas.

Propiedad Filtros

CCS3 introduce varias funciones para la propiedad filter con el propósito de afectar no solo a la imágenes sino también cualquier elemento en el documento.

Los filtros se encuentran solo disponibles en Google Chrome. La implementación es aún experimental, por lo que debemos utilizar el prefijo -webkit- para aplicar la propiedad filter.

Las nuevas funciones disponibles para esta propiedad son:

blur(valor). Esta función produce un efecto de difuminado. El atributo debe ser un valor en píxeles entre 1px y 10px.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: blur(5px);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

grayscale(valor). Convierte los colores del elemento a una escala de grises. El atributo debe ser un número decimal entre 0.1 y 1.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: grayscale(0.7);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

drop-shadow(x, y, size, color). Produce una sombra simple para el elemento. Los atritutos x e y determina la distancia de la sombra y el elemento, size especifica el tamaño de la sobra y color declara su color.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: drop-shadow(15px 15px 20px #000000);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

sepia(valor). Otorga un tono sepia al color del elemento. El atributo debe ser un número decimal entre 0.1 y 1.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: sepia(0.7);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

brightness(valor). Modifica el brillo del elemento. El atributo debe ser un número decimal entre 0.1 y 1.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: brightness(0.5);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

contrast(valor). Modifica el contraste del elemento. El atributo debe ser un número decimal entre 0.1 y 1.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: contrast(0.5);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

hue-rotate(valor). Produce una rotación en la tonalidad del elemento. El atributo debe ser un valor en grados entre 1deg y 360deg.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: hue-rotate(180deg);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

invert(valor). Invierte los colores del elemento, produciendo un negativo. El atributo debe ser un número decimal entre 0.1 y 1.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: invert(0.7);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

saturate(valor). Satura los colores del elemento. El atributo debe ser un número decimal entre 0.1 y 1.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: saturate(5);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

opacity(valor). Produce un efecto de opacidad. El atributo debe ser un número decimal entre 0 y 1 (0 totalmente transparente y 1 totalmente opaco).

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #54A831 url(../fondo11.jpg) no-repeat center;

-webkit-filter: opacity(0.5);

}

#titulo{

font: bold 36px verdana, sans-serif;

}

Propiedad columnas

CSS3 incorpora un grupo de propiedades para facilitar la creación de columnas dentro de una caja. Aplicando una simple regla, las palabras claves son: column-count, column-gap, column-rule.

column-count, declara el número de columnas.

column-gap, declara el espacio entre las columnas.

column-rule, especificamos las características de la línea que divide las columnas. La sintexis de esta es la misma que la propiedad border.

Ejemplo:

Código HTML.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Estilo ccs3</title>

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

</head>

<body>

<header id="inicio">

<span id="titulo">Estilos CSS3</span>

    <span id="titulo">HTML5</span>

</header>

</body>

</html>

Código CSS3.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 600px;

margin: 50px auto;

padding: 15px;

border: 2px solid #999999;

background: #54A831;

-webkit-column-count: 2;

-moz-column-count: 2;

column-count: 2;

-webkit-column-gap: 10px;

-moz-column-gap: 10px;

column-gap: 10px;

-webkit-column-rule: 1px solid #000000;

-moz-column-rule: 1px solid #000000;

column-rule: 10px solid #000000;

}

#titulo{

font: bold 36px verdana, sans-serif;

}

Disponemos de otras propiedades para personalizar las columnas. Algunas de las más interesantes son: column-width y column-span.

column-width declara un anco específico para la columna, su valores pueden ser auto (por defecto) o un ancho en cualquier unidad válida de CSS.

column-span esta propiedad es aplicada a elementos dentro del la caja y determina si el elemento sera posicionado dentro de una columna o abarcará múltiples columnas. Los valors son all (todas las columnas), nome (por defecto).

background abreviado

Usando la propiedad abreviada background y sus valores crearemos un fondo.

Cuando los valores de posición y tamaño son declarados juntos debemos separarlos con una barra inclinada.

Los valores declarados corresponden al color, la imagen, la posición y el tamaño de la imagen de fondo, en ese orden.

Los valores no-repeat, scroll y border-box al final corresponde a los valores para las propiedades asociadas background-repeat, background-attachment y background-origin.

Algunos valores pueden ser intercambiados y en algunos casos podemos usar la propiedad background para declarar solo algunos de ellos.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 2px solid #000000;

background: #C12D30 url(../fondo11.jpg) 10px 10px / 510px 55px no-repeat scroll border-box;

}

#titulo{

font: bold 36px verdana, sans-serif;

}

Propiedad background-attachment

Determinamos si la imagen es fija o se desplaza con el resto de los elementos del documento, usando las palabras clave: scroll y fixed.

scroll es el valor por defecto y hace que la imagen se desplace junto con el resto de la página.

fixed fija la imagen de fondo en el lugar donde fue declarada.

Propiedad background-clip

Declara el área a ser cubierta por la imagen de fondo usando las mismas palabras clave que background-origin: border-box, padding-box y content-box.

border-box corta la imagen de acuerdo al borde de la caja.

padding-box corta la imagen de acuerdo al borde interno de la caja.

content-box corta la imagen de acuerdo al contenido de la caja.