Tutoriales en la Web

Como hacer las Google Balls

Posteado el 07. Sep, 2010 por tuto in Desarrollo Web, Dreamweaver, HTML y CSS, Web Design

Nos dimos a la tarea de averiguar como hizo hoy Google para mover las “balls” el dia de hoy en su search. Y aqui les dejamos como hacerlo en CSS. Como siempre Google nos sorprende con su creatividad pero sobre todo con unos pocos pasos podemos crearlo

Puedes ver lo que haremos el dia de hoy en este link

PASO 1
Vamos a crear una nueva carpeta llamada logo Google, a continuación vamos a Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

Como hacer las Google Balls

PASO 2
Con el comando Ctrl + S guardamos nuestro documento HTML dentro de la carpeta logo Google con el nombre Google.html

Como hacer las Google Balls

PASO 3
Ahora con el comando Ctrl + N vamos a crear un nuevo documento CSS.

Como hacer las Google Balls

PASO 4
Dentro del documento CSS vamos a copiar el siguiente código CSS

Code block

html, body {
	height: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
#c {
	margin-top: -150px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

Como hacer las Google Balls

PASO 5
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre logo.css

Como hacer las Google Balls

PASO 6
Debajo de la etiqueta vamos a copiar el siguiente código javascript

Code block

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

Como hacer las Google Balls

PASO 7
Por ultimo dentro de las etiquetas vamos a copiar el siguiente código javascript

Code block

<canvas id="c"></canvas>

Como hacer las Google Balls

PASO 8
Ahora dentro de la carpeta logo Google vamos a crear una nueva carpeta llamada js dentro de la cual vamos a copiar los 3 jp que adjunto en este tutorial

Como hacer las Google Balls

PASO 9
Listo ya tenemos terminado nuestro efecto.

Como hacer las Google Balls

Descarga el editable de Como hacer las Google Balls

Articulos relacionados:

Tags: CSS, Dreamweaver