Si alguno de vosotros se pregunta cómo se hizo esta web, me dispongo a explicar un poco el «making-of» de esta página web.
En esta entrada, hablaremos del logo. Como vais a descubrir si me seguís leyendo, mis dotes de diseñador no son muy buenas. Por lo tanto, para hacer esta página tuve que utilizar principalmente mis aptitudes de programador y evitando al máximo posible utilizar cualquier programa para tratar imágenes porque no se me dan bien.
El logo está hecho en homenaje al mítico juego que todos recordareis: Tetris. La idea que he tenido es hacer caer las letras del logo como si fuera un tetris, para realizar esto he utilizado animaciones, keyframes y javascript. Al principio, he tenido dudas de si sería bueno usar canvas o algún motor de js. He pensado en box2djs pero me parecía que sería como montar moscas a cañonazos y finalmente he optado por la forma tradicional con animaciones en html5 y css3.
El css
Para crear las letras, he empezado por definir cinco formas básicas que serían la base con las que crearía mis letras: un rectángulo horizontal, un rectángulo horizontal pequeño, un rectángulo vertical, un rectángulo vertical grande y un cuadrado. Si os fijáis en el logo, todas las letras están formadas por estas cinco formas. Incluso la «k» utiliza estas formas con la diferencia que los dos rectángulos horizontales están a 45º.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#logo { position: relative; height: 50px; width: 300px; margin: 50px auto; } #logo span { display: block; position: absolute; } .rectangle-horiz { width: 30px; height: 10px; } .rectangle-horiz-small { width: 20px; height: 10px; } .rectangle-vert { width: 10px; height: 40px; } .rectangle-vert-big{ width: 10px; height: 60px; } .square-dot { width: 10px; height: 10px; } .shapetetris { background: url('./img/squarered.jpg'); } .rotate { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .rotate-inverso { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } |
El código HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div id="logo"> <!-- D --> <span id="shape-d"> <span id="shape-d-one"></span> <span id="shape-d-two"></span> </span> <!-- O --> <span id="shape-o"></span> <!-- N --> <span id="shape-n"></span> <!-- M --> <span id="shape-m"> <span id="shape-m-one"></span> <span id="shape-m-two"></span> </span> <!-- I --> <span id="shape-i"> <span id="shape-i-one"></span> <span id="shape-i-two"></span> </span> <!-- K --> <span id="shape-k"> <span id="shape-k-one"></span> <span id="shape-k-two"></span> <span id="shape-k-three"></span> </span> </div> |
No pongo el css de las clases top, bottom, left o right porque como os podéis esperar sólo posicionan los elementos para poder hacer la letra deseada. Las clases rotate y rotate-inverso se encargan de hacer los dos palitos de la letra «k». Todas las letras van contenidos en un div «logo» que nos permite el posicionamiento absoluto dentro de este div.
Con este código tenéis el logo ya formado con todas sus letras. En la siguiente entrega de esta serie de entradas, veremos como añadirle movimiento a estas letras y hacer que quede como un tetris.
Podéis ver la demo en este enlace: VER DEMO
Ya está disponible la segunda parte del tutorial.
