Recientemente, encontré un excelente tutorial en Woorkup que señala una característica de MooTools que le permite convertir cualquier elemento de una página web en un elemento posicionable.
Hoy usaremos esta técnica para crear una nota adhesiva simple y divertida con la que un usuario puede jugar y moverse a cualquier lugar de la página. ¡En el camino usaremos un montón de CSS3, así que asegúrate de tener un navegador decente!
Vistazo
Para ver lo que construiremos, haga clic en la imagen de abajo y vea la demostración en vivo.
Paso 1: El HTML
Comenzaremos construyendo nuestra nota adhesiva como lo haríamos en cualquier sitio y terminaremos haciéndolo movible. El HTML para este tutorial es super simple y contiene solo un par de divs y elementos.
Mantuve el texto del marcador de posición simple aquí para que pueda ver fácilmente lo sencillo que es el código, ¡pero puede escribir lo que quiera!
Paso 2: Crea el fondo
Para crear el fondo, querrá una textura agradable de tablón de anuncios de corcho. Hice una búsqueda rápida en Google y encontré esta.
Tendrá que recortar una pequeña sección y convertirla en un fondo transparente. Esto se puede lograr fácilmente en menos de dos minutos siguiendo mi tutorial sobre cómo crear fondos sin costura.
Paso 3: CSS de fondo
Una vez que haya creado su imagen de fondo de corcho sin costura, inicie su CSS con un reinicio básico y suelte el JPG.
También he estilizado el contenedor aquí solo un poco al establecer un ancho de 960 píxeles y un margen superior de 100 píxeles. El snippet automático centra automáticamente el div.
Paso 4: Estilos pegajosos básicos
A continuación le daremos a nuestro pegajoso un estilo realmente básico.
Aquí básicamente hemos establecido un fondo amarillo y un ancho. Este fondo servirá como predeterminado para los navegadores que no interpreten el CSS3 que agregaremos a continuación.
En este punto, su adhesivo debería estar empezando a tomar forma y verse como la imagen de abajo.
Paso 5: Estilos pegajosos avanzados
Para hacer que nuestra nota adhesiva se vea mucho mejor agregaremos un degradado, un cuadro de sombra y algunos rellenos.
Tenga en cuenta que hemos aplicado los gradientes y las sombras utilizando la sintaxis de Webkit y Mozilla para que funcione en todos los navegadores posibles. Para los gradientes, hemos especificado dos colores y esencialmente le dijimos al gradiente que se extienda verticalmente sobre todo el elemento. Tenga en cuenta que el orden de los valores de color debe invertirse en la versión de Mozilla para producir el mismo degradado.
Para la sombra, lo aplicamos después del relleno con los siguientes valores: desplazamiento horizontal de 0px, desplazamiento vertical de 10px, desenfoque de 30px y negro para el color.
¡Ahora deberías tener una nota adhesiva de aspecto decente con una sombra y un degradado!
Paso 6: uso de @ Font-Face para una fuente manuscrita
Quiero el? H1? El texto se ve un poco más a mano, pero no quiero usar una imagen, así que voy a FontSquirrel y descargo uno de sus excelentes kits de @ font-face. Con estos kits todo el trabajo está hecho para ti. Todo lo que tiene que hacer es descargar las fuentes, copiarlas a su directorio raíz y obtener el fragmento de CSS proporcionado.
Elegí el kit de GoodDog. GoodDog es una buena fuente gruesa escrita a mano.
Como dije anteriormente, copie los archivos de fuentes junto con el siguiente CSS proporcionado por FontSquirrel con su descarga:
Para obtener más información sobre la sintaxis aquí, consulte la sintaxis bulletproof @ font-face de Paul Irish. Todo lo que necesitamos saber por ahora es que la primera línea le indica cómo hacer referencia a la fuente en otro lugar de nuestro CSS. Así que en cualquier lugar que queramos usar esta fuente, escribiremos 'GoodDogRegular'.
Paso 7: Estilos de encabezado y párrafo
Para terminar nuestra nota adhesiva, agregue el siguiente CSS:
Como puede ver, hemos aplicado la fuente GoodDog a las etiquetas h1 y p y hemos terminado con algunos estilos de posicionamiento básicos. Ahora, después de actualizar la copia del marcador de posición a algo más útil, aquí está la nota adhesiva finalizada:
Paso 8: ¿Hacerlo? ¿Moove?
Ahora nuestro único paso es agregar el JavaScript que hace que el elemento sea movible. Primero importe una copia de MooTools 1.11 en la sección del encabezado de su HTML. La razón por la que estamos usando 1.11 es porque la sección que estamos usando no ha llegado a MooTools 2.
Después de que hayas importado eso, agrega el siguiente JavaScript a tu HTML para que nuestra nota adhesiva se pueda mover:
La segunda línea aquí es la importante.Le dice a MooTools que haga que cualquier div dentro del contenedor sea movible. Puedes personalizar esta sección para hacer lo que quieras. Por ejemplo, si querías alguna? P? etiqueta dentro de un div con un id de? greatBigBox? para ser movible, solo cambia el código a:
¡Ahí tienes! Eso es, literalmente, todo lo que necesita saber para comenzar a hacer móviles los elementos de su sitio.
Conclusión
Como puede ver, crear la nota adhesiva fue realmente la parte más difícil del proceso. ¡MooTools se encargó del trabajo pesado para hacer que el elemento se moviera y redujo nuestro trabajo de JavaScript a solo unas pocas líneas!