Manual Actualizacion a CSS3
Content
Introducción a CSS3
Lección
1
curso de actualización a css3
Introducción
Bienvenido al curso “Novedades en CSS3” de Conceptivia. Vamos a tratar de explicarte cuáles han sido
las novedades que ha aportado la especificación de
CSS3 y las nuevas características con las que podrás
contar en el momento de “adornar” tus páginas web.
En concreto trataremos los cambios que han surgido
en las siguientes temáticas:
• Color
• Fondos y bordes
• Efectos de texto
• @font-face
• Diseño de Columnas Múltiple
• Modelo de Caja e Interfaz de usuario
• Selectores
Empecemos, pues, sin más preámbulos, con los contenidos del curso.
3
Color
2
Lección
curso de actualización a css3
Color
En cuanto al color, css3 ha introducido cambios significativos, gracias a los cuales podrás definir los colores con funciones nuevas, hacer uso del canal alfa y
además generar otros efectos como gradientes lineares o circulares.
Empecemos con una función nueva hsl ().
Mediante esta función podrás definir el tono, el brillo
y la saturación de un color como indican las propias
siglas de su nombre (Hue, Saturation, Lightness).
hsl() tiene tres argumentos numéricos que se corresponden con cada uno de estos conceptos. Por ejemplo:
.azul {
}
background: hsl(240,100%, 50%);
El primer argumento es el tono, que coloquialmente
lo podríamos denominar “color puro”. Si observamos
la imagen, el tono es un valor numérico que indica un
grado dentro del círculo cromático. 0 ó 360 es el tono
rojo, 120 es el verde y 240 es azul. La gama entera de
tonos está comprendida entre 0 y 360 grados.
6
curso de actualización a css3
El segundo argumento determina la saturación o la
intensidad de cada color. Sus valores se mueven desde su máximo (100%), cualquier color puro, hasta su
mínimo (0%) que correspondería a un tono gris.
Por ultimo debemos añadir el argumento que corresponde al brillo. Brillo es la cantidad de luz emitida
o reflejada por un objeto y también lo indicaremos
mediante un porcentaje. El brillo medio se sitúa en el
50%. Acercarnos al 0% implicará oscuridad (negro) y
aproximarnos al 100% hará el color más claro (blanco).
Color - Opacidades
Existe una nueva función muy parecida que se lla7
curso de actualización a css3
ma hsla (). Esta función es idéntica a la anterior con
el añadido de que podemos establecer la opacidad
(canal Alfa) del color con un cuarto argumento. Los
valores de este cuarto argumento van del 0 (transparente) al 1 (opaco). Vamos a hacer que nuestra clase
azul defina una opacidad del 20%.
.azul {
}
background: hsla(240,100%, 50%, 0.2);
Seguro que conoces la función rgb() de versiones anteriores de CSS. La capacidad de definir un valor para
el canal alfa ha hecho preciso que surja la nueva función rgba(). Esta función tiene cuatro argumentos,
los tres primeros son los canales RGB (rojo, verde y
azul) y el cuarto parámetro es el canal Alfa. Recuerda que los tres primeros valores deben ser números
entre 0 y 255 y el cuarto debe encontrarse entre el
0 y el 1.
Modifiquemos la clase azul utilizando la función
rgba(). El resultado será idéntico al que obteníamos
antes.
.azul {
}
8
background: rgba(0,0, 255, 0.2);
curso de actualización a css3
Siguiendo con la opacidad de los colores, en CSS3 ha
surgido la propiedad opacity por si quieres determinar el valor del canal alfa por separado, permitiéndote definirlo para varios elementos que luego pueden
tener colores diferentes. Nuestra clase quedaría así:
.azul {
background: rgb(0,0, 255);
opacity:0.2;
}
Estas funciones y propiedades puedes utilizarlas
tranquilamente ya que cualquier navegador moderno las sabe interpretar.
Color - Degradados
Otra de las funcionalidades nuevas relacionadas con
el color, es la posibilidad de definir degradados lineales y radiales. No obstante, cuando quieras utilizarlos
deberás tener en cuenta que Internet Explorer no es
capaz de interpretarlos (al menos hasta que salga a
la luz la versión 10) y que para el resto de navegadores debes utilizar los prefijos que marca cada uno de
ellos (-moz-, -webkit-, y -o-).
Empecemos por los gradientes lineales. En un gradiente de este tipo pasamos de un color a otro de
9
curso de actualización a css3
manera lineal. Puede ser de arriba a abajo, de izquierda a derecha o sobre una línea con cualquier
ángulo.
La sintaxis es la siguiente, teniendo en cuenta los
prefijos que comentábamos antes:
.degradado_morado {
background: linear-gradient(top, rgb(169,90,247) ,
rgb(203,117,255));
background:
-moz-linear-gradient(top,
rgb(169,90,247)
,
rgb(203,117,255));
background: -o-linear-gradient(top, rgb(169,90,247) ,
rgb(203,117,255));
background:
-webkit-linear-gradient(top,
rgb(169,90,247) , rgb(203,117,255));
}
Como resultado obtenemos un degradado entre diferentes tonos de color morado. Hemos utilizado tres
argumentos para obtener este resultado: El origen
del degradado, el color inicial y el color final. Ambos
colores los hemos establecido gracias a sendas funciones rgb().
10
curso de actualización a css3
El origen desde donde comenzará el degradado
puede ser arriba (top) como en el ejemplo, abajo (bottom), izquierda (left), derecha (right) o desde una esquina cualquiera (right top, left top, right
bottom o left bottom). Los degradados se llevarán a
cabo desde el origen hasta una esquina o lado que
sea opuesto. Es decir, de arriba abajo, de izquierda
a derecha, de la esquina superior izquierda a la esquina inferior derecha… así hasta completar todas
las combinaciones. También puedes usar un valor
en grados para determinar el origen, donde 0deg es
equivalente a left, -90deg es igual a top, 180deg es
igual que right y por último 90deg equivale a bottom.
background: linear-gradient(top left, #fff, #000);
background: linear-gradient(-90deg, #fff, #000);
Una vez determinado el origen, podemos enumerar
todos los colores que queramos que configuren el
degradado, separados por comas.
11
curso de actualización a css3
Podemos usar paradas de color o “color stops” para
afinar más el degradado. Con estas paradas determinaremos la distribución de los colores a lo largo del
gradiente.
background: linear-gradient(#fff 20%, #000);
Observa que después de la definición del primer color hemos escrito 20%, lo que implica que el primer
color no comenzará a “degradarse” hasta el 20% del
tamaño del elemento, como puedes ver en la imagen. A partir de ahí comenzará el degradado hasta
el segundo color. Hemos utilizado un porcentaje para
marcar esta parada de color pero podríamos haber
utilizado píxeles o em. En este caso, hemos utilizado
dos colores, pero puedes definir tantos como necesites, escribiéndolos en orden y separados por comas.
Cada uno de estos colores también podrá contar con
paradas de color.
12
curso de actualización a css3
La forma de generar un gradiente radial es muy similar a lo que hemos visto hasta el momento. La sintaxis es la siguiente:
background: radial-gradient(50% 50%, circle cover,
#fff, #000);
Observa como el gradiente se distribuye de manera
circular o elíptica, desde un punto del elemento (en
este caso el punto es 50% 50%, es decir, el punto central) hacia afuera.
El punto inicial del degradado se especifica con una
o dos coordenadas en píxeles, porcentaje o em. Si se
omiten ambas, se entiende que el degradado tiene
que comenzar en el punto central. Es decir, para el
degradado que dibujamos anteriormente podríamos
13
curso de actualización a css3
haber omitido este argumento y el resultado hubiera
sido el mismo.
Mediante el segundo argumento declaramos la forma del gradiente. Ésta puede ser circular o elíptica
(“circle” o “ellipse”).
El siguiente argumento determina como se va a expandir el degradado a lo largo del elemento. En la
siguiente imagen verás como afectan las distintas opciones a un mismo degradado.
Para generar este ejemplo hemos utilizado un gradiente radial con origen en (30% 40%), de forma cir14
curso de actualización a css3
cular y que parte de blanco hacia negro. La única
variante ha sido la palabra clave con la que definimos
la expansión dentro del elemento en el que dibujamos el gradiente.
closest-side: El degradado se expandirá hasta el lado
más cercano al origen o centro del degradado.
farthest-side: El degradado se extenderá hasta el
lado más alejado al origen.
closest-corner: El degradado llegará hasta el vértice
más cercano al centro.
farthest-corner: El degradado se extenderá hasta el
vértice más lejano al origen.
contain: Es sinónimo de closest-side.
cover: Es lo mismo que decir farthest-corner.
En vez de utilizar estas palabras clave, podemos indicar manualmente la anchura y la altura de nuestro
gradiente. Por ejemplo, esta línea de código:
background: radial-gradient(30% 40%, 100px 150px,
#fff, #000);
Generará un degradado de 100 x 150 píxeles como
15
curso de actualización a css3
este:
Por último, debemos indicar los colores que compondrán el gradiente. Pueden ser los que estimemos
oportunos siempre que los escribamos separados
por comas. Estos colores podrán tener o no paradas
de color si así lo decidimos.
Existen otro par de funciones para dibujar gradientes, o mejor dicho, para repetirlos a lo largo del elemento. Se trata de repeating-radial-gradient() y de
repeating-linear-gradient(). Con estas funciones,
lo que conseguimos es que en el lugar en el que se
comenzaría a ver el color solido del final del degradado, el gradiente comienza de nuevo. Volviendo al
ejemplo anterior, si hacemos que el gradiente pase a
ser repeating-radial-gradient() obtenemos este efecto:
16
curso de actualización a css3
El efecto es más atractivo si hacemos que el tamaño
del gradiente sea de 10 x 10 píxeles:
17
Bordes
3
Lección
curso de actualización a css3
Bordes
Empezaremos hablando de los bordes. En concreto
hablaremos de las siguientes tres propiedades border-radius, box-shadow y border-image. Gracias
a ellas podrás generar bordes redondeados, añadir
sombra a los elementos y usar una imagen como
borde, algo que hasta ahora no era posible realizar
solo con CSS.
En cuanto al soporte de navegadores para estas
propiedades, observa como están mayormente
aceptadas con la excepción de border-image, que
no puede utilizarse para Internet Explorer y que
para el resto de navegadores excepto Chrome, hay
que hacer uso de prefijos.
border-image
shadow
Explorer
Chrome
Safari -webkit-
Opera -o-
Mozilla -moz-
Borde con radio
border-radius
20
border-radius
box-
curso de actualización a css3
Esta propiedad se utiliza para definir los cuatro
bordes de un elemento de manera simultánea. La
manera más simple de definir el radio de los cuatro
bordes es el siguiente:
border-radius: 10px;
De esta manera hemos determinado que los cuatro
bordes del elemento tengan un radio de 10 píxeles.
Puedes definirlos de manera individual, aportando
cuatro valores, teniendo en cuenta que el orden
comienza en border-top-left-radius y continúa en
sentido horario:
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
Si aportas dos valores a la propiedad border-radius,
estarás definiendo border-top-left-radius y borderbottom-right-radius con el primer valor y los otros
dos bordes restantes (border-top-right-radius y
border-bottom-left-radius), con el segundo valor.
Por ejemplo,
border-radius: 10px 25px;
da como resultado:
21
curso de actualización a css3
Podemos afinar más la definición de los bordes
redondeados si especificamos individualmente el
componente horizontal y vertical de cada uno de
ellos. En la siguiente imagen puedes ver la diferencia entre un borde con idénticos valores de componente horizontal y vertical (todos los que hemos
dibujado hasta ahora) y un borde con un componente horizontal ostensiblemente mayor que el componente vertical.
Para dibujar este tipo de bordes “asimétricos” puedes hacerlo mediante la propiedad border-radius,
definiendo primero los cuatro valores de componente horizontal para cada borde y posteriormente
lo cuatro componentes verticales respectivos:
border-radius: 35px 35px 35px 35px / 20px 20px
20px 20px;
Obtendrás un resultado igual si lo haces de la
siguiente manera, en la que utilizamos una propiedad para definir cada borde. Observa que primero
debes escribir el valor del componente horizontal y
después el vertical:
border-bottom-left-radius: 35px 20px;
border-bottom-right-radius: 35px 20px;
22
curso de actualización a css3
border-top-left-radius: 35px 20px;
border-top-right-radius: 35px 20px;
Estos bordes sólo serán visibles si has asignado un
borde al elemento con anterioridad, por ejemplo
así:
border: #000 2px solid;
Borde con sombra
box-shadow
Si queremos que un elemento tenga una o varias
sombras debemos utilizar la propiedad box-shadow.
Su sintaxis es la siguiente:
box-shadow: sombra-horizontal sombra-vertical
desenfoque extensión color inset;
Puedes especificar cuantas sombras como quieras
si van separadas por comas. Para cada una de ellas
tienes que especificar al menos dos valores.
sombra-horizontal: Este valor es obligatorio. Con
este valor marcarás la posición de la sombra hori23
curso de actualización a css3
zontal. Los valores positivos indican que la sombra
se situará a la derecha del elemento. Los negativos,
desplazarán esta sombra al lado izquierdo.
sombra-vertical: Este valor es similar al anterior y
también es obligatorio. Con él situarás la sombra
vertical. Los valores positivos indican que la sombra
se situará por debajo del elemento y los negativos,
desplazarán esta sombra hacia la parte de arriba.
desenfoque: Este valor define la distancia de desenfoque. Cuanto más bajo sea el valor más “definida”
será la sombra. Opcional.
extensión: Aquí defines el tamaño de la sombra.
Por defecto el valor es 0. Opcional.
color: Color de la sombra. Opcional.
inset: Con esta palabra clave haces que la sombra
pase a ser interior. Opcional.
Veamos en un ejemplo de código la combinación de
los bordes redondeados con una box-shadow. Centrándonos en la sombra, fíjate que hemos definido
una posición horizontal, una posición vertical y un
desenfoque de cinco píxeles. Hemos suavizado un
poco el color negro por defecto de la sombra y el
resto de los valores los hemos dejado sin tocar. Pue24
curso de actualización a css3
des ver el resultado en la imagen correspondiente:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div
{
width:200px;
height:100px;
background-color:#ddd;
box-shadow: 5px 5px 5px #333;
border:2px solid;
border-radius: 15px 10px 12px 2px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Imágenes para los bordes
border-image
Con esta propiedad puedes usar una imagen para
crear los bordes. La sintaxis que utilizarás para gene25
curso de actualización a css3
rar bordes con una imagen es la siguiente:
border-image: source slice repeat;
Con source defines la ruta hacia la imagen que quieras usar como borde.
slice se utiliza para definir los márgenes interiores
que servirán como guía para dividir la imagen en 9
secciones. Puedes indicar cuatro valores, uno para
cada lado, es decir,
top, right, bottom y left. Puedes utilizar porcentajes
o pixels. Si usas porcentajes deberás utilizar el valor
más el símbolo %, si usas píxeles solo debes indicar
el valor.
repeat permite elegir entre tres opciones, stretch,
round y repeat, que determinan como se repetirán
las secciones centrales de la imagen a través del
borde. Las esquinas de la imagen se colocarán en las
esquinas correspondientes de la caja del elemento.
Con estos tres valores harás que las secciones centrales, se repitan (repeat), se escalen (stretch) o se
repitan ajustándose al espacio disponible sin partir
el fragmento (round). Por ahora Safari y Chrome
interpretan round igual que repeat. Puedes escribir dos valores de repetición. Uno para los lados
superior e inferior del elemento y otro para los
lados derecho e izquierdo. Si quieres que la imagen
26
curso de actualización a css3
de borde se comporte igual en los cuatro lados, con
especificar un valor, es suficiente.
Ahora veremos un ejemplo de código para definir
una border-image. Verás como hay que utilizar
prefijos para los distintos navegadores para hacer
que el código funcione. Recuerda que esta propiedad no está soportada por Internet Explorer. Fíjate
también, en que hay que indicar un ancho de borde
para que el efecto funcione.
div
{
border-width:15px;
-moz-border-image:url(border.png) 30 30 30 30
round stretch;
-webkit-border-image:url(border.png) 30 30 30 30
round stretch;
-o-border-image:url(border.png) 30 30 30 30 round
stretch;
border-image:url(border.png) 30 30 30 30 round
stretch;
}
Teniendo en cuenta que hemos usado esta imagen
de fondo transparente, para utilizarla como borde:
27
curso de actualización a css3
El efecto que conseguimos lo puedes ver a continuación, si abres la página con el navegador mozilla:
28
Fondos
4
Lección
Lección
curso de actualización a css3
Introducción a los fondos
En lo que concierne a los Fondos, hablaremos de
dos nuevas propiedades que han aparecido con
CSS3: background-size y background-origin. También veremos como aplicar más de una imagen a un
fondo.
Estas propiedades están disponibles en todos los
navegadores modernos.
Backgrund size
Como puedes intuir background-size se utiliza para
determinar el tamaño de un fondo. Antes de llegar
CSS3 el tamaño de una imagen de fondo venía determinado por el propio tamaño de la imagen. Ahora, es posible especificar el tamaño de la imagen de
fondo, lo que permite reutilizar la imagen de fondo
en diferentes contextos. Puedes señalar el fondo en
píxeles o porcentaje respecto a las dimensiones del
contenedor. El primer valor corresponde a la anchura y el segundo valor define la altura. Si solo indicas
un valor a la altura se le dará un valor auto.
background-size:80px 60px;
background-size:100% 100%;
31
curso de actualización a css3
También puedes usar las palabras clave cover y contain. Si indicas que el valor de background-size sea
cover, la imagen se escala a un tamaño en el que
encaje en la dimensión más grande el elemento.
contain en cambio, escala la imagen para que se
ajuste a la dimensión más pequeña del elemento.
Si usamos la misma imagen que en los ejemplos anteriores y la aplicamos como fondo de un elemento
más grande que la propia imagen, éste es el resultado que obtenemos usando cover o contain.
Backgrund origin
Sobre la propiedad background-origin podemos
decir que determina el área en el que se va a posicionar la imagen de fondo. Cuando colocamos una
imagen de fondo en un elemento, ésta se posiciona dentro del espacio de ese elemento, pero en
relación a un origen que podemos cambiar con esta
propiedad. Los tres posibles orígenes para las imágenes de fondo se señalan con los valores contentbox, padding-box y border-box area.
Cuando el valor es padding-box, que es el utilizado
por defecto, queremos que el eje de coordenadas
donde se va a colocar la imagen sea el espacio
destinado al elemento, incluyendo el padding y sin
32
curso de actualización a css3
contar con el borde.
El valor border-box hará que el origen de coordenadas de la imagen será el borde del elemento.
La imagen se situará donde empieza el borde del
elemento.
content-box cambia el origen de coordenadas al
lugar donde empieza el contenido del elemento,
incluyendo tanto el bordes como el padding.
Veamos la diferencia entre estos tres backgroundorigin con una imagen:
CSS3 te permite definir más de una imagen para un
fondo. En este caso vamos a incluir dos imágenes en
el fondo del elemento body. Solo tienes que especificar las rutas separadas por comas:
body
{
background-image:url(arbol.png),url(montana.jpg);
background-position: left bottom, left top;
background-repeat: no-repeat;
}
33
curso de actualización a css3
En este ejemplo hemos ubicado la imagen arbol.
png en la posición left bottom y la montana.jpg en
la posición left top, ya que el resto de propiedades
del background se definen en el mismo orden que
hemos definido cada capa. Es necesario incluir un
background-repeat: no-repeat; para que cada imagen se vea una sola vez.
Ten en cuenta que las imágenes que declares se van
colocando de modo que la primera aparece sobre
las siguientes. Por lo tanto, en este ejemplo arbol.
png se verá sobre montana.jpg.
34
Efectos de texto
5
Lección
Lección
curso de actualización a css3
Text-shadow
Vamos a hablar ahora de varias propiedades de
texto que han surgido gracias a CSS3: text-shadow,
word-wrap, text-justify y text-overflow.
text-shadow es una propiedad que nos permite darle sombra a un texto. Esta propiedad puede resultar
útil para darle mayor vistosidad a los encabezados o
a aquellos textos que quieras resaltar.
Cuando definas el text-shadow en un elemento
debes declarar la posición de las sombras horizontal
y vertical, la extensión del desenfoque y el color
de la sombra. De estos argumentos, debes definir
obligatoriamente dos, la posición de la sombra horizontal y la posición de la sombra vertical. Puedes
dar valores negativos a estos dos parámetros, lo que
desplazaría la sombra hacia la izquierda y hacia arriba respectivamente. Los valores positivos generaran
la sombra en su posición “natural”, es decir hacia la
derecha y hacia abajo.
text-shadow: sombra-horizontal sombra-vertical
desenfoque color;
Siguiendo este esquema podemos definir una sombra de texto para un encabezado h1 de la siguiente
manera:
37
curso de actualización a css3
h1
{
text-shadow: 4px 4px 4px #ccc;
}
En este ejemplo hemos definido una sombra de texto situada 4 píxeles hacia la derecha y hacia abajo,
con un pequeño desenfoque de 4 píxeles (cuanto
más bajo este valor, más definida estará la sombra)
y de un color gris claro.
Podemos definir varias sombras diferentes separadas por comas.
h1{
text-shadow: 2px 2px 1px #cccccc, 4px 4px 2px #dde8dc, 6px 6px 3px #ccddcc, 8px 8px 5px #666666;
color: #666;
}
En este caso el efecto es un poco más rico:
Puedes jugar con este ejemplo de código para entender mejor lo que hace cada valor y para encontrar un efecto que cubra tus necesidades.
38
curso de actualización a css3
text-shadow se puede utilizar en cualquier navegador moderno excepto en Internet Explorer. En este
caso toca esperar hasta que aparezca la versión 10
en la que si será soportada.
Wordwrap
Hablemos ahora sobre word-wrap. Hasta la llegada
de CSS3 si una palabra era demasiado larga para
encajar dentro del espacio disponible, rebasaba la
caja del elemento extendiéndose fuera de la misma.
word-wrap permite evitar esto, haciendo que las
palabras que no quepan en el ancho del elemento
se corten por la mitad, si es preciso, y no rebasen el
espacio de caja disponible.
Esta propiedad acepta dos valores normal y breakword. El valor por defecto es normal, que solo permite que se corte la palabra por los puntos habituales. Si quieres que las palabras se puedan partir por
lugares no habituales con el fin de que no superen
los límites de la caja, debes usar break-word.
Un ejemplo de código para que los párrafos contemplen la posibilidad de partir las palabras sería el
siguiente:
39
curso de actualización a css3
p{
word-wrap:break-word;
}
Text-justify
En lo que respecta a text-justify, esta propiedad afina la capacidad para justificar un texto, ofreciendo
diferentes opciones siempre y cuando, previamente,
se haya declarado la propiedad text-align con el
valor justify. Veamos el código:
div {
text-align: justify;
text-justify: newspaper ;
}
Echemos un vistazo a los valores que disponemos
para controlar la justificación de los textos:
auto: El navegador determinará cuál es el algoritmo
de justificación.
inter-word: Con este valor incrementaremos o disminuiremos el espacio entre palabras.
inter-ideograph: Este valor se utiliza para justificar
texto en lenguaje ideográfico (chino, japonés…).
40
curso de actualización a css3
inter-cluster: Gracias a este valor se justificará texto
que no cuente con espacio entre palabras (lenguas
asiáticas).
distribute: Es parecido al valor newspaper, solo
que la última línea no se justificará. Si quieres que
la última línea también se justifique, debes usar
distribute-all-lines.
kashida: Se ajusta el contenido alargando los caracteres.
newspaper: El espaciado entre letras y palabras es
modificado según convenga.
Text-overflow
Para terminar con los efectos de texto, hablemos
de text-overflow. Gracias a esta propiedad podemos definir que ocurrirá cuando el texto supere el
espacio disponible. Esta propiedad es útil cuando el
overflow del elemento tiene valor hidden. Tenemos
tres opciones cuando esto ocurra, tal y como puedes apreciar en este ejemplo de sintaxis:
text-overflow: clip|ellipsis|string;
41
curso de actualización a css3
Si usamos el valor clip, la palabra que supere el
espacio disponible será cortada. Si declaramos que
esta propiedad tenga un valor ellipsis, el navegador
usará unos puntos suspensivos para representar que
queda contenido que no ha podido ser mostrado.
Por último, queda una última opción que consiste
en elegir una cadena de texto o string para que el
navegador la utilice cuando ya no quepa más texto.
42
Introducción a HTML
@font-face
Lección
Lección
2
6
curso de actualización a css3
Font Face
Antes de que apareciera CSS3, las fuentes que se
podían usar con seguridad en un diseño web eran
muy limitadas, ya que se reducían a las fuentes que
el usuario tuviera instaladas en su equipo. Por ello
la gama sobre la que se podía elegir era bastante
reducida.
En este momento, gracias a la norma @font-face se
puede utilizar cualquier tipo de fuente que queramos. Este ha sido uno de los avances más relevantes
que ha traído la especificación CSS3, ya que permite
que las páginas sean más variadas.
Lo único que necesitas es hacer que la fuente de tu
elección este disponible en tu servidor y ésta se descargará desde allí en el momento en que se cargue
la página. Para declarar este tipo de fuentes debes
utilizar la regla @font-face.
Para utilizar la regla @font-face, primero debes declarar un nombre para la fuente (el que tú quieras)
en la propiedad font-family, y la ruta en la que se
encuentra esa fuente. Debemos tener en cuenta
que si el navegador no encuentra la fuente en nuestro servidor, cogerá la siguiente por defecto que
tengamos definida en nuestra hoja de estilos.
45
curso de actualización a css3
Para usar esa fuente en un elemento solo que tienes
que asignar a su propiedad family-font la fuente
que has definido anteriormente, con el nombre
que hayas elegido para ella. Veamos un ejemplo de
código.
@font-face
{
font-family: sansation;/*Es es el nombre con el que
identificarás esta fuente a partir de ahora*/
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /*Esta fuente es para
Internet Explorer 9 o superior*/
}
div
{
font-family: sansation; /*Asignas la fuente aludiendo al mismo nombre declarado en @font-face*/
}
Si quieres que esa fuente pueda ser renderizada en
negrita debes añadir una nueva norma @font-face,
con el mismo nombre pero especificando cuál es la
fuente a utilizar en ese caso. Siguiendo con el ejemplo, sería algo así:
@font-face
{
46
curso de actualización a css3
font-family: sansation;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’);
font-weight:bold;
}
La fuente Sansation_Bold.ttf es otra fuente que
utilizaremos cuando demos a un elemento el tipo
de letra “sansation” y además indiquemos que la
font-weight debe ser bold. Por lo tanto, para cada
característica nueva que queramos que tenga el tipo
de letra “sansation”, debemos escribir una nueva
regla @font-face.
Propiedades
En la siguiente tabla tienes una lista de propiedades
y valores que puedes utilizar dentro de una norma
@font-face:
Formatos y contabilidades
Ten en cuenta que no todos los navegadores utilizan
el mismo tipo de archivo de fuente. Firefox, Chrome,
Safari, y Opera utilizan fuentes .ttf (True Type Fonts),
47
curso de actualización a css3
.otf (OpenType Fonts) y .woff (Web Open Font Format). Sin embargo, para que Internet Explorer 9 y
superior renderice convenientemente la fuente que
hayas elegido, deberás aportar una fuente de tipo
.eot (Embedded OpenType) o .woff.
Te adelantamos aquí una manera de definir la regla
@font-face lo más compatible posible con todos los
navegadores.
@font-face {
font-family: ‘Comfortaa Regular’;
src: url(‘Comfortaa.eot’);
src: local(‘Comfortaa Regular’),
local(‘Comfortaa’),
url(‘Comfortaa.ttf’) format(‘truetype’),
url(‘Comfortaa.svg#font’) format(‘svg’);
}
Observa que tenemos dos propiedades src, una para
Internet Explorer y otra para el resto de navegadores. En primer lugar queremos aportar la fuente .eot
que necesita Internet Explorer, ya que la segunda
declaración src será ignorada por este navegador ya
que no soporta la función local(). La segunda propiedad es una lista del resto de formatos de fuente
que necesitamos en el orden en el que queremos
que se vayan llamando. Los primeros dos valores
usan la función local() para comprobar si esta fuen48
curso de actualización a css3
te en concreto ya está instalada en el equipo del
usuario. De ser así, nos ahorraríamos una llamada
al servidor y la página usaría la fuente instalada en
el equipo. Hay diferentes maneras de nombrar una
fuente.
Normalmente para llamar a una fuente necesitamos
el nombre genérico (family name) y el estilo (Regular, Bold, Italic etc.) En este caso debemos utilizar
dos funciones local () porque Safari no nombra las
fuentes así, sino usando lo que se denomina PostScript name, por lo que para mayor garantía debemos incluir las dos maneras de llamar a la fuente.
El siguiente formato después de las fuentes locales
es TTF, o truetype font. Si quieres usar una fuente
tipo open type font, la incluirías aquí. Por último
incluiremos el formato SVG que también es utilizada
por algunos navegadores.
Profundizaremos sobre la manera de generar estos
formatos en un ejercicio práctico.
49
Diseño de columnas múltiples
7
Lección
curso de actualización a css3
Diseño de columnas multiples
Con la aparición de CSS3 puedes generar diseños
multi-columna similares a los que presentan los
periódicos. Hablaremos de varias propiedades que
son las que nos permitirán controlar este diseño:
column-count, column-gap, column-rule y columnwidth.
Para usar estas propiedades con Internet Explorer
tendrás que esperar a la versión 10. Con Firefox
tienes que usar el prefijo –moz-. Chrome y Safari
requieren el prefijo -webkit-. Con Opera puedes
utilizar estas propiedades sin necesidad de prefijos.
Empecemos por la propiedad column-count. Esta
propiedad declara el número de columnas en las
que se dividirá el texto que contenga un elemento.
Por ejemplo, para dividir el texto de los div en tres
columnas, debes escribir algo así:
div
{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
53
curso de actualización a css3
Debajo puedes ver el resultado:
Esta propiedad acepta dos tipos de valores: un
número que determina la cantidad de columnas en
que queremos distribuir el texto o el valor auto. Si
decides que column-count sea auto, el número de
columnas será determinado por otras propiedades,
como por ejemplo column-width.
Hablemos ahora de la propiedad column-gap. Esta
propiedad se utiliza para determinar el tamaño del
espacio blanco entre columnas.
Añadamos al código anterior las siguientes líneas:
-moz-column-gap:10px;
-webkit-column-gap:10px;
column-gap:10px;
Puedes observar en la imagen cómo hemos disminuido la distancia entre columnas por debajo del valor que automáticamente se le asignó en el ejemplo
anterior. El valor automático de column-gap es de
1em. Si quieres mantener el espacio en blanco en
ese tamaño, puedes darle a la propiedad columngap un valor normal.
54
curso de actualización a css3
Si has definido una column-rule entre dos columnas,
ésta aparecerá en medio del espacio en blanco.
Colum-rule
Pero ¿qué es una column-rule? Esta propiedad
determina la anchura, el estilo y el color del espacio
entre columnas, o al menos de una parte. Siguiendo
con el ejemplo anterior, añade estas tres líneas de
código:
-moz-column-rule:1px outset #ccc;
-webkit-column-rule:1px outset #ccc;
column-rule:1px outset #ccc;
La sintaxis de esta propiedad es la siguiente:
column-rule: column-rule-width column-rule-style
column-rule-color;
Los valores por defecto son medium, none y black,
pero veamos todos los que podemos utilizar para
definir esta propiedad.
55
curso de actualización a css3
Como comentábamos anteriormente, también
puedes determinar el ancho de las columnas con
la propiedad column-width. Esta propiedad acepta
dos valores, un valor numérico en píxeles o el valor
auto, con el que permites que sea el propio navegador el que determine el ancho de las columnas
teniendo en cuenta el espacio disponible.
56
Modelo de caja e interfaz de usuario
8
Lección
Lección
curso de actualización a css3
Modelo de caja - Resize
Hablaremos en este apartado de aquellas propiedades nuevas que afectan al modelo de caja y a la interfaz de usuario: resize, box-sizing, outline-offset,
overflow-x y overflow-y.
Vamos con la propiedad resize. Gracias a CSS3 podrá
especificar si un elemento puede ser escalado o
no por el usuario, siempre y cuando este usuario
esté navegando con Firefox 4 o superior, Chrome o
Safari.
Esta propiedad acepta cuatro valores:
none El elemento no se puede redimensionar.
both Se podrá redimensionar tanto en vertical
como en horizontal
horizontal
El usuario podrá modificar la anchura.
vertical El usuario podrá modificar el elemento en
altura.
Cuando declares esta propiedad, saldrá un icono en
la esquina inferior derecha del elemento que tendrá
un aspecto sutilmente distinto dependiendo del
navegador.
59
curso de actualización a css3
Box Sizing
La propiedad box-sizing afecta a lo que llamamos
modelo de caja. Este modelo implica que el ancho
de un elemento es el resultado de la suma de sus
márgenes, bordes y paddings izquierdo y derecho
más el propio ancho del contenido. Esta lógica se
aplica igualmente para calcular la altura del elemento. Gracias a box-sizing podrás modificar la interpretación que hace el navegador sobre este modelo
de caja.
Para aplicar esta propiedad el código que debes
utilizar es el siguiente:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Los navegadores principales interpretan bien esta
propiedad con la excepción de Safari y Mozilla para
los que aún hay que usar el prefijo correspondiente.
Esta propiedad acepta tres valores: content-box,
border-box e inherit. El valor por defecto es
content-box que es el que corresponde a la inter60
curso de actualización a css3
pretación del modelo de caja que explicábamos
hace un momento. El ancho y altura que se declare
para un elemento corresponderá con el ancho de su
contenido. Todos los márgenes, bordes y paddings
se añaden después a estas dimensiones.
border-box hace que el ancho y la altura de un
elemento se fijen a su borde externo. Los márgenes, bordes y paddings, “crecerán” hacia adentro
de ese ancho y ese alto. En esta imagen puedes ver
como se dibujan dos elementos con igual propiedad width, dependiendo de qué valor le demos a la
propiedad box-sizing. Al primer elemento le hemos
dado un valor de border-box y al segundo elemento
un valor content-box.
Si declaramos box-sizing con el valor inherit, el
resultado dependerá del valor de box-sizing que se
haya heredado del elemento padre.
Outline offset
Vamos con la propiedad outline-offset. Como ya
sabes, la propiedad outline sirve para dibujar una línea alrededor del borde de un elemento. El outline,
no forma parte de las dimensiones del elemento y
no está contenido en él. Además, el outline puede
61
curso de actualización a css3
adquirir otras formas, además de la rectangular.
Gracias a la propiedad outline-offset, puedes declarar una distancia entre el borde del elemento y su
outline.
El código para declarar un outline-offset es así:
Este código funcionará en todos los navegadores
con la excepción de Internet Explorer.
div
{
border: #033 1px solid;
outline:2px solid red;
outline-offset:15px;
}
Como resultado de este código consigues algo parecido a esta imagen:
Además de declarar un valor numérico para la
distancia a la que se dibujará el outline, también
puedes darle a la propiedad outine-offset el valor
inherit, con lo que se heredará del elemento padre
el valor que allí tuviera esta propiedad.
Overflow
62
curso de actualización a css3
Por último explicaremos las propiedades, overflow-x
y overflow-y. Estas propiedades permiten gestionar
el desbordamiento en un elemento tratando cada
eje de manera individual. Estas propiedades ofrecen
una manera más precisa de controlar el desbordamiento, que la que ofrece overflow.
Los valores que puedes darle a estas propiedades,
los iremos explicando uno a uno.
visible: El contenido que no quepa en la caja se
mostrará igualmente en el navegador. Es el valor
predeterminado.
hidden: Cualquier contenido que supere las dimensiones del contenedor, quedará oculto.
scroll: El contenedor dispondrá de barras de desplazamiento, exista desbordamiento o no.
auto: En caso de desbordamiento por el eje que se
trate, aparecerá una barra de desplazamiento.
no-display: Si el contenido supera las dimensiones
del contenedor, no se mostrará el contenedor.
no-content: Si el contenido supera las dimensiones
del contenedor, no se mostrará el contenido.
63
curso de actualización a css3
A la hora de aplicar estos valores a overflow-x u
overflow-y, ten en cuenta las siguientes opciones:
• Si no les das ningún valor a ninguna de las dos,
el valor que se aplique a ambas propiedades,
será visible, que es el valor por defecto.
• Si solo le aplicas un valor a una de ellas, la
otra propiedad adquirirá el valor auto, en vez de
visible.
64
Selectores
9
Lección
Lección
curso de actualización a css3
Selectores
A continuación y para finalizar con el curso, te mostramos una serie de selectores nuevos que puedes
utilizar con CSS3.
elemento1~elemento2
Con este selector seleccionaremos aquellos elementos que estén precedidos por otro elemento. Si
tenemos p~ul todos los <ul> que estén precedidos
por un <p> serán seleccionados
[atributo^=valor]
Podemos comparar el inicio del valor de un atributo
con el valor que declaremos gracias a este selector
y de ser iguales, el elemento será seleccionado. Podríamos decir que ^= es sinónimo de “empieza por”.
[atributo $= valor]
Los elementos cuyo atributo “termine por” el valor
que declaremos, serán seleccionados.
[atributo *= valor]
Los elementos cuyo atributo “contenga” el valor que
declaremos, serán seleccionados. Por ejemplo un
div: div[class*=”test”].
:first-of-type
Este selector es equivalente a :nth-of-type(1), y
67
curso de actualización a css3
selecciona el primer elemento de ese tipo que se
encuentre en un contenedor. Por ejemplo p:firstof-type selecciona todos los <p> que sean el primer
párrafo en un contenedor. Puede haber hijos anteriores de otro tipo que no se tienen en cuenta.
:last-of-type
Del mismo modo que hacíamos con el primer hijo
de un contendor, podemos elegir también el último
elemento de un contenedor. Este selector realiza
la misma tarea que :nth-last-of-type(1), es decir,
seleccionar todo elemento que es el último hijo en
un contenedor.
:only-of-type
Todos los elementos que sean los únicos en su especie dentro de un contendor serán seleccionados
por este selector. El contenedor puede tener otros
“hijos”.
:only-child
Cuando necesites seleccionar un elemento que sea
el único hijo en un contenedor, puedes utilizar este
selector.
:nth-child(n)
En este caso se seleccionará el hijo número n del
elemento que queramos. Por ejemplo, p:nthchild(2).
68
curso de actualización a css3
:nth-last-child(n)
Se seleccionará el hijo número n del elemento
que queramos, pero empezando a contar desde el
último hijo.
:nth-of-type(n)
p:nth-of-type(2)seleccionará cada párrafo que sea el
segundo dentro de su contenedor. Solo se tendrán
en cuenta los elementos <p> y no el resto de hijos
que pueda tener el contenedor.
:nth-last-of-type(n)
Este selector es igual al anterior, solo que la cuenta
se inicia desde el último elemento dentro del contenedor.
:last-child
Para elegir el ultimo hijo de un contenedor puedes
hacer algo como: p:last-child, que a su vez, es idéntico a hacer p:nth-last-child(1).
:root
Selecciona el elemento raíz del documento, es decir,
el elemento html.
:empty
Serán seleccionados los elementos que no tengan
“hijos” contando los nodos de texto.
69
curso de actualización a css3
:target
Si utilizas anclajes que se enlacen a distintos puntos
de tu página, puedes utilizar :target para seleccionar el elemento actualmente activo. Ten en cuenta que Internet Explorer no interpreta bien este
selector.
Los siguientes tres selectores se referirán en la mayoría de ocasiones a elementos de formularios.
:enabled
Selecciona los elementos que estén habilitados.
:disabled
Selecciona los elementos que estén deshabilitados.
:checked
Selecciona los elementos que estén seleccionados.
:not(selector)
Serán seleccionados todos los elementos que no
sean el elemento o selector especificado.
::selection
Este selector se aplica a la porción de un elemento
que esté siendo seleccionada por el usuario. Los estilos que puedes aplicar a ::selection son color, background, cursor y outline. Además, si quieres usarlo
con Mozilla debes escribirlo así ::-moz-selection.
70
Referencias
10
Lección
Lección
curso de actualización a css3
Referencias
http://css-tricks.com/understanding-border-image/
http://www.norabrowndesign.com/css-experiments/border-image-anim.html
http://www.css3.info/preview/background-originand-background-clip/
http://css-tricks.com/snippets/css/css-box-shadow/
http://peter.sh/experiments/vendor-prefixed-cssproperty-overview/
http://www.w3schools.com/cssref/default.asp
http://www.w3schools.com/cssref/css_selectors.asp
http://www.w3schools.com/cssref/css_colornames.
asp
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/hsl/
http://www.css3.info/preview/hsla/
http://www.css3.info/preview/rgba/
http://www.impressivewebs.com/css3-linear-gradient-syntax/
http://caniuse.com
http://www.w3.org
http://www.w3.org/TR/css3-images/
www.desarrolloweb.com, Manual de CSS3.
http://www.desarrolloweb.com/articulos/degradados-lineales-repeticion-css3.html
http://www.desarrolloweb.com/articulos/degradados-radiales-repeticion.html
http://www.desarrolloweb.com/articulos/degrada73
curso de actualización a css3
dos-radiales-css3.html
http://www.desarrolloweb.com/articulos/degradado-lineal-css3.html
http://www.desarrolloweb.com/articulos/background-origin-css.html
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ http://hacks.
mozilla.org/2009/06/beautiful-fonts-with-font-face/
http://css-tricks.com/css3-gradients/
http://naturpixel.com/2011/08/17/tono-saturaciony-luminosidad/
http://www.css3.com/css-text-justify/
http://westciv.com/tools/radialgradients/index.html
http://www.webdirections.org/blog/css3-radialgradients/
http://www.webdirections.org/blog/css3-lineargradients/
http://www.sidar.org/recur/desdi/traduc/es/css/
box.html
http://gradients.glrzad.com/
74
Lección
1
curso de actualización a css3
Introducción
Bienvenido al curso “Novedades en CSS3” de Conceptivia. Vamos a tratar de explicarte cuáles han sido
las novedades que ha aportado la especificación de
CSS3 y las nuevas características con las que podrás
contar en el momento de “adornar” tus páginas web.
En concreto trataremos los cambios que han surgido
en las siguientes temáticas:
• Color
• Fondos y bordes
• Efectos de texto
• @font-face
• Diseño de Columnas Múltiple
• Modelo de Caja e Interfaz de usuario
• Selectores
Empecemos, pues, sin más preámbulos, con los contenidos del curso.
3
Color
2
Lección
curso de actualización a css3
Color
En cuanto al color, css3 ha introducido cambios significativos, gracias a los cuales podrás definir los colores con funciones nuevas, hacer uso del canal alfa y
además generar otros efectos como gradientes lineares o circulares.
Empecemos con una función nueva hsl ().
Mediante esta función podrás definir el tono, el brillo
y la saturación de un color como indican las propias
siglas de su nombre (Hue, Saturation, Lightness).
hsl() tiene tres argumentos numéricos que se corresponden con cada uno de estos conceptos. Por ejemplo:
.azul {
}
background: hsl(240,100%, 50%);
El primer argumento es el tono, que coloquialmente
lo podríamos denominar “color puro”. Si observamos
la imagen, el tono es un valor numérico que indica un
grado dentro del círculo cromático. 0 ó 360 es el tono
rojo, 120 es el verde y 240 es azul. La gama entera de
tonos está comprendida entre 0 y 360 grados.
6
curso de actualización a css3
El segundo argumento determina la saturación o la
intensidad de cada color. Sus valores se mueven desde su máximo (100%), cualquier color puro, hasta su
mínimo (0%) que correspondería a un tono gris.
Por ultimo debemos añadir el argumento que corresponde al brillo. Brillo es la cantidad de luz emitida
o reflejada por un objeto y también lo indicaremos
mediante un porcentaje. El brillo medio se sitúa en el
50%. Acercarnos al 0% implicará oscuridad (negro) y
aproximarnos al 100% hará el color más claro (blanco).
Color - Opacidades
Existe una nueva función muy parecida que se lla7
curso de actualización a css3
ma hsla (). Esta función es idéntica a la anterior con
el añadido de que podemos establecer la opacidad
(canal Alfa) del color con un cuarto argumento. Los
valores de este cuarto argumento van del 0 (transparente) al 1 (opaco). Vamos a hacer que nuestra clase
azul defina una opacidad del 20%.
.azul {
}
background: hsla(240,100%, 50%, 0.2);
Seguro que conoces la función rgb() de versiones anteriores de CSS. La capacidad de definir un valor para
el canal alfa ha hecho preciso que surja la nueva función rgba(). Esta función tiene cuatro argumentos,
los tres primeros son los canales RGB (rojo, verde y
azul) y el cuarto parámetro es el canal Alfa. Recuerda que los tres primeros valores deben ser números
entre 0 y 255 y el cuarto debe encontrarse entre el
0 y el 1.
Modifiquemos la clase azul utilizando la función
rgba(). El resultado será idéntico al que obteníamos
antes.
.azul {
}
8
background: rgba(0,0, 255, 0.2);
curso de actualización a css3
Siguiendo con la opacidad de los colores, en CSS3 ha
surgido la propiedad opacity por si quieres determinar el valor del canal alfa por separado, permitiéndote definirlo para varios elementos que luego pueden
tener colores diferentes. Nuestra clase quedaría así:
.azul {
background: rgb(0,0, 255);
opacity:0.2;
}
Estas funciones y propiedades puedes utilizarlas
tranquilamente ya que cualquier navegador moderno las sabe interpretar.
Color - Degradados
Otra de las funcionalidades nuevas relacionadas con
el color, es la posibilidad de definir degradados lineales y radiales. No obstante, cuando quieras utilizarlos
deberás tener en cuenta que Internet Explorer no es
capaz de interpretarlos (al menos hasta que salga a
la luz la versión 10) y que para el resto de navegadores debes utilizar los prefijos que marca cada uno de
ellos (-moz-, -webkit-, y -o-).
Empecemos por los gradientes lineales. En un gradiente de este tipo pasamos de un color a otro de
9
curso de actualización a css3
manera lineal. Puede ser de arriba a abajo, de izquierda a derecha o sobre una línea con cualquier
ángulo.
La sintaxis es la siguiente, teniendo en cuenta los
prefijos que comentábamos antes:
.degradado_morado {
background: linear-gradient(top, rgb(169,90,247) ,
rgb(203,117,255));
background:
-moz-linear-gradient(top,
rgb(169,90,247)
,
rgb(203,117,255));
background: -o-linear-gradient(top, rgb(169,90,247) ,
rgb(203,117,255));
background:
-webkit-linear-gradient(top,
rgb(169,90,247) , rgb(203,117,255));
}
Como resultado obtenemos un degradado entre diferentes tonos de color morado. Hemos utilizado tres
argumentos para obtener este resultado: El origen
del degradado, el color inicial y el color final. Ambos
colores los hemos establecido gracias a sendas funciones rgb().
10
curso de actualización a css3
El origen desde donde comenzará el degradado
puede ser arriba (top) como en el ejemplo, abajo (bottom), izquierda (left), derecha (right) o desde una esquina cualquiera (right top, left top, right
bottom o left bottom). Los degradados se llevarán a
cabo desde el origen hasta una esquina o lado que
sea opuesto. Es decir, de arriba abajo, de izquierda
a derecha, de la esquina superior izquierda a la esquina inferior derecha… así hasta completar todas
las combinaciones. También puedes usar un valor
en grados para determinar el origen, donde 0deg es
equivalente a left, -90deg es igual a top, 180deg es
igual que right y por último 90deg equivale a bottom.
background: linear-gradient(top left, #fff, #000);
background: linear-gradient(-90deg, #fff, #000);
Una vez determinado el origen, podemos enumerar
todos los colores que queramos que configuren el
degradado, separados por comas.
11
curso de actualización a css3
Podemos usar paradas de color o “color stops” para
afinar más el degradado. Con estas paradas determinaremos la distribución de los colores a lo largo del
gradiente.
background: linear-gradient(#fff 20%, #000);
Observa que después de la definición del primer color hemos escrito 20%, lo que implica que el primer
color no comenzará a “degradarse” hasta el 20% del
tamaño del elemento, como puedes ver en la imagen. A partir de ahí comenzará el degradado hasta
el segundo color. Hemos utilizado un porcentaje para
marcar esta parada de color pero podríamos haber
utilizado píxeles o em. En este caso, hemos utilizado
dos colores, pero puedes definir tantos como necesites, escribiéndolos en orden y separados por comas.
Cada uno de estos colores también podrá contar con
paradas de color.
12
curso de actualización a css3
La forma de generar un gradiente radial es muy similar a lo que hemos visto hasta el momento. La sintaxis es la siguiente:
background: radial-gradient(50% 50%, circle cover,
#fff, #000);
Observa como el gradiente se distribuye de manera
circular o elíptica, desde un punto del elemento (en
este caso el punto es 50% 50%, es decir, el punto central) hacia afuera.
El punto inicial del degradado se especifica con una
o dos coordenadas en píxeles, porcentaje o em. Si se
omiten ambas, se entiende que el degradado tiene
que comenzar en el punto central. Es decir, para el
degradado que dibujamos anteriormente podríamos
13
curso de actualización a css3
haber omitido este argumento y el resultado hubiera
sido el mismo.
Mediante el segundo argumento declaramos la forma del gradiente. Ésta puede ser circular o elíptica
(“circle” o “ellipse”).
El siguiente argumento determina como se va a expandir el degradado a lo largo del elemento. En la
siguiente imagen verás como afectan las distintas opciones a un mismo degradado.
Para generar este ejemplo hemos utilizado un gradiente radial con origen en (30% 40%), de forma cir14
curso de actualización a css3
cular y que parte de blanco hacia negro. La única
variante ha sido la palabra clave con la que definimos
la expansión dentro del elemento en el que dibujamos el gradiente.
closest-side: El degradado se expandirá hasta el lado
más cercano al origen o centro del degradado.
farthest-side: El degradado se extenderá hasta el
lado más alejado al origen.
closest-corner: El degradado llegará hasta el vértice
más cercano al centro.
farthest-corner: El degradado se extenderá hasta el
vértice más lejano al origen.
contain: Es sinónimo de closest-side.
cover: Es lo mismo que decir farthest-corner.
En vez de utilizar estas palabras clave, podemos indicar manualmente la anchura y la altura de nuestro
gradiente. Por ejemplo, esta línea de código:
background: radial-gradient(30% 40%, 100px 150px,
#fff, #000);
Generará un degradado de 100 x 150 píxeles como
15
curso de actualización a css3
este:
Por último, debemos indicar los colores que compondrán el gradiente. Pueden ser los que estimemos
oportunos siempre que los escribamos separados
por comas. Estos colores podrán tener o no paradas
de color si así lo decidimos.
Existen otro par de funciones para dibujar gradientes, o mejor dicho, para repetirlos a lo largo del elemento. Se trata de repeating-radial-gradient() y de
repeating-linear-gradient(). Con estas funciones,
lo que conseguimos es que en el lugar en el que se
comenzaría a ver el color solido del final del degradado, el gradiente comienza de nuevo. Volviendo al
ejemplo anterior, si hacemos que el gradiente pase a
ser repeating-radial-gradient() obtenemos este efecto:
16
curso de actualización a css3
El efecto es más atractivo si hacemos que el tamaño
del gradiente sea de 10 x 10 píxeles:
17
Bordes
3
Lección
curso de actualización a css3
Bordes
Empezaremos hablando de los bordes. En concreto
hablaremos de las siguientes tres propiedades border-radius, box-shadow y border-image. Gracias
a ellas podrás generar bordes redondeados, añadir
sombra a los elementos y usar una imagen como
borde, algo que hasta ahora no era posible realizar
solo con CSS.
En cuanto al soporte de navegadores para estas
propiedades, observa como están mayormente
aceptadas con la excepción de border-image, que
no puede utilizarse para Internet Explorer y que
para el resto de navegadores excepto Chrome, hay
que hacer uso de prefijos.
border-image
shadow
Explorer
Chrome
Safari -webkit-
Opera -o-
Mozilla -moz-
Borde con radio
border-radius
20
border-radius
box-
curso de actualización a css3
Esta propiedad se utiliza para definir los cuatro
bordes de un elemento de manera simultánea. La
manera más simple de definir el radio de los cuatro
bordes es el siguiente:
border-radius: 10px;
De esta manera hemos determinado que los cuatro
bordes del elemento tengan un radio de 10 píxeles.
Puedes definirlos de manera individual, aportando
cuatro valores, teniendo en cuenta que el orden
comienza en border-top-left-radius y continúa en
sentido horario:
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
Si aportas dos valores a la propiedad border-radius,
estarás definiendo border-top-left-radius y borderbottom-right-radius con el primer valor y los otros
dos bordes restantes (border-top-right-radius y
border-bottom-left-radius), con el segundo valor.
Por ejemplo,
border-radius: 10px 25px;
da como resultado:
21
curso de actualización a css3
Podemos afinar más la definición de los bordes
redondeados si especificamos individualmente el
componente horizontal y vertical de cada uno de
ellos. En la siguiente imagen puedes ver la diferencia entre un borde con idénticos valores de componente horizontal y vertical (todos los que hemos
dibujado hasta ahora) y un borde con un componente horizontal ostensiblemente mayor que el componente vertical.
Para dibujar este tipo de bordes “asimétricos” puedes hacerlo mediante la propiedad border-radius,
definiendo primero los cuatro valores de componente horizontal para cada borde y posteriormente
lo cuatro componentes verticales respectivos:
border-radius: 35px 35px 35px 35px / 20px 20px
20px 20px;
Obtendrás un resultado igual si lo haces de la
siguiente manera, en la que utilizamos una propiedad para definir cada borde. Observa que primero
debes escribir el valor del componente horizontal y
después el vertical:
border-bottom-left-radius: 35px 20px;
border-bottom-right-radius: 35px 20px;
22
curso de actualización a css3
border-top-left-radius: 35px 20px;
border-top-right-radius: 35px 20px;
Estos bordes sólo serán visibles si has asignado un
borde al elemento con anterioridad, por ejemplo
así:
border: #000 2px solid;
Borde con sombra
box-shadow
Si queremos que un elemento tenga una o varias
sombras debemos utilizar la propiedad box-shadow.
Su sintaxis es la siguiente:
box-shadow: sombra-horizontal sombra-vertical
desenfoque extensión color inset;
Puedes especificar cuantas sombras como quieras
si van separadas por comas. Para cada una de ellas
tienes que especificar al menos dos valores.
sombra-horizontal: Este valor es obligatorio. Con
este valor marcarás la posición de la sombra hori23
curso de actualización a css3
zontal. Los valores positivos indican que la sombra
se situará a la derecha del elemento. Los negativos,
desplazarán esta sombra al lado izquierdo.
sombra-vertical: Este valor es similar al anterior y
también es obligatorio. Con él situarás la sombra
vertical. Los valores positivos indican que la sombra
se situará por debajo del elemento y los negativos,
desplazarán esta sombra hacia la parte de arriba.
desenfoque: Este valor define la distancia de desenfoque. Cuanto más bajo sea el valor más “definida”
será la sombra. Opcional.
extensión: Aquí defines el tamaño de la sombra.
Por defecto el valor es 0. Opcional.
color: Color de la sombra. Opcional.
inset: Con esta palabra clave haces que la sombra
pase a ser interior. Opcional.
Veamos en un ejemplo de código la combinación de
los bordes redondeados con una box-shadow. Centrándonos en la sombra, fíjate que hemos definido
una posición horizontal, una posición vertical y un
desenfoque de cinco píxeles. Hemos suavizado un
poco el color negro por defecto de la sombra y el
resto de los valores los hemos dejado sin tocar. Pue24
curso de actualización a css3
des ver el resultado en la imagen correspondiente:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div
{
width:200px;
height:100px;
background-color:#ddd;
box-shadow: 5px 5px 5px #333;
border:2px solid;
border-radius: 15px 10px 12px 2px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Imágenes para los bordes
border-image
Con esta propiedad puedes usar una imagen para
crear los bordes. La sintaxis que utilizarás para gene25
curso de actualización a css3
rar bordes con una imagen es la siguiente:
border-image: source slice repeat;
Con source defines la ruta hacia la imagen que quieras usar como borde.
slice se utiliza para definir los márgenes interiores
que servirán como guía para dividir la imagen en 9
secciones. Puedes indicar cuatro valores, uno para
cada lado, es decir,
top, right, bottom y left. Puedes utilizar porcentajes
o pixels. Si usas porcentajes deberás utilizar el valor
más el símbolo %, si usas píxeles solo debes indicar
el valor.
repeat permite elegir entre tres opciones, stretch,
round y repeat, que determinan como se repetirán
las secciones centrales de la imagen a través del
borde. Las esquinas de la imagen se colocarán en las
esquinas correspondientes de la caja del elemento.
Con estos tres valores harás que las secciones centrales, se repitan (repeat), se escalen (stretch) o se
repitan ajustándose al espacio disponible sin partir
el fragmento (round). Por ahora Safari y Chrome
interpretan round igual que repeat. Puedes escribir dos valores de repetición. Uno para los lados
superior e inferior del elemento y otro para los
lados derecho e izquierdo. Si quieres que la imagen
26
curso de actualización a css3
de borde se comporte igual en los cuatro lados, con
especificar un valor, es suficiente.
Ahora veremos un ejemplo de código para definir
una border-image. Verás como hay que utilizar
prefijos para los distintos navegadores para hacer
que el código funcione. Recuerda que esta propiedad no está soportada por Internet Explorer. Fíjate
también, en que hay que indicar un ancho de borde
para que el efecto funcione.
div
{
border-width:15px;
-moz-border-image:url(border.png) 30 30 30 30
round stretch;
-webkit-border-image:url(border.png) 30 30 30 30
round stretch;
-o-border-image:url(border.png) 30 30 30 30 round
stretch;
border-image:url(border.png) 30 30 30 30 round
stretch;
}
Teniendo en cuenta que hemos usado esta imagen
de fondo transparente, para utilizarla como borde:
27
curso de actualización a css3
El efecto que conseguimos lo puedes ver a continuación, si abres la página con el navegador mozilla:
28
Fondos
4
Lección
Lección
curso de actualización a css3
Introducción a los fondos
En lo que concierne a los Fondos, hablaremos de
dos nuevas propiedades que han aparecido con
CSS3: background-size y background-origin. También veremos como aplicar más de una imagen a un
fondo.
Estas propiedades están disponibles en todos los
navegadores modernos.
Backgrund size
Como puedes intuir background-size se utiliza para
determinar el tamaño de un fondo. Antes de llegar
CSS3 el tamaño de una imagen de fondo venía determinado por el propio tamaño de la imagen. Ahora, es posible especificar el tamaño de la imagen de
fondo, lo que permite reutilizar la imagen de fondo
en diferentes contextos. Puedes señalar el fondo en
píxeles o porcentaje respecto a las dimensiones del
contenedor. El primer valor corresponde a la anchura y el segundo valor define la altura. Si solo indicas
un valor a la altura se le dará un valor auto.
background-size:80px 60px;
background-size:100% 100%;
31
curso de actualización a css3
También puedes usar las palabras clave cover y contain. Si indicas que el valor de background-size sea
cover, la imagen se escala a un tamaño en el que
encaje en la dimensión más grande el elemento.
contain en cambio, escala la imagen para que se
ajuste a la dimensión más pequeña del elemento.
Si usamos la misma imagen que en los ejemplos anteriores y la aplicamos como fondo de un elemento
más grande que la propia imagen, éste es el resultado que obtenemos usando cover o contain.
Backgrund origin
Sobre la propiedad background-origin podemos
decir que determina el área en el que se va a posicionar la imagen de fondo. Cuando colocamos una
imagen de fondo en un elemento, ésta se posiciona dentro del espacio de ese elemento, pero en
relación a un origen que podemos cambiar con esta
propiedad. Los tres posibles orígenes para las imágenes de fondo se señalan con los valores contentbox, padding-box y border-box area.
Cuando el valor es padding-box, que es el utilizado
por defecto, queremos que el eje de coordenadas
donde se va a colocar la imagen sea el espacio
destinado al elemento, incluyendo el padding y sin
32
curso de actualización a css3
contar con el borde.
El valor border-box hará que el origen de coordenadas de la imagen será el borde del elemento.
La imagen se situará donde empieza el borde del
elemento.
content-box cambia el origen de coordenadas al
lugar donde empieza el contenido del elemento,
incluyendo tanto el bordes como el padding.
Veamos la diferencia entre estos tres backgroundorigin con una imagen:
CSS3 te permite definir más de una imagen para un
fondo. En este caso vamos a incluir dos imágenes en
el fondo del elemento body. Solo tienes que especificar las rutas separadas por comas:
body
{
background-image:url(arbol.png),url(montana.jpg);
background-position: left bottom, left top;
background-repeat: no-repeat;
}
33
curso de actualización a css3
En este ejemplo hemos ubicado la imagen arbol.
png en la posición left bottom y la montana.jpg en
la posición left top, ya que el resto de propiedades
del background se definen en el mismo orden que
hemos definido cada capa. Es necesario incluir un
background-repeat: no-repeat; para que cada imagen se vea una sola vez.
Ten en cuenta que las imágenes que declares se van
colocando de modo que la primera aparece sobre
las siguientes. Por lo tanto, en este ejemplo arbol.
png se verá sobre montana.jpg.
34
Efectos de texto
5
Lección
Lección
curso de actualización a css3
Text-shadow
Vamos a hablar ahora de varias propiedades de
texto que han surgido gracias a CSS3: text-shadow,
word-wrap, text-justify y text-overflow.
text-shadow es una propiedad que nos permite darle sombra a un texto. Esta propiedad puede resultar
útil para darle mayor vistosidad a los encabezados o
a aquellos textos que quieras resaltar.
Cuando definas el text-shadow en un elemento
debes declarar la posición de las sombras horizontal
y vertical, la extensión del desenfoque y el color
de la sombra. De estos argumentos, debes definir
obligatoriamente dos, la posición de la sombra horizontal y la posición de la sombra vertical. Puedes
dar valores negativos a estos dos parámetros, lo que
desplazaría la sombra hacia la izquierda y hacia arriba respectivamente. Los valores positivos generaran
la sombra en su posición “natural”, es decir hacia la
derecha y hacia abajo.
text-shadow: sombra-horizontal sombra-vertical
desenfoque color;
Siguiendo este esquema podemos definir una sombra de texto para un encabezado h1 de la siguiente
manera:
37
curso de actualización a css3
h1
{
text-shadow: 4px 4px 4px #ccc;
}
En este ejemplo hemos definido una sombra de texto situada 4 píxeles hacia la derecha y hacia abajo,
con un pequeño desenfoque de 4 píxeles (cuanto
más bajo este valor, más definida estará la sombra)
y de un color gris claro.
Podemos definir varias sombras diferentes separadas por comas.
h1{
text-shadow: 2px 2px 1px #cccccc, 4px 4px 2px #dde8dc, 6px 6px 3px #ccddcc, 8px 8px 5px #666666;
color: #666;
}
En este caso el efecto es un poco más rico:
Puedes jugar con este ejemplo de código para entender mejor lo que hace cada valor y para encontrar un efecto que cubra tus necesidades.
38
curso de actualización a css3
text-shadow se puede utilizar en cualquier navegador moderno excepto en Internet Explorer. En este
caso toca esperar hasta que aparezca la versión 10
en la que si será soportada.
Wordwrap
Hablemos ahora sobre word-wrap. Hasta la llegada
de CSS3 si una palabra era demasiado larga para
encajar dentro del espacio disponible, rebasaba la
caja del elemento extendiéndose fuera de la misma.
word-wrap permite evitar esto, haciendo que las
palabras que no quepan en el ancho del elemento
se corten por la mitad, si es preciso, y no rebasen el
espacio de caja disponible.
Esta propiedad acepta dos valores normal y breakword. El valor por defecto es normal, que solo permite que se corte la palabra por los puntos habituales. Si quieres que las palabras se puedan partir por
lugares no habituales con el fin de que no superen
los límites de la caja, debes usar break-word.
Un ejemplo de código para que los párrafos contemplen la posibilidad de partir las palabras sería el
siguiente:
39
curso de actualización a css3
p{
word-wrap:break-word;
}
Text-justify
En lo que respecta a text-justify, esta propiedad afina la capacidad para justificar un texto, ofreciendo
diferentes opciones siempre y cuando, previamente,
se haya declarado la propiedad text-align con el
valor justify. Veamos el código:
div {
text-align: justify;
text-justify: newspaper ;
}
Echemos un vistazo a los valores que disponemos
para controlar la justificación de los textos:
auto: El navegador determinará cuál es el algoritmo
de justificación.
inter-word: Con este valor incrementaremos o disminuiremos el espacio entre palabras.
inter-ideograph: Este valor se utiliza para justificar
texto en lenguaje ideográfico (chino, japonés…).
40
curso de actualización a css3
inter-cluster: Gracias a este valor se justificará texto
que no cuente con espacio entre palabras (lenguas
asiáticas).
distribute: Es parecido al valor newspaper, solo
que la última línea no se justificará. Si quieres que
la última línea también se justifique, debes usar
distribute-all-lines.
kashida: Se ajusta el contenido alargando los caracteres.
newspaper: El espaciado entre letras y palabras es
modificado según convenga.
Text-overflow
Para terminar con los efectos de texto, hablemos
de text-overflow. Gracias a esta propiedad podemos definir que ocurrirá cuando el texto supere el
espacio disponible. Esta propiedad es útil cuando el
overflow del elemento tiene valor hidden. Tenemos
tres opciones cuando esto ocurra, tal y como puedes apreciar en este ejemplo de sintaxis:
text-overflow: clip|ellipsis|string;
41
curso de actualización a css3
Si usamos el valor clip, la palabra que supere el
espacio disponible será cortada. Si declaramos que
esta propiedad tenga un valor ellipsis, el navegador
usará unos puntos suspensivos para representar que
queda contenido que no ha podido ser mostrado.
Por último, queda una última opción que consiste
en elegir una cadena de texto o string para que el
navegador la utilice cuando ya no quepa más texto.
42
Introducción a HTML
@font-face
Lección
Lección
2
6
curso de actualización a css3
Font Face
Antes de que apareciera CSS3, las fuentes que se
podían usar con seguridad en un diseño web eran
muy limitadas, ya que se reducían a las fuentes que
el usuario tuviera instaladas en su equipo. Por ello
la gama sobre la que se podía elegir era bastante
reducida.
En este momento, gracias a la norma @font-face se
puede utilizar cualquier tipo de fuente que queramos. Este ha sido uno de los avances más relevantes
que ha traído la especificación CSS3, ya que permite
que las páginas sean más variadas.
Lo único que necesitas es hacer que la fuente de tu
elección este disponible en tu servidor y ésta se descargará desde allí en el momento en que se cargue
la página. Para declarar este tipo de fuentes debes
utilizar la regla @font-face.
Para utilizar la regla @font-face, primero debes declarar un nombre para la fuente (el que tú quieras)
en la propiedad font-family, y la ruta en la que se
encuentra esa fuente. Debemos tener en cuenta
que si el navegador no encuentra la fuente en nuestro servidor, cogerá la siguiente por defecto que
tengamos definida en nuestra hoja de estilos.
45
curso de actualización a css3
Para usar esa fuente en un elemento solo que tienes
que asignar a su propiedad family-font la fuente
que has definido anteriormente, con el nombre
que hayas elegido para ella. Veamos un ejemplo de
código.
@font-face
{
font-family: sansation;/*Es es el nombre con el que
identificarás esta fuente a partir de ahora*/
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /*Esta fuente es para
Internet Explorer 9 o superior*/
}
div
{
font-family: sansation; /*Asignas la fuente aludiendo al mismo nombre declarado en @font-face*/
}
Si quieres que esa fuente pueda ser renderizada en
negrita debes añadir una nueva norma @font-face,
con el mismo nombre pero especificando cuál es la
fuente a utilizar en ese caso. Siguiendo con el ejemplo, sería algo así:
@font-face
{
46
curso de actualización a css3
font-family: sansation;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’);
font-weight:bold;
}
La fuente Sansation_Bold.ttf es otra fuente que
utilizaremos cuando demos a un elemento el tipo
de letra “sansation” y además indiquemos que la
font-weight debe ser bold. Por lo tanto, para cada
característica nueva que queramos que tenga el tipo
de letra “sansation”, debemos escribir una nueva
regla @font-face.
Propiedades
En la siguiente tabla tienes una lista de propiedades
y valores que puedes utilizar dentro de una norma
@font-face:
Formatos y contabilidades
Ten en cuenta que no todos los navegadores utilizan
el mismo tipo de archivo de fuente. Firefox, Chrome,
Safari, y Opera utilizan fuentes .ttf (True Type Fonts),
47
curso de actualización a css3
.otf (OpenType Fonts) y .woff (Web Open Font Format). Sin embargo, para que Internet Explorer 9 y
superior renderice convenientemente la fuente que
hayas elegido, deberás aportar una fuente de tipo
.eot (Embedded OpenType) o .woff.
Te adelantamos aquí una manera de definir la regla
@font-face lo más compatible posible con todos los
navegadores.
@font-face {
font-family: ‘Comfortaa Regular’;
src: url(‘Comfortaa.eot’);
src: local(‘Comfortaa Regular’),
local(‘Comfortaa’),
url(‘Comfortaa.ttf’) format(‘truetype’),
url(‘Comfortaa.svg#font’) format(‘svg’);
}
Observa que tenemos dos propiedades src, una para
Internet Explorer y otra para el resto de navegadores. En primer lugar queremos aportar la fuente .eot
que necesita Internet Explorer, ya que la segunda
declaración src será ignorada por este navegador ya
que no soporta la función local(). La segunda propiedad es una lista del resto de formatos de fuente
que necesitamos en el orden en el que queremos
que se vayan llamando. Los primeros dos valores
usan la función local() para comprobar si esta fuen48
curso de actualización a css3
te en concreto ya está instalada en el equipo del
usuario. De ser así, nos ahorraríamos una llamada
al servidor y la página usaría la fuente instalada en
el equipo. Hay diferentes maneras de nombrar una
fuente.
Normalmente para llamar a una fuente necesitamos
el nombre genérico (family name) y el estilo (Regular, Bold, Italic etc.) En este caso debemos utilizar
dos funciones local () porque Safari no nombra las
fuentes así, sino usando lo que se denomina PostScript name, por lo que para mayor garantía debemos incluir las dos maneras de llamar a la fuente.
El siguiente formato después de las fuentes locales
es TTF, o truetype font. Si quieres usar una fuente
tipo open type font, la incluirías aquí. Por último
incluiremos el formato SVG que también es utilizada
por algunos navegadores.
Profundizaremos sobre la manera de generar estos
formatos en un ejercicio práctico.
49
Diseño de columnas múltiples
7
Lección
curso de actualización a css3
Diseño de columnas multiples
Con la aparición de CSS3 puedes generar diseños
multi-columna similares a los que presentan los
periódicos. Hablaremos de varias propiedades que
son las que nos permitirán controlar este diseño:
column-count, column-gap, column-rule y columnwidth.
Para usar estas propiedades con Internet Explorer
tendrás que esperar a la versión 10. Con Firefox
tienes que usar el prefijo –moz-. Chrome y Safari
requieren el prefijo -webkit-. Con Opera puedes
utilizar estas propiedades sin necesidad de prefijos.
Empecemos por la propiedad column-count. Esta
propiedad declara el número de columnas en las
que se dividirá el texto que contenga un elemento.
Por ejemplo, para dividir el texto de los div en tres
columnas, debes escribir algo así:
div
{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
53
curso de actualización a css3
Debajo puedes ver el resultado:
Esta propiedad acepta dos tipos de valores: un
número que determina la cantidad de columnas en
que queremos distribuir el texto o el valor auto. Si
decides que column-count sea auto, el número de
columnas será determinado por otras propiedades,
como por ejemplo column-width.
Hablemos ahora de la propiedad column-gap. Esta
propiedad se utiliza para determinar el tamaño del
espacio blanco entre columnas.
Añadamos al código anterior las siguientes líneas:
-moz-column-gap:10px;
-webkit-column-gap:10px;
column-gap:10px;
Puedes observar en la imagen cómo hemos disminuido la distancia entre columnas por debajo del valor que automáticamente se le asignó en el ejemplo
anterior. El valor automático de column-gap es de
1em. Si quieres mantener el espacio en blanco en
ese tamaño, puedes darle a la propiedad columngap un valor normal.
54
curso de actualización a css3
Si has definido una column-rule entre dos columnas,
ésta aparecerá en medio del espacio en blanco.
Colum-rule
Pero ¿qué es una column-rule? Esta propiedad
determina la anchura, el estilo y el color del espacio
entre columnas, o al menos de una parte. Siguiendo
con el ejemplo anterior, añade estas tres líneas de
código:
-moz-column-rule:1px outset #ccc;
-webkit-column-rule:1px outset #ccc;
column-rule:1px outset #ccc;
La sintaxis de esta propiedad es la siguiente:
column-rule: column-rule-width column-rule-style
column-rule-color;
Los valores por defecto son medium, none y black,
pero veamos todos los que podemos utilizar para
definir esta propiedad.
55
curso de actualización a css3
Como comentábamos anteriormente, también
puedes determinar el ancho de las columnas con
la propiedad column-width. Esta propiedad acepta
dos valores, un valor numérico en píxeles o el valor
auto, con el que permites que sea el propio navegador el que determine el ancho de las columnas
teniendo en cuenta el espacio disponible.
56
Modelo de caja e interfaz de usuario
8
Lección
Lección
curso de actualización a css3
Modelo de caja - Resize
Hablaremos en este apartado de aquellas propiedades nuevas que afectan al modelo de caja y a la interfaz de usuario: resize, box-sizing, outline-offset,
overflow-x y overflow-y.
Vamos con la propiedad resize. Gracias a CSS3 podrá
especificar si un elemento puede ser escalado o
no por el usuario, siempre y cuando este usuario
esté navegando con Firefox 4 o superior, Chrome o
Safari.
Esta propiedad acepta cuatro valores:
none El elemento no se puede redimensionar.
both Se podrá redimensionar tanto en vertical
como en horizontal
horizontal
El usuario podrá modificar la anchura.
vertical El usuario podrá modificar el elemento en
altura.
Cuando declares esta propiedad, saldrá un icono en
la esquina inferior derecha del elemento que tendrá
un aspecto sutilmente distinto dependiendo del
navegador.
59
curso de actualización a css3
Box Sizing
La propiedad box-sizing afecta a lo que llamamos
modelo de caja. Este modelo implica que el ancho
de un elemento es el resultado de la suma de sus
márgenes, bordes y paddings izquierdo y derecho
más el propio ancho del contenido. Esta lógica se
aplica igualmente para calcular la altura del elemento. Gracias a box-sizing podrás modificar la interpretación que hace el navegador sobre este modelo
de caja.
Para aplicar esta propiedad el código que debes
utilizar es el siguiente:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Los navegadores principales interpretan bien esta
propiedad con la excepción de Safari y Mozilla para
los que aún hay que usar el prefijo correspondiente.
Esta propiedad acepta tres valores: content-box,
border-box e inherit. El valor por defecto es
content-box que es el que corresponde a la inter60
curso de actualización a css3
pretación del modelo de caja que explicábamos
hace un momento. El ancho y altura que se declare
para un elemento corresponderá con el ancho de su
contenido. Todos los márgenes, bordes y paddings
se añaden después a estas dimensiones.
border-box hace que el ancho y la altura de un
elemento se fijen a su borde externo. Los márgenes, bordes y paddings, “crecerán” hacia adentro
de ese ancho y ese alto. En esta imagen puedes ver
como se dibujan dos elementos con igual propiedad width, dependiendo de qué valor le demos a la
propiedad box-sizing. Al primer elemento le hemos
dado un valor de border-box y al segundo elemento
un valor content-box.
Si declaramos box-sizing con el valor inherit, el
resultado dependerá del valor de box-sizing que se
haya heredado del elemento padre.
Outline offset
Vamos con la propiedad outline-offset. Como ya
sabes, la propiedad outline sirve para dibujar una línea alrededor del borde de un elemento. El outline,
no forma parte de las dimensiones del elemento y
no está contenido en él. Además, el outline puede
61
curso de actualización a css3
adquirir otras formas, además de la rectangular.
Gracias a la propiedad outline-offset, puedes declarar una distancia entre el borde del elemento y su
outline.
El código para declarar un outline-offset es así:
Este código funcionará en todos los navegadores
con la excepción de Internet Explorer.
div
{
border: #033 1px solid;
outline:2px solid red;
outline-offset:15px;
}
Como resultado de este código consigues algo parecido a esta imagen:
Además de declarar un valor numérico para la
distancia a la que se dibujará el outline, también
puedes darle a la propiedad outine-offset el valor
inherit, con lo que se heredará del elemento padre
el valor que allí tuviera esta propiedad.
Overflow
62
curso de actualización a css3
Por último explicaremos las propiedades, overflow-x
y overflow-y. Estas propiedades permiten gestionar
el desbordamiento en un elemento tratando cada
eje de manera individual. Estas propiedades ofrecen
una manera más precisa de controlar el desbordamiento, que la que ofrece overflow.
Los valores que puedes darle a estas propiedades,
los iremos explicando uno a uno.
visible: El contenido que no quepa en la caja se
mostrará igualmente en el navegador. Es el valor
predeterminado.
hidden: Cualquier contenido que supere las dimensiones del contenedor, quedará oculto.
scroll: El contenedor dispondrá de barras de desplazamiento, exista desbordamiento o no.
auto: En caso de desbordamiento por el eje que se
trate, aparecerá una barra de desplazamiento.
no-display: Si el contenido supera las dimensiones
del contenedor, no se mostrará el contenedor.
no-content: Si el contenido supera las dimensiones
del contenedor, no se mostrará el contenido.
63
curso de actualización a css3
A la hora de aplicar estos valores a overflow-x u
overflow-y, ten en cuenta las siguientes opciones:
• Si no les das ningún valor a ninguna de las dos,
el valor que se aplique a ambas propiedades,
será visible, que es el valor por defecto.
• Si solo le aplicas un valor a una de ellas, la
otra propiedad adquirirá el valor auto, en vez de
visible.
64
Selectores
9
Lección
Lección
curso de actualización a css3
Selectores
A continuación y para finalizar con el curso, te mostramos una serie de selectores nuevos que puedes
utilizar con CSS3.
elemento1~elemento2
Con este selector seleccionaremos aquellos elementos que estén precedidos por otro elemento. Si
tenemos p~ul todos los <ul> que estén precedidos
por un <p> serán seleccionados
[atributo^=valor]
Podemos comparar el inicio del valor de un atributo
con el valor que declaremos gracias a este selector
y de ser iguales, el elemento será seleccionado. Podríamos decir que ^= es sinónimo de “empieza por”.
[atributo $= valor]
Los elementos cuyo atributo “termine por” el valor
que declaremos, serán seleccionados.
[atributo *= valor]
Los elementos cuyo atributo “contenga” el valor que
declaremos, serán seleccionados. Por ejemplo un
div: div[class*=”test”].
:first-of-type
Este selector es equivalente a :nth-of-type(1), y
67
curso de actualización a css3
selecciona el primer elemento de ese tipo que se
encuentre en un contenedor. Por ejemplo p:firstof-type selecciona todos los <p> que sean el primer
párrafo en un contenedor. Puede haber hijos anteriores de otro tipo que no se tienen en cuenta.
:last-of-type
Del mismo modo que hacíamos con el primer hijo
de un contendor, podemos elegir también el último
elemento de un contenedor. Este selector realiza
la misma tarea que :nth-last-of-type(1), es decir,
seleccionar todo elemento que es el último hijo en
un contenedor.
:only-of-type
Todos los elementos que sean los únicos en su especie dentro de un contendor serán seleccionados
por este selector. El contenedor puede tener otros
“hijos”.
:only-child
Cuando necesites seleccionar un elemento que sea
el único hijo en un contenedor, puedes utilizar este
selector.
:nth-child(n)
En este caso se seleccionará el hijo número n del
elemento que queramos. Por ejemplo, p:nthchild(2).
68
curso de actualización a css3
:nth-last-child(n)
Se seleccionará el hijo número n del elemento
que queramos, pero empezando a contar desde el
último hijo.
:nth-of-type(n)
p:nth-of-type(2)seleccionará cada párrafo que sea el
segundo dentro de su contenedor. Solo se tendrán
en cuenta los elementos <p> y no el resto de hijos
que pueda tener el contenedor.
:nth-last-of-type(n)
Este selector es igual al anterior, solo que la cuenta
se inicia desde el último elemento dentro del contenedor.
:last-child
Para elegir el ultimo hijo de un contenedor puedes
hacer algo como: p:last-child, que a su vez, es idéntico a hacer p:nth-last-child(1).
:root
Selecciona el elemento raíz del documento, es decir,
el elemento html.
:empty
Serán seleccionados los elementos que no tengan
“hijos” contando los nodos de texto.
69
curso de actualización a css3
:target
Si utilizas anclajes que se enlacen a distintos puntos
de tu página, puedes utilizar :target para seleccionar el elemento actualmente activo. Ten en cuenta que Internet Explorer no interpreta bien este
selector.
Los siguientes tres selectores se referirán en la mayoría de ocasiones a elementos de formularios.
:enabled
Selecciona los elementos que estén habilitados.
:disabled
Selecciona los elementos que estén deshabilitados.
:checked
Selecciona los elementos que estén seleccionados.
:not(selector)
Serán seleccionados todos los elementos que no
sean el elemento o selector especificado.
::selection
Este selector se aplica a la porción de un elemento
que esté siendo seleccionada por el usuario. Los estilos que puedes aplicar a ::selection son color, background, cursor y outline. Además, si quieres usarlo
con Mozilla debes escribirlo así ::-moz-selection.
70
Referencias
10
Lección
Lección
curso de actualización a css3
Referencias
http://css-tricks.com/understanding-border-image/
http://www.norabrowndesign.com/css-experiments/border-image-anim.html
http://www.css3.info/preview/background-originand-background-clip/
http://css-tricks.com/snippets/css/css-box-shadow/
http://peter.sh/experiments/vendor-prefixed-cssproperty-overview/
http://www.w3schools.com/cssref/default.asp
http://www.w3schools.com/cssref/css_selectors.asp
http://www.w3schools.com/cssref/css_colornames.
asp
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/hsl/
http://www.css3.info/preview/hsla/
http://www.css3.info/preview/rgba/
http://www.impressivewebs.com/css3-linear-gradient-syntax/
http://caniuse.com
http://www.w3.org
http://www.w3.org/TR/css3-images/
www.desarrolloweb.com, Manual de CSS3.
http://www.desarrolloweb.com/articulos/degradados-lineales-repeticion-css3.html
http://www.desarrolloweb.com/articulos/degradados-radiales-repeticion.html
http://www.desarrolloweb.com/articulos/degrada73
curso de actualización a css3
dos-radiales-css3.html
http://www.desarrolloweb.com/articulos/degradado-lineal-css3.html
http://www.desarrolloweb.com/articulos/background-origin-css.html
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ http://hacks.
mozilla.org/2009/06/beautiful-fonts-with-font-face/
http://css-tricks.com/css3-gradients/
http://naturpixel.com/2011/08/17/tono-saturaciony-luminosidad/
http://www.css3.com/css-text-justify/
http://westciv.com/tools/radialgradients/index.html
http://www.webdirections.org/blog/css3-radialgradients/
http://www.webdirections.org/blog/css3-lineargradients/
http://www.sidar.org/recur/desdi/traduc/es/css/
box.html
http://gradients.glrzad.com/
74
