Ya expliqué hace un tiempo porque no usar Internet Explorer, pero muchas personas siguen usando este programa en vez de utilizar un navegador web.
En esta oportunidad les voy a presentar otro ejemplo de porque IE es una verdadera pesadilla para los diseñadores web y un aportador de malisimas experiencias de navegación para los usuarios, aunque muchas veces estos no lo sepan y algunos hasta lo tengan merecido.
Hace unos minutos leia el tutorial How to Create CSS3 Christmas Tree Ornamentos, o como crear adornos navideños en CSS3. Hace un tiempo CSS3 era algo avanzado pero hace mucho que los navegadores web soporta CSS3 y trae muchas ventajas que acompañaran muy bien a HTML5.
En el tutorial nos muestra como crear adornos navideños utilizando listas HTML para cada adorno:
<ul id="bauble-container">
<li>
<divfont-weight: bold; color: rgb(0, 153, 102); ">bauble red-bauble"></div>
</li>
<li>
<divfont-weight: bold; color: rgb(0, 153, 102); ">bauble blue-bauble"></div>
</li>
<li>
<divfont-weight: bold; color: rgb(0, 153, 102); ">bauble yellow-bauble"></div>
</li>
<li>
<divfont-weight: bold; color: rgb(0, 153, 102); ">bauble green-bauble"></div>
</li>
</ul>
Y luego CSS3 para aplicar el color y diseño:
/* General */
html
{
background: #f2f5f6; /* Fallback background color if gradients are not supported */
background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
height: 100%;
}
#bauble-container
{
list-style: none; /* Remove bullets */
width: 568px;
margin: 150px auto; /* Center it */
padding: 0; /* In production, this may not be needed if you reset your styles in your global stylesheet:
http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ */
}
#bauble-container li
{
margin: 0 20px; /* let's add some space */
float: left; /* place them in line */
}
/* This is the part where the Christmas bauble string is added */
#bauble-container li:before
{
content: "";
background: #dadada; /* Fallback */
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}
/* Alernatively rotate them */
#bauble-container li:nth-child(odd)
{
-moz-transform: rotate(-5deg); /* Firefox */
-webkit-transform: rotate(-5deg); /* Chrome and Safari */
-o-transform: rotate(-5deg); /* Opera */
-ms-transform: rotate(-5deg); /* Surprise! IE9 with its own prefix */
}
#bauble-container li:nth-child(even)
{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}
/* Style the bauble */
.bauble
{
-moz-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 0 5px #777777;
box-shadow: 0 0 5px #777777;
-webkit-box-shadow: 0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
/* Style the bauble head */
.bauble:before
{
content: "";
background: #fff; /* Fallback */
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}
/* Add bauble light reflection */
.bauble:after
{
content: "";
-moz-border-radius: 100px;
border-radius: 100px;
background: #fff; /* Fallback */
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}
/* Colorize them */
.red-bauble
{
background: #c8171f;
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble
{
background: #00a1ee; /* Fallback */
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble
{
background: #fcb83d; /* Fallback */
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble
{
background: #4d8d00; /* Fallback */
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}
el resultado en todos los navegadores como FireFox, Chrome, Opera, Safari es el de la imagen superior, pero en Internet Explorer el resultado es el siguiente:
como pueden ver, Internet Explorer deja las bolas cuadradas, que casualmente es lo que muchos diseñadores web comentan al torturarse trabajando en el, siempre hablando de adornos navideños claro.