No uses Internet Explorer en Navidad

13

Ya expliqué hace un tiempo porque no usar Internet Explorer, pero muchas personas siguen usando este programa en vez de utilizar un navegador web.

Porque no usar Internet Explorer

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:

IE deja las bolas cuadradas

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.






Loading Facebook Comments ...

13 comentarios para “No uses Internet Explorer en Navidad”

  1. Pablo dice:

    Jajajaj es una bosta IE no entiendo como hay gente que aun lo usa, hay que eliminarlo de una vez es una cagada mismo.

    IE nos deja las bolas cuadradas sin dudas!!!

  2. Pao dice:

    Muy metafórico (?) jajaja

  3. elpopis dice:

    Yo no soy diseñador web ni nada de eso pero tengo un blog, en el cual aveces inserto algún que otro flash, css3 ect… y me da mucho por el culo cuando lo pruebo con mozilla y todo funciona correctamente. Al poco rato se lo comento algún amigo que tiene iexplorer y me dice que no se ve o que le explique que hecho nuevo.
    Mi sorpresa es cuando lo miro yo con el iexplorer y no se ve lo que he hecho.
    Tambien tengo publicidad insertada y muchas veces me vuelvo loco porque se ve con todos los navegadores menos con el jodido iexplorer.

  4. Ronald Montenegro dice:

    Y es que te falta aclarar que todos los usuarios que utilizan Internet Explorer lo hacen en sus versiones 6, 7 y 8 desde WinXP o bien en Vista/Win7 que trae el 8, y por qué digo esto? sencillo, Iexplorer no trae soporte CSS3 en ninguna de esas versiones, que por lo menos hasta su version 9 si está soportado que a la fecha no se si todavía estará en beta o no, ya que si este artículo lo escribiste habiendo probado el ejemplo en IE9 definitivamente sería un problema ya que supone que IE9 viene “acoplado” a los estandares web.

  5. Juan Lombardo dice:

    Buenísimo! Yo uso el Chrome y es lo mejor, por ahora.
    Abrazo, loco!

  6. theparrita dice:

    dejen de usar IE <3
    io lo dje de usar porque me salio una cosa de flash lo instalaba y lo instala….
    y nunca funciono el mejor para mi o mejores para mi son:google crhome y mozilla firefox XD 🙂 adios y gracias por el dato

  7. danarkade dice:

    y porque no poner en sus sitios una leyenda: este sitio funcionaria mejor si no utilizaras IE, así los usuarios probarían con otros navegadores…

  8. jaimejf dice:

    Jorge le doy la enhorabuena por la labor y el trabajo que dedica, por casualidad he descubierto su Web y me parece muy interesante en todo lo que publica, con ello quiero valorar su trabajo y que siga enseñandonos,gracias dede Malaga. jaimejf

Dejar un comentario

Página 1 de 11