En lo que respecta al diseño de blogs, los navegadores de INTERNET EXPLORER, hasta el IE8 inclusive, no permiten ver las ESQUINAS REDONDEADAS o BORDES REDONDEADOS de las Cajas o Box con fondo de color de los blogs, que si se pueden ver en otros navegadores. Pero claro, si creas una CAJA con ESQUINAS REDONDEADAS usando CHROME, hay que tener en cuenta que no lo verán los numerosos usuarios que emplean INTERNET EXPLORER, salvo los que usen IE9, que sí acepta la instrucción Border Radius en el CSS. Más adelante trataremos en detalle éste problema.
IE6, IE7 e IE8 han sufrido un retroceso en el número de internautas que los emplean. La mayoría de navegadores, sobre el 75% en 2012, son Chrome o IE9. Como ya se ha dicho, en lo que respecta al diseño de blogs, los INTERNET EXPLORER 6, 7 y 8 no permiten ver las esquinas redondeadas de las Cajas o Box de los blogs que si se pueden ver en otros navegadores. Por ejemplo, cuando se usa la instrucción siguiente en un blog de BLOGGER:
<!-- #sidebar-wrapper {width: 180px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid #cc6666;
background:#000080;
margin: 0 0 5px 0;
padding: 6px 6px 6px 22px;
float: right;
font-size: 8px; text-transform: uppercase;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
} -->
Las tres líneas con la instrucción border radius permitiría ver la SIDEBAR del blog de BLOGGER encerrada en una Caja o Box de color 000080, azul navy, con los bordes redondeados, en navegadores como CHROME pero no en los INTERNET EXPLORER antes de IE9. Introduciendo las tres lineas de instrucción de border-radius en el CSS de la Sidebar o del Main del blog, se verán las esquinas redondeadas excepto para los navegadores IE6, IE7 y IE8. O sea, se resuelve el problema para que lo vean el 75% de los internautas.
ANTERIORMENTE:
Hasta que Chrome e IE9 son mayoritarios, lo más socorrido es recurrir a programas online que diciéndoles de que color es la caja deseada y sobre que fondo de color va a ir. Lo que se hacía era una superposición de imágenes de esquinas que coincidieran con los vértices de las cajas del blog. Por ejemplo, una sidebar, tendría cuatro fotos superpuestas en las esquinas que serían fotos de esquinas redondeadas. Habría que hacer coincidir los colores del fondo de la sidebar con el color de la esquina redondeada y el resto del color de la foto de la esquina, debe coincidir con el color del exterior de la sidebar.
Realmente es un proceso algo complejo que paso a explicar. Los programas on-line que generan las fotos de las esquinas redondeadas te proporcionan unos códigos para introducir en el blog de BLOGGER yendo a DISEÑO y entrando en HTML, para antes de cierre de SKIN introducir el código, que en el caso de una caja azul claro sobre fondo negro, sería:
ANTERIORMENTE:
Hasta que Chrome e IE9 son mayoritarios, lo más socorrido es recurrir a programas online que diciéndoles de que color es la caja deseada y sobre que fondo de color va a ir. Lo que se hacía era una superposición de imágenes de esquinas que coincidieran con los vértices de las cajas del blog. Por ejemplo, una sidebar, tendría cuatro fotos superpuestas en las esquinas que serían fotos de esquinas redondeadas. Habría que hacer coincidir los colores del fondo de la sidebar con el color de la esquina redondeada y el resto del color de la foto de la esquina, debe coincidir con el color del exterior de la sidebar.
Realmente es un proceso algo complejo que paso a explicar. Los programas on-line que generan las fotos de las esquinas redondeadas te proporcionan unos códigos para introducir en el blog de BLOGGER yendo a DISEÑO y entrando en HTML, para antes de cierre de SKIN introducir el código, que en el caso de una caja azul claro sobre fondo negro, sería:
<!—
.box4 {
background: #9BE1FB;
}
.box4top {
background: url(http://img84.imageshack.us/img84/5830/azulnegrone.gif) no-repeat top right;
}
.box4top div {
font-size: 0;
height: 15px;
background: url(http://img198.imageshack.us/img198/2224/azulnegronw.gif) no-repeat top left;
}
.box4bottom {
background: url(http://img694.imageshack.us/img694/8087/azulnegrose.gif) no-repeat bottom right;
}
.box4bottom div {
font-size: 0;
height: 15px;
background: url(http://img266.imageshack.us/img266/7979/azulnegrosw.gif) no-repeat bottom left;
}
.box4content {
padding: 0px 15px 0px 15px;
}
-->
Como vemos, aparecen cuatro URL que corresponden a las imágenes de las ESQUINAS o BORDES REDONDEADOS de color azul claro 9BE1FB y como hemos dicho sobre fondo negro. Esas esquinas las proporciona en imagen el programa online y se deben almacenar en el PC y subir a un host alojador de imágenes, en éste caso, IMAGESHACK.
Después, hay que emplear la siguiente instrucción, para que el código anterior se aplique sobre lo que se desee que quede en una CAJA o BOX:
<!--
<div class='box4'>
<div class='box4top'><div></div></div>
<div class='box4content'>
<!—Aquí va el contenido de un widget, un texto o una foto O LAS SECCIONES DEL DIV DE LA SIDEBAR, ENTRE EL DIV Y EL /DIV-->
</div>
<div class='box4bottom'><div></div></div>
</div>
-->
Todos estos códigos CSS para ESQUINAS REDONDEADAS está generado con CORNERSHOP, en la siguiente dirección: http://wigflip.com/cornershop/
En la imagen adjunta puede verse una pantalla de éste blog con las SIDEBAR con BORDES REDONDEADOS por éste procedimiento.
NOTA:
Usé un tiempo este sistema en el blog, pero entiendo que ya en 2012, con el 75% de internautas usando Chrome o IE9, no merece la pena el esfuerzo de poner esquinas redondeadas empleando fotos superpuestas de esquinas.
NOTA:
Usé un tiempo este sistema en el blog, pero entiendo que ya en 2012, con el 75% de internautas usando Chrome o IE9, no merece la pena el esfuerzo de poner esquinas redondeadas empleando fotos superpuestas de esquinas.
1 comentarios :
esta padre
Publicar un comentario