CSS3, el nuevo estándar de las hojas de estilodocshare02.docshare.tips/files/6183/61832168.pdf ·...
26
CSS3, el nuevo estándar de las hojas de estilo
Transcript of CSS3, el nuevo estándar de las hojas de estilodocshare02.docshare.tips/files/6183/61832168.pdf ·...
CSS3, el nuevo estándar
de las hojas de estilo
Indice
ÍNDICE
HOJAS DE ESTILO CSS3 ______________________________________________ 3
INTRODUCCION .................................................................................................................. 3
FONDOS .................................................................................................................................. 4 MÚLTIPLES FONDOS ...................................................................................................................... 4 FIJAR LA POSICIÓN DEL FONDO ................................................................................................. 4
BORDES .................................................................................................................................. 6 BORDES REDONDEADOS .............................................................................................................. 6 BORDES CON IMÁGENES .............................................................................................................. 7
SOMBRAS ............................................................................................................................... 9
TRANSPARENCIAS ............................................................................................................ 10
TEXTO EN COLUMNAS .................................................................................................... 11
EFECTOS DE TEXTO ........................................................................................................ 12 EFECTO CORTORNO .................................................................................................................... 12 EFECTO SOMBRA ......................................................................................................................... 13 EFECTO OVERFLOW .................................................................................................................... 13
CANAL ALPHA ................................................................................................................... 14
DEGRADADOS .................................................................................................................... 15 FONDOS .......................................................................................................................................... 15 BORDES ........................................................................................................................................... 18
FUENTES .............................................................................................................................. 19 EJEMPLO ......................................................................................................................................... 20 Resultado .......................................................................................................................................... 21
SELECTORES ...................................................................................................................... 21
REFERENCIA CSS3 ............................................................................................................ 24
COMPATIBILIDAD DE CSS 3 CON LOS NAVEGADORES ........................................ 25
FUENTES __________________________________________________________ 26
CSS3 3
HOJAS DE ESTILO CSS3
INTRODUCCION
El último estándar de hojas de estilo en cascada confeccionado por el W3C (World Wide
Web Consortium) es el denominado CSS3. Esta nueva versión de las hojas de estilo
tiene importantes novedades:
Nuevas propiedades orientadas respecto a los aspectos gráficos
o bordes redondeados
o textos con sombras
o posibilidad de asignar múltiples fondos
o nuevas posibilidades en el formato de las tablas
o posibilidad de agregar pies de página, cabeceras y referencias cruzadas
Nuevas estructuras de organización.
o texto en columnas
Capacidades visuales avanzadas que tienen como objetivo el facilitar el
posicionamiento de los controles dentro de la página, para ello mejora:
o la interfaz gráfica
o el posicionamiento de los objetos
o el tamaño de los objetos
o la posibilidad de estructurar el texto en columnas
Hojas de Estilo Aural: nuevas propiedades orientadas a los objetos audio
como son:
o sonidos de fondo
o transiciones de sonido
o posición del sonido en reproducción
Nuevas funciones relacionadas con las fuentes
o mejora en el soporte para múltiples lenguajes
o posibilidad de utilizar fuentes externas
En muchos casos, al utilizar las nuevas propiedades gráficas se puede liberar al
navegador de operaciones que hasta ahora eran su exclusiva responsabilidad, mejorando
así su rendimiento y la velocidad con que carga las páginas.
http://www.css3.info/preview/ CSS3 Previews - CSS3 . Info
http://www.w3.org/TR/css3-roadmap/ Introduction to CSS3
CSS3 4
FONDOS
MÚLTIPLES FONDOS
CSS3 permite añadir varios fondos. La técnica para realizar esta operación consiste en
utilizar la propiedad background y fijar los atributos de cada una de las imágenes
separadas por un espacio en blanco; los grupos de atributos de cada imagen se seperarán
con una coma.
Se debe tener en cuenta que la imagen puesta en primer lugar es la que estará en primer
plano en el caso de que se sobrepongan sobre alguna otra imagen.
Ejemplo
Código CSS
.fondos {
background: url(simbolo2.gif) center no-repeat,
url(simbolo3.gif) center repeat;
width: 300px;
}
Código HTML
<div class="fondos">
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
</div>
FIJAR LA POSICIÓN DEL FONDO
Para indicar la posición de la imagen de fondo dentro de un elemento se utiliza la
propiedad background-origin, con este atributo se puede indicar tres posiciones
relativas distintas para el extremo superior izquierdo de la imagen
border-box: la imagen comenzará a colocarse donde en el borde.
content-box: la imagen comenzará a colocarse en función del padding
establecido para el elemento.
padding-box: la imagen comenzará a colocarse en función del margen
establecido para el elemento
CSS3 5
Ejemplo
Código CSS
.fondo{
border: 12px double #00F;
padding: 10px;
background-image: url(mariposa.gif);
background-repeat: no-repeat;
margin: 20px 0;
background-color:#CF9;}
#pruebasfondo1{
background-origin: border-box;}
#pruebasfondo2{
background-origin: padding-box;}
#pruebasfondo3{
background-origin: content-box;}
Código HTML
<h1>Probando background-origin</h1>
<div id="pruebasfondo1" class="fondo">
<h2>background-origin: border</h2>
Este elemento tiene borde y padding.
<br>
</div>
<div id="pruebasfondo2" class="fondo">
<h2>background-origin: padding</h2>
Este elemento tiene borde y padding
<br>
</div>
<div id="pruebasfondo3" class="fondo">
<h2>background-origin: content</h2>
Este elemento tiene borde y padding
<br>
</div>
CSS3 6
BORDES
CSS3 aporta nuevos atributos para realizar bordes redondeados o/y con imágenes,
combras, etc.
Para desarrollar las propiedades que permiten múltiples propiedades podemos utilizar la
herramienta on-line que se encuentra en http://css3generator.com/.
BORDES REDONDEADOS
La propiedad border-radius que permite definir el radio de las curvas de las esquinas.
Si se asigna un valor (en pixeles) a la propiedad, entonces el radio aplicado es el mismo
para todas las esquinas, pero se le pueden asingar hasta 4 valores, uno para cada esquina
(orden: sup-izquierda, sup-derecha, inf-izquierda, inf-derecha).
Para que los bordes se redondeen la propiedad border debe tener el atributo solid.
Ejemplo
Código CSS
div {
border: 1px solid #000000;
border-radius: 7px;
padding: 10px;}
Código HTML
<div class="fondos">
<p>contenido del elemento que va a tener bordes redondeados</p>
<p>contenido del elemento que va a tener bordes redondeados</p>
<p>contenido del elemento que va a tener bordes redondeados</p>
<p>contenido del elemento que va a tener bordes redondeados</p>
</div>
CSS3 7
Si cambio el código CSS para que tenga bordes distintos:
div {
border: 1px solid #000000;
border-radius: 7px 27px 100px 0px
padding: 10px;
}
BORDES CON IMÁGENES
El atributo que permite introducir imágenes en los bordes es border-image. Este atributo
permitirá asignar una o varias imágenes a los bordes.
Este atributo aún está ausente en muchos navegadores y por ahora sólo podemos contar
con Firefox (prefijo –moz-) y Safari-Chrome (prefijo –webkit-) para ver este efecto.
Otros atributos para hacer borde con imágenes, teniendo presente que no se ve en todos
los navegadores, son:
border-image-source: URL de la imagen que queremos de borde
borde-image-slice: Sirve para dar el espacio de la imagen que será visible como
borde; top, right, bottom y left.
border-image-width: Ancho del borde con imagen.
border-imagen-outset: Indicaremos el espacio más allá del borde que ocupará
nuestra imagen, tambien en top, right, bottom y left.
border-repeat: pues el repeat que todos conocemos del elemento background.
Ejemplo
Código HTML
<div class="borde">
<p>prueba de borde</p>
<p>prueba de borde</p>
<p>prueba de borde</p>
<p>prueba de borde</p>
</div>
Código CSS
.borde {
-moz-border-image: url(marco.gif) 0 0 0 0;
-webkit-border-image: url(marco.gif) 0 0 0 0 ;
padding:60px;
width: 140px;}
CSS3 8
Comprender las propiedades relacionadas con los bordes que utilizan imágenes es un
poco complicado y es recomendable modificar los atributos implicados para comprobar
el efecto que estos cambios tienen en el resultado. Con el siguiente ejemplo esperamos
aclarar el significado de la propiedad border-image.
Para el ejemplo, vamos a utilizar la imagen siguiente como borde:
El código HTML del body implicado en la operación será un bloque div con un texto. El
código del estilo será el que sigue:
div {
width: 300px;
height: 200px;
padding: 10px; /* pongo un padding para despegar el texto de los
bordes*/
border-width: 10px;
-webkit-border-image: url(borde1.gif) 25% stretch stretch;
-moz-border-image: url(borde1.gif) 25% stretch stretch;
}
El resultado mostraría una imagen como esta:
El grosor del borde se ha fijado a 10px (border-width) y ese espacio es el que va a
rellenar con el tanto por ciento de la imagen que se establece en la propiedad border-
image. El atributo stretch indica que para los bordes horizontales como los verticales lo
que se muestra es el alargamiento de la imagen hasta la siguiente esquina.
CSS3 9
https://developer.mozilla.org/En/CSS/-moz-border-image -moz-border-image - MDC
Doc Center
http://www.css3.info/preview/border-image/ Border-image: using images for your
border - CSS3 . Info
http://ejohn.org/blog/border-image-in-firefox/ John Resig - border-image in Firefox
SOMBRAS
El atributo box-shadow permite crear sombras. La sintaxis es la siguiente
box-shadow: <valor1> <valor2> <valor3> <valor4> <color>
Donde:
valor1: es obligatoria e indica el desplazamiento horizontal de la sombra. Si
el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo,
se desplaza hacia la izquierda.
valor2: es obligatoria e indica el desplazamiento vertical de la sombra. Si el
valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se
desplaza hacia arriba.
valor3: es opcional e indica el radio utilizado para difuminar la sombra.
Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se
utiliza el valor 0, la sombra se muestra como un color sólido.
valor4: es opcional e indica el radio con el que se expande la sombra. Si se
establece un valor positivo, la sombra se expande en todas direcciones. Si se
utiliza un valor negativo, la sombra se comprime.
color: es directamente el color de la sombra que se muestra.
Ejemplo
Código CSS
#cajasombra{
background-color: #ddd;
width: 300px;
padding: 10px;
box-shadow: 5px 5px 0 #333;
#sombraclara{
width: 200px;
padding: 10px;
background-color: #999;
color: #fff;
box-shadow: 2px 2px 2px #ffc;
#cajanegra{
padding: 10px;
background-color: #000;}
#sombraredondeada{
background-color: #090;
color: #fff;
width: 400px;
padding: 10px;
border-radius: 7px;
CSS3 10
box-shadow: 15px -10px 3px #000;}
Código HTML
<h1>Probando box-shadow</h1>
<div id="cajasombra">
Esta es una capa con sombra
</div>
<br><br>
<div id="cajanegra">
<div id="sombraclara">
Esta caja la pongo sobre fondo negro, para hacer un elemento
con sombra clara.
</div>
</div>
<br><br>
<div id="sombraredondeada">
Esta capa tiene las esquinas redondeadas y la sombra se adapta a
la forma de la capa, por lo que tendrá esquinas redondeadas.
</div>
TRANSPARENCIAS
CSS3 permite utilizar el atributo opacity para controlar la transparencia de los
elementos de la página.
El valor de la propiedad opacity se establece mediante un número decimal comprendido
entre 0.0 y 1.0. La interpretación del valor numérico es tal que el valor 0.0 es la
máxima transparencia (el elemento es invisible) y el valor 1.0 se corresponde con la
máxima opacidad (el elemento es completamente visible). De esta forma, el valor 0.5
corresponde a un elemento semitransparente y así sucesivamente.
Ejemplo
Código CSS3
#segundo, #tercero {
opacity: 0.1;
}
#primero {
background-color: #03C;
}
#segundo {
background-color:#F00;
}
#tercero {
background-color: #0C0;
CSS3 11
}
Código HTML
<h1>Probando opacity</h1>
<div id="primero">
La primera
</div>
<div id="segundo">
la segunda
</div>
<div id="tercero">
la tercera
</div>
TEXTO EN COLUMNAS
Actualmente es habitual ver páginas Web estructradas en varias columnas, CSS3 aporta
atributos para facilitar esta tarea.
Para distribuir texto en columnas tenemos dos métodos:
column-count: indicando el número de columnas
column-width: indicando el ancho de cada columna
También existen otros atributos:
column-gap: para indicar la separación entre columnas
column-rule: para indicar la línea entre las columnas
Ejemplo
Código HTML
<h1>Probando columnas</h1>
<div id="columnas">
HTML 5 no es solo un lenguaje de etiquetas orientado al contenido
y el formato, como las otras versiones de HTML, sino que pretende ser
una tecnología que permita crear aplicaciones de todo tipo. Para ello
se están desarrollando unas APIs que permitan trabajar con todos los
elementos de la página utilizando para ello atributos y métodos
específicos de cada uno. Para que estas APIs sean realmente útiles
tendrán que ser desarrolladas por todos los navegadores del mercado.
</div>
Código CSS
Tres columnas seperadas por espacio en blanco utilizando column-width
#columnas {
column-width: 13em;
column-gap: 1em;
CSS3 12
}
Tres columnas separadas por una línea utilizando column-count
#columnas{
column-count: 3;
column-gap: 1em;
column-rule: 1px solid black;
}
EFECTOS DE TEXTO
EFECTO CORTORNO
Estas propiedades solo funcionan en los navegadores que se basan en WebKit.
-webkit-text-fill-color: color de relleno del texto
-webkit-text-stroke-color: color del borde del texto
-webkit-text-stroke-width: tamaño del stroke del texto
Ejemplo
Código CSS
div {
/* currently this is a webkit only extension */
font-size: 80px;
-webkit-text-fill-color:#900 ;
-webkit-text-stroke-color: gray;
-webkit-text-stroke-width: 2.30px; }
Código HTML
<div>
Quien a buen árbol se arrima buena sombra le cobija
</div>
CSS3 13
EFECTO SOMBRA
Para poner texto con sombra intervienen la propiedad
text-shadow (d1 d2 nb color)
Donde:
d1 y d2 son el desplazamiento horizontal y vertical, respectivamente, de la
sombra respecto al texto.
nb indica lo nítido o borroso que se ve la sombra
color es el color de la sombra
Es posible agregar múltiples sombras seperando con comas cada dato completo de
sombra, por ejemplo
text-shadow: 0 2px 0 #FFF, 0 1px 5px #CCC;
Ejemplo
Código CSS
div {text-shadow: 2px 2px 2px #000;}
Código HTML
<div>
Quien a buen árbol se arrima buena sombra le cobija
</div>
EFECTO OVERFLOW
CSS3 permite indicar el aspecto que tendrá el texto en el caso de que éste exceda el
tamaño el contenedor donde se muesta. La propiedad es:
text-overflow: clip/ellipsis
Donde clip indica que no corte las palabras y ellipsis que muestre puntos suspensivos al
final del texto visible para indicar que áun hay más.
Por ahora esta propiedad está implementada en todos los navegadores excepto en
Firefox.
Además de esta propiedad se deben propiedades para:
Que se oculte el texto que supera el ancho del contenedor
CSS3 14
overflow:hidden
Que sólo se tenga en cuenta la primera línea
white-space:nowrap
Ejemplo
Código CSS
div {text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 200px;
}
Código HTML
<div>
Quien a buen árbol se arrima buena sombra le cobija
</div>
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects Using CSS
Text-Shadow to Create Cool Text Effects
http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/ How to Create
Inset Typography with CSS3
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
8 examples of stunning CSS3 text effects - CatsWhoCode.com
CANAL ALPHA
CSS3 ha añadido una nueva característica de ajuste de color. Además a la propieda rgb
se puede utilizar rgba donde el último parámetro indica el valor del canal alpha
(transparencia).
rgba(v1,v2,v3,alpha)
Hasta ahora la propiedad ha sido implementada en los navegadores basados en WebKit
y permite obtener efec tos como los de la siguiente imagen con una sóla imagen fuente:
CSS3 15
DEGRADADOS
Para crear propiedades CSS3 de degradados se pueden utilizar herramientas on-
line como http://westciv.com/tools/gradients/index.html o http://gradients.glrzad.com/
para los gradientes lineales, y para los gradientes radiales
http://westciv.com/tools/radialgradients/index.html.
FONDOS
Caso1
Mozilla
Vamos a ver la instrucción CSS3 que realizaría un gradiente con las siguientes
características:
que el gradiente empiece por arriba (top),
que utilice el color inicial (#65b6cf)
que vaya hasta el color final (#2c2c2c) y
que reparta el color de forma uniforme.
background: -moz-linear-gradient(top, #65b6cf , #2c2c2c)
WebKit
En este caso se tienen que indicar en la propiedad de gradiente las siguientes
propiedades:
Tipo de degradado: (linear)
Coordenadas de inicio: (0 0)
Coordenadas de finalización: (0 100%)
Color de inicio: from(#65b6cf)
Color de finalización: to(#2c2c2c)
Con lo que la instrucción equivalente a la vista para Mozilla quedaría como sigue:
background: -webkit-gradient(linear, 0 0, 0 100%, from(#65b6cf), to(#2c2c2c));
CSS3 16
Caso2
A continuación se verá otro caso de fondo con gradiente utilizando CSS3 con las
mismas características que el caso anterior pero introduciendo una moficación:
que el segundo color empiece a los 100px
background: -moz-linear-gradient(top, #65b6cf , #2c2c2c,100px)
Caso2
Mozilla
En CSS3 es posible crear gradientes con varios colores, como en la siguiente
instrucción:
background: -moz-linear-gradient(top, #65b6cf , #2c2c2c 25%, #e3e3e3, 80%);
WebKit
Para crear un gradiente con varios colores en WebKit se utiliza la propiedad color-stop
de la siguiente manera:
CSS3 17
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%,
white), color-stop(20%, red);
Caso3
Hasta ahora hemos visto el degradado lineal, pero también podemos utilizar el
degradado radial utilizando la siguiente sintaxis.
background: -moz-radial-gradient(50%, #65b6cf , #2c2c2c);
Ejemplo
A continuación vemos un ejemplo del uso de gradiente en el fondo
Código CSS
div {
font-size: 30px;
background: -moz-linear-gradient(0% 0% 270deg,#00abeb, white, white
50%,#66cc00 51%,white 100%);
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00));
}
div:hover{
background: -webkit-gradient(radial, 430 50, 0, 430 50, 506,
from(red), to(#000));
background-image: -moz-radial-gradient(430px 50px 45deg, circle
cover, red 0%, black 100%);
}
Código HTML
<div>
HTML 5 no es solo un lenguaje de etiquetas orientado al contenido y
el formato, como las otras versiones de HTML, sino que pretende ser
una tecnología que permita crear aplicaciones de todo tipo. Para ello
se están desarrollando unas APIs que permitan trabajar con todos los
elementos de la página utilizando para ello atributos y métodos
específicos de cada uno. Para que estas APIs sean realmente útiles
tendrán que ser desarrolladas por todos los navegadores del mercado.
</div>
CSS3 18
y cuando situamos el ratón sobre él
http://programmer.tumblr.com/post/471825477/como-crear-degradados-con-css-3
Memomiliano - Como crear degradados con CSS 3
BORDES
Los bordes también soportan efectos de gradiente o degradado. Estos efectos son
soportados, por ahora, por Mozilla e intervienen las siguientes propiedades:
border-bottom-colors
border-top-colors
border-left-colors
border-right-colors
Ejemplo
Código CSS
#cajaGradiente{
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;}
Código HTML
<div id="cajaGradiente">
Esta es una capa borde utilizando gradiente
</div>
CSS3 19
FUENTES
Hasta la aparición de las hojas de estilo CSS3, una de las mayores limitaciones para los
diseñadores Web era la imposibilidad de controlar la tipografía con que se mostraban
los textos en las páginas Web.
Cuando un navegador muestra contenidos de tipo texto de una
página Web busca las fuentes (tipos de letra) en el ordenador
cliente. Debido a este funcionamiento, sólo se pueden utilizar
aquellas fuentes que habitualmente se encuentran en los
equipos de los usuarios.
En caso de que una página Web demande el uso de una
tipografía que no existe en el equipo cliente, el navegador la
substituye por la fuente considerada por defecto, alterando de
esta manera el diseño establecido para el documento.
La consecuencia directa de esta limitación es que todos los
diseñadores se limitan a utilizar aquellas fuentes que casi todos
los usuarios tienen instaladas en sus equipos que suelen ser
Arial, Verdana, Tahoma, Courier, Times New Roman o Georgia.
En el estándar CSS2 se definió una propiedad @font-face que permitía describir las
fuentes que utiliza una página Web, pero esta propiedad se anuló en la versión CSS2.1.
CSS3 ha vuelto a recuperar esta directiva en el módulo llamado Web Fonts dejando vía
libre al uso de cualquier fuente siempre que ésta esté instalada en el servidor.
El formato de la directiva @font-face es la siguiente:
@font-face{
font-family: nombre_fuente;
src: source;
[font-weight: peso];
[font-style: estilo];
}
Donde
nombre fuente es el nombre que se utilizará como alias de la tipografía
source es la ruta del servidor donde se encuentra el archivo de la tipografía,
puede haber más de una ruta separada por comas
peso es el grado de oscuridad y el grosor de la fuente de la fuente (esta
propiedad es opcional), puede tener los siguientes valores: normal | bold |
bolder | lighter
estilo es el estilo que se le debe aplicar al tipo de letra (esta propiedad es
opcional), puede contener los siguientes valores: normal | italic | oblique
Se debe crear una directiva @font-face para cada fuente que se desee descargar del
servidor para utilizar en un documento Web.
CSS3 20
La propiedad font-weight determina el grosor de la fuente sus valores habituales son:
normal | bold | bolder | lighter.
La propiedad font-style permite modificar la fuente para que el texto se muestre en
cursiva u oblicua, sus valores habituales pueden ser: normal | italic | oblicua.
Para utilizar la fuente definida con @font-face tan sólo es necesario utilizar la propiedad
font-family para referenciarla.
selector {
font-family: nombre_fuente;
}
Se puede modificar el tamaño de la fuente utilizando la propiedad CSS font-size, esta
propiedad permite utilizar las siguientes unidades:
Unidades absolutas Unidades relativas
pulgadas (in). Una pulgada=2.54 cm.
centímetros (cm).
milímetros (mm).
puntos (pt). Un punto=1/72 de pulgada.
picas (pc). Una pica=12 puntos
em. Es relativo al tamañode la M de la fuente instalada.
ex: Es relativo a la altura de la x minúscula de la fuente utilizada.
px. Es un píxel y es relativo a la resolución de la pantalla.
EJEMPLO
La siguiente página Web muestra un texto donde se aplican estilos CSS3 con fuentes
personalizadas: Cake.ttf y East-Side-Italic.ttf.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
@font-face {
font-family: Titulo;
src: url(Cake.ttf);
font-weight:bold;}
@font-face {
font-family: Parrafo;
src: url(East-Side-Italic.ttf);}
h1 { font-family: Titulo;}
div {font-family: Parrafo;}
</style>
</head>
<body>
<h1>Probando fuentes</h1>
<div>
CSS3 describe cómo se especifican las propiedades de fuente y
la cantidad de
recursos de fuentes que se cargan de forma dinámica....
</div>
</body>
</html>
CSS3 21
Resultado
Se pueden descargar fuentes gratuitas en la red en múltiples direcciones Web, por
ejemplo:
http://www.letramania.com/
http://www.fontreactor.com/
Descarga una fuente Amaze.ttf, SecretAgent.ttf para implementar una Web con un
párrafo de texto y dos niveles de títulos (h1 y h2). Los títulos deben tener una fuente y
el texto del párrafo otra.
SELECTORES
La versión CSS 3 aporta nuevos selectores, pseudo-clases y pseudo-elementos. La lista
provisional de novedades y su explicación detallada se puede encontrar en el módulo de
selectores de CSS 3 http://www.w3.org/TR/css3-selectors/
Patrón Significado Se describe en la sección
* cualquier elemento Selector universal
E un elemento de tipo E Selector de tipo
E [foo] un elemento E con un atributo "foo" Selectores de atributo
E [foo = "bar"] un elemento E cuyo atributo "foo" = "bar"
Selectores de atributo
E [foo ~ = "bar"] un elemento E cuyo atributo "foo" es una lista de valores separados por espacios en blanco, uno de los cuales es exactamente igual a "bar"
Selectores de atributo
E [foo ^ = "bar"] un elemento E cuyo atributo "foo"comienza exactamente con la cadena "bar"
Selectores de atributo
E [$ foo = "bar"] un elemento E cuyo atributo "foo" termina exactamente con la cadena "barra"
Selectores de atributo
E [foo * = "bar"] un elemento E cuyo atributo "foo" contiene la subcadena "bar"
Selectores de atributo
E [foo| = "en"] un elemento E cuyo atributo "foo" tiene una lista de valores desde (la izquierda) separados por el guión con "es"
Selectores de atributo
E:root un elemento E, la raíz del documento, equivalente a el elemento html del HTML 4
Pseudo-classes estructurales
CSS3 22
E:nth-child(n) un elemento E, el hijo n-ésimo de su padre
Pseudo-classes estructurales
E:nth-Last-child(n) un elemento E, el hijo n-ésimo de su padre, contando desde el final
Pseudo-classes estructurales
E:nth-of-type(n) un elemento E, el hermano n-ésimo de su tipo
Pseudo-classes estructurales
E:nth-Last-of-type(n) un elemento E, el hermano n-ésimo de su tipo, contando desde la última
Pseudo-classes estructurales
E:first-infantil un elemento E, primer hijo de su padre Pseudo-classes estructurales
E:last-infantil un elemento E, último hijo de su padre Pseudo-classes estructurales
E:first-de- type un elemento E, hermano primero de su tipo
Pseudo-classes estructurales
E:last-de- type un elemento E, último hermano de su tipo
Pseudo-classes estructurales
E: only-child un elemento E, que es hijo único de su padre
Pseudo-classes estructurales
E: only-of- type un elemento E, que es único hermano de su tipo
Pseudo-classes estructurales
E:Empty un elemento E que no tiene hijos (incluyendo nodos de texto)
Pseudo-classes estructurales
E:link E:visited
un elemento E de tipo hiperlink no visitado (: link) o ya visitado (:visited)
Los pseudo-classes de enlace
E:actived E:hover E:focus
un elemento E durante ciertas acciones de usuario
Las pseudo-classes de acción de usuario
E:target un elemento E que es el destino de una referencia URI
La pseudoclase de destino
E:lang(fr) un elemento de tipo E en lenguaje "fr" (el lenguaje del documento especifica cómo se determina el idioma)
El: lang() pseudoclase
E: enabled E: disabled
un elemento de la interfaz de usuario E que está activado o desactivado
El elemento de la interfaz de usuario Estados pseudo-classes
E: checked un elemento de la interfaz de usuario E que se chequea (por ejemplo un botón de opción o la casilla de verificación)
El elemento de la interfaz de usuario Estados pseudo-classes
E::first-line la primera línea con formato de un elemento E
El:: pseudo-element de primera línea
E::first-letter la primera letra con formato de un elemento E
El:: primera letra pseudo-element
E::before contenido generado antes de un elemento E
El:: antes de pseudo-element
E::After contenido generado después de un elemento E
El:: después de pseudo-element
E.warning un elemento E cuya clase es "warning" (el lenguaje del documento especifica cómo se determina la clase).
Selectores de clase
E#myid un elemento E con ID igual a "myid". Selectores de ID
E:not(s) un elemento E que no coincide con el selector simple s
Pseudoclase de negación
CSS3 23
E F un elemento F descendiente de un elemento E
Combinador descendiente
E > F un elemento hijo F de E Combinador de niño
E + F un elemento de F precedido por un elemento E
Combinador de hermanos adyacentes
E ~ F un elemento de F precedido por un elemento E
Combinador de hermano general
CSS3 24
REFERENCIA CSS3
CSS3 25
COMPATIBILIDAD DE CSS 3 CON LOS NAVEGADORES
Aunque CSS3 está todavía en fase de desarrollo, los selectores que se mencionarán a
continuación pueden ser utilizados ya en algunos navegadores.
Safari en particular da un extenso soporte a estas nuevas funciones de CSS3.
Lamentablemente, el porcentaje de usuarios de este navegador no es muy alto aunque
está en constante crecimiento.
Al contrario que en el caso de Safari, Firefox tiene un número elevadísimo de usuarios y
desde su versión 3.1 ya da soporte a una amplia gama de funcionalidades en CSS3.
Google Chrome da a CSS3 más o menos el mismo soporte, en cuanto a funcionalidad
se refiere, que Safari. Y además cabe tener en cuenta que desde su lanzamiento muchos
usuarios de Windows lo han reeemplazado por Internet Explorer.
La cara negativa de la moneda una vez más, es Internet Explorer, cuyos usuarios no
podrán disfrutar de esta nueva funcionalidad hasta que Explorer 9 esté en el mercado.
Para analizar al compatiblidad del navegador utlizado con HTML5, CSS3 ir a
http://haz.io/
Para ver una tabla compatibilidad de todos los navegadores con las propiedades CSS3
actualizada ir a http://caniuse.com/#
CSS3 26
FUENTES
http://www.desarrolloweb.com Desarrollo Web, Tu mejor ayuda para aprender a hacer
webs.
http://www.css3.info CSS3 . Info - All you ever needed to know about CSS3
http://www.cssblog.es CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */
http://playground.html5rocks.com HTML5 Playground
Enlaces interesantes:
Para hacer menús:
http://almacenplantillasweb.es/2009/11/menu-css-tutoriales-interesantes/
Colores en CSS3:
http://www.slideshare.net/LeaVerou/colors-in-css3
Generador de efectos CSS3:
http://almacenplantillasweb.es/2010/04/css3-y-html5-recursos-de-diseno-
web/
15 trucos CSS3 en divs, texto e imágenes:
http://soycachanilla.com/2010/08/15-trucos-css3-en-divs-texto-e-
imagenes.html
Menú desplegable de CSS3:
http://www.developer.zeandesign.net/431/desarrollo/menu-desplegable-de-
css3/
6 herramientas útiles paras los estilos CSS3:
http://www.cosassencillas.com/articulos/6-herramientas-utiles-para-los-
estilos-css3
Qué se puede hacer con CSS:
http://foro.ucoz.es/forum/5-268-8
Tutorial
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5#05
Degradados
http://www.desarrolloweb.com/articulos/degradado-css-3.html
http://www.desarrolloweb.com/articulos/degradado-lineal-css3.html
http://tools.dynamicdrive.com/gradient/
Gradientes
http://vagabundia.blogspot.com/2010/05/usando-gradientes-en-los-
enlaces.html Usando gradientes en las imágenes
http://gradcolor.com/css3-gradient.php CSS3 gradient generator
