Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 29

Visitas el mes pasado: 110

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. Trucos CSS (III)

10.3 Esquinas redondeadas

css

Propiedades de CSS 3

Uno de los diseños más demandados por los diseñadores de páginas es el poder poner en los elementos que configuran la página esquinas redondeadas. El estándar CSS 2.1 obliga a que la estructura de las cajas sea rectangular con las esquinas en angulo de 90º, pero la futura versión de CSS 3 incluye la propiedad border-radius que permitirá establecer una curvatura para las esquinas.

En el valor de esta propiedad debe indicarse una medida obligatoriamente, y otra opcional. Si se indica sólo una medida indica que la esquina es circular, y la medida es el radio. Si se indican dos medidas la esquina es elíptica, y la primera medida es el radio horizontal de la elipse y la segunda el radio vertical.

La propiedad border-radius afecta a las cuatro esquinas del elemento seleccionado, pero también podemos aplicar el diseño redondeado a cada una de las esquinas mediante las propiedades border-top-right-radius (superior derecha), border-bottom-right-radius (inferior derecha), border-bottom-left-radius (inferior izquierda), border-top-left-radius (superior izquierda).

NOTA: A día de hoy los principales navegadores (incluido Internet Explorer 10) ya incluyen la propiedad border-radius sin necesidad de utilizar prefijos, por lo que lo que aquí se explica es para que se vean las esquinas redondeadas en navegadores antiguos. Esta era la solución antes de que apareciera la propiedad border-radius. la cual se explica en la página del Manual de CSS3 - Esquinas Redondeadas


Imágenes de fondo

las soluciones más comunes se basan en utilizar imágenes de fondo. Si la caja es de tamaño fijo podemos usar una sóla imagen para toda la caja. Si es de tamaño variable, debemos marcar en la caja varios "divs", incluyendo en cada uno una esquina.

Hay varios métodos para mostrar esquinas redondeadas con imágenes. a continuación vamos a mostrar uno de ellos:


Método para redondear las esquinas con imágenes.

código HTML

En primer lugar, dentro de la caja o div, donde queremos redondear las esquinas, crearemos 4 "divs", uno por cada esquina, Los dos de las esquinas superiores los colocaremos antes de los contenidos, y los dos de las esquinas inferiores, después de los contenidos: La estructura de la caja HTML será así:

<div class="caja">
  <div class="sup-izda"></div>
  <div class="sup-dcha"></div>
	
    <!-- .... aquí van los contenidos de la caja, parrafos, 
    imágenes, listas, etc. -->
		
  <div class="inf-izda"></div>
  <div class="inf-dcha"></div>
</div>

En este código, dentro de la caja, cada esquina se corresponde con un elemento "div". Los dos primeros van delante del contenido, y corresponden a las esquinas superior izquierda y superior derecha; los dos segundos van detrás de los contenidos, y se corresponden con las esquinas inferior izquierda e inferior derecha.

La idea es simple, en cada esquina colocaremos un pequeño "div", el cual tendrá como imagen de fondo la esquina redondeada correspondiente.

Obtener las imágenes:

Para obtener las imágenes sólo necesitamos un programa de tratamiento de imágenes y el navegador Mozilla, Safari, o Google Chrome. Si no tienes ningún programa de tratamiento de imágenes puedes descargarte el programa gratuito Gimp 2.6.7, en http://www.gimp.org/downloads.

Una vez que tenemos el navegador y el programa de tratamiento de imágenes, vamos a crear las imágenes de las cuatro esquinas:

Escribiremos el código para ver la caja con esquinas redondeadas en cualquiera de los navegadores anteriores. En el código pondremos también los márgenes internos y bordes que queremos que tenga la caja.

.caja { width: 250px; border: 5px olive double; margin: 20px; padding: 20px; background-image: url("fondo.gif"); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20; }

En este ejemplo definimos el ancho de la caja, el borde, un margen externo y otro interno, y una imagen de fondo. La imagen de fondo que hemos puesto en este ejemplo es la siguiente:

