Archivo de la etiqueta: Maquetacion

Border-radius en Internet Explorer

El objetivo de todo diseñador web y el motivo por el cual luchamos cada día es que cada uno de nuestros diseños se vean excelentemente bien en la mayoría de lo navegadores comunmente usados, para como no todo puede ser perfecto, Micro$oft siempre tiene una cartita bajo la manga que nos complica la vida.

Hoy nos reunimos para lograr bordes redondeados usando “border-radius“, una de las propiedades estrellas implementadas en CSS3, y hacerlo de tal manera que funcione en IE, porque para los otros navegadores lo podemos lograr facilmente:

El CSS:

.borde-redondeado {
	-webkit-border-radius: 10px; /* Para Safari y Chrome */
	-moz-border-radius: 10px; /* Para Firefox */
	-khtml-border-radius:10px; /* Navegadores de Linux */
	border-radius: 10px; /* CSS3 */
}

EL HTML:

<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados con CSS3</div>

Ahora, hay 2 formas que conozco para lograr los bordes redondeados en IE y son la siguientes:

1. Usando un archivo HTC

Utilizando un archivo HTC creado por Remiz Rahnas de HTML Remix y que se puede bajar desde Google Code podremos lograr el efecto utilizando una hoja de estilos exclusiva para IE o agregando la propiedad dentro del css anterior.

Se debe cargar el archivo “border-radius.htc” en la misma carpeta donde se encuentre nuestra hoja de estilos.

En una hoja exclusiva para IE:

EL CSS:

.borde-redondeado {
	border-radius:10px;
	behavior: url(border-radius.htc);
}

EL HTML:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<div class="borde-redondeado">Este contenedor tiene sus bordes redondeados</div>

o todo de una vez usando el código del primer ejemplo

El CSS:

.borde-redondeado-htc {
	-webkit-border-radius: 10px; /* Para Safari y Chrome */
	-moz-border-radius: 10px; /* Para Firefox */
	-khtml-border-radius:10px; /* Navegadores de Linux */
	border-radius: 10px; /* CSS3 */
	behavior: url(border-radius.htc); /* Para IE */
}

EL HTML:

<div class="borde-redondeado-htc">Este contenedor tiene sus bordes redondeados con CSS3 y magia para IE</div>

DEMO

2. Usando jQuery

También se puede lograr el efecto utilizando la librería jQuery, con un plugin llamado jQuery.Corner, el cual permite no solo bordes redondeados, sino que bordes mas complicados que no sé como describir.
EL JS:

$(".borde-redondeado-jquery").corner("10px");

EL HTML:

<script src="jquery-1.3.2.min.js"></script>
<script src="jquery.corner.js"></script>
<div class="borde-redondeado-jquery">Este contenedor tiene sus bordes redondeados con jQuery</div>

Conclusión

No usar IE…
…pero si se usa, con estos métodos que vimos podemos lograr bordes redondeados “cross-browser” lo que representa una ayuda y un alivio para los que somos extremistas del detalle y no nos conformamos con la técnica de “mejora progresiva” en CSS.

[adsense]

Limpiar Floats con Overflow

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

Sigue leyendo