Este es un especial de San Valentin por si quieren añadir esto a algún proyecto o sorprender a alguna persona.
Si eres un forever-alone siguiendo el tutorial dejaras de serlo ... garantia de @leonidasesteban.
Para esto voy a usar un patrón bonito para el fondo, una imagen de un corazón y una fuente especial para que todo quede mas lindo, esto no afecta al efecto que lograremos con CSS3 solo lo hace mas lindo así que si lo tuyo es el código no tomes en cuenta esto 
Todos estos ingredientes nos darán como resultado: -> ver ejemplo
Código HTML(5)
Código :
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"/> <title>Latido</title> <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'> <script src="../prefixfree.js"></script> </head> <body> <div id="latido"> <h1 id="texto">Te quiero Licita</h1> <img src="corazon.png" alt="corazon" /> </div> </body> </html>
En el código html estamos importando la tipografía que usaremos. Esta la encuentran en Google Web-fonts (cómo usar cualquier tipografía en HTML) por estas fechas esta muy de moda.
También importo una de mis scripts favoritos "prefix free", que sirve para evitar colocar todos los prefijos propietarios y hacer solo el CSS necesario en nuestros proyectos y luego solo una caja que contendrá un texto
Cabe destacar que es el "<h1>" y la imagen del corazón.
Código en CSS(3)
Código :
::selection{
background:rgba(255,51,102,.5);
}
body{
background:url("sanvalentin.jpg");
}
#latido{
animation:7s latido infinite;
color:white;
font-family: 'Allura', cursive;
font-size:40px;
margin:0 auto;
text-align:center;
width:500px;
}
@keyframes latido{
0%{transform:scale(1)}
47%{transform:scale(1)}
48%{transform:scale(.9)}
50%{transform:scale(1.1)}
52%{transform:scale(.9)}
54%{transform:scale(1)}
}
#latido img{
width:500px;
}
#latido h1{
position:absolute;
left:10%;
line-height:80px;
top:10%;
width:400px;
}En el CSS estamos colocando todo en su lugar y lo especial esta en "#latido" le estamos dando un propiedad "animation".
Código :
animation:7s latido infinite;
animation es de mis propiedades favoritas y esta funcionando asi:
Código :
animation:"tiempo de la animación" "nombre de la animación" "veces que se repetirá la animación";
Nuestra animación dura 7 segundos, se llama latido y se repetirá infinitamente.
Luego usamos @keyframes "nombre de la animacion"{ } y dentro de esto expresamos el tiempo en porcentajes es decir en este caso el segundo 7 sera el 100%
Código :
@keyframes latido{
0%{transform:scale(1)}
47%{transform:scale(1)}
48%{transform:scale(.9)}
50%{transform:scale(1.1)}
52%{transform:scale(.9)}
54%{transform:scale(1)}
}El truco de la animación es hacer pequeño el corazón, luego mas grande y esto lograrlo en un porcentaje corto de nuestra animación para que no se prolongue el efecto y no se repita todo el tiempo.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
:foreveralone:
Por Clark el 13 de Febrero de 2012
Clark-blog :
Clark-blog :
usas IE 7 ? de verdad que eres un forever-alone, por otro lado, nadie en el lado de IE merece animaciones
Por josehumberto el 14 de Febrero de 2012
Por jujo el 14 de Febrero de 2012
Por jujo el 14 de Febrero de 2012
CSS
Código :
heart-shape { position: relative; width: 100px; height: 90px; margin:10px 0px; } .heart-shape:before, .heart-shape:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #fd2d8a; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .heart-shape:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }HTML
Código :
Creo ya lo demás es creatividad, pero sirve de buena base.
jujo-blog :
Porque quería que el tutorial sea claro y vaya la grano. Creo que si quisiera hacer la forma del corazón seria en otro tutorial... no parece lógico?, es mas este tutorial era para cualquiera que quiera sorprender a su persona especial :foreveralone:, así sea un experto o un novato no todo en esta vida son tecnicismos por eso le puse especial de San Valentin esto pasaba de ser técnico a ser un detalle lindo
por otro lado yo creo que el futuro de los dibujos en html5 esta en svg y canvas, hacerlo en css ensucia mucho el código, eso es criterio mio nose que digan ustedes.
Por jarlest el 14 de Febrero de 2012
Freddie :
Clark-blog :
Hay gente que no sabe de navegadores y a veces no tienen más opción que usarlo.
Buen aporte lysergtk, combinado con lo de kinduff sería genial.
saludos
Maikel :
Freddie :
Clark-blog :
Hay gente que no sabe de navegadores y a veces no tienen más opción que usarlo.
Buen aporte lysergtk, combinado con lo de kinduff sería genial.
saludos
Lo digo porque así es mi familia...
Y si, efectivamente la animación es muy buena, deslumbra a muchas chicas :B
oops :
Maikel :
Freddie :
Clark-blog :
Hay gente que no sabe de navegadores y a veces no tienen más opción que usarlo.
Buen aporte lysergtk, combinado con lo de kinduff sería genial.
saludos
Lo digo porque así es mi familia...
Y si, efectivamente la animación es muy buena, deslumbra a muchas chicas :B
nosotros tenemos la misión mas que cualquiera de limpiar de la faz de la tierra a IE, por otro lado espero que sus novias anden usando un buen navegador si no serian unos novios muy malos y egoístas.
Por clark el 14 de Febrero de 2012
clark-blog :
Otra vez la burra al trigo. Hijo mio, usa ese organo que te dio la madre naturaleza y usa la lógica para saber que ya no se desarrolla para IE7: [1, 2, 3]
Código :
NEO_JP :
Código :
update de la version online gracia a NEO_JP
http://leonidasesteban.com/ejemplos/latido/
ingresen "el nombre del ser amado" y verán.
Por dual3nigma el 15 de Febrero de 2012
lysergtk :
oops :
Maikel :
Freddie :
Clark-blog :
Hay gente que no sabe de navegadores y a veces no tienen más opción que usarlo.
Buen aporte lysergtk, combinado con lo de kinduff sería genial.
saludos
Lo digo porque así es mi familia...
Y si, efectivamente la animación es muy buena, deslumbra a muchas chicas :B
nosotros tenemos la misión mas que cualquiera de limpiar de la faz de la tierra a IE, por otro lado espero que sus novias anden usando un buen navegador si no serian unos novios muy malos y egoístas.
Está la parte que no está tan cool... cuando les cambias ie por firefox whatever version... nunca saben como moverse, se asustan con la ventana de descargas, porque se actualiza...etc..
violetisha :
Por alexita el 17 de Febrero de 2012
Encontré tambien otros codigos aqui :
http://asistencia.foroactivo.com/t115157-astucias-para-decorar-sus-foros-para-la-st-valentin
alexita-blog :
Encontré tambien otros codigos aqui :
http://asistencia.foroactivo.com/t115157-astucias-para-decorar-sus-foros-para-la-st-valentin
wow esos .js creo que son algo viejos.
Cotelandia porque te costo tanto es re facil, pronto vedran mas.
Por Francisco el 14 de Febrero de 2013
cierto, creo que se le spao por alto! no vinculan el hrml con el css!!
Por el 01 de Agosto de 2016