Participa en el tema Introducción CSS3 WebKit Website en el foro Diseño Web de la categoría Webmasters. | |||||||||||||||||
| Lachola escribió 10/11/11 15:39 hs 1 Introducción CSS3 WebKit Website el código fuente completo Introducción CSS3 WebKit Website Esta es la demo http://twostepmedia.co.uk/flashyintro/ Código: <html>
<head>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
.wrapper {
width: 667px;
height: 769px;
background: url('bangkok.jpg');
margin: 2% auto 0 auto;
-webkit-box-shadow: inset 1px 1px 10px 1px #000;
-moz-box-shadow: inset 1px 1px 10px 1px #000;
box-shadow: inset 1px 1px 10px 1px #000;
position: relative;
overflow: hidden;
}
.wrapper div {
background: rgba(0,0,0,0.8);
color: #f7f7f7;
line-height: 194.26px;
font-size: 2.2em;
font-family: 'Arvo', serif;
padding: 0 0 0 7%;
position: relative;
}
#slide1 {
-webkit-animation-name: slidein1;
-moz-animation-name: slidein1;
-ms-animation-name: slidein1;
animation-name: slidein1;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
}
#slide2 {
-webkit-animation-name: slidein2;
-moz-animation-name: slidein2;
-ms-animation-name: slidein2;
animation-name: slidein2;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
}
#slide3 {
-webkit-animation-name: slidein3;
-moz-animation-name: slidein3;
-ms-animation-name: slidein3;
animation-name: slidein3;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
}
#slide4 {
-webkit-animation-name: slidein4;
-moz-animation-name: slidein4;
-ms-animation-name: slidein4;
animation-name: slidein4;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
}
@keyframes "slidein1" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@-moz-keyframes "slidein1" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@-webkit-keyframes "slidein1" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@-ms-keyframes "slidein1" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@keyframes "slidein2" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@-moz-keyframes "slidein2" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@-webkit-keyframes "slidein2" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@-ms-keyframes "slidein2" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@keyframes "slidein3" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@-moz-keyframes "slidein3" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@-webkit-keyframes "slidein3" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@-ms-keyframes "slidein3" {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@keyframes "slidein4" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@-moz-keyframes "slidein4" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@-webkit-keyframes "slidein4" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
@-ms-keyframes "slidein4" {
0% {
left: 100%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="slide1">This is an awesome intro</div>
<div id="slide2">People will be in awe</div>
<div id="slide3">And it gets your point across</div>
<div id="slide4">In a lovely way</div>
</div>
</body>
</html> | |
| |
| |
| Temas Relacionados | ||||
| css3.me generador en CSS3 - Foro de Diseño Web | ||||
| Sket Dance en su website - Foro de Anime y Manga | ||||
| Quick CSS3 Gradient Generator – Generador de degradados CSS3 - Foro de Diseño Web | ||||
| Radon Browser, navegador basado en WebKit para OS X - Foro de Internet | ||||
| Two Thrones tiene website - Foro de Consolas de Juegos | ||||
Crea un nuevo tema ahora sobre Webmasters y Diseño Web y obtén la mejor respuesta