DTIC - Universitat Pompeu Fabra

Curso de Verano 2010
Estilos CSS para el Diseño Web
8. Otros usos comunes
8.1 Clases múltiples
En este tema veremos algunos temas generales relacionados con CSS, que se usan comúnmente
en los sitios webs actuales.
Múltiples clases en un solo elemento
Se trata de uno de los “trucos” CSS que sólo se soporta en los navegadores más nuevos, pero que
es muy utilizado debido a las ventajas que ofrece: los elementos HTML no tienen por qué limitarse
a aplicar una sola clase.
Así, es posible, por ejemplo, tener algo como esto 1:
<p><img src="img/loremipsum.gif" class="featureimg right" /></p>
Donde podemos ver que se están aplicando dos clases 2 a la imagen: featureimg y right. Es
decir, se están asignando dos clases, cada una con sus estilos definidos:
.right{
float: right;
}
.featureimg {
border: 2px solid #000000;
padding: 5px;
margin: 5px;
}
De modo que mientras right se encarga de flotar, featureimg se encarga de definir la imagen
destacada.
Esto nos permite añadir de una forma sencilla algunos efectos reutilizables. En este ejemplo,
podríamos reusar la flotación a la derecha en otros elementos, con right sin tener que repetir el
código float:right; en cada uno de los estilos CSS donde deseamos aplicar la flotación.
Esto nos permite asignar estilos sin tener que definir una nueva clase específica para cada caso.
El código de ejemplo, incluye esta otra imagen:
<p><img src="img/loremipsum.gif" class="featureimg left" /></p>
Que reusa el estilo featureimg pero flota hacia el otro lado. Podemos ver que el estilo de la
imagen se reutiliza, evitando duplicar el código cada vez que deseemos aplicar un estilo común.
En el navegador se muestra como sigue:
1
2
Ver 101.html y sus CSS en este tema.
Y, de hecho, podríamos aplicar más de dos clases.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
1
Curso de Verano 2010
Estilos CSS para el Diseño Web
Uso adecuado
Es evidente que el reusar estilos nos facilita el código, y nos permite aplicar efectos concretos
fácilmente, como son el flotar a un lado u otro, el aplicar un borde concreto, asignar un margen
que se repetirá en múltiples elementos, un color de fondo que apareceré mucha veces, etc.
El uso adecuado implica que estas clases son para definir sólo lo reusable, de modo que se cuente
con clases estándar a lo largo del sitio. Por ejemplo, si muchos bloques tendrán un margen inferior
de 10px, podríamos crear una clase con ese margen, para poder aplicarlo rápidamente.
Desventajas
No lo son tanto en la práctica, pero los navegadores viejos no soportan dos clases (o más) en un
mismo elemento, lo que rompe todo el juego. Cada vez son menos usuarios los que tienen
navegadores antiguos, de modo que en ocasiones se ignoran estos casos y se aplican dos clases o
más directamente.
Finalmente, es importante mantener límites, pues al tener múltiples clases “estándar”, la lista de
estilos puede crecer y llegar a ser inmanejable.
De igual modo, un código como:
<p class=”textonegro fondozul margen10pxderecho flotaderecha”>
Quizá podría definirse como estilo único para no complicar tanto el marcado HTML.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
2
Curso de Verano 2010
Estilos CSS para el Diseño Web
8.2 Sombras
Las sombras son uno de los efectos que podemos aplicar con imágenes y CSS. Veamos algunas
muestras.
Sombras con imágenes y CSS
La técnica de este ejemplo nos permite añadir sombras a las imágenes, partiendo de una imagen
única que, con CSS, ajustamos para el efecto deseado. Se trata de una técnica que sólo funciona
en los browsers modernos 3.
En el ejemplo, aplicaremos una sombra a una imagen, y usaremos además una imagen
previamente diseñada que contiene sólo una sombra en su extremo inferior/derecho. Las
imágenes en cuestión son las siguientes4:
La sombra es mayor en dimensiones que la imagen a la que queremos aplicar el efecto. Es grande
para poder usarse como sombra con casi cualquier imagen que deseemos.
El funcionamiento
La técnica se realiza con los siguientes principios:
•
•
La sombra se aplica como imagen de fondo de un contenedor de la imagen
La imagen se posiciona con ajustes de márgenes negativos, con el fin de desplazarla de su
posición original
Se trata de un uso específico de opciones que ya hemos usado, de modo que el código CSS es
directo de entender.
El HTML es simple: un contenedor (con la clase CSS deseada) y la imagen.
<div class="sombra">
<img src="img/elsa.jpg" width="250" height="354" />
</div>
3
Como casi siempre, las versiones antiguas del MSIE no la pueden ejecutar, ya que no soportan imágenes png
(requieren hacks CSS para ello, pero este es un curso introductorio y entrar a hacks es un tema más avanzado).
4
La sombra se muestra muy reducida, sólo para que vean de qué se trata. Pueden abrir la imagen y ver las
dimensiones reales (828x837 px).
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
3
Curso de Verano 2010
Estilos CSS para el Diseño Web
El primer bloque de interés, en el CSS, es el siguiente:
.sombra{
background: url(../img/shadow.png) no-repeat right bottom;
float: left;
}
Donde podemos ver que el contenedor tiene como imagen de fondo a la sombra, posicionando el
fondo en el extremo inferior derecho. El float hace que el contenedor flote y no se requiera
definir dimensiones fijas5.
Gráficamente, buscamos este efecto al posicionar la imagen (la caja contiene la imagen en su
extremo inferior derecho):
El otro bloque de CSS es este:
.sombra img {
display: block;
background-color: #ffffff;
margin: -6px 6px 6px -6px;
}
La imagen dentro del contenedor tiene un desplazamiento en los márgenes superior y derecho,
con el fin de desplazar y lograr que quede un espacio (donde quedará visible la sombra). El
principio, gráficamente, es el siguiente (con la imagen desplazada del contenedor, marcado en
rojo):
Sumando los dos, el resultado en el navegador será el que se muestra en la siguiente imagen:
5
Pues sabemos que, sin definir dimensiones, el contenedor ocuparía el 100% del ancho disponible. Es un truco que no
molesta (la imagen puede flotar, es usual). De otro modo, el CSS se complica, ya que hay que contar píxeles, ajustar el
ancho al de la imagen más ciertos valores del desplazamiento de los márgenes, sumar aún más si hay padding, etc.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
4
Curso de Verano 2010
Estilos CSS para el Diseño Web
Donde podemos ver que hemos aplicado una sombra a la imagen, tal como queríamos.
En otra variante 6, podemos ver el efecto estético que aporta cierto padding y un borde visible:
.sombra img {
display: block;
background-color: #ffffff;
margin: -6px 6px 6px -6px;
padding: 4px;
border: 1px solid #666666;}
En el navegador aparecerá así:
6
Ver 202.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
5
Curso de Verano 2010
Estilos CSS para el Diseño Web
Sombras con CSS3
Los estilos CSS3 no se soportan aún en todos los navegadores, pero no está de más conocer un
poco de ellos para aprender lo que vendrá en un futuro 7. Veamos cómo podríamos usar CSS3 para
el efecto de sombras.
CSS3 incluirá una propiedad para la sombra del modelo de caja 8, llamada box-shadow.
La propiedad tomará tres parámetros de dimensiones y un color:
•
•
•
•
Un offset horizontal, indicando el desplazamiento de la sombra. Positivo indica que la
sombra se sitúa a la derecha de la caja, negativo que se coloca a la izquierda.
Un offset vertical, con positivo indicando arriba de la caja, y negativo indicando abajo.
Un radio de desenfoque o blur. Un valor de 0 indica enfoque, y un valor positivo indica más
blur.
Un color de sombra 9.
En el código de muestra 10 se incluye este CSS para el primer elemento del HTML:
#sombra{
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
}
No entraré en detalles técnicos, pero como CSS3 aún no es un estándar cerrado, los navegadores
lo implementan a su modo. Las propiedades que comienzan por –moz son para que las reconozca
Firefoz/Mozilla, mientras que las que comienzan con –webkit son para los que usan un motor de
visualización específico (llamado wekbkit), como Chrome o Safari.
Mientras CSS3 no sea oficial, se tendrá que lidiar con este tipo de cosas 11.
De igual modo, y como variante de las propiedades, el otro bloque CSS tiene estos valores entre
sus definiciones, como un cambio de lado de la sombra y ajustes de blur:
#cajita{
...
box-shadow: -10px 10px 20px #888;
-moz-box-shadow: -10px 10px 20px #888;
-webkit-box-shadow: -10px 10px 20px #888;
...
}
7
Y, al mismo tiempo, para sembrar una semilla de curiosidad. Después de este curso, mi deseo es que sigan
aprendiendo CSS por su cuenta, y CSS3 es un buen banco de cosas a aprender.
8
Ver la referencia del documento de trabajo de CSS3: http://www.w3.org/TR/css3-background/#the-box-shadow
9
De hecho, pueden después buscar más información sobre esta propiedad y este valor. El parámetro permitirá una
serie de valores (para cada lado), lo que se traduce en la opción de sombras de distinto color para cada lado.
10
Ver 203.html.
11
Y código duplicado, como pueden ver en ese CSS. De hecho, no son los únicos. Hay más variantes para otros
browsers: -o,-icab, -khtml, que de momento no tendremos en cuenta.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
6
Curso de Verano 2010
Estilos CSS para el Diseño Web
Les toca experimentar con las opciones y colores, y ver los efectos de los ajustes posibles.
El HTML y CSS del ejemplo, en un navegador capaz de ejecutar los estilos CSS3, se mostrará como
sigue:
¡Con sombras hechas por el navegador, gracias a los estilos CSS3!
Impresionante 12, ¿no? ;-)
8.3 Cajas con bordes redondeados
Al igual que en el caso de las sombras, el uso de CSS e imágenes nos permite aplicar bordes
redondeados a nuestras cajas, con el fin de romper la rigidez del rectángulo 13. Veamos cómo es
posible aplicar este tipo de bordes.
Bordes Redondeados
Para aplicar bordes redondeados hay muchas variantes posibles. Algunas son para cajas
horizontales, otras para verticales, y otras nos permiten aplicar los bordes redondeados a
cualquier caja.
12
Lo sé, lo sé, aquí es cuando algunos dirán "¿y para qué vimos las otras opciones?” pero recuerden que CSS3 aún no
se soporta por todos los navegadores, y hay que usar código especial, como han visto. Espero que el ejemplo motive a
seguir aprendiendo CSS y entrar luego a todo lo que ofrece CSS3.
13
En especial antes, ya que los rectángulos se consideraban más el típico diseño “de ingeniero”. Ahora mismo, las
webs tienden a ser más simples, y con ello quizá los rectángulos no molestan tanto como antes.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
7
Curso de Verano 2010
Estilos CSS para el Diseño Web
Cajas horizontales
Comencemos con las cajas horizontales, aplicando una técnica que ya conocemos, las sliding
doors, para aplicar una imagen a la caja y obtener los bordes que deseamos.
La imagen que usaremos para la puerta corrediza tiene la forma siguiente:
Con un ancho suficiente 14 para poder usarla en cajas horizontales que no excedan el tamaño
horizontal de la imagen.
El código de muestra 15 incluye este marcado HTML:
<div class="bordes"><span>Lorem ipum</span></div>
Donde podemos ver que solo son dos elementos, uno contenido dentro de otro, lo que permite
aplicar el sliding door 16: un elemento tendrá un lado de la puerta, y el otro elemento tendrá el
resto.
El CSS es el siguiente:
.bordes{
background: url('../img/rounded-horizontal.gif') no-repeat top left;
height:150px;
width: 200px;
padding: 0px 0px 0px 10px;
margin: 0 0 10px 0;
}
.bordes span{
background: url('../img/rounded-horizontal.gif') no-repeat top right;
color: #FFFFFF;
display:block;
padding: 13px 10px 13px 10px;
height:124px;
}
Donde podemos ver ambos lados de la puerta, uno cargado a la izquierda y otro a la derecha.
Relevante en el ejemplo:
•
•
•
•
La altura de la clase .bordes (la que usa el div) es la de la imagen de muestra: 150px.
.bordes tiene un padding pequeño (izquierdo) para poder aplicar esa orilla de la puerta
El span queda con una altura menor, ya que se suma el padding (124+13+13 = 150)
El ancho de la caja se indica en .bordes (es decir, en el div)
14
Se muestra como referencia. La imagen de muestra mide 800px horizontales.
Ver 301.html.
16
En los ejemplos de menú, el enlace estaba contenido dentro del elemento de la lista.
15
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
8
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el navegador, el ejemplo se verá como muestra la siguiente imagen:
Un segundo ejemplo 17 incluye una segunda caja:
<div class="bordes"><span>Lorem ipum</span></div>
<div class="bordes2"><span>Lorem ipum</span></div>
Y el CSS de esta segunda caja ajusta el ancho del contenedor, para demostrar que puede usarse
con otro valor de ancho.
En el navegador aparece así:
Donde podemos ver que, con la puerta corrediza, tenemos la opción de asignar fácilmente los
bordes a cualquier dimensión de la caja 18.
Restricción
La restricción de estas cajas horizontales es evidente: estamos usando una puerta corrediza con
una altura fija, de modo que sólo podemos usar el código para una caja de ese alto. En caso de
necesitar alturas distintas, tendríamos que tener imágenes para cada caso, si usamos las puertas
corredizas para lograr los bordes redondeados.
Cajas verticales
El mismo principio que hemos visto para las horizontales puede aplicarse a las verticales. Basta
pensar en este caso en una puerta corrediza de arriba abajo, y no de izquierda a derecha 19.
17
Ver 302.html.
Siempre que, obviamente, no supere el ancho de la imagen. Siempre se puede crear y usar una imagen aún más
ancha para cubrir más anchura.
19
Otra forma de verlo es muy simple: es como rotar la caja horizontal
18
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
9
Curso de Verano 2010
Estilos CSS para el Diseño Web
Así, en vez de fijar el fondo hacia los lados, basta fijarlo hacia los extremos superior e inferior.
La imagen que usaremos para estos ejemplos tiene la forma siguiente 20:
Y, como en el caso horizontal (pero esta vez otro eje) podemos usarla para alturas variables, esta
vez como puerta corrediza vertical.
El código de ejemplo 21 tiene el marcado idéntico al del caso anterior, para aplicar las puertas:
<div class="bordes"><span>Lorem ipum</span></div>
Y es en el CSS donde variamos la posición de la imagen del fondo y los ajustes necesarios de los
márgenes para el caso vertical:
.bordes{
background: url('../img/rounded-vertical.gif') no-repeat top left;
width: 250px;
padding: 10px 0px 0px 0px;
margin: 0 0 5px 0;
}
.bordes span{
background: url('../img/rounded-vertical.gif') no-repeat bottom right;
color: #FFFFFF;
display:block;
padding: 10px 13px 20px 13px;
width:224px;
}
Como podemos ver, se aplica el mismo principio que en el caso horizontal, sólo que ahora:
•
•
•
•
Es la anchura la que se define en .bordes, con el ancho de la imagen de muestra: 250px
El padding de .bordes es ahora en el lado superior
El ajuste de span esta vez es en el ancho: 224+13+13 = 250
Ahora es el alto el que se indica en .bordes (es decir, en el div), si se requiere.
En el navegador, se mostrará como en la siguiente imagen:
20
Ver la carpeta de imágenes del tema, y el CSS que se utiliza. De nuevo, se muestra sólo como referencia. La imagen
real mide 250x600.
21
Ver 303.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
10
Curso de Verano 2010
Estilos CSS para el Diseño Web
De nuevo, un segundo ejemplo 22 muestra dos cajas, con el mismo código de antes:
<div class="bordes"><span>Lorem ipum</span></div>
<div class="bordes2"><span>Lorem ipum</span></div>
Y el CSS de la segunda caja ajusta el alto del contenedor, para demostrar que puede usarse con
otro valor de, esta vez, altura.
En el navegador aparece así:
Donde podemos ver que, con la puerta corrediza en el otro eje, tenemos nuevamente la opción de
asignar fácilmente los bordes a cualquier dimensión de la caja 23.
Restricción
La restricción de las cajas verticales es ahora que estamos usando una puerta corrediza con una
anchura fija, de modo que sólo podemos usar el código para una caja de ese ancho.
De nuevo, en caso de necesitar anchos distintos tendríamos que tener imágenes para cada caso.
Una variante líquida
Ante las restricciones de los dos casos anteriores es lógico desear el contar con una variante o
técnica que nos permita definir bordes redondeados para cualquier caja.
Es más, idealmente 24 podríamos pedir que los bordes redondeados no dependieran de la imagen
usada, de modo que pudiéramos aplicar cualquier color a la caja sin necesidad de crear la imagen
de cada color 25.
Veamos cómo podemos lograr algo así 26.
22
Ver 304.html.
Esta vez, siempre que no supere el alto de la imagen. Igual que antes, siempre se puede crear y usar una imagen
aún más alta para cubrir otros casos.
24
Modo carta a los Reyes Magos ;-)
25
En los ejemplos anteriores la imagen es la que tiene el color de fondo, de modo que es evidente que si he de
cambiar los colores del sitio, tendría que rehacer muchas de las imágenes, algo que desearíamos evitar (¿no?).
26
De nuevo, hay muchas variantes. Esta es sólo una opción. No muy “semántica”, como verán, pero correcta y válida.
23
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
11
Curso de Verano 2010
Estilos CSS para el Diseño Web
Imágenes
Comencemos por las imágenes: Necesitamos cubrir cualquier caja, de modo que la idea de puertas
deslizantes no es directa, además de que queremos aplicarlo a cualquier caja, sin límite de
dimensiones. Con esto, es natural concluir que necesitaremos cuatro imágenes, una para cada
esquina.
Cada imagen (para cada esquina) tendrá el borde redondeado, pues es justo lo que buscamos.
Además, si queremos usar la técnica para cualquier imagen, necesitamos que la imagen tenga una
transparencia 27, para poder aplicarla a la caja, que la parte transparente nos deje ver el color de
fondo, y que –al mismo tiempo- aporte el borde redondeado.
Las imágenes que usaremos están el código de muestra 28. Cada una es para una esquina, con la
forma redondeada y el “interior” transparente, sobre fondo blanco.
La imagen que sigue muestra las cuatro imágenes (con un fondo negro 29). Como puede verse,
tenemos los cuatro bordes redondeados.
El fondo blanco nos permitirá aplicarla a cualquier caja sobre este color de fondo 30. Si quisiéramos
usar esta técnica con otro color de fondo necesitaríamos otras imágenes.
Serían imágenes iguales que estas pero con el fondo de otro color.
Código
El código de muestra 31 incluye el siguiente marcado en el HTML:
<div class="roundedbox caja1">
<div class="rbtop">
<div></div>
</div>
<div class="rbcontent"> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nunc vitae sem sed velit lobortis malesuada. Morbi erat enim, elementum a
ullamcorper id, suscipit id massa. </div>
<div class="rbbot">
<div></div>
</div>
</div>
Donde podemos ver que el marcado es un poco más complejo 32 que en otros casos. Los distintos
bloques usados son los siguientes:
27
Sólo las imágenes GIF y PNG admiten transparencia, las JPEG no.
Se trata de imágenes PNG, con la esquina redondeada sobre fondo blanco. Están en la carpeta de materiales, y en el
CSS veremos cómo se usan.
29
Al ser transparente la esquina redondeada, y estar diseñada para diseños sobre fondo blanco, es la única forma de
verlas en este documento, pues de otro modo no se verían en el fondo blanco ;-)
30
Evidentemente, no podemos tener todo en la misma imagen: o ponemos transparencia en le esquina que da hacia
la caja, o en la que da hacia el fondo. No podemos tener ambas porque toda la imagen sería 100% transparente ;-)
31
Ver 305.html.
28
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
12
Curso de Verano 2010
Estilos CSS para el Diseño Web
<div class="roundedbox caja1">
Tenemos un div contenedor principal al que se aplican dos clases. Este contenedor es el que
define la caja como tal, a la que queremos aplicar los bordes deseados.
<div class="rbtop">
<div></div>
</div>
Dentro de la caja, hay un primer div contenido (con clase .rbtop). Este contenedor es el
responsable de contener las esquinas superiores. Al tratarse de dos esquinas superiores (izquierda
y derecha) necesitamos otro elemento, y por ello hay un div vacío en el interior. Des estos dos
div, cada uno se encargará de una de las esquinas.
<div class="rbcontent"> Lorem ipsum ... </div>
El contenedor con clase .rbcontent sirve para el contenido de la caja propiamente dicho. Al ser
un contenedor real, div, podemos poner en su interior todo lo que deseemos: texto, cabeceras,
imágenes, etc. El div nos mucho potencial al ser realmente una cajón de sastre para nuestros
contenidos.
<div class="rbbot">
<div></div>
</div>
Finalmente, y al igual que en las esquinas superiores, tenemos otro bloque 33 que se encarga d
esquinas, esta vez de las inferiores. Dos, uno vacío, pues cada uno lidiará con una esquina inferior
a izquierda y derecha.
El CSS que se encarga de usar las imágenes es el siguiente:
.roundedbox .rbtop{
background: url('../img/TL.png')
}
.roundedbox .rbtop div{
background: url('../img/TR.png')
}
.roundedbox .rbbot{
background: url('../img/BL.png')
}
.roundedbox .rbbot div{
background: url('../img/BR.png')
}
.roundedbox .rbcontent{
color:#FFFFFF; padding:0px 10px;
}
no-repeat top left; height:10px;
no-repeat top right; height:10px;
no-repeat bottom left; height:10px;
no-repeat bottom right; height:10px;
margin:0px;
Como puede verse, cada esquina se maneja con una caja con la altura de la imagen usada, y una
imagen de fondo fija, colocada como se necesita. La clase de contenido nos permite aplicar un
padding y un color de texto cualquiera 34.
32
Pero no por ello difícil ;-)
La nomenclatura del ejemplo es simple: rb es de borde redondeado, rounded border; bot es de bottom, inferior; top
de superior, etc.
34
Nótese cómo el padding sólo es en los lados. El superior ya ‘existe’ con los contenedores de las esquinas.
33
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
13
Curso de Verano 2010
Estilos CSS para el Diseño Web
Por otro lado, la clase .caja aplicada a la caja nos permite asignar cualquier ancho que
deseemos35, y un color de fondo cualquiera.
.caja
{
background: #006699;
width:200px;
margin: 0 0 10px 0;
}
En el navegador, el ejemplo se ve así:
Donde podemos ver que el color de fondo de la caja no depende de la imagen 36.
Una buena forma de experimentar y entender mejor qué hace cada esquina es aplicar bordes a las
clases de los bordes/esquinas, con el fin de ver dónde están 37.
Un último ejemplo 38 muestra todo el potencial.
En él, podemos ver que tenemos cuatro cajas, cada una con una clase específica de caja, pero
todas ellas usando la clase común de bordes redondeados:
<div class="roundedbox caja1">…
<div class="roundedbox caja2">…
<div class="roundedbox caja3">…
<div class="roundedbox caja4">…
Lo que permite que el CSS sea casi el mismo del ejemplo anterior, pero añadiendo las propiedades
deseadas de cada caja: un color de fondo y una anchura cualquiera.
.caja1{
background: #006699;
width:200px;
margin: 0 0 10px 0;
}
35
El alto lo tomará a partir del contenido, o podríamos definir uno fijo si interesara.
Y ahora es más evidente que sólo son, las imágenes, para fondo blanco.
37
Para las fases iniciales de trabajo, poner el borde al contenedor o al elemento es siempre una buena forma de
entender dónde está y por qué se comporta como se comporta.
38
Ver 306.html.
36
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
14
Curso de Verano 2010
Estilos CSS para el Diseño Web
.caja2{
background: #99CC00;
width:300px;
margin: 0 0 10px 0;
}
...
En el navegador, esto se mostrará así:
Donde tenemos anchos variables y control total, con las 4 esquinas con bordes redondeados 39.
Como siempre, les toca experimentar. Los foros están siempre abiertos.
Bordes redondeados con CSS3
Como hicimos antes, veamos cómo podremos asignar bordes redondeados con CSS3 40.
La propiedad en CSS3 para definir el borde redondeado 41 es: border-radius.
La propiedad tomará un parámetro 42 para definir el radio de la curvatura (en alguna unidad de
dimensiones).
39
¡Aplausos! ;-)
Lo sé, aquí me avientan tomates y tartas, gritando cosas como “¡Pero si acabo de entender cómo se hace con CSS2,
y ahora me dices que hay otra forma más fácil, argh!”, pero recuerden que CSS3 aún no es estándar oficial.
41
Ver la referencia del documento de trabajo CSS3: http://www.w3.org/TR/css3-background/#border-radius
42
Estrictamente, puede tomar dos, para dar curvatura de elipse y no de círculo, pero para nuestros fines actuales, un
parámetro basta.
40
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
15
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el código de muestra 43 se incluye este CSS, como ejemplo, para el primer elemento del HTML
que tenemos:
.caja1
{
background: #006699;
width:200px;
margin: 0 0 10px 0;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
color: #FFFFFF;
}
Donde podemos ver las propiedades CSS3 añadidas 44.
El segundo bloque incluye un borde para que comprueben el efecto de añadir un borde al tener
esquinas redondeadas.
.caja2
{
background: #CCCCCC;
width:200px;
margin: 0 0 10px 0;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
color: #333333;
border: 1px solid #000000;
}
En el navegador, el ejemplo se verá así:
Y podemos ver que el añadir un borde no afecta la parte redondeada que conseguimos.
43
44
Ver 307.html.
Recuerden que tenemos que lidiar con mozilla y webkit mientras no sea estándar.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
16
Curso de Verano 2010
Estilos CSS para el Diseño Web
Relacionado con la notación
La notación usada para la propiedad es realmente una notación compacta. Como en otros casos,
hay equivalencias, de modo que:
border-radius: 4em;
Es equivalente 45 a:
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
4em;
4em;
4em;
4em;
Esto quiere decir que tenemos la capacidad de ajustar totalmente las cuatro esquinas, no sólo
aplicarlo a la caja completa.
Relacionado con esto, la propiedad de cada esquina varía dependiendo del navegador, de modo
que en el CSS tendremos cosas como esta:
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
Donde podemos ver que los nombres, guiones y el orden de los elementos presentes en el
nombre de la propiedad, pueden variar: border top left radius vs border radius topleft.
Un ejemplo 46 con este CSS nos muestra el potencial de definir sólo una esquina:
.caja1{
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid #000;
padding: 5px 5px 5px 15px;
margin:50px;
width:200px;
background: #CCCCCC;
}
En el navegador, tendremos esto 47:
45
Estas propiedades aún no tienen estándar. La nomenclatura exacta para cada lado depende del navegador. Lo
relevante es la idea de la equivalencia.
46
Ver 308.html.
47
¡Más aplausos! ;-)
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
17
Curso de Verano 2010
Estilos CSS para el Diseño Web
Donde podemos ver que sólo se asigna una esquina con el borde redondeado, y las otras cuatro, al
no tener propiedades definidas, se comportan normalmente.
Les toca experimentar con las cuatro esquinas y ver su efecto:
•
•
•
•
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Jugando con ello, otro ejemplo 48 con este CSS:
.caja1{
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid #000;
padding: 5px 5px 5px 15px;
margin:50px;
width:200px;
background: #CCCCCC;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
Se verá así en el navegador:
Integrando bordes redondeados y sombras
Para cerrar el tema, una cosa más que permite CSS3: hacer uso de las dos cosas: bordes y sombra.
Este ejemplo final 49 incluye ambos efectos en el mismo CSS:
.caja1{
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
padding: 15px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin: 100px;
width: 200px;
background: #006699;
color: #FFFFFF;
}
48
49
Ver 309.html.
Ver 310.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
18
Curso de Verano 2010
Estilos CSS para el Diseño Web
Que en el navegador, se mostrará así 50:
Como pueden ver, CSS3 implicará una pequeña revolución en la forma en que trabajamos con
muchas cosas actualmente.
Les queda experimentar; los foros están listos para cualquier pregunta.
50
Ovación de pie ;-)
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
19