Imagen de fondo

Como se ha explicado anteriormente, las propiedades -moz-border-radius; -webkit-border-radius (o simplemente border-radius si el navegador está actualizado) permiten ver la página con esquinas redondeadas en los navegadores Mozilla, Safari, y Google-Chrome. Una vez insertado el código abre la página en uno de estos navegadores; verás cómo el elemento tiene las esquinas redondeadas. Puedes comprobar también que en los demás navegadores sigue con las esquinas cuadradas:

Este es un elemento de prueba para mostrar un método con imágenes de crear las esquinas redondeadas.

Con la página abierta en uno de estos navegadores anteriores (de forma que se vea el elemento con esquinas redondeadas), pulsa la tecla de imprimir pantalla, (Impr Pant) que está en la esquina superior derecha del teclado.

Abre el programa de tratamiento de imágenes y pulsa en edición / pegar (o "pegar como imagen nueva", según el programa). Se muestra la imagen capturada con la tecla "imprimir pantalla".

Debemos, dentro de esa imagen, seleccionar la esquina superior derecha; como la imagen es muy pequeña, primero ampliaremos la imagen hasta que se distingan claramente los píxeles, (en Gimp esta en el menú ver / ampiación) despúes seleccionamos la esquina superior derecha, (En Gimp: herramientas / herramientas de selección / seleccion rectangular), y después la recortamos (En Gimp: imagen / recortar la selección).

Al seleccionar la imagen debemos cogerla justo desde los bordes externos de la caja. Al seleccionar la esquina, es conveniente seleccionar también un poco del interior de la caja, para no quedarnos cortos al aplicarla luego como imagen de fondo.

Una vez seleccionada y recortada la imagen, la guardamos como una imagen nueva, a la que le daremos un nombre significativo, por ejemplo; sup-izda.gif.

Para las otras tres esquinas podemos seguir el mismo proceso, o podemos optar por una solución más fácil: una vez que hemos guardado la primera imagen, la volvemos a abrir con el programa de tratamiento de imágenes y giramos la imagen 90 grados :opción rotar imagen 90º (En Gimp : Imagen / Transformar / Rotar 90º en sentido horario.). Guardamos la imagen con otro nombre (sup-dcha), la giramos otras dos veces, guardándola en distintos archivos cada vez, para las dos imágenes que faltan. (inf-dcha, inf-izda).

Las imágenes obtenidas, en el ejemplo que estamos siguiendo son las siguientes:


esquina superior izquierda. esquina superior derecha. esquina inferior izquierda. esquina inferior derecha.
Colocar las imágenes

En primer lugar decir que para que este método funcione en Internet Explorer, debemos definir la página con un !DOCTYPE que señale el lenguaje XHTML 1.0, de lo contrario, las imágenes quedan descolocadas.

Para colocar la primera imagen en la esquina superior izquierda:

Definimos el ancho y alto de la caja en las mismas medidas que el radio de la esquina, e insertamos la imagen de fondo.

.sup-izda { width: 20px; height: 20px; background-image: url("sup-izda.gif");}

A continuación aplicamos la propiedad float, como la esquina queda a la izquierda, tendrá el valor left.

.sup-izda { width: 20px; height: 20px; background-image: url("sup-izda.gif");float: left ; }

Si el elemento no tuviera bordes ni márgenes internos, con esto tendríamos la imagen de la esquina ya colocada en su sitio, pero al tener borde y margen interno tendremos que desplazarla hasta el lugar apropiado.

Para desplazar la imagen utilizaremos las propiedades position: relative y las propiedades top, bottom, left, right. Como estamos colocando la esquina superior izquierda, usaremos las propiedades top (superior) y left (izquierda).

Para calcular la medida del desplazamiento sumaremos el grosor del borde (5px en este caso) más el margen interno (20px en este caso) y como están fuera hay que desplazarlo hacia la parte de afuera del elemento, a estos números les daremos un valor negativo. En el ejemplo nuestro, la regla CSS que define la esquina superior izquierda quedará así:

