8. Otros usos comunes

Transcripción

1 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 Ver 101.html y sus CSS en este tema. 2 Y, de hecho, podríamos aplicar más de dos clases. Prof. Alejandro Ramírez 1

2 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. Prof. Alejandro Ramírez 2

3 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 siguientes 4 : 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). Prof. Alejandro Ramírez 3

4 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 fijas 5. 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. Prof. Alejandro Ramírez 4

5 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. Prof. Alejandro Ramírez 5

6 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: 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. Prof. Alejandro Ramírez 6

7 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. Prof. Alejandro Ramírez 7

8 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: px 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 ( = 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. 15 Ver 301.html. 16 En los ejemplos de menú, el enlace estaba contenido dentro del elemento de la lista. Prof. Alejandro Ramírez 8

9 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 Ver 302.html. 18 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 Prof. Alejandro Ramírez 9

10 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: = 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 250x Ver 303.html. Prof. Alejandro Ramírez 10

11 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í Ver 304.html. 23 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. Prof. Alejandro Ramírez 11

12 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. 28 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. Prof. Alejandro Ramírez 12

13 <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') no-repeat top left; height:10px;.roundedbox.rbtop div{ background: url('../img/tr.png') no-repeat top right; height:10px;.roundedbox.rbbot{ background: url('../img/bl.png') no-repeat bottom left; height:10px;.roundedbox.rbbot div{ background: url('../img/br.png') no-repeat bottom right; height:10px;.roundedbox.rbcontent{ color:#ffffff; padding:0px 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 Pero no por ello difícil ;-) 33 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. Prof. Alejandro Ramírez 13

14 Por otro lado, la clase.caja aplicada a la caja nos permite asignar cualquier ancho que deseemos 35, y un color de fondo cualquiera..caja { background: #006699; width:200px; margin: px 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: px 0; 35 El alto lo tomará a partir del contenido, o podríamos definir uno fijo si interesara. 36 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. Prof. Alejandro Ramírez 14

15 .caja2{ background: #99CC00; width:300px; margin: px 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 dimensiones). para definir el radio de la curvatura (en alguna unidad de 39 Aplausos! ;-) 40 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: 42 Estrictamente, puede tomar dos, para dar curvatura de elipse y no de círculo, pero para nuestros fines actuales, un parámetro basta. Prof. Alejandro Ramírez 15

16 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: px 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: px 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 Ver 307.html. 44 Recuerden que tenemos que lidiar con mozilla y webkit mientras no sea estándar. Prof. Alejandro Ramírez 16

17 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: 4em; border-top-right-radius: 4em; border-bottom-right-radius: 4em; border-bottom-left-radius: 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! ;-) Prof. Alejandro Ramírez 17

18 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 Ver 309.html. 49 Ver 310.html. Prof. Alejandro Ramírez 18

19 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 ;-) Prof. Alejandro Ramírez 19