The Hobbit Movie – Efecto Lupa CSS

Posteado el 19. Oct, 2010 por tuto in Desarrollo Web, HTML y CSS

PASO 1
Creamos un nuevo documento HTML en blanco.

The Hobbit Movie

PASO 2
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta The hobbit movie con el nombre the_hobbit_movie.html.

The Hobbit Movie

PASO 3
Ahora vamos a copiar el siguiente código después de la etiqueta .

Code block

<link rel="stylesheet" type="text/css" href="hobbit.css" />
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

The Hobbit Movie

PASO 4
Vamos al menú File – New y creamos un nuevo documento CSS.

The Hobbit Movie

PASO 5
Ahora dentro del archivo css copiamos el siguiente código.

Code block

@charset "utf-8";
/* CSS Document */
 
*{
	margin:0;
	padding:0;
}
 
body{
	font-size:14px;
	color:#666;
	background:url(../img/demo_bg.jpg) no-repeat center top #111;
	font-family:Arial, Helvetica, sans-serif;
}
 
#fondito{
	width:750px;
	height:400px;
	position:relative;
	background-image: url(../img/fondo_rojo.png);
	background-repeat: no-repeat;
	background-position: center center;
}
 
#imagen{
	width:499px;
	height:283px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-141px 0 0 -249px;
}
 
#retina{
	background:url(../img/the_hobbi.png) no-repeat center center white;
	border:2px solid white;
 
	position:absolute;
	height:180px;
	width:180px;
	display:none;
 
	cursor:url(../img/blank.cur),default;
 
	-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	-webkit-box-shadow:0 0 5px #777;
	box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
 
	-moz-border-radius:90px;
	-webkit-border-radius:90px;
	border-radius:90px;
}
 
#retina.chrome{
 
	cursor:url(../img/blank_google_chrome.cur),default;
}
 
#main{
 
	margin:40px auto;
	position:relative;
	width:750px;
}
h1{
	padding:30px 0;
	text-align:center;
	margin:40px 0 30px;
	font-size:44px;
	color:white;
	font-weight:normal;
}
 
h2{
	font-weight:normal;
	text-align:center;
}
 
h1,h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
 
p.credit{
	text-align:center;
	margin:50px;
}
 
p.credit a{
	color:#707070;
	font-size:10px;
	text-decoration:none;
	border-bottom:1px dotted;
}
 
p.credit a:hover{
	border:none;
}
 
a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}
 
a:hover{
	text-decoration:underline;
}
 
a img{
	border:none;
}

The Hobbit Movie

PASO 6
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta The hobbit movie – css.

The Hobbit Movie

PASO 7
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código.

Code block

<div id="main">
 
	<div id="fondito">
    	<div id="imagen">
			<img src="img/the_hobbit.png" width="499" height="283" alt="Web Page" />
        	<div id="retina"></div>
        </div>
    </div>
 
</div>

The Hobbit Movie

PASO 8
Dentro de la carpeta The hobbit movie creamos una carpeta llamada img, dentro de la cual vamos a copiar las imágenes que vamos a utilizar para el tutorial.