.sup-izda { width: 20px; height: 20px; background-image: url("sup-izda.gif");float: left ; position: relative; top: -25px; left: -25px: }

Solo queda un pequeño detalle, y es igualar el comienzo de la imagen con los bordes de las esquinas, para ello emplearemos la propiedad background-position a la que le daremos los valores necesarios para que la imagen empiece en la esquina en la que estamos, en este caso serán left top. La regla CSS nos quedará así:

.sup-izda { width: 20px; height: 20px; background-image: url("sup-izda.gif");float: left ; position: relative; top: -25px; left: -25px: background-position: left top; }

Comprobamos la colocación de la esquina la cual quedará de la siguiente manera:

Este es un elemento de prueba para mostrar un método con imágenes de crear las esquinas redondeadas.

Para colocar el resto de las esquinas seguiremos el mismo método, en el cual hay que tener en cuenta los siguientes factores:

En nuestro ejemplo, el código CSS a utilizar quedará así:

.caja  { width: 250px; border: 5px olive double; margin: 20px; padding: 20px; 
				background-image: url("fondo10.gif");  }
.sup-izda  { width: 20px; height: 20px; ;float: left; 
             position: relative; top: -25px; left: -25px;
             background-image: url("sup-izda.gif"); background-position: left top; }
.sup-dcha  { width: 20px; height: 20px; ;float: right; 
             position: relative; top: -25px; right: -25px;
             background-image: url("sup-dcha.gif"); background-position: right top; }
.inf-izda  { width: 20px; height: 20px; ;float: left; 
             position: relative; bottom:-5px; left: -25px;
             background-image: url("inf-izda.gif"); background-position: left bottom; }
.inf-dcha  { width: 20px; height: 20px; ;float: right; 
             position: relative; bottom: -5px; right: -25px;
             background-image: url("inf-dcha.gif"); background-position: right bottom; }

Y el elemento lo veremos de la siguiente manera:

Este es un elemento de prueba para mostrar un método con imágenes de crear las esquinas redondeadas.

Se puede ver en el código que la propiedad bottom tiene distinto valor para las imágenes inferiores, en concreto le hemos restado el valor de la altura de los "divs" de las imágenes superiores. Para elementos en posicionamiento flotante (propiedad float o en posicionamiento absoluto position: absolute el valor de la propiedad bottom se calcula igual que para los elementos que contienen las imágenes superiores.


Esquinas redondeadas sin imágenes

Es posible crear esquinas redondeadas sin utilizar imágenes, En esta solución se combinan el lenguaje HTML y CSS para engañar al ojo y hacerle creer que la esquina es redondeada.

El truco consiste en añadir varios elementos con una altura mínima, y cuya longitud disminuye progresivamente para crear un perfil curvo. en la siguiente imagen se muestra cómo se utiliza esta técnica:

Esquinas redondeadas sin imágenes.

Como se puede apreciar, se crean varios elementos de una altura mínima (1 ó 2 px) que van variando en longitud progresivamente para crear la esquina.

Aunque en principio parece fácil, no lo es tanto, ya que hay que insertar bastantes elementos y calcular bien la longitud de cada uno de ellos.


Páginas que nos ayudan

Hay algunas páginas web con aplicaciones para generar automáticamente las esquinas redondeadas. Generalmente sólo tenemos que introducir los datos de colores, y tamaño y la página genera el código para crear la esquina.

En la página http://www.spiffycorners.com introducimos los datos (colores y ángulo) y genera automáticamente el código HTML y CSS que debemos usar para crear la esquina. Usa la técnica de crear esquinas sin imágenes. Sin embargo las posibilidades de esta página son muy limitadas.

Otra página para crear esquinas redondeadas es http://www.cssround.com. La página permite también crear una sombra al elemento. Sin embargo el código que nos da es de CSS3.




En la siguiente página veremos otros trucos CSS para resolver algunos problemas de diseño.

Otros trucos CSS



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com