Check the new version here

Popular channels

[CSS] Navegador no soportado

Sé que muchos tenemos sitios webs con efectos realizados con CSS3 y HTML5 los cuales no pueden llegar a funcionar con Internet Explorer, ademas de que hay sitios que se deforman al ingresar con este navegador.

Por dicha cuestión les traigo ese lindo diseño de advertencia para avisar al usuario de que no funciona su sitio con IE.

Yo solo les traigo el HTML y CSS, lo que les quedaría a ustedes es adaptarlo a su sitio

HTML:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
 <title>Z-Post.NET - No IE</title>
 <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<link rel="Shortcut icon" href="images/ico.png">
 <link rel="stylesheet" type="text/css" href="css/styleie.css" >
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,7​00,800,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/font-awesome.css">
</head>
<body>

<div class="header">

<p>Perdón, pero Z-Post.net no funciona con Internet Explorer.</p>

        </div>
    
<div id="Wrapper">
    
    <div id="icon"> <img src="http://oi57.tinypic.com/mo4th.jpg"> </div> <div id="iconShadow"></div> 
</div>




</body>
</html>


CSS:

Código:

body{
overflow: hidden;
    background-color:#00BD3C;
}
.header{
width:100%;
height:auto;
position:absolute;
top:0px;
left:0px;
background-color: #262b37;
}
.header p{
    color: #c3c8d6;
    font-family:Open#Sans, sans-serif;
    font-size:16px;
    line-height:21px;
    font-weight:400;
    padding:10px;
    margin:0px;
}
#Wrapper{
    width:500px;
    height:500px;
    position: absolute;
    top:50px;
    left:50%;
    margin-left:-250px;
}

#icon {
width:150px;
height:150px;
position: absolute;
    left:50%;
    margin-left:-163px;
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Chrome, Safari, Opera */
transform: scale(0.5,0.5);
    top:0;    
    z-index: 11;
    -webkit-animation: jump 1s infinite;
    -moz-animation: jump 1s infinite;
    -o-animation: jump 1s infinite;
    -ms-animation: jump 1s infinite;
    animation: jump 1s infinite;
}





@keyframes jump {
    0% {
        top: 0px;
    }
    50% {
        top: 140px;
        height: 140px;
    }
    55% {
        top: 160px; 
        height: 120px; 
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
    }
    95% {
        top: 0px;
    }
    100% {
        top: 0px;
    }
}
#iconShadow {
    position: absolute;
    left: 50%;
    bottom: 80px;
    z-index: 10;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
    border-radius: 30px / 40px;    
    -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    -webkit-animation: shrink 1s infinite;
    -moz-animation: shrink 1s infinite;
    -o-animation: shrink 1s infinite;
    -ms-animation: shrink 1s infinite;
    animation: shrink 1s infinite;
}
@-webkit-keyframes jump {
    0% {top: 0px;
        -webkit-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -webkit-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -webkit-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -webkit-animation-timing-function: ease-out;}
    95% {
        top: 0px;        
        -webkit-animation-timing-function: ease-in;
    }
    100% {top: 0px;
        -webkit-animation-timing-function: ease-in;
    }
}
@-moz-keyframes jump {
    0% {top: 10px;
        -moz-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -moz-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -moz-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -moz-animation-timing-function: ease-out;}
    95% {
        top: 10px;        
        -moz-animation-timing-function: ease-in;
    }
    100% {top: 10px;
        -moz-animation-timing-function: ease-in;
    }
}
@-o-keyframes jump {
    0% {top: 10px;
        -o-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -o-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -o-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -o-animation-timing-function: ease-out;}
    95% {
        top: 10px;        
        -o-animation-timing-function: ease-in;
    }
    100% {top: 10px;
        -o-animation-timing-function: ease-in;
    }
}
@-ms-keyframes jump {
    0% {top: 10px;
        -ms-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -ms-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -ms-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -ms-animation-timing-function: ease-out;}
    95% {
        top: 10px;        
        -ms-animation-timing-function: ease-in;
    }
    100% {top: 10px;
        -ms-animation-timing-function: ease-in;
    }
}
@keyframes jump {
    0% {
        top: 10px;
        animation-timing-function: ease-in;
    }
    50% {
        top: 140px;
        height: 140px;
        animation-timing-function: ease-out;
    }
    55% {
        top: 160px; 
        height: 120px; 
        border-radius: 70px / 60px;
        animation-timing-function: ease-in;
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
        animation-timing-function: ease-out;
    }
    95% {
        top: 10px;        
        animation-timing-function: ease-in;
    }
    100% {
        top: 10px;
        animation-timing-function: ease-in;
    }
}
@-webkit-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -webkit-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -webkit-animation-timing-function: ease-in;
    }
}
@-moz-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -moz-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -moz-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -moz-animation-timing-function: ease-in;
    }
}
@-o-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -o-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -o-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -o-animation-timing-function: ease-in;
    }
}
@-ms-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -ms-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -ms-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -ms-animation-timing-function: ease-in;
    }
}
@keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
    }
}



.header {

    font-size: .8em;

    text-align: center;

    padding: 10px;

    background-color: #262b37;

    color: #fff;

    box-shadow:    0px 1px 3px 0px rgba(0, 0, 0, .3);

    text-transform: uppercase;

    position: absolut;

    font-weight: bold;

    
    -webkit-animation: bounce 800ms ease-out;

    -moz-animation: bounce 800ms ease-out;

    -o-animation: bounce 800ms ease-out;

    animation: bounce 800ms ease-out;

}


/* Webkit, Chrome and Safari */


@-webkit-keyframes bounce {

  0% {
    -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  
5% {
      -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  
15% {
      -webkit-transform:translateY(0);
    padding-bottom: 5px;
  }
  
30% {
      -webkit-transform:translateY(-50%);
  }
  
40% {
      -webkit-transform:translateY(0%);
    padding-bottom: 6px;
  }
  
50% {
      -webkit-transform:translateY(-30%);
  }
  
70% {
      -webkit-transform:translateY(0%);
    padding-bottom: 7px;
  }
  
80% {
      -webkit-transform:translateY(-15%);
  }
  
90% {
      -webkit-transform:translateY(0%);
      padding-bottom: 8px;
  }
  
95% {
      -webkit-transform:translateY(-10%);
  }
  
97% {
      -webkit-transform:translateY(0%);
      padding-bottom: 9px;
  }
  
99% {
      -webkit-transform:translateY(-5%);
  }
  
100% {
      -webkit-transform:translateY(0);
      
padding-bottom: 9px;
    
opacity: 1;
  }
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
    -moz-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -moz-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -moz-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -moz-transform:translateY(-50%);
  }
  40% {
      -moz-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -moz-transform:translateY(-30%);
  }
  70% {
      -moz-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -moz-transform:translateY(-15%);
  }
  90% {
      -moz-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -moz-transform:translateY(-10%);
  }
  97% {
      -moz-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -moz-transform:translateY(-5%);
  }
  100% {
      -moz-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
    -o-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -o-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -o-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -o-transform:translateY(-50%);
  }
  40% {
      -o-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -o-transform:translateY(-30%);
  }
  70% {
      -o-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -o-transform:translateY(-15%);
  }
  90% {
      -o-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -o-transform:translateY(-10%);
  }
  97% {
      -o-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -o-transform:translateY(-5%);
  }
  100% {
      -o-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
    transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      transform:translateY(-50%);
  }
  40% {
      transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      transform:translateY(-30%);
  }
  70% {
      transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      transform:translateY(-15%);
  }
  90% {
      transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      transform:translateY(-7%);
  }
  97% {
      transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      transform:translateY(-3%);
  }
  100% {
      transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}


Espero que les haya gustado, les dejo una demo: http://cssdeck.com/labs/bounce_ie_icon
0
0
0
0No comments yet