Skip to content

Instantly share code, notes, and snippets.

@siddharta1337

siddharta1337/ejercicio-final.css

Created July 13, 2012 05:53
Show Gist options
  • Save siddharta1337/3102978 to your computer and use it in GitHub Desktop.
Save siddharta1337/3102978 to your computer and use it in GitHub Desktop.
Download ZIP
codigo base para app
Raw
ejercicio-final.css
body, h1{margin:0; padding:0;}
html,body{height:100%}
body{background: #f5bd07;}
ul{margin:127px auto 0; padding:0; width:90%;}
h1{font-size:20px; background:#000; color:#fff; height:52px; line-height: 52px; text-align:right}
img{position: absolute; top:0}
li{ list-style-type:none; background:#000000; height:45px; margin-bottom:10px; color:#fff; text-indent:22px; line-height:45px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
li:first-child {background:#733c0a}
li:nth-child(2) {background:#ab5110}
li:nth-of-type(3){background:#cd5d14}
li:nth-last-child(2){background:#e46516}
li:last-child{background:#ff721d}
li{ border-radius:10px; }
li{ -webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.5)}
li{text-shadow:1px 1px 1px rgba(0,0,0,1)}
body{
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#f5bd07), color-stop(33%,#fdf402));
background: -webkit-linear-gradient(top, #f5bd07 15%,#fdf402 33%);
background: linear-gradient(top, #f5bd07 15%,#fdf402 33%);
}
img{ -webkit-transition: top 1s; }
img{ -webkit-transform: rotate(-10deg) scale(0.7)}
@font-face { font-family:DellaRespira; src: url('../fonts/Della_Respira/DellaRespira-Regular.ttf'); }
body{font-family: 'DellaRespira', serif;}
img{ -webkit-transition: all 1s; }
@font-face { font-family: PTsans; src: url('../fonts/PT_Sans/PT_Sans-Web-Regular.ttf'); }
li{ border-radius:10px; box-shadow:2px 2px 2px #000; -webkit-box-shadow:2px 2px 2px #000; text-shadow:2px 2px 2px rgba(0,0,0,1)}
li:last-child {background:blue; }
li:first-child {background:red}
li:nth-child(3) {background:red}
body{
font-family:PTsans;
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#f5bd07), color-stop(33%,#fdf402));
background: -webkit-linear-gradient(top, #f5bd07 15%,#fdf402 33%);
background: linear-gradient(top, #f5bd07 15%,#fdf402 33%);
}
Raw
ejercicio.css
/* CODIGO BASE */
body, h1{margin:0; padding:0;}
html,body{height:100%}
body{background: #f5bd07;}
ul{margin:127px auto 0; padding:0; width:90%;}
h1{font-size:20px; font-weight:normal; background:#000; color:#fff; height:52px; line-height: 52px; text-align:right}
img{position: absolute; top:0}
li{ list-style-type:none; background:#000000; height:45px; margin-bottom:10px; color:#fff; text-indent:22px; line-height:45px}
/* codigo de pruebas ( comentado) */
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2" />
<title>Ejercicio CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="ejercicio.css" />
</head>
<body>
<h1> Receta de té helado </h1>
<img src="http://carlossolis.mobi/cursos/phonegap/icedTea.png" alt="tefrio" height="157" width="73"/>
<ul>
<li>Hervir agua</li>
<li>Mezclar Té</li>
<li>Agregar Limon y azucar</li>
<li>Enfriar</li>
<li>Disfrute!</li>
</ul>
</body>
</html>
Raw
xtra.js
<script>
//selecciona los botones
var lista = document.getElementsByTagName("li");
//selecciona la imagen
var imagen = document.getElementsByTagName("img")[0];
for( elemento in lista ){
//asigna una conducta para el evento click
lista[elemento].onclick = function (elemento){
/// obtiene la posición del elemento clickado
var posicionDelTexto = this.offsetTop;
// define el offset para ajustar la imagen
var offsetDeImagen = imagen.height/2;
// cambia la posición "top" de la imagen
imagen.style.top = (posicionDelTexto - offsetDeImagen )+"px";
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment