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.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


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: 29-01-2016.

Visitas este mes: 66

Visitas el mes pasado: 89

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

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




CSS3 IV

Esquinas redondeadas

imagen css3

Una de las novedades más demandadas por los diseñádores web es la de poder poner directamente en los elementos que configuran la página esquinas redondeadas. En nuestro curso CSS de Aprende Web ya hemos tratado el tema, en la página Trucos CSS/ 10.3 Esquinas redondeadas Si echas un vistazo a la página, verás que hablamos ya de las esquinas redondeadas en CSS3. Como puuede verse en la página nombrada anteriormente, CSS3 dispone una nueva propiedad para crear esquinas redondeadas: border-radius. Vamos a explicarla a continuación.


Propiedad border-radius

La propiedad border-radius permite crear, no sólo esquinas redondeadas, sino también elípticas. En realidad tenemos un conjunto de propiedades, una para cada esquina, que pueden aunarse en una propiedad tipo "shorthand", que es border-radius.

Las propiedades para cada esquina son:

Los valores que daremos a estas propiedades son medidas, normalmente en píxeles, que indican el radio del arco que aplicamos. También podemos indicar porcentajes, en este caso el 100% sería el total de la altura o anchura del elemento al que se aplica.

Podemos poner un valor (medida) o dos. Si ponemos una medida, la esquina quedará de forma circular, tomando la medida como radio. Si ponemos dos medidas, la esquina quedará de forma elíptica, de forma que la primera medida muestra el radio horizontal y la segunda el radio vertical.

Estos son algunos ejemplos de cómo podemos escribir estas propiedades:


Propiedad border-radius tipo "shorthand"

Podemos utilizar la propiedad border-radius tipo "shorthand" para definir las cuatro esquinas a la vez:

border-radius: 10px;

Este ejemplo define las cuatro esquinas del elemento con un redondeo en circular de 10px. Este es el ejemplo más simple, sin embargo esta propiedad puede admitir varios valores para las diferentes esquinas:

Para crear esquinas elípticas pondremos dos valores separados por una barra inclinada ( / ), correspondiendo el primer valor al radio horizontal y el segundo al radio vertical.

border-radius: 10px / 5px;

Además a cada lado de la barra inclinada ( / ) podemos poner de uno a cuatro valores (medidas o porcentajes) que tendrán el siguiente significado:

Con esto podemos escribir en una sóla propiedad tipo "shorthand" las cuatro esquinas con distintos valores para cada una de ellas.


Compatibiliidad en navegadores

Actualmente la propiedad ya está disponible en los principales navegadores, sin embargo hasta hace poco tiempo éstos lo admitían sólo de forma experimental. Es decir para poder verla en el navegador, cada uno de éstos tiene un prefijo que se aplica a la propiedad. Este problema ocurre también con otras propiedades de CSS3. Los prefijos son:

Aunque actualmente Todos los navegadores en sus últimas versiones ya admiten directamente la propiedad border-radius, hasta hace poco tiempo había que escribir el código de la forma experimental para cada uno de ellos. Por ejemplo ahora ya podemos escribir:

#elemento {border-radius: 10;}

Pero hasta hace poco debíamos escribir las distintas formas para cada navegador:

#elemento { border-radius: 10;
            -moz-border-radius: 10;
            -webkit-border-radius: 10;
            -o-border-radius: 10;
            -ms-border-radius: 10;
          }


En este código ponemos al principio la forma general de la propiedad, y ponemos después la forma para cada navegador. Cada uno de los navegadores reconocerá la forma en la que admite la propiedad, ignorando el resto de propiedades que no admiten. De esta forma podemos compatibilizar la propiedad con todos los navegadores.

Aunque ya todos los navegadores admiten la propiedad en su forma estándar, actualmente el problema puede estar en que muchos usuarios no tengan su navegador actualizado, por lo que es conveniente escribir las distintas formas para cada navegador.

Esto no sólo ocurre con esta propiedad de CSS3, la mayoría de las nuevas propiedades de CSS3 se han ido adaptando a los navegadores utilizando primero su forma experimental, para luego ir adoptando la forma definitiva, es decir, sin el prefijo. Algunas de las propiedades de CSS3 que iremos viendo en este manual puede que no estén totalmente adaptadas, y tengamos que usar los prefijos del navegador en algunas de ellas, iremos viendo todo esto según avance el manual.


Ejemplos de esquinas redondeadas

En el siguiente enlace mostramos una página en la que se muestran varias cajas con esquinas redondeadas (debes utilizar un navegador compatible para poder verlas bien). Debajo de ellas mostramos el código utilizado para crear las cajas:

Esquinas redondeadas.






En la siguiente página veremos como personalizar los bordes con imágenes en un mismo elemento:

Imagen en los bordes.



Manual de CSS3

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