Lenguaje CSS3

Versión para impresión
Lenguaje CSS3

Prefijos del fabricante

Como no todas las propiedades de CSS3 están implementadas aún en los distintos navegadores, existen una serie de prefijos para que se puedan ver las que están en fase de prueba. Los prefijos serían:

Prefijo Navegador Ejemplo
-moz Firefox -moz-border-radius: 5px;
-o Opera -o-border-radius: 5px;
-webkit Safari, Chrome, Konqueror -webkit-border-radius: 5px;
-ms Internet Explorer 9 -ms-border-radius: 5px;

Podemos comprobar si la propiedad de CSS3 es soportada en distintos navegadores en los siguientes enlaces:

Efectos con CSS3

Redondeo de esquina

Se utiliza la propiedad border-radius. Un solo valor define el valor de todas las esquinas; varios valores separados por espacios definen cada esquina (empezando por la la superior-izquierda, y en el sentido del reloj). Ejemplo:

border-radius: 10px;

border-radius: 10px 0 10px 0;

Sombras

La propiedad es box-shadow. Permite varios valores separados por un espacio:

    box-shadow: inset H V D A C;

Siendo:

  • inset: sombra interior (opcional)
  • H: desplazamiento horizontal;
  • V: desplazamiento vertical;
  • D: anchura del desenfoque;
  • A: aplicación de la forma (valor opcional);
  • C: color de la sombra.

Ejemplo:

box-shadow: 2px 2px 3px 2px #333;

Con la propiedad text-shadow podemos aplicar sombras a los textos, con algunos de los valores similares a la propiedad anterior:

    text-shadow: H V D C;

Ejemplo:

text-shadow: 1px 1px 3px #333;

Color en rgba

Ahora también se puede especificar el color en formato rgba:

  • rgb: valores de rojo, verde y azul, con un valor entre 0 y 255;
  • a: valor del canal alfa o la transparencia, con valores entre 0 (transparente) a 1 (opaco).

Por ejemplo:

    background-color: rgba(1, 141, 148, 0.5);

Fondos múltiples

Ahora, con la propiedad background, se pueden añadir varias imágenes de fondo. En caso de que haya un color de fondo, se indicaría en la última imagen. Código de ejemplo:

    background: left center url(floral1.png) no-repeat, right center url(floral2.png) no-repeat;

Ejemplo:

TEXTO FLOREADO

Degradados

Se pueden hacer fondos degradados, utlizando la propiedad background-image e indicando el tipo de degradado, que puede ser:

  • linear: degradado lineal;
  • radial: degradado radial.

Esta propiedad aún no está implementada del todo en los navagadores, por lo que hay que poner los prefijos del fabricante.

La sintaxis también varía en función de la versión del navegador.

Degradado lineal

Para Safari 4+ y Chrome 1-9, un ejemplo de la sintaxis:

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#018d9e), to(#c7e6ea));

Para Safari 5.1+, Mobile Safari, Chrome 10+, Firefox 3.6+, IE 10+, Opera 11.10+ (añadir el prefijo de cada fabricante):

    background-image: linear-gradient (top, #018d9e, #c7e6ea)

linear-gradient

Degradado radial

Para Safari 4+ y Chrome 1-9, un ejemplo de la sintaxis:

    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#018d9e), to(#c7e6ea));

Para Safari 5.1+, Mobile Safari, Chrome 10+, Firefox 3.6+, IE 10+, Opera 11.10+ (añadir el prefijo de cada fabricante):

    background: radial-gradient(circle, #018d9e, #c7e6ea);

radial-gradient

Más información:

css-tricks.com/css3-gradients

Para los navegadores antiguos que no soportan esta propiedad, conviene pasar una imagen de fondo, o al menos un color de fondo que sustituya al degradado.

Lo más sencillo es utilizar alguna utilidad web que nos permita hacer los degradados, como:

Tamaño de los fondos

Con la propiedad background-size podemos cambiar el tamaño de los fondos. Por ejemplo:

background-size: 400px 300px; 

También podemos decir que la imagen de fondo se reescale para que ocupe todo el elemento, utilizando el valor cover (la imagen escalada se saldrá del contenido por el alto o el ancho, pero rellenará todo el fondo):

background-size: cover;

Opacidad

La propiedad es opacity, salvo en ie, que utilizamos filter. Código de ejemplo:

    opacity: 0.3; filter: alpha(Opacity=30);

Ejemplo:

logo

Columnas múltiples

Las principales propiedades para poner un texto en columnas son:

column-count:
número de columnas.
column-gap:
espacio entre cada columna.
column-width:
ancho de la columna.

Si ponemos el número de columnas no debemos poner el ancho, y viceversa.

Aún no está implementada del todo, así que hay que utilizar los prefijos -moz (Firefox) y -webkit (Safari y Chrome).

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu turpis justo. Sed euismod placerat nisl accumsan semper. Donec convallis ante odio. Pellentesque dolor ligula, posuere ut tincidunt a, iaculis ac tortor. Aliquam nec orci ligula. Duis arcu turpis, hendrerit eu tincidunt nec, vulputate quis erat. Ut pellentesque tortor eget metus luctus vitae condimentum dui lacinia. Nunc quis nunc risus. Pellentesque pellentesque bibendum malesuada. Sed cursus viverra felis quis aliquet. Curabitur egestas vulputate ligula id blandit. Aliquam viverra, tellus vitae tempor congue, est lacus sagittis justo, vel convallis arcu urna ac nunc. Vestibulum non mi nulla.

Fuentes

Antes de CSS3, en las páginas web sólo se podían utilizar las fuentes seguras, ya que se suponía que eran las que venían instaladas en Windows. Podemos encontrar un listado de éstas en:

es.wikipedia.org/wiki/Core_fonts_for_the_Web

La otra forma de utilizar fuentes distintas era mediante JavaScript, por ejemplo con Cufon:

cufon.shoqolate.com/generate

Ahora, en CSS3, podemos también usar la directiva @font-face.

@font-face

En la hoja de estilos, simplemente definimos nuestra fuente, indicado la ruta a una tipografía, que estará alojada en el servidor en donde está hospedada nuestra página web. Por ejemplo:

    @font-face{
        font-family:"miFuente";
        src: url("miFuente.ttf"), url(miFuente.eot'); /* IE9 */
    }
    
h1{ font-family: 'mifuente'; }

Dentro de @font-face podemos también definir el formato de la fuente, como el grosor, o el estilo:

    @font-face{
       font-family:"miFuente";
       src: url("miFuente.ttf"); font-weight: bold; font-sytle: italic;
    }

Formatos

Los formatos y su compatibilidad con los útlimos navegadores son:

  • TrueType y OpenType: Firefox, Opera, Safari, Chrome.
  • EOT: Internet Explorer
  • WOFF: Firefox, Internet Explorer
  • SVG: iPad e iPhone.

Más información sobre compatibilidad:
caniuse.com/fontface

Como el formato más compatible con los antiguos navegadores de Internet Explorer es EOT, debemos incluir éste y cualquiera de los otros para que la tipografía se vea en todos los navegadores.

Ejemplo:

Esta fuente es una kitchenpolice.

El código, para que se vea en todos los navegadores, sería:

    @font-face{
       font-family:'kitchenpolice';
       src: url('kitchenpolice-webfont.eot?#iefix), /* IE */ url(kitchenpolice-webfont.ttf');
    }

Para que se vea en los navegadores antiguos de Internet Explorer hemos de poner primero la url de la fuente EOT, y además añadir ?#iefix

Mediante local podemos indicar que primero busque en el ordenador del usuario, y si no encuentra la fuente cargue las de la web:

    @font-face{
        font-family:"miFuente";
        src: url("miFuente.eot?#iefix"), local('miFuente'), url("miFuente.ttf");
    }

Conversor de fuentes:

www.fontsquirrel.com/tools/webfont-generator

Google Web Fonts

Google nos proporciona una aplicación para que usemos sus propias fuentes:

www.google.com/fonts

Basta con aplicar las instrucciones que nos aportan. Por ejemplo, para la tipografía "Racing Sans One" habría que añadir en el <head>:

    <link href="https://fonts.googleapis.com/css?family=Racing+Sans+One" rel="stylesheet">

O bien, importar la fuente en la hoja de estilos mediante @import:

    @import url('https://fonts.googleapis.com/css?family=Racing+Sans+One');

A partir de entonces ya podemos utilizar la tipografía, por ejemplo:

    .ejemploFuenteGoogle{ font-family: 'Racing Sans One', cursive; }

Quedaría:

Este párrafo está maquetado con la fuente de Google "Racing Sans One".

Transformaciones

Existen distintas funciones de transformación, como escalar, rotar, desplazar... La sintaxis sería:

    transform: función(parámetros);

Si tengo varias funciones de transformación simplemente las separo por un espacio:

    transform: función1(parámetros) función2(parámetros);

Hay que poner los prefijos del fabricante para que se vea en todos los navegadores.

Nota: para ver la transformación, hacer rollover sobre el código de ejemplo.

scale(x,y), scaleX(x), scaleY(y)

Aumenta o disminuye la escala, siendo el factor incial de uno. Si en scale() sólo pongo un parámetro, la escala es uniforme.

Por ejemplo:

ejemploEscala:hover{ transform:scale(1.1); }

rotate(a)

Rota en grados, en sentido de las agujas del reloj si el valor es positivo, y en sentido contrario si es negativo. Por ejemplo:

ejemploRotar:hover{ transform:rotate(-10deg); }

skew(a,b), skewX(a), skewY(b)

Sesga en los dos ejes o en uno solo. La cantidad de sesgo se indica en grados. Por ejemplo:

ejemploSesgarX:hover{ transform:skewX(-20deg); }

translate(x,y), translateX(x), translateY(y)

Translada en alguno de los ejes una cantidad de pixeles. Por ejemplo:

ejemploTransladarX:hover{ transform:translateX(10px); }

Transiciones

Las transiciones permiten pasar de un estado a otro (por ejemplo, del estado normal al :hover) progresivamente.

Hay que utilizar los prefijos del fabricante, por si el usuario tiene un navegador desactualizado.

En las transiciones podemos especificar una serie de valores:

  • la propiedad o propiedades que queremos cambiar;
  • la duración de la transición;
  • la demora o lo que tarda en aparecer la transición;
  • el tipo de función o ecuación con que se realiza la transición (para conseguir efectos de aceleración y desaceleración).

También podemos especificar todos estos valores a la vez.

transition-property

Sirve para definir la propiedad, o propiedades (separadas entre comas), a las que afecta la transición. Ejemplos:

    transition-property: background-color;
    transition-property: background-color, color;

Si no se indica, el valor por defecto es all.

transition-duration

Duración de la transición, en segundos. Se pueden indicar varios valores, separando con comas, para cada propiedad. Ejemplos:

    transition-duration: 1s;
    transition-duration: 1s, 3s;

Esta propiedad se puede combinar con la anterior del siguiente modo:

    transition-property: background-color 2s, color 1s;

transition delay

Es el retardo o demora hasta que empieza la transición. Ejemplo:

    transition-delay: 3s;

transition-timing-function

Es la función que relaciona el tiempo con la propiedad a la que afecta la transición. Así, las transiciones pueden transcurrir de manera lineal, o sufrir aceleraciones y desaceleraciones cuando siguen una curva parabólica.

Las típicas curvas son:

Transiciones CSS3

La sintaxis sería:

    transition-delay: tipo-curva;

Entre los tipos de curva admitidos estarían:

  • linear;
  • ease;
  • ease-in;
  • ease-out;
  • ease-in-out;
  • cubic-bezier(parámetros).

http://cubic-bezier.com

transition

Podemos definir todos los valores de la transición a la vez, siendo el orden el siguiente:

transition: property duration timing-function dalay;

Por ejemplo:

    transition: all 2s ease-in 5s;

Podemos anular una transición con none:

    transition: none;

Ejemplos de transiciones utilizando clases:

    .Linear{
width: 50%; transition: all 0.5s linear 0s; } .Linear:hover{ width: 100%;
}

linear

    .easeIn{
        width: 50%;
        transition: all 0.5s ease-in 0s;
    }
    .easeIn:hover{
        width: 100%; 
}

ease-in

    .easeOut{
        width: 50%;
        transition: all 0.5s ease-out 0s;
    }
    .easeOut:hover{
        width: 100%; 
}

ease-out

    .cubicBezier{
        width: 50%;
        transition: all 0.5s cubic-bezier(0,.63,1,.48) 0s;
    }
    .cubicBezier:hover{
        width: 100%; 
}

cubic-bezier(0,.63,1,.48)

Declaración de varias transiciones seguidas

Jugando con delay, podríamos hacer que una transición ocurra después de la otra. Hay que separar cada transición por una coma.

Por ejemplo, supongamos que queremos que las propiedades de width y background-color se sucedan. Por ejemplo, el código sería:

    transition: background-color .5s ease-out 0s, width .2s ease-in .5s;

primero color, luego ancho

Notas:

  • para cualquier valor igual a cero, añadir la unidad (por ejemplo, 0s);
  • en el estado hover no es necesario añadir también la transición (cogerá el valor que le dimos en el estado normal).

Utilidades web para CSS3

Existen diversas utilidades web que nos ayudan en la creación de nuestros efectos de CSS3. Por ejemplo:

Categorías: