JMiur [E]

El CSS (Cascading Style Sheets) es un lenguaje o pseudo-lenguaje que nos permite darle propiedades a las distintas etiquetas de un documento HTML o XML, y de esa manera, controla la forma en que se verá, se imprimirá o se escuchará.

Desde que comenzó a usarse con cierta regularidad (no hace demasiado tiempo), ha ido sufriendo modificaciones, se han agregado definiciones y, en este momento, el que se utiliza es el llamado CSS level 2 [CSS2] sin embargo, ya se está trabajando con el que será la próxima etapa, el CSS3 que incluirá algunas novedades tales como bordes, sombras, etc (más información).

Pese a ser algo "para el futuro", ya hay navegadores que soportan algunas de estas características: Firefox, Opera, Safari/Webkit y Konqueror. Lamentablemente, no pasa lo mismo con Internet Explroer y aunque esa limitación es una molestia, no veo razones para no experimentar con el tema y utilizar esas propiedades. De hecho, son muchos los sitios que ya las usan.

De todas ellas, la más interesante y además, la más sencilla es border-radius que es una propiedad que nos permitirá redondear las esquinas de cualquier elemento.

Tiene las mismas caracterísiticas que la propiedad border, puede usarse de manera genérica estableciendo los cuatro bordes al mismo tiempo, establecer las propiedades de cada uno de ellos y además las características de cada definción (tamaño, ancho, color).

La sintaxis es la siguiente:

border-radius: valorpx;

Sin embargo, lo mejor es utilizar todas las definiciones ya que los navegadores, por ahora, utilizan algunas variantes:

-moz-border-radius: valorpx;
-khtml-border-radius: valorpx;
-webkit-border-radius: valorpx;
border-radius: valorpx;

No estoy seguro si existe la posibilidad de establecer las propiedades individuales en todos los navegadores y estas son algunas de las que he encontrado:

el borde inferior izquierdo:
-moz-border-radius-bottomleft: valorpx;
-webkit-border-bottom-left-radius: valorpx;

el borde inferior derecho:
-moz-border-radius-bottomright: valorpx;
-webkit-border-bottom-right-radius: valorpx;

el borde superior izquierdo:
-moz-border-radius-topleft: valorpx;
-webkit-border-top-left-radius: valorpx;

el borde superior derecho:
-moz-border-radius-topright: valorpx;
-webkit-border-top-right-radius: valorpx;

Para no complicarme la vida, de acá en más me voy a limitar a poner las propiedades utilizadas por Firefox.

Usar esto es muy sencillo. Veamos un ejemplo concreto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


<style>
.ejemplo1 {
background-color: #3465AD;
border:2px solid CornflowerBlue;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
</style>

<div class="ejemplo1">Lorem ipsum dolor sit amet, consectetuer ...</div>

En ese ejmplo, los cuatro bordes estan redondeados con el mismo radio pero, pueden ser diferentes usando algo así:

-moz-border-radius: valorpx valorpx valorpx valorpx;

que corresponden a los bordes superior, derecho, inferior e izquierdo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


<style>
.ejemplo2 {
background-color: #3465AD;
border: 2px solid CornflowerBlue;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
-moz-border-radius: 10px 30px;
-khtml-border-radius: 10px 30px;
-webkit-border-radius: 10px 30px;
border-radius: 10px 30px;
}
</style>

<div class="ejemplo2">Lorem ipsum dolor sit amet, consectetuer ...</div>

El borde curvo puede hacer tanto si el elemento tiene borde como si no lo tiene. Por ejemplo, podríamos eliminar border:2px solid CornflowerBlue; y el resultado sería este:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Así como podemos establecer tamaños diferentes para cada borde, también podemos establecer el color de cada uno:

-moz-border-bottom-colors: elColor;
-moz-border-left-colors: elColor;
-moz-border-right-colors: lColor;
-moz-border-top-colors: elColor;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


<style>
.ejemplo3 {
background-color: #3465AD;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
-moz-border-radius: 20px;
-moz-border-bottom-colors: LightSeaGreen;
-moz-border-left-colors: lightblue;
-moz-border-right-colors: #999999;
-moz-border-top-colors: CornflowerBlue;
}
</style>

<div class="ejemplo3">Lorem ipsum dolor sit amet, consectetuer ...</div>

Combinado todo eso, se pueden lograr cosas espectaculares:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


<style>
.ejemplo4 {
background-color: #000000;
color: #FFFFFF;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 400px;
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
-moz-border-top-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
-moz-border-left-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
-moz-border-right-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
padding: 5px 5px 5px 15px;
}
</style>

<div class="ejemplo4">Lorem ipsum dolor sit amet, consectetuer ...</div>

Una propiedad similar al borde y que se utiliza en Firefox es outline, una especie de borde extra ¡Y también puede "curvarse"!

-moz-outline: valorpx:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


<style>
.ejemplo5 {
-moz-outline-radius: 40px;
outline-color: aliceBlue;
outline-offset: 5px;
outline-style: solid;
outline-width: 5px;
-moz-border-radius: 30px;
}
</style>

<div class="ejemplo5">Lorem ipsum dolor sit amet, consectetuer ...</div>

Si bien en Internet Explorer no está soportado, en HTML Remix ofrecen una solución cuyo demo puede descargarse en formato ZIP .

El problema es que requiere utilizar un archivo de extensión HTC (HTML Component) que es un formato de archivo muy difícil de alojar en algún servidor gratuito. De todas formas, lo usaríamos de esta forma:
<style>
.curvado {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(URL_border-radius.htc);
}
</style>

<div class="curvado">Lorem ipsum dolor sit amet, consectetuer ...</div>

25 comentarios:

Gem@  

Precioso, que lástima esté Explorer siempre por medio :(

Responder
David Millan  

o gran sabio, siempre iluminandonos con tu conosimiento gracias amigo por todo

Responder
LuzdeLuna  

Increíbles!!!! me encantaron dos ejemplos, me los llevo! :) Siempre genial, JMiur.
Saludos

Responder
Graciela de Palomas  

;)qué bonitos JM, estuve leyendo sobre el CCS 3, me gusta utilizar ésta manera para 'embellecer el blog' jijiji.
Me encanta es una belleza el regalito de hoy:P

Responder
Alba  

wow que bien!!! . se ven espectaculares , cómo cambian les da un efecto bueniiisimo:)

Responder
E-migrad@  

K bueno k está el post, JMiur! Lástima k es too much for me(al menos por ahora):P

Che, una question. No sé si recordarás, pero hace unos días te dije que me estaba volviendo loca con un código que copiaba en la plantilla y me saltaba error. El código es el del Tell a Friend! justamente. Lo intenté varias veces, en diferentes días y me sigue saltando el mismo error, la verdad es que no entiendo. :(

Responder
Marcos Cousseau  

Fantástico! así que ese era el secreto! ... y como siempre IE un paso atrás de todo, unos cuantos diría.. :X

:D :D

Responder
TwitterBoy  

Excelente tutorial como siempre JMiur.
Así es como implementé yo las esquinas para que mi blog fuese como la web de Twitter. Pero no pude encontrar el mismo truco para el sinvergüenza del Explorer, a ver si me animo y utilizo el que comentas de HTML Remix a ver si lo saco.

Muchas gracias de nuevo por tu trabajo, y te invito a ti y a todos tus lectores a pasar por mi blog: Todo Twitter donde intentaré reunir todas las herramientas y recursos para Twitter que encuentre.
También se puede colaborar enviando tu recurso favorito.

Un saludo.

Responder
Anahí  

Genial, me encantó, lo quiero para el fondo del post, ¿se puede? :P

Responder
Anahí  

¡Sí, se puede! :-D

Responder
Angel  

He probado el HTC pero no funciona en el iExplorer, al menos el renderizador que usa el ie Tab para FFox

Está majo el recurso, pero mientras no esté soportado de manera simple en la mayoría de los navegadores mejor no meterse en historias

PD: En Opera tampoco funciona, ¿no había dado 100% en nosecuantos test?

Responder
FalconFix  

Bravo maestro !!!

Responder
JMiur  

A mi me parece un recurso válido, usado por muchos sitios importantes, desde GMail a WordPress. Si bien en IE no es visible, es compatible ya que en ralidad, es un fondo así que no veo inconvenientes en usarlo. En IE saldrá rectangular y en otros se curvará. Aplicado bien, el resultado estético es aceptable.

Angel, el HTC sólo lo he probado offline y allí, funcionaba; tal vez sea un problema con el tipo de documento (DOCTYPE). Aún tengo que probarlo online. Y al contrario, yo soy de los que cree que hay que meterse en historias y experimentar :D

Responder
Bonzu Pipinpadaloxicopolis III  

Pero estos códigos ya son parte del estandar? {'_'}

Responder
Quique  

muy bueno! te fijaste que feas salen las curvas en chrome? parece que estan a medio camino.
Lo mejor es leerse este post en iexplorer! jajaja! es de risa!

Responder
GAMA  

ja conhecia estas tags CSS porem não é so o IE que aind anão ah suporte , na verdade NENHUM navegador tem suporte ainda, estas tags ai e cima sao criadas para os proprios navegadores, mas CCS3 nenhum tem este surpote..

de util mermo so pega no firefox e Crhome , o resto não vale a pena investir

Responder
Bonzu Pipinpadaloxicopolis III  

Algunas veces confundo el CSS con una doble C y una S (CCS).
En el título veo que dice CCS, igual en la url http://vagabundia.blogspot.com/2009/01/el-ccs3-y-las-curvas.html

Responder
Birdelo  

Hola.

Vaya, esto a quedado lindo, mira como se puede crear con ellos una plantilla en segundos. Lástima que el maligno de por medio estorve como siempre!.

Saludines!.

Responder
JMiur  

Lo de estandard es "relativo" depende de lo que signifique. El CSS3 es unaa versión en desarrollo y en la misma w3.org puede verse información al respecto, incluso poseen un validador que ya lo tiene en cuenta. o es algo que me preocupe demasiado, de todas formas, Blogger no validará jamás :D

No todos los navegadores lo incorporan e incluso los que lo hacen, lo hacen de manera parcial.

En IE, las curvas salen como rectas. En Chrome, no me he fijado proque no lo tengo instalado :D

Responder
Σ=o) Pau  

Me encantan!!!!!!!! :D con este css las imagenes y los textos son otra cosa ^_^

pd: aunque por rapidez es bueno en Chrome igual ciertas cosas cambian, además no tiene el buscador interno de firefox tan útil a la hora de desordenar jejeje nuestras plantillas :)

besos ronroneados

Responder
Fernando Muñoz  

muy bueno, gracias!

Responder
Bonzu Pipinpadaloxicopolis III  

En realidad funciona con en Explorer con el HTC?

Responder
JMiur  

El demo funciona. No he probado otra cosa más que eso.

Responder
Bonzu Pipinpadaloxicopolis III  

Lo he probado aplicando la clase en un post y el css con el erchivo alojado y todo pero no funciona.

Responder
JMiur  

En un hosting propio, como te dije, no tiene problemas. En Blogger no tengo idea, no sé si existen restricciones par ese tipo de archivos. En todo caso, deberías fijarte en la página del autor o donde está alojado el proyecto